Changeset 54819 in webkit


Ignore:
Timestamp:
Feb 16, 2010 5:11:41 AM (14 years ago)
Author:
apavlov@chromium.org
Message:

2010-02-16 Alexander Pavlov <​apavlov@chromium.org>

Reviewed by Pavel Feldman.

Web Inspector: Elements Panel: Limit the number of initially loaded element children
​https://bugs.webkit.org/show_bug.cgi?id=34421

Test: inspector/elements-panel-limited-children.html

WebCore:

  • English.lproj/localizedStrings.js:
  • inspector/front-end/DOMAgent.js: (WebInspector.DOMNode.prototype._insertChild):
  • inspector/front-end/ElementsPanel.js: (WebInspector.ElementsPanel.prototype.updateModifiedNodes):
  • inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeOutline.prototype.createTreeElementFor): (WebInspector.ElementsTreeOutline.prototype.revealAndSelectNode): (WebInspector.ElementsTreeElement): (WebInspector.ElementsTreeElement.prototype.get expandedChildrenLimit): (WebInspector.ElementsTreeElement.prototype.set expandedChildrenLimit): (WebInspector.ElementsTreeElement.prototype.get expandedChildCount): (WebInspector.ElementsTreeElement.prototype.showChild): (WebInspector.ElementsTreeElement.prototype.insertChildElement): (WebInspector.ElementsTreeElement.prototype.moveChild): (WebInspector.ElementsTreeElement.prototype._updateChildren.updateChildrenOfNode): (WebInspector.ElementsTreeElement.prototype._updateChildren): (WebInspector.ElementsTreeElement.prototype.adjustCollapsedRange): (WebInspector.ElementsTreeElement.prototype.handleLoadAllChildren): ():
  • inspector/front-end/inspector.css:

LayoutTests:

  • inspector/elements-panel-limited-children-expected.txt: Added.
  • inspector/elements-panel-limited-children.html: Added.
Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r54817 r54819  
     12010-02-16  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector: Elements Panel: Limit the number of initially loaded element children
     6        https://bugs.webkit.org/show_bug.cgi?id=34421
     7
     8        * inspector/elements-panel-limited-children-expected.txt: Added.
     9        * inspector/elements-panel-limited-children.html: Added.
     10
    1112010-02-16  Ben Murdoch  <benm@google.com>
    212

  • trunk/WebCore/ChangeLog

    r54815 r54819  
     12010-02-16  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector: Elements Panel: Limit the number of initially loaded element children
     6        https://bugs.webkit.org/show_bug.cgi?id=34421
     7
     8        Test: inspector/elements-panel-limited-children.html
     9
     10        * English.lproj/localizedStrings.js:
     11        * inspector/front-end/DOMAgent.js:
     12        (WebInspector.DOMNode.prototype._insertChild):
     13        * inspector/front-end/ElementsPanel.js:
     14        (WebInspector.ElementsPanel.prototype.updateModifiedNodes):
     15        * inspector/front-end/ElementsTreeOutline.js:
     16        (WebInspector.ElementsTreeOutline.prototype.createTreeElementFor):
     17        (WebInspector.ElementsTreeOutline.prototype.revealAndSelectNode):
     18        (WebInspector.ElementsTreeElement):
     19        (WebInspector.ElementsTreeElement.prototype.get expandedChildrenLimit):
     20        (WebInspector.ElementsTreeElement.prototype.set expandedChildrenLimit):
     21        (WebInspector.ElementsTreeElement.prototype.get expandedChildCount):
     22        (WebInspector.ElementsTreeElement.prototype.showChild):
     23        (WebInspector.ElementsTreeElement.prototype.insertChildElement):
     24        (WebInspector.ElementsTreeElement.prototype.moveChild):
     25        (WebInspector.ElementsTreeElement.prototype._updateChildren.updateChildrenOfNode):
     26        (WebInspector.ElementsTreeElement.prototype._updateChildren):
     27        (WebInspector.ElementsTreeElement.prototype.adjustCollapsedRange):
     28        (WebInspector.ElementsTreeElement.prototype.handleLoadAllChildren):
     29        ():
     30        * inspector/front-end/inspector.css:
     31
    1322010-02-16  Ismail Donmez  <ismail@namtrac.org>
    233

  • trunk/WebCore/inspector/front-end/DOMAgent.js

    r54607 r54819  
    154154    {
    155155        var node = new WebInspector.DOMNode(this.ownerDocument, payload);
    156         if (!prev)
    157             // First node
    158             this.children = [ node ];
    159         else
     156        if (!prev) {
     157            if (!this.children) {
     158                // First node
     159                this.children = [ node ];
     160            } else
     161                this.children.unshift(node);
     162        } else
    160163            this.children.splice(this.children.indexOf(prev) + 1, 0, node);
    161164        this._renumber();

  • trunk/WebCore/inspector/front-end/ElementsPanel.js

    r54770 r54819  
    528528            if (this.recentlyModifiedNodes[i].updated) {
    529529                var nodeItem = this.treeOutline.findTreeElement(node);
    530                 nodeItem.updateTitle();
     530                if (nodeItem)
     531                    nodeItem.updateTitle();
    531532                continue;
    532533            }

  • trunk/WebCore/inspector/front-end/ElementsTreeOutline.js

    r54770 r54819  
    156156    },
    157157
     158    createTreeElementFor: function(node)
     159    {
     160        var treeElement = this.findTreeElement(node);
     161        if (treeElement)
     162            return treeElement;
     163        if (!node.parentNode)
     164            return null;
     165
     166        var treeElement = this.createTreeElementFor(node.parentNode);
     167        if (treeElement && treeElement.showChild(node.index))
     168            return treeElement.children[node.index];
     169
     170        return null;
     171    },
     172
    158173    revealAndSelectNode: function(node)
    159174    {
    … …  
    161176            return;
    162177
    163         var treeElement = this.findTreeElement(node);
     178        var treeElement = this.createTreeElementFor(node);
    164179        if (!treeElement)
    165180            return;
    … …  
    298313        this._canAddAttributes = true;
    299314    this._searchQuery = null;
     315    this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit;
    300316}
     317
     318WebInspector.ElementsTreeElement.InitialChildrenLimit = 500;
    301319
    302320WebInspector.ElementsTreeElement.prototype = {
    … …  
    332350    },
    333351
     352    get expandedChildrenLimit()
     353    {
     354        return this._expandedChildrenLimit;
     355    },
     356
     357    set expandedChildrenLimit(x)
     358    {
     359        if (this._expandedChildrenLimit === x)
     360            return;
     361
     362        this._expandedChildrenLimit = x;
     363        if (this.treeOutline && !this._updateChildrenInProgress)
     364            this._updateChildren(true);
     365    },
     366
     367    get expandedChildCount()
     368    {
     369        var count = this.children.length;
     370        if (count && this.children[count - 1].elementCloseTag)
     371            count--;
     372        if (count && this.children[count - 1].expandAllButton)
     373            count--;
     374        return count;
     375    },
     376
     377    showChild: function(index)
     378    {
     379        if (index >= this.expandedChildrenLimit) {
     380            this._expandedChildrenLimit = index + 1;
     381            this._updateChildren(true);
     382        }
     383
     384        // Whether index-th child is visible in the children tree
     385        return this.expandedChildCount > index;
     386    },
     387
    334388    createTooltipForImageNode: function(node, callback)
    335389    {
    … …  
    410464    },
    411465
     466    insertChildElement: function(child, index)
     467    {
     468        var newElement = new WebInspector.ElementsTreeElement(child);
     469        newElement.selectable = this.treeOutline.selectEnabled;
     470        this.insertChild(newElement, index);
     471        return newElement;
     472    },
     473
     474    moveChild: function(child, targetIndex)
     475    {
     476        var wasSelected = child.selected;
     477        treeElement.removeChild(child);
     478        treeElement.insertChild(child, targetIndex);
     479        if (wasSelected)
     480            existingTreeElement.select();
     481    },
     482
    412483    _updateChildren: function(fullRefresh)
    413484    {
     485        if (this._updateChildrenInProgress)
     486            return;
     487
     488        this._updateChildrenInProgress = true;
     489        var focusedNode = this.treeOutline.focusedDOMNode;
     490        var originalScrollTop;
    414491        if (fullRefresh) {
     492            var treeOutlineContainerElement = this.treeOutline.element.parentNode;
     493            originalScrollTop = treeOutlineContainerElement.scrollTop;
    415494            var selectedTreeElement = this.treeOutline.selectedTreeElement;
    416495            if (selectedTreeElement && selectedTreeElement.hasAncestor(this))
    … …  
    421500        var treeElement = this;
    422501        var treeChildIndex = 0;
     502        var elementToSelect;
    423503
    424504        function updateChildrenOfNode(node)
    … …  
    431511                    // Find any existing element that is later in the children list.
    432512                    var existingTreeElement = null;
    433                     for (var i = (treeChildIndex + 1); i < treeElement.children.length; ++i) {
     513                    for (var i = (treeChildIndex + 1), size = treeElement.expandedChildCount; i < size; ++i) {
    434514                        if (treeElement.children[i].representedObject === child) {
    435515                            existingTreeElement = treeElement.children[i];
    … …  
    440520                    if (existingTreeElement && existingTreeElement.parent === treeElement) {
    441521                        // If an existing element was found and it has the same parent, just move it.
    442                         var wasSelected = existingTreeElement.selected;
    443                         treeElement.removeChild(existingTreeElement);
    444                         treeElement.insertChild(existingTreeElement, treeChildIndex);
    445                         if (wasSelected)
    446                             existingTreeElement.select();
     522                        treeElement.moveChild(existingTreeElement, treeChildIndex);
    447523                    } else {
    448524                        // No existing element found, insert a new element.
    449                         var newElement = new WebInspector.ElementsTreeElement(child);
    450                         newElement.selectable = treeOutline.selectEnabled;
    451                         treeElement.insertChild(newElement, treeChildIndex);
     525                        if (treeChildIndex < treeElement.expandedChildrenLimit) {
     526                            var newElement = treeElement.insertChildElement(child, treeChildIndex);
     527                            if (child === focusedNode)
     528                                elementToSelect = newElement;
     529                            if (treeElement.expandedChildCount > treeElement.expandedChildrenLimit)
     530                                treeElement.expandedChildrenLimit++;
     531                        }
    452532                    }
    453533                }
    … …  
    478558
    479559        updateChildrenOfNode(this.representedObject);
     560        this.adjustCollapsedRange(false);
    480561
    481562        var lastChild = this.children[this.children.length - 1];
    … …  
    487568            this.appendChild(item);
    488569        }
     570
     571        // We want to restore the original selection and tree scroll position after a full refresh, if possible.
     572        if (fullRefresh && elementToSelect) {
     573            elementToSelect.select();
     574            if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight)
     575                treeOutlineContainerElement.scrollTop = originalScrollTop;
     576        }
     577
     578        delete this._updateChildrenInProgress;
     579    },
     580
     581    adjustCollapsedRange: function()
     582    {
     583        // Ensure precondition: only the tree elements for node children are found in the tree
     584        // (not the Expand All button or the closing tag).
     585        if (this.expandAllButtonElement && this.expandAllButtonElement.__treeElement.parent)
     586            this.removeChild(this.expandAllButtonElement.__treeElement);
     587
     588        const node = this.representedObject;
     589        if (!node.children)
     590            return;
     591        const childNodeCount = node.children.length;
     592
     593        // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
     594        for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, childNodeCount); i < limit; ++i)
     595            this.insertChildElement(node.children[i], i);
     596
     597        const expandedChildCount = this.expandedChildCount;
     598        if (childNodeCount > this.expandedChildCount) {
     599            var targetButtonIndex = expandedChildCount;
     600            if (!this.expandAllButtonElement) {
     601                var title = "<button class=\"show-all-nodes\" value=\"\" />";
     602                var item = new TreeElement(title, null, false);
     603                item.selectable = false;
     604                item.expandAllButton = true;
     605                this.insertChild(item, targetButtonIndex);
     606                this.expandAllButtonElement = item.listItemElement.firstChild;
     607                this.expandAllButtonElement.__treeElement = item;
     608                this.expandAllButtonElement.addEventListener("click", this.handleLoadAllChildren.bind(this), false);
     609            } else if (!this.expandAllButtonElement.__treeElement.parent)
     610                this.insertChild(this.expandAllButtonElement.__treeElement, targetButtonIndex);
     611            this.expandAllButtonElement.textContent = WebInspector.UIString("Show All Nodes (%d More)", childNodeCount - expandedChildCount);
     612        } else if (this.expandAllButtonElement)
     613            delete this.expandAllButtonElement;
     614    },
     615
     616    handleLoadAllChildren: function()
     617    {
     618        this.expandedChildrenLimit = Math.max(this.representedObject._childNodeCount, this.expandedChildrenLimit + WebInspector.ElementsTreeElement.InitialChildrenLimit);
    489619    },
    490620
    … …  
    10271157
    10281158            parentElement.removeChild(self);
     1159            parentElement.adjustCollapsedRange(true);
    10291160        }
    10301161

  • trunk/WebCore/inspector/front-end/inspector.css

    r54769 r54819  
    22502250}
    22512251
    2252 .panel-enabler-view button:not(.status-bar-item), .pane button {
     2252.panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes {
    22532253    color: rgb(6, 6, 6);
    22542254    background-color: transparent;
    … …  
    22672267}
    22682268
     2269button.show-all-nodes {
     2270    font-size: 13px;
     2271    margin: 0;
     2272    padding: 0 20px;
     2273    height: 20px;
     2274}
     2275
    22692276.panel-enabler-view.welcome {
    22702277    z-index: auto;
    … …  
    22982305}
    22992306
    2300 .panel-enabler-view button:active:not(.status-bar-item), .pane button:active {
     2307.panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active {
    23012308    background-color: rgb(215, 215, 215);
    23022309    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
    23032310}
    23042311
    2305 body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled {
     2312body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled, body.inactive button.show-all-nodes {
    23062313    color: rgb(130, 130, 130);
    23072314    border-color: rgb(212, 212, 212);
Note: See TracChangeset for help on using the changeset viewer.