Changeset 54599 in webkit


Ignore:
Timestamp:
Feb 10, 2010 7:45:40 AM (14 years ago)
Author:
apavlov@chromium.org
Message:

2010-02-10 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.
  • platform/qt/Skipped:
Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r54587 r54599  
     12010-02-10  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        * platform/qt/Skipped:
     11
    1122010-02-10  Adam Barth  <abarth@webkit.org>
    213
  • trunk/LayoutTests/platform/qt/Skipped

    r54573 r54599  
    48524852inspector/console-log-before-inspector-open.html
    48534853inspector/console-tests.html
     4854inspector/elements-panel-limited-children.html
    48544855inspector/elements-panel-structure.html
    48554856inspector/evaluate-in-frontend.html
  • trunk/WebCore/ChangeLog

    r54597 r54599  
     12010-02-10  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-10  Mikhail Naganov  <mnaganov@chromium.org>
    233
  • trunk/WebCore/inspector/front-end/DOMAgent.js

    r53766 r54599  
    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

    r53766 r54599  
    524524            if (this.recentlyModifiedNodes[i].updated) {
    525525                var nodeItem = this.treeOutline.findTreeElement(node);
    526                 nodeItem.updateTitle();
     526                if (nodeItem)
     527                    nodeItem.updateTitle();
    527528                continue;
    528529            }
  • trunk/WebCore/inspector/front-end/ElementsTreeOutline.js

    r54470 r54599  
    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;
     
    297312    if (this.representedObject.nodeType == Node.ELEMENT_NODE)
    298313        this._canAddAttributes = true;
     314
     315    this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit;
    299316}
     317
     318WebInspector.ElementsTreeElement.InitialChildrenLimit = 500;
    300319
    301320WebInspector.ElementsTreeElement.prototype = {
     
    342361    },
    343362
     363    get expandedChildrenLimit()
     364    {
     365        return this._expandedChildrenLimit;
     366    },
     367
     368    set expandedChildrenLimit(x)
     369    {
     370        if (this._expandedChildrenLimit === x)
     371            return;
     372
     373        this._expandedChildrenLimit = x;
     374        if (this.treeOutline && !this._updateChildrenInProgress)
     375            this._updateChildren(true);
     376    },
     377
     378    get expandedChildCount()
     379    {
     380        var count = this.children.length;
     381        if (count && this.children[count - 1].elementCloseTag)
     382            count--;
     383        return count;
     384    },
     385
     386    showChild: function(index)
     387    {
     388        if (index >= this.expandedChildrenLimit) {
     389            this._expandedChildrenLimit = index + 1;
     390            this._updateChildren(true);
     391        }
     392
     393        // Whether index-th child is visible in the children tree
     394        return this.expandedChildCount > index;
     395    },
     396
    344397    createTooltipForImageNode: function(node, callback)
    345398    {
     
    423476    },
    424477
     478    insertChildElement: function(child, index)
     479    {
     480        var newElement = new WebInspector.ElementsTreeElement(child);
     481        newElement.selectable = this.treeOutline.selectEnabled;
     482        this.insertChild(newElement, index);
     483        return newElement;
     484    },
     485
     486    moveChild: function(child, targetIndex)
     487    {
     488        var wasSelected = child.selected;
     489        treeElement.removeChild(child);
     490        treeElement.insertChild(child, targetIndex);
     491        if (wasSelected)
     492            existingTreeElement.select();
     493    },
     494
    425495    _updateChildren: function(fullRefresh)
    426496    {
     497        if (this._updateChildrenInProgress)
     498            return;
     499
     500        this._updateChildrenInProgress = true;
     501        var focusedNode = this.treeOutline.focusedDOMNode;
     502        var originalScrollTop;
    427503        if (fullRefresh) {
     504            var treeOutlineContainerElement = this.treeOutline.element.parentNode;
     505            originalScrollTop = treeOutlineContainerElement.scrollTop;
    428506            var selectedTreeElement = this.treeOutline.selectedTreeElement;
    429507            if (selectedTreeElement && selectedTreeElement.hasAncestor(this))
     
    434512        var treeElement = this;
    435513        var treeChildIndex = 0;
     514        var elementToSelect;
    436515
    437516        function updateChildrenOfNode(node)
     
    444523                    // Find any existing element that is later in the children list.
    445524                    var existingTreeElement = null;
    446                     for (var i = (treeChildIndex + 1); i < treeElement.children.length; ++i) {
     525                    for (var i = (treeChildIndex + 1), size = treeElement.expandedChildCount; i < size; ++i) {
    447526                        if (treeElement.children[i].representedObject === child) {
    448527                            existingTreeElement = treeElement.children[i];
     
    453532                    if (existingTreeElement && existingTreeElement.parent === treeElement) {
    454533                        // If an existing element was found and it has the same parent, just move it.
    455                         var wasSelected = existingTreeElement.selected;
    456                         treeElement.removeChild(existingTreeElement);
    457                         treeElement.insertChild(existingTreeElement, treeChildIndex);
    458                         if (wasSelected)
    459                             existingTreeElement.select();
     534                        treeElement.moveChild(existingTreeElement, treeChildIndex);
    460535                    } else {
    461536                        // No existing element found, insert a new element.
    462                         var newElement = new WebInspector.ElementsTreeElement(child);
    463                         newElement.selectable = treeOutline.selectEnabled;
    464                         treeElement.insertChild(newElement, treeChildIndex);
     537                        if (treeChildIndex < treeElement.expandedChildrenLimit) {
     538                            var newElement = treeElement.insertChildElement(child, treeChildIndex);
     539                            if (child === focusedNode)
     540                                elementToSelect = newElement;
     541                            if (treeElement.expandedChildCount > treeElement.expandedChildrenLimit)
     542                                treeElement.expandedChildrenLimit++;
     543                        }
    465544                    }
    466545                }
     
    491570
    492571        updateChildrenOfNode(this.representedObject);
     572        this.adjustCollapsedRange(false);
    493573
    494574        var lastChild = this.children[this.children.length - 1];
     
    500580            this.appendChild(item);
    501581        }
     582
     583        // We want to restore the original selection and tree scroll position after a full refresh, if possible.
     584        if (fullRefresh && elementToSelect) {
     585            elementToSelect.select();
     586            if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight)
     587                treeOutlineContainerElement.scrollTop = originalScrollTop;
     588        }
     589
     590        delete this._updateChildrenInProgress;
     591    },
     592
     593    adjustCollapsedRange: function()
     594    {
     595        // Ensure precondition: the Expand All button is not found in the tree.
     596        if (this.expandAllButtonElement && this.expandAllButtonElement.__treeElement.parent)
     597            this.removeChild(this.expandAllButtonElement.__treeElement);
     598
     599        const node = this.representedObject;
     600        const childNodeCount = node._childNodeCount;
     601
     602        // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
     603        for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, childNodeCount); i < limit; ++i)
     604            this.insertChildElement(node.children[i], i);
     605
     606        const expandedChildCount = this.expandedChildCount;
     607        if (childNodeCount > this.expandedChildCount) {
     608            var targetButtonIndex = expandedChildCount;
     609            if (!this.expandAllButtonElement) {
     610                var title = "<button class=\"show-all-nodes\" value=\"\" />";
     611                var item = new TreeElement(title, null, false);
     612                item.selectable = false;
     613                this.insertChild(item, targetButtonIndex);
     614                this.expandAllButtonElement = item.listItemElement.firstChild;
     615                this.expandAllButtonElement.__treeElement = item;
     616                this.expandAllButtonElement.addEventListener("click", this.handleLoadAllChildren.bind(this), false);
     617            } else if (!this.expandAllButtonElement.__treeElement.parent)
     618                this.insertChild(this.expandAllButtonElement.__treeElement, targetButtonIndex);
     619            this.expandAllButtonElement.textContent = WebInspector.UIString("Show All Nodes (%d More)", childNodeCount - expandedChildCount);
     620        } else if (this.expandAllButtonElement)
     621            delete this.expandAllButtonElement;
     622    },
     623
     624    handleLoadAllChildren: function()
     625    {
     626        this.expandedChildrenLimit = Math.max(this.representedObject._childNodeCount, this.expandedChildrenLimit + WebInspector.ElementsTreeElement.InitialChildrenLimit);
    502627    },
    503628
     
    10391164
    10401165            parentElement.removeChild(self);
     1166            parentElement.adjustCollapsedRange(true);
    10411167        }
    10421168
  • trunk/WebCore/inspector/front-end/inspector.css

    r54240 r54599  
    22462246}
    22472247
    2248 .panel-enabler-view button:not(.status-bar-item), .pane button {
     2248.panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes {
    22492249    color: rgb(6, 6, 6);
    22502250    background-color: transparent;
     
    22632263}
    22642264
     2265button.show-all-nodes {
     2266    font-size: 13px;
     2267    margin: 0;
     2268    padding: 0 20px;
     2269    height: 20px;
     2270}
     2271
    22652272.panel-enabler-view.welcome {
    22662273    z-index: auto;
     
    22942301}
    22952302
    2296 .panel-enabler-view button:active:not(.status-bar-item), .pane button:active {
     2303.panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active {
    22972304    background-color: rgb(215, 215, 215);
    22982305    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
    22992306}
    23002307
    2301 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 {
     2308body.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 {
    23022309    color: rgb(130, 130, 130);
    23032310    border-color: rgb(212, 212, 212);
Note: See TracChangeset for help on using the changeset viewer.