Changeset 86842 in webkit


Ignore:
Timestamp:
May 19, 2011 5:44:39 AM (13 years ago)
Author:
commit-queue@webkit.org
Message:

2011-05-19 Andrey Adaikin <aandrey@google.com>

Reviewed by Pavel Feldman.

Web Inspector: switch to Scripts panel is too slow
https://bugs.webkit.org/show_bug.cgi?id=61030

  • It is very expensive to listen to the DOM mutation events, thus we remove the listeners whenever we do any internal DOM manipulations (such as expand/collapse line rows) and set the listeners back when we are finished.
  • Also, when we switch to the Scripts panel that have a non-zero scrollTop offset, we would do the rendering work twice.
  • inspector/front-end/SourceFrame.js: (WebInspector.SourceFrame.prototype.show):
  • inspector/front-end/TextViewer.js: (WebInspector.TextEditorMainPanel): (WebInspector.TextEditorMainPanel.prototype.beginDomUpdates): (WebInspector.TextEditorMainPanel.prototype.endDomUpdates): (WebInspector.TextEditorMainPanel.prototype._enableDOMNodeRemovedListener): (WebInspector.TextEditorMainChunk): (WebInspector.TextEditorMainChunk.prototype.set expanded): (WebInspector.TextEditorMainChunk.prototype._createRow):
Location:
trunk/Source/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r86839 r86842  
     12011-05-19  Andrey Adaikin  <aandrey@google.com>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector: switch to Scripts panel is too slow
     6        https://bugs.webkit.org/show_bug.cgi?id=61030
     7
     8        - It is very expensive to listen to the DOM mutation events, thus we remove the listeners whenever we do any internal
     9        DOM manipulations (such as expand/collapse line rows) and set the listeners back when we are finished.
     10        - Also, when we switch to the Scripts panel that have a non-zero scrollTop offset, we would do the rendering work twice.
     11
     12        * inspector/front-end/SourceFrame.js:
     13        (WebInspector.SourceFrame.prototype.show):
     14        * inspector/front-end/TextViewer.js:
     15        (WebInspector.TextEditorMainPanel):
     16        (WebInspector.TextEditorMainPanel.prototype.beginDomUpdates):
     17        (WebInspector.TextEditorMainPanel.prototype.endDomUpdates):
     18        (WebInspector.TextEditorMainPanel.prototype._enableDOMNodeRemovedListener):
     19        (WebInspector.TextEditorMainChunk):
     20        (WebInspector.TextEditorMainChunk.prototype.set expanded):
     21        (WebInspector.TextEditorMainChunk.prototype._createRow):
     22
    1232011-05-19  Pavel Feldman  <pfeldman@google.com>
    224
  • trunk/Source/WebCore/inspector/front-end/SourceFrame.js

    r86562 r86842  
    9393
    9494        this._textViewer.show(parentElement);
    95         this._textViewer.resize();
    9695
    9796        if (this.loaded) {
     
    101100                this._textViewer.scrollLeft = this._scrollLeft;
    102101        }
     102        // Resize after setting the initial scroll positions to avoid unnecessary rendering work.
     103        this._textViewer.resize();
    103104    },
    104105
  • trunk/Source/WebCore/inspector/front-end/TextViewer.js

    r86683 r86842  
    869869    // listeners only on the line rows, and use DOMSubtreeModified to track node removals inside
    870870    // the line rows. For more info see: https://bugs.webkit.org/show_bug.cgi?id=55666
     871    //
     872    // OPTIMIZATION. It is very expensive to listen to the DOM mutation events, thus we remove the
     873    // listeners whenever we do any internal DOM manipulations (such as expand/collapse line rows)
     874    // and set the listeners back when we are finished.
    871875    this._handleDOMUpdatesCallback = this._handleDOMUpdates.bind(this);
    872876    this._container.addEventListener("DOMCharacterDataModified", this._handleDOMUpdatesCallback, false);
     
    10491053        this._restoreSelection(selection);
    10501054        return chunk;
     1055    },
     1056
     1057    beginDomUpdates: function()
     1058    {
     1059        WebInspector.TextEditorChunkedPanel.prototype.beginDomUpdates.call(this);
     1060        if (this._domUpdateCoalescingLevel === 1) {
     1061            this._container.removeEventListener("DOMCharacterDataModified", this._handleDOMUpdatesCallback, false);
     1062            this._container.removeEventListener("DOMNodeInserted", this._handleDOMUpdatesCallback, false);
     1063            this._container.removeEventListener("DOMSubtreeModified", this._handleDOMUpdatesCallback, false);
     1064        }
     1065    },
     1066
     1067    endDomUpdates: function()
     1068    {
     1069        WebInspector.TextEditorChunkedPanel.prototype.endDomUpdates.call(this);
     1070        if (this._domUpdateCoalescingLevel === 0) {
     1071            this._container.addEventListener("DOMCharacterDataModified", this._handleDOMUpdatesCallback, false);
     1072            this._container.addEventListener("DOMNodeInserted", this._handleDOMUpdatesCallback, false);
     1073            this._container.addEventListener("DOMSubtreeModified", this._handleDOMUpdatesCallback, false);
     1074        }
     1075    },
     1076
     1077    _enableDOMNodeRemovedListener: function(lineRow, enable)
     1078    {
     1079        if (enable)
     1080            lineRow.addEventListener("DOMNodeRemoved", this._handleDOMUpdatesCallback, false);
     1081        else
     1082            lineRow.removeEventListener("DOMNodeRemoved", this._handleDOMUpdatesCallback, false);
    10511083    },
    10521084
     
    18021834    this.element.lineNumber = startLine;
    18031835    this.element.className = "webkit-line-content";
    1804     this.element.addEventListener("DOMNodeRemoved", this._textViewer._handleDOMUpdatesCallback, false);
     1836    this._textViewer._enableDOMNodeRemovedListener(this.element, true);
    18051837
    18061838    this._startLine = startLine;
     
    18971929            for (var i = this.startLine; i < this.startLine + this.linesCount; ++i) {
    18981930                var lineRow = this._createRow(i);
     1931                this._textViewer._enableDOMNodeRemovedListener(lineRow, true);
    18991932                this._updateElementReadOnlyState(lineRow);
    19001933                parentElement.insertBefore(lineRow, this.element);
    19011934                this._expandedLineRows.push(lineRow);
    19021935            }
     1936            this._textViewer._enableDOMNodeRemovedListener(this.element, false);
    19031937            parentElement.removeChild(this.element);
    19041938            this._textViewer._paintLines(this.startLine, this.startLine + this.linesCount);
     
    19071941            for (var i = 0; i < this._expandedLineRows.length; ++i) {
    19081942                var lineRow = this._expandedLineRows[i];
     1943                this._textViewer._enableDOMNodeRemovedListener(lineRow, false);
    19091944                var parentElement = lineRow.parentElement;
    19101945                if (parentElement) {
    19111946                    if (!elementInserted) {
    19121947                        elementInserted = true;
     1948                        this._textViewer._enableDOMNodeRemovedListener(this.element, true);
    19131949                        parentElement.insertBefore(this.element, lineRow);
    19141950                    }
     
    19662002        lineRow.lineNumber = lineNumber;
    19672003        lineRow.className = "webkit-line-content";
    1968         lineRow.addEventListener("DOMNodeRemoved", this._textViewer._handleDOMUpdatesCallback, false);
    19692004        lineRow.textContent = this._textModel.line(lineNumber);
    19702005        if (!lineRow.textContent)
Note: See TracChangeset for help on using the changeset viewer.