[Devtools] Changed ViewportDataGrid to use DataGrid for dom operations

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

Index: third_party/WebKit/Source/devtools/front_end/data_grid/ViewportDataGrid.js
diff --git a/third_party/WebKit/Source/devtools/front_end/data_grid/ViewportDataGrid.js b/third_party/WebKit/Source/devtools/front_end/data_grid/ViewportDataGrid.js
index 27ceb53867580a304c5f08a66080a15f1ff85a58..df6f3304bf68509e202b69e792e52a5c46fc0a2b 100644
--- a/third_party/WebKit/Source/devtools/front_end/data_grid/ViewportDataGrid.js
+++ b/third_party/WebKit/Source/devtools/front_end/data_grid/ViewportDataGrid.js
@@ -58,7 +58,10 @@ DataGrid.ViewportDataGrid = class extends DataGrid.DataGrid {
     this._stickToBottom = stick;
   }
 
-  _onScroll() {
+  /**
+   * @param {?Event} event
+   */
+  _onScroll(event) {
     this._atBottom = this._scrollContainer.isScrolledToBottom();
     if (this._lastScrollTop !== this._scrollContainer.scrollTop)
       this.scheduleUpdate(true);
@@ -162,14 +165,21 @@ DataGrid.ViewportDataGrid = class extends DataGrid.DataGrid {
 
     var viewportState = this._calculateVisibleNodes(clientHeight, scrollTop);
     var visibleNodes = viewportState.visibleNodes;
-
     var visibleNodesSet = new Set(visibleNodes);
-    for (var oldNode of this._visibleNodes) {
-      if (oldNode.attachedToDOM() && !visibleNodesSet.has(oldNode))
-        oldNode.detachFromDOM();
+
+    for (var i = 0; i < this._visibleNodes.length; ++i) {
+      var oldNode = this._visibleNodes[i];
+      if (!visibleNodesSet.has(oldNode) && oldNode.attached()) {
+        var element = oldNode.existingElement();
+        element.remove();
+        oldNode.wasDetached();
+      }
     }
 
+    var previousElement = this.topFillerRowElement();
+    var tBody = this.dataTableBody;
     var offset = viewportState.offset;
+
     if (visibleNodes.length) {
       var nodes = this.rootNode().flatChildren();
       var index = nodes.indexOf(visibleNodes[0]);
@@ -179,10 +189,15 @@ DataGrid.ViewportDataGrid = class extends DataGrid.DataGrid {
 
     this._firstVisibleIsStriped = !!(offset % 2);
 
-    visibleNodes.forEach((node, index) => {
-      node.setStriped((offset + index) % 2 === 0);
-      node.attachToDOM();
-    });
+    for (var i = 0; i < visibleNodes.length; ++i) {
+      var node = visibleNodes[i];
+      var element = node.element();
+      node.willAttach();
+      node.setStriped((offset + i) % 2 === 0);
+      tBody.insertBefore(element, previousElement.nextSibling);
+      node.revealed = true;
+      previousElement = element;
+    }
 
     this.setVerticalPadding(viewportState.topPadding, viewportState.bottomPadding);
     this._lastScrollTop = scrollTop;
@@ -316,29 +331,54 @@ DataGrid.ViewportDataGridNode = class extends DataGrid.DataGridNode {
   }
 
   /**
-   * @param {?NODE_TYPE} previousParent
    * @override
+   * @param {!NODE_TYPE} child
+   * @param {number} index
    */
-  updateDOMStructure(previousParent) {
-    if (previousParent)
-      previousParent.dataGrid.scheduleUpdateStructure();
-    if (this.dataGrid)
+  insertChild(child, index) {
+    this.clearFlatNodes();
+    if (child.parent === this) {
+      var currentIndex = this.children.indexOf(child);
+      if (currentIndex < 0)
+        console.assert(false, 'Inconsistent DataGrid state');
+      if (currentIndex === index)
+        return;
+      if (currentIndex < index)
+        --index;
+    }
+    child.remove();
+    child.parent = this;
+    child.dataGrid = this.dataGrid;
+    if (!this.children.length)
+      this.setHasChildren(true);
+    this.children.splice(index, 0, child);
+    child.recalculateSiblings(index);
+    if (this._expanded)
       this.dataGrid.scheduleUpdateStructure();
-
-    if (this.parent)
-      this.parent.clearFlatNodes();
-    if (previousParent)
-      previousParent.clearFlatNodes();
   }
 
   /**
    * @override
    * @param {!NODE_TYPE} child
-   * @param {number} index
    */
-  insertChild(child, index) {
+  removeChild(child) {
     this.clearFlatNodes();
-    super.insertChild(child, index);
+    if (this.dataGrid)
+      this.dataGrid.updateSelectionBeforeRemoval(child, false);
+    if (child.previousSibling)
+      child.previousSibling.nextSibling = child.nextSibling;
+    if (child.nextSibling)
+      child.nextSibling.previousSibling = child.previousSibling;
+    if (child.parent !== this)
+      throw 'removeChild: Node is not a child of this node.';
+
+    this.children.remove(child, true);
+    child._unlink();
+
+    if (!this.children.length)
+      this.setHasChildren(false);
+    if (this._expanded)
+      this.dataGrid.scheduleUpdateStructure();
   }
 
   /**
@@ -346,11 +386,24 @@ DataGrid.ViewportDataGridNode = class extends DataGrid.DataGridNode {
    */
   removeChildren() {
     this.clearFlatNodes();
-    super.removeChildren();
+    if (this.dataGrid)
+      this.dataGrid.updateSelectionBeforeRemoval(this, true);
+    for (var i = 0; i < this.children.length; ++i)
+      this.children[i]._unlink();
+    this.children = [];
+
     if (this._expanded)
       this.dataGrid.scheduleUpdateStructure();
   }
 
+  _unlink() {
+    if (this.attached()) {
+      this.existingElement().remove();
+      this.wasDetached();
+    }
+    this.resetNode();
+  }
+
   /**
    * @override
    */
@@ -377,10 +430,16 @@ DataGrid.ViewportDataGridNode = class extends DataGrid.DataGridNode {
 
   /**
    * @protected
+   */
+  willAttach() {
+  }
+
+  /**
+   * @protected
    * @return {boolean}
    */
   attached() {
-    return !!(this.dataGrid && this.attachedToDOM());
+    return !!(this.dataGrid && this.existingElement() && this.existingElement().parentElement);
   }
 
   /**