DevTools: Implement recursive viewport for the Heap Summary view

Source/devtools/front_end/HeapSnapshotDataGrids.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 213 matching lines @@
         this.recursiveSortingEnter();
         var children = this.allChildren(this.rootNode());
         this.rootNode().removeChildren();
         children.sort(sortFunction);
         for (var i = 0, l = children.length; i < l; ++i) {
             var child = children[i];
             this.appendChildAfterSorting(child);
             if (child.expanded)
                 child.sort();
         }
-        this.updateVisibleNodes();
         this.recursiveSortingLeave();
     },
 
     appendChildAfterSorting: function(child)
     {
         var revealed = child.revealed;
         this.rootNode().appendChild(child);
         child.revealed = revealed;
     },
 
     recursiveSortingEnter: function()
     {
         ++this._recursiveSortingDepth;
     },
 
     recursiveSortingLeave: function()
     {
         if (!this._recursiveSortingDepth)
             return;
-        if (!--this._recursiveSortingDepth)
-            this.dispatchEventToListeners("sorting complete");
+        if (--this._recursiveSortingDepth)
+            return;
+        this.updateVisibleNodes();
+        this.dispatchEventToListeners("sorting complete");
     },
 
     updateVisibleNodes: function()
     {
     },
 
     /**
      * @param {!WebInspector.DataGridNode} parent
      * @return {!Array.<!WebInspector.HeapSnapshotGridNode>}
      */
@@ skipping 58 matching lines @@
     topLevelNodes: function()
     {
         return this.allChildren(this.rootNode());
     },
 
     appendChildAfterSorting: function(child)
     {
         // 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(), i, scrollTop - topPadding, topPadding);
-    },
+        this._addVisibleNodes(this.rootNode(), scrollTop, scrollTop + viewPortHeight);
 
-    /**
-     * @param {!WebInspector.DataGridNode} parentNode
-     * @param {number} firstVisibleNodeIndex
-     * @param {number} firstNodeHiddenHeight
-     * @param {number} topPadding
-     */
-    _addVisibleNodes: function(parentNode, firstVisibleNodeIndex, firstNodeHiddenHeight, topPadding)
-    {
-        var viewPortHeight = this.scrollContainer.offsetHeight;
-
-        var children = this.allChildren(parentNode);
-        var selectedNode = this.selectedNode;
-
-        parentNode.removeChildren();
-
-        // 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;
-        }
-
-        var bottomPadding = 0;
-        while (i < children.length) {
-            bottomPadding += children[i].nodeHeight();
-            ++i;
-        }
-
-        this._topPadding.setHeight(topPadding);
-        this._bottomPadding.setHeight(bottomPadding);
+        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;
             }
         }
     },
 
     /**
+     * @param {!WebInspector.DataGridNode} parentNode
+     * @param {number} topBound
+     * @param {number} bottomBound
+     * @return {number}
+     */
+    _addVisibleNodes: function(parentNode, topBound, bottomBound)
+    {
+        if (!parentNode.expanded)
+            return 0;
+
+        var children = this.allChildren(parentNode);
+        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;
+        }
+
+        // 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._shouldRefreshChildren = true;

[aandrey, 2014/03/05 15:24:28]

I think this will result in going to backend for the data.
If so, doing it on every scroll event seems like an overkill, no?

[alph, 2014/03/05 15:40:54]

Removed. It was a leftover, I do not actually need it.
Though DataGridNode.insertChild sets it to true anyway. However it wouldn't
actually do the real populate since _populated is true (see
HeapSnapshotGridNode.populate)

+            child.revealed = true;
+            parentNode.appendChild(child);
+            position += WebInspector.DataGridNode.NodeShallowHeight;
+            position += this._addVisibleNodes(child, topBound - position, bottomBound - position);
+        }
+
+        // Count the invisible nodes beyond the bottom bound of the viewport.
+        var bottomPadding = 0;
+        for (; i < children.length; ++i)
+            bottomPadding += this._nodeHeight(children[i]);
+
+        this._topPaddingHeight += topPadding;
+        this._bottomPaddingHeight += bottomPadding;
+        return position + bottomPadding;
+    },
+
+    /**
+     * @param {!WebInspector.HeapSnapshotGridNode} node
+     * @return {number}
+     */
+    _nodeHeight: function(node)
+    {
+        if (!node.revealed)
+            return 0;
+        var result = WebInspector.DataGridNode.NodeShallowHeight;
+        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;
+    },
+
+    /**
      * @override
      * @return {?Element}
      */
     defaultAttachLocation: function()
     {
         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();
                 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)
     {
         return parent._allChildren || (parent._allChildren = []);
     },
 
     /**
      * @param {!WebInspector.DataGridNode} parent
      * @param {!WebInspector.DataGridNode} node
      */
@@ skipping 663 matching lines @@
             urlElement.style.maxWidth = "75%";
             cell.insertBefore(urlElement, cell.firstChild);
         }
 
         return cell;
     },
 
     __proto__: WebInspector.DataGridNode.prototype
 }