Revert of [Devtools] Moved flatten children to children nodes instead of datagrid

third_party/WebKit/Source/devtools/front_end/ui_lazy/ViewportDataGrid.js

Index: third_party/WebKit/Source/devtools/front_end/ui_lazy/ViewportDataGrid.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui_lazy/ViewportDataGrid.js b/third_party/WebKit/Source/devtools/front_end/ui_lazy/ViewportDataGrid.js
index d75c69b911fb04057c98b33f68d675f086410e68..4ffffd88ff2afd51101723710ffdea76ae247356 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui_lazy/ViewportDataGrid.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui_lazy/ViewportDataGrid.js
@@ -21,6 +21,8 @@
     this._scrollContainer.addEventListener('mousewheel', this._onWheel.bind(this), true);
     /** @type {!Array.<!UI.ViewportDataGridNode>} */
     this._visibleNodes = [];
+    /** @type {?Array.<!UI.ViewportDataGridNode>} */
+    this._flatNodes = null;
     /** @type {boolean} */
     this._inline = false;
 
@@ -88,6 +90,7 @@
    * @protected
    */
   scheduleUpdateStructure() {
+    this._flatNodes = null;
     this.scheduleUpdate();
   }
 
@@ -117,195 +120,13 @@
   }
 
   /**
-   * @param {number} clientHeight
-   * @param {number} scrollTop
-   * @return {{topPadding: number, bottomPadding: number, contentHeight: number, visibleNodes: !Array.<!UI.ViewportDataGridNode>, offset: number}}
-   */
-  _calculateVisibleNodes(clientHeight, scrollTop) {
-    var nodes = this.rootNode().flattenChildren();
-    if (this._inline)
-      return {topPadding: 0, bottomPadding: 0, contentHeight: 0, visibleNodes: nodes, offset: 0};
-
-    var size = nodes.length;
-    var i = 0;
-    var y = 0;
-
-    for (; i < size && y + nodes[i].nodeSelfHeight() < scrollTop; ++i)
-      y += nodes[i].nodeSelfHeight();
-    var start = i;
-    var topPadding = y;
-
-    for (; i < size && y < scrollTop + clientHeight; ++i)
-      y += nodes[i].nodeSelfHeight();
-    var end = i;
-
-    var bottomPadding = 0;
-    for (; i < size; ++i)
-      bottomPadding += nodes[i].nodeSelfHeight();
-
-    return {
-      topPadding: topPadding,
-      bottomPadding: bottomPadding,
-      contentHeight: y - topPadding,
-      visibleNodes: nodes.slice(start, end),
-      offset: start
-    };
-  }
-
-  /**
-   * @return {number}
-   */
-  _contentHeight() {
-    var nodes = this.rootNode().flattenChildren();
-    var result = 0;
-    for (var i = 0, size = nodes.length; i < size; ++i)
-      result += nodes[i].nodeSelfHeight();
-    return result;
-  }
-
-  _update() {
-    if (this._updateAnimationFrameId) {
-      this.element.window().cancelAnimationFrame(this._updateAnimationFrameId);
-      delete this._updateAnimationFrameId;
-    }
-
-    var clientHeight = this._scrollContainer.clientHeight;
-    var scrollTop = this._scrollContainer.scrollTop;
-    var currentScrollTop = scrollTop;
-    var maxScrollTop = Math.max(0, this._contentHeight() - clientHeight);
-    if (this._stickToBottom && this._atBottom)
-      scrollTop = maxScrollTop;
-    scrollTop = Math.min(maxScrollTop, scrollTop);
-    this._atBottom = scrollTop === maxScrollTop;
-
-    var viewportState = this._calculateVisibleNodes(clientHeight, scrollTop);
-    var visibleNodes = viewportState.visibleNodes;
-    var visibleNodesSet = new Set(visibleNodes);
-
-    if (this._hiddenWheelTarget && this._hiddenWheelTarget !== this._wheelTarget) {
-      this._hiddenWheelTarget.remove();
-      this._hiddenWheelTarget = null;
-    }
-
-    for (var i = 0; i < this._visibleNodes.length; ++i) {
-      var oldNode = this._visibleNodes[i];
-      if (!visibleNodesSet.has(oldNode) && oldNode.attached()) {
-        var element = oldNode._element;
-        if (element === this._wheelTarget)
-          this._hiddenWheelTarget = oldNode.abandonElement();
-        else
-          element.remove();
-        oldNode.wasDetached();
-      }
-    }
-
-    var previousElement = this._topFillerRow;
-    if (previousElement.nextSibling === this._hiddenWheelTarget)
-      previousElement = this._hiddenWheelTarget;
-    var tBody = this.dataTableBody;
-    var offset = viewportState.offset;
-    for (var i = 0; i < visibleNodes.length; ++i) {
-      var node = visibleNodes[i];
-      var element = node.element();
-      node.willAttach();
-      element.classList.toggle('odd', (offset + i) % 2 === 0);
-      tBody.insertBefore(element, previousElement.nextSibling);
-      node.revealed = true;
-      previousElement = element;
-    }
-
-    this.setVerticalPadding(viewportState.topPadding, viewportState.bottomPadding);
-    this._lastScrollTop = scrollTop;
-    if (scrollTop !== currentScrollTop)
-      this._scrollContainer.scrollTop = scrollTop;
-    var contentFits =
-        viewportState.contentHeight <= clientHeight && viewportState.topPadding + viewportState.bottomPadding === 0;
-    if (contentFits !== this.element.classList.contains('data-grid-fits-viewport')) {
-      this.element.classList.toggle('data-grid-fits-viewport', contentFits);
-      this.updateWidths();
-    }
-    this._visibleNodes = visibleNodes;
-    this.dispatchEventToListeners(UI.ViewportDataGrid.Events.ViewportCalculated);
-  }
-
-  /**
-   * @param {!UI.ViewportDataGridNode} node
-   */
-  _revealViewportNode(node) {
-    var nodes = this.rootNode().flattenChildren();
-    var index = nodes.indexOf(node);
-    if (index === -1)
-      return;
-    var fromY = 0;
-    for (var i = 0; i < index; ++i)
-      fromY += nodes[i].nodeSelfHeight();
-    var toY = fromY + node.nodeSelfHeight();
-
-    var scrollTop = this._scrollContainer.scrollTop;
-    if (scrollTop > fromY) {
-      scrollTop = fromY;
-      this._atBottom = false;
-    } else if (scrollTop + this._scrollContainer.offsetHeight < toY) {
-      scrollTop = toY - this._scrollContainer.offsetHeight;
-    }
-    this._scrollContainer.scrollTop = scrollTop;
-  }
-};
-
-UI.ViewportDataGrid.Events = {
-  ViewportCalculated: Symbol('ViewportCalculated')
-};
-
-/**
- * @unrestricted
- */
-UI.ViewportDataGridNode = class extends UI.DataGridNode {
-  /**
-   * @param {?Object.<string, *>=} data
-   * @param {boolean=} hasChildren
-   */
-  constructor(data, hasChildren) {
-    super(data, hasChildren);
-    /** @type {boolean} */
-    this._stale = false;
-    /** @type {?Array<!UI.ViewportDataGridNode>} */
-    this._flatNodes = null;
-  }
-
-  /**
-   * @override
-   * @return {!Element}
-   */
-  element() {
-    if (!this._element) {
-      this.createElement();
-      this.createCells();
-      this._stale = false;
-    }
-
-    if (this._stale) {
-      this.createCells();
-      this._stale = false;
-    }
-
-    return /** @type {!Element} */ (this._element);
-  }
-
-  _clearFlatNodes() {
-    this._flatNodes = null;
-    var parent = /** @type {!UI.ViewportDataGridNode} */ (this.parent);
-    if (parent)
-      parent._clearFlatNodes();
-  }
-
-  /**
-   * @return {!Array<!UI.ViewportDataGridNode>}
-   */
-  flattenChildren() {
+   * @return {!Array.<!UI.ViewportDataGridNode>}
+   */
+  flatNodesList() {
     if (this._flatNodes)
       return this._flatNodes;
     var flatNodes = [];
-    var children = [this.children];
+    var children = [this._rootNode.children];
     var counters = [0];
     var depth = 0;
     while (depth >= 0) {
@@ -322,9 +143,181 @@
         counters[depth] = 0;
       }
     }
-
     this._flatNodes = flatNodes;
-    return flatNodes;
+    return this._flatNodes;
+  }
+
+  /**
+   * @param {number} clientHeight
+   * @param {number} scrollTop
+   * @return {{topPadding: number, bottomPadding: number, contentHeight: number, visibleNodes: !Array.<!UI.ViewportDataGridNode>, offset: number}}
+   */
+  _calculateVisibleNodes(clientHeight, scrollTop) {
+    var nodes = this.flatNodesList();
+    if (this._inline)
+      return {topPadding: 0, bottomPadding: 0, contentHeight: 0, visibleNodes: nodes, offset: 0};
+
+    var size = nodes.length;
+    var i = 0;
+    var y = 0;
+
+    for (; i < size && y + nodes[i].nodeSelfHeight() < scrollTop; ++i)
+      y += nodes[i].nodeSelfHeight();
+    var start = i;
+    var topPadding = y;
+
+    for (; i < size && y < scrollTop + clientHeight; ++i)
+      y += nodes[i].nodeSelfHeight();
+    var end = i;
+
+    var bottomPadding = 0;
+    for (; i < size; ++i)
+      bottomPadding += nodes[i].nodeSelfHeight();
+
+    return {
+      topPadding: topPadding,
+      bottomPadding: bottomPadding,
+      contentHeight: y - topPadding,
+      visibleNodes: nodes.slice(start, end),
+      offset: start
+    };
+  }
+
+  /**
+   * @return {number}
+   */
+  _contentHeight() {
+    var nodes = this.flatNodesList();
+    var result = 0;
+    for (var i = 0, size = nodes.length; i < size; ++i)
+      result += nodes[i].nodeSelfHeight();
+    return result;
+  }
+
+  _update() {
+    if (this._updateAnimationFrameId) {
+      this.element.window().cancelAnimationFrame(this._updateAnimationFrameId);
+      delete this._updateAnimationFrameId;
+    }
+
+    var clientHeight = this._scrollContainer.clientHeight;
+    var scrollTop = this._scrollContainer.scrollTop;
+    var currentScrollTop = scrollTop;
+    var maxScrollTop = Math.max(0, this._contentHeight() - clientHeight);
+    if (this._stickToBottom && this._atBottom)
+      scrollTop = maxScrollTop;
+    scrollTop = Math.min(maxScrollTop, scrollTop);
+    this._atBottom = scrollTop === maxScrollTop;
+
+    var viewportState = this._calculateVisibleNodes(clientHeight, scrollTop);
+    var visibleNodes = viewportState.visibleNodes;
+    var visibleNodesSet = new Set(visibleNodes);
+
+    if (this._hiddenWheelTarget && this._hiddenWheelTarget !== this._wheelTarget) {
+      this._hiddenWheelTarget.remove();
+      this._hiddenWheelTarget = null;
+    }
+
+    for (var i = 0; i < this._visibleNodes.length; ++i) {
+      var oldNode = this._visibleNodes[i];
+      if (!visibleNodesSet.has(oldNode) && oldNode.attached()) {
+        var element = oldNode._element;
+        if (element === this._wheelTarget)
+          this._hiddenWheelTarget = oldNode.abandonElement();
+        else
+          element.remove();
+        oldNode.wasDetached();
+      }
+    }
+
+    var previousElement = this._topFillerRow;
+    if (previousElement.nextSibling === this._hiddenWheelTarget)
+      previousElement = this._hiddenWheelTarget;
+    var tBody = this.dataTableBody;
+    var offset = viewportState.offset;
+    for (var i = 0; i < visibleNodes.length; ++i) {
+      var node = visibleNodes[i];
+      var element = node.element();
+      node.willAttach();
+      element.classList.toggle('odd', (offset + i) % 2 === 0);
+      tBody.insertBefore(element, previousElement.nextSibling);
+      node.revealed = true;
+      previousElement = element;
+    }
+
+    this.setVerticalPadding(viewportState.topPadding, viewportState.bottomPadding);
+    this._lastScrollTop = scrollTop;
+    if (scrollTop !== currentScrollTop)
+      this._scrollContainer.scrollTop = scrollTop;
+    var contentFits =
+        viewportState.contentHeight <= clientHeight && viewportState.topPadding + viewportState.bottomPadding === 0;
+    if (contentFits !== this.element.classList.contains('data-grid-fits-viewport')) {
+      this.element.classList.toggle('data-grid-fits-viewport', contentFits);
+      this.updateWidths();
+    }
+    this._visibleNodes = visibleNodes;
+    this.dispatchEventToListeners(UI.ViewportDataGrid.Events.ViewportCalculated);
+  }
+
+  /**
+   * @param {!UI.ViewportDataGridNode} node
+   */
+  _revealViewportNode(node) {
+    var nodes = this.flatNodesList();
+    var index = nodes.indexOf(node);
+    if (index === -1)
+      return;
+    var fromY = 0;
+    for (var i = 0; i < index; ++i)
+      fromY += nodes[i].nodeSelfHeight();
+    var toY = fromY + node.nodeSelfHeight();
+
+    var scrollTop = this._scrollContainer.scrollTop;
+    if (scrollTop > fromY) {
+      scrollTop = fromY;
+      this._atBottom = false;
+    } else if (scrollTop + this._scrollContainer.offsetHeight < toY) {
+      scrollTop = toY - this._scrollContainer.offsetHeight;
+    }
+    this._scrollContainer.scrollTop = scrollTop;
+  }
+};
+
+UI.ViewportDataGrid.Events = {
+  ViewportCalculated: Symbol('ViewportCalculated')
+};
+
+/**
+ * @unrestricted
+ */
+UI.ViewportDataGridNode = class extends UI.DataGridNode {
+  /**
+   * @param {?Object.<string, *>=} data
+   * @param {boolean=} hasChildren
+   */
+  constructor(data, hasChildren) {
+    super(data, hasChildren);
+    /** @type {boolean} */
+    this._stale = false;
+  }
+
+  /**
+   * @override
+   * @return {!Element}
+   */
+  element() {
+    if (!this._element) {
+      this.createElement();
+      this.createCells();
+      this._stale = false;
+    }
+
+    if (this._stale) {
+      this.createCells();
+      this._stale = false;
+    }
+
+    return /** @type {!Element} */ (this._element);
   }
 
   /**
@@ -340,7 +333,6 @@
    * @param {number} index
    */
   insertChild(child, index) {
-    this._clearFlatNodes();
     if (child.parent === this) {
       var currentIndex = this.children.indexOf(child);
       if (currentIndex < 0)
@@ -366,7 +358,6 @@
    * @param {!UI.DataGridNode} child
    */
   removeChild(child) {
-    this._clearFlatNodes();
     if (this.dataGrid)
       this.dataGrid.updateSelectionBeforeRemoval(child, false);
     if (child.previousSibling)
@@ -388,7 +379,6 @@
    * @override
    */
   removeChildren() {
-    this._clearFlatNodes();
     if (this.dataGrid)
       this.dataGrid.updateSelectionBeforeRemoval(this, true);
     for (var i = 0; i < this.children.length; ++i)
@@ -475,13 +465,4 @@
   reveal() {
     this.dataGrid._revealViewportNode(this);
   }
-
-  /**
-   * @override
-   * @param {number} index
-   */
-  recalculateSiblings(index) {
-    this._clearFlatNodes();
-    super.recalculateSiblings(index);
-  }
 };