DevTools: Implement recursive viewport for the Heap Summary view

BUG=255363

Review URL: https://codereview.chromium.org/187823003

git-svn-id: svn://svn.chromium.org/blink/trunk@168584 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/profiler/heap-snapshot-test.js

@@ -689,6 +689,8 @@ InspectorTest.switchToView = function(title, callback)
     callback = InspectorTest.safeWrap(callback);
     var view = WebInspector.panels.profiles.visibleView;
     view.changeView(title, callback);
+    // Increase the grid container height so the viewport don't limit the number of nodes.
+    InspectorTest._currentGrid().scrollContainer.style.height = "10000px";
 };
 
 InspectorTest.takeAndOpenSnapshot = function(generator, callback)

third_party/WebKit/Source/devtools/front_end/DataGrid.js

@@ -1168,8 +1168,6 @@ WebInspector.DataGridNode = function(data, hasChildren)
     this.disclosureToggleWidth = 10;
 }
 
-WebInspector.DataGridNode.NodeShallowHeight = 16;
-
 WebInspector.DataGridNode.prototype = {
     /** @type {boolean} */
     selectable: true,
@@ -1394,17 +1392,9 @@ WebInspector.DataGridNode.prototype = {
     /**
      * @return {number}
      */
-    nodeHeight: function()
+    nodeSelfHeight: function()
     {
-        var rowHeight = WebInspector.DataGridNode.NodeShallowHeight;
-        if (!this.revealed)
-            return 0;
-        if (!this.expanded)
-            return rowHeight;
-        var result = rowHeight;
-        for (var i = 0; i < this.children.length; i++)
-            result += this.children[i].nodeHeight();
-        return result;
+        return 16;
     },
 
     /**

third_party/WebKit/Source/devtools/front_end/HeapSnapshotDataGrids.js

@@ -231,7 +231,6 @@ WebInspector.HeapSnapshotSortableDataGrid.prototype = {
             if (child.expanded)
                 child.sort();
         }
-        this.updateVisibleNodes();
         this.recursiveSortingLeave();
     },
 
@@ -251,8 +250,10 @@ WebInspector.HeapSnapshotSortableDataGrid.prototype = {
     {
         if (!this._recursiveSortingDepth)
             return;
-        if (!--this._recursiveSortingDepth)
-            this.dispatchEventToListeners("sorting complete");
+        if (--this._recursiveSortingDepth)
+            return;
+        this.updateVisibleNodes();
+        this.dispatchEventToListeners("sorting complete");
     },
 
     updateVisibleNodes: function()
@@ -331,68 +332,95 @@ WebInspector.HeapSnapshotViewportDataGrid.prototype = {
         // Do nothing here, it will be added in updateVisibleNodes.
     },
 
-    updateVisibleNodes: function()
+    /**
+     * @param {number=} scrollTop
+     */
+    updateVisibleNodes: function(scrollTop)
     {
-        var scrollTop = this.scrollContainer.scrollTop;
-        var children = this.topLevelNodes();
+        if (scrollTop === undefined)
+            scrollTop = this.scrollContainer.scrollTop;
+        var viewPortHeight = this.scrollContainer.offsetHeight;
+        var selectedNode = this.selectedNode;
+        this.rootNode().removeChildren();
 
-        var topPadding = 0;
-        for (var i = 0; i < children.length; ++i) {
-            if (children[i].revealed) {
-                var newTop = topPadding + children[i].nodeHeight();
-                if (newTop > scrollTop)
-                    break;
-                topPadding = newTop;
+        this._topPaddingHeight = 0;
+        this._bottomPaddingHeight = 0;
+
+        this._addVisibleNodes(this.rootNode(), scrollTop, scrollTop + viewPortHeight);
+
+        this._topPadding.setHeight(this._topPaddingHeight);
+        this._bottomPadding.setHeight(this._bottomPaddingHeight);
+
+        if (selectedNode) {
+            if (selectedNode.parent) {
+                selectedNode.select(true);
+            } else {
+                // Keep selection even if the node is not in the current viewport.
+                this.selectedNode = selectedNode;
             }
         }
-
-        this._addVisibleNodes(this.rootNode(), i, scrollTop - topPadding, topPadding);
     },
 
     /**
      * @param {!WebInspector.DataGridNode} parentNode
-     * @param {number} firstVisibleNodeIndex
-     * @param {number} firstNodeHiddenHeight
-     * @param {number} topPadding
+     * @param {number} topBound
+     * @param {number} bottomBound
+     * @return {number}
      */
-    _addVisibleNodes: function(parentNode, firstVisibleNodeIndex, firstNodeHiddenHeight, topPadding)
+    _addVisibleNodes: function(parentNode, topBound, bottomBound)
     {
-        var viewPortHeight = this.scrollContainer.offsetHeight;
+        if (!parentNode.expanded)
+            return 0;
 
         var children = this.allChildren(parentNode);
-        var selectedNode = this.selectedNode;
-
-        parentNode.removeChildren();
+        var topPadding = 0;
+        // Iterate over invisible nodes beyond the upper bound of viewport.
+        // Do not insert them into the grid, but count their total height.
+        for (var i = 0; i < children.length; ++i) {
+            var newTop = topPadding + this._nodeHeight(children[i]);
+            if (newTop > topBound)
+                break;
+            topPadding = newTop;
+        }
 
-        // The height of the view port + invisible top part.
-        var heightToFill = viewPortHeight + firstNodeHiddenHeight;
-        var filledHeight = 0;
-        var i = firstVisibleNodeIndex;
-        while (i < children.length && filledHeight < heightToFill) {
-            if (children[i].revealed) {
-                parentNode.appendChild(children[i]);
-                filledHeight += children[i].nodeHeight();
-            }
-            ++i;
+        // Put visible nodes into the data grid.
+        var position = topPadding;
+        for (; i < children.length && position < bottomBound; ++i) {
+            var child = children[i];
+            var hasChildren = child.hasChildren;
+            child.removeChildren();
+            child.hasChildren = hasChildren;
+            child.revealed = true;
+            parentNode.appendChild(child);
+            position += child.nodeSelfHeight();
+            position += this._addVisibleNodes(child, topBound - position, bottomBound - position);
         }
 
+        // Count the invisible nodes beyond the bottom bound of the viewport.
         var bottomPadding = 0;
-        while (i < children.length) {
-            bottomPadding += children[i].nodeHeight();
-            ++i;
-        }
+        for (; i < children.length; ++i)
+            bottomPadding += this._nodeHeight(children[i]);
 
-        this._topPadding.setHeight(topPadding);
-        this._bottomPadding.setHeight(bottomPadding);
+        this._topPaddingHeight += topPadding;
+        this._bottomPaddingHeight += bottomPadding;
+        return position + bottomPadding;
+    },
 
-        if (selectedNode) {
-            if (selectedNode.parent) {
-                selectedNode.select(true);
-            } else {
-                // Keep selection even if the node is not in the current viewport.
-                this.selectedNode = selectedNode;
-            }
-        }
+    /**
+     * @param {!WebInspector.HeapSnapshotGridNode} node
+     * @return {number}
+     */
+    _nodeHeight: function(node)
+    {
+        if (!node.revealed)
+            return 0;
+        var result = node.nodeSelfHeight();
+        if (!node.expanded)
+            return result;
+        var children = this.allChildren(node);
+        for (var i = 0; i < children.length; i++)
+            result += this._nodeHeight(children[i]);
+        return result;
     },
 
     /**
@@ -404,26 +432,27 @@ WebInspector.HeapSnapshotViewportDataGrid.prototype = {
         return this._bottomPadding.element;
     },
 
+    /**
+     * @param {!WebInspector.HeapSnapshotGridNode} nodeToReveal
+     */
     _revealTopLevelNode: function(nodeToReveal)
     {
         var children = this.allChildren(this.rootNode());
-
         var topPadding = 0;
         for (var i = 0; i < children.length; ++i) {
             if (children[i] === nodeToReveal)
                 break;
             if (children[i].revealed) {
-                var newTop = topPadding + children[i].nodeHeight();
+                var newTop = topPadding + this._nodeHeight(children[i]);
                 topPadding = newTop;
             }
         }
-
-        this._addVisibleNodes(this.rootNode(), i, 0, topPadding);
+        this.updateVisibleNodes(topPadding);
     },
 
     /**
      * @param {!WebInspector.DataGridNode} parent
-     * @return {!Array.<!WebInspector.DataGridNode>}
+     * @return {!Array.<!WebInspector.HeapSnapshotGridNode>}
      */
     allChildren: function(parent)
     {

third_party/WebKit/Source/devtools/front_end/HeapSnapshotGridNodes.js

@@ -101,6 +101,15 @@ WebInspector.HeapSnapshotGridNode.prototype = {
         this._dataGrid.updateVisibleNodes();
     },
 
+    /**
+     * @override
+     */
+    expand: function()
+    {
+        WebInspector.DataGridNode.prototype.expand.call(this);
+        this._dataGrid.updateVisibleNodes();
+    },
+
     /**
      * @override
      */
@@ -137,7 +146,7 @@ WebInspector.HeapSnapshotGridNode.prototype = {
      */
     allChildren: function()
     {
-        return this.children;
+        return this._dataGrid.allChildren(this);
     },
 
     /**
@@ -145,7 +154,7 @@ WebInspector.HeapSnapshotGridNode.prototype = {
      */
     removeChildByIndex: function(index)
     {
-        this.removeChild(this.children[index]);
+        this._dataGrid.removeChildByIndex(this, index);
     },
 
     /**
@@ -247,11 +256,11 @@ WebInspector.HeapSnapshotGridNode.prototype = {
             if (this._savedChildren) {
                 var hash = this._childHashForEntity(item);
                 if (hash in this._savedChildren) {
-                    this.insertChild(this._savedChildren[hash], insertionIndex);
+                    this._dataGrid.insertChild(this, this._savedChildren[hash], insertionIndex);
                     return;
                 }
             }
-            this.insertChild(this._createChildNode(item), insertionIndex);
+            this._dataGrid.insertChild(this, this._createChildNode(item), insertionIndex);
         }
 
         /**
@@ -260,7 +269,7 @@ WebInspector.HeapSnapshotGridNode.prototype = {
         function insertShowMoreButton(from, to, insertionIndex)
         {
             var button = new WebInspector.ShowMoreDataGridNode(this._populateChildren.bind(this), from, to, this._dataGrid.defaultPopulateCount());
-            this.insertChild(button, insertionIndex);
+            this._dataGrid.insertChild(this, button, insertionIndex);
         }
 
         /**
@@ -356,6 +365,7 @@ WebInspector.HeapSnapshotGridNode.prototype = {
                 return;
             }
 
+            this._dataGrid.updateVisibleNodes();
             if (afterPopulate)
                 afterPopulate();
             this.dispatchEventToListeners(WebInspector.HeapSnapshotGridNode.Events.PopulateComplete);
@@ -387,7 +397,7 @@ WebInspector.HeapSnapshotGridNode.prototype = {
         function afterSort()
         {
             this._saveChildren();
-            this.removeChildren();
+            this._dataGrid.removeAllChildren(this);
             this._retrievedChildrenRanges = [];
 
             /**

third_party/WebKit/Source/devtools/front_end/ShowMoreDataGridNode.js

@@ -133,7 +133,7 @@ WebInspector.ShowMoreDataGridNode.prototype = {
      * @override
      * @return {number}
      */
-    nodeHeight: function()
+    nodeSelfHeight: function()
     {
         return 32;
     },