[Devtools] Changed ViewportDataGrid to use DataGrid for dom operations

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

Index: third_party/WebKit/Source/devtools/front_end/data_grid/DataGrid.js
diff --git a/third_party/WebKit/Source/devtools/front_end/data_grid/DataGrid.js b/third_party/WebKit/Source/devtools/front_end/data_grid/DataGrid.js
index 98f4dad7e589f786c8865d0babf1412ba66621ae..0e2757475c96ab5f8796d0c62e84be6984b625e1 100644
--- a/third_party/WebKit/Source/devtools/front_end/data_grid/DataGrid.js
+++ b/third_party/WebKit/Source/devtools/front_end/data_grid/DataGrid.js
@@ -263,7 +263,6 @@ DataGrid.DataGrid = class extends Common.Object {
     if (this._rootNode) {
       this._rootNode.removeChildren();
       this._rootNode.dataGrid = null;
-      this._rootNode._revealedInTree = false;
       this._rootNode._isRoot = false;
     }
     /** @type {!NODE_TYPE} */
@@ -274,7 +273,6 @@ DataGrid.DataGrid = class extends Common.Object {
     rootNode._revealed = true;
     rootNode.selectable = false;
     rootNode.dataGrid = this;
-    rootNode._revealedInTree = true;
   }
 
   /**
@@ -891,7 +889,7 @@ DataGrid.DataGrid = class extends Common.Object {
    */
   dataGridNodeFromNode(target) {
     var rowElement = target.enclosingNodeOrSelfWithNodeName('tr');
-    return rowElement && rowElement[DataGrid.DataGrid._dataGridNodeSymbol];
+    return rowElement && rowElement._dataGridNode;
   }
 
   /**
@@ -1207,7 +1205,6 @@ DataGrid.DataGrid.Align = {
 DataGrid.DataGrid._preferredWidthSymbol = Symbol('preferredWidth');
 DataGrid.DataGrid._columnIdSymbol = Symbol('columnId');
 DataGrid.DataGrid._sortIconSymbol = Symbol('sortIcon');
-DataGrid.DataGrid._dataGridNodeSymbol = Symbol('dataGridNode');
 
 DataGrid.DataGrid.ColumnResizePadding = 24;
 DataGrid.DataGrid.CenterResizerOverBorderAdjustment = 3;
@@ -1244,12 +1241,8 @@ DataGrid.DataGridNode = class extends Common.Object {
     this._depth;
     /** @type {boolean|undefined} */
     this._revealed;
-    // TODO(allada) _revealedInTree is the same as _revealed, but because of HeapSnapshotDataGrids it manages
-    // _revealed. These need to be merged.
-    /** @type {boolean|undefined} */
-    this._revealedInTree;
     /** @type {boolean} */
-    this._attachedToDOM = false;
+    this._attached = false;
     /** @type {?{parent: !NODE_TYPE, index: number}} */
     this._savedPosition = null;
     /** @type {boolean} */
@@ -1270,6 +1263,7 @@ DataGrid.DataGridNode = class extends Common.Object {
     this.nextSibling = null;
     /** @type {number} */
     this.disclosureToggleWidth = 10;
+
     /** @type {boolean} */
     this.selectable = true;
 
@@ -1294,7 +1288,7 @@ DataGrid.DataGridNode = class extends Common.Object {
    */
   createElement() {
     this._element = createElement('tr');
-    this._element[DataGrid.DataGrid._dataGridNodeSymbol] = this;
+    this._element._dataGridNode = this;
 
     if (this._hasChildren)
       this._element.classList.add('parent');
@@ -1355,23 +1349,6 @@ DataGrid.DataGridNode = class extends Common.Object {
   /**
    * @return {boolean}
    */
-  revealedInTree() {
-    if (this._revealedInTree)
-      return this._revealedInTree;
-    if (!this.dataGrid || !this.expanded) {
-      this._revealedInTree = false;
-      return false;
-    }
-
-    this._revealedInTree = true;
-    if (this.parent)
-      this._revealedInTree = this.parent.revealedInTree();
-    return this._revealedInTree;
-  }
-
-  /**
-   * @return {boolean}
-   */
   get revealed() {
     if (this._revealed !== undefined)
       return this._revealed;
@@ -1491,7 +1468,6 @@ DataGrid.DataGridNode = class extends Common.Object {
    * @return {number}
    */
   get leftPadding() {
-    // TODO(allada) We should not allow this method to be public and indenting should be handled only by DataGrids.
     return this.depth * this.dataGrid.indentWidth;
   }
 
@@ -1547,7 +1523,7 @@ DataGrid.DataGridNode = class extends Common.Object {
 
   refresh() {
     if (!this.dataGrid)
-      this.resetElement();
+      this._element = null;
     if (!this._element)
       return;
     this.createCells(this._element);
@@ -1620,6 +1596,26 @@ DataGrid.DataGridNode = class extends Common.Object {
   }
 
   /**
+   * @param {boolean=} onlyCaches
+   */
+  resetNode(onlyCaches) {
+    // @TODO(allada) This is a hack to make sure ViewportDataGrid can clean up these caches. Try Not To Use.
+    delete this._depth;
+    delete this._revealed;
+    if (onlyCaches)
+      return;
+    if (this.previousSibling)
+      this.previousSibling.nextSibling = this.nextSibling;
+    if (this.nextSibling)
+      this.nextSibling.previousSibling = this.previousSibling;
+    this.dataGrid = null;
+    this.parent = null;
+    this.nextSibling = null;
+    this.previousSibling = null;
+    this._attached = false;
+  }
+
+  /**
    * @param {!NODE_TYPE} child
    * @param {number} index
    */
@@ -1635,38 +1631,33 @@ DataGrid.DataGridNode = class extends Common.Object {
       if (currentIndex < index)
         --index;
     }
+
     child.remove();
 
-    var previousParent = child.parent;
-    child.parent = this;
-    this.setHasChildren(true);
     this.children.splice(index, 0, child);
+    this.setHasChildren(true);
 
+    child.parent = this;
+    child.dataGrid = this.dataGrid;
     child.recalculateSiblings(index);
 
-    for (var current = child; current; current = current.traverseNextNode(false, child, true)) {
+    child._shouldRefreshChildren = true;
+
+    var current = child.children[0];
+    while (current) {
+      current.resetNode(true);
       current.dataGrid = this.dataGrid;
+      current._attached = false;
       current._shouldRefreshChildren = true;
-      delete current._revealedInTree;
+      current = current.traverseNextNode(false, child, true);
     }
 
-    child.updateDOMStructure(previousParent);
-  }
-
-  /**
-   * @param {?NODE_TYPE} previousParent
-   * @protected
-   */
-  updateDOMStructure(previousParent) {
-    if (!this.dataGrid || (this.parent && !this.parent.expanded)) {
-      this.detachFromDOM();
-      return;
-    }
-    if (!this._attachedToDOM)
-      this.attachToDOM();
+    if (this.expanded)
+      child._attach();
+    if (!this.revealed)
+      child.revealed = false;
   }
 
-
   remove() {
     if (this.parent)
       this.parent.removeChild(this);
@@ -1684,23 +1675,22 @@ DataGrid.DataGridNode = class extends Common.Object {
     if (this.dataGrid)
       this.dataGrid.updateSelectionBeforeRemoval(child, false);
 
+    child._detach();
+    child.resetNode();
     this.children.remove(child, true);
 
-    if (child.previousSibling)
-      child.previousSibling.nextSibling = child.nextSibling;
-    if (child.nextSibling)
-      child.nextSibling.previousSibling = child.previousSibling;
-
-    if (!this.children.length)
+    if (this.children.length <= 0)
       this.setHasChildren(false);
-    child._unlink();
   }
 
   removeChildren() {
     if (this.dataGrid)
       this.dataGrid.updateSelectionBeforeRemoval(this, true);
-
-    this.children.forEach(child => child._unlink());
+    for (var i = 0; i < this.children.length; ++i) {
+      var child = this.children[i];
+      child._detach();
+      child.resetNode();
+    }
 
     this.children = [];
     this.setHasChildren(false);
@@ -1732,14 +1722,8 @@ DataGrid.DataGridNode = class extends Common.Object {
 
     this._expanded = false;
 
-    delete this._revealedInTree;
-    var child = this.traverseNextNode(false, this, true);
-    for (; child; child = child.traverseNextNode(false, this, true)) {
-      child.revealed = false;
-      child._revealedInTree = false;
-    }
-
-    this.updateDOMStructure();
+    for (var i = 0; i < this.children.length; ++i)
+      this.children[i].revealed = false;
   }
 
   collapseRecursively() {
@@ -1766,13 +1750,17 @@ DataGrid.DataGridNode = class extends Common.Object {
     }
 
     if (this._shouldRefreshChildren) {
+      for (var i = 0; i < this.children.length; ++i)
+        this.children[i]._detach();
+
       this.populate();
 
-      if (this._attachedToDOM) {
+      if (this._attached) {
         for (var i = 0; i < this.children.length; ++i) {
           var child = this.children[i];
           if (this.revealed)
             child.revealed = true;
+          child._attach();
         }
       }
 
@@ -1783,13 +1771,6 @@ DataGrid.DataGridNode = class extends Common.Object {
       this._element.classList.add('expanded');
 
     this._expanded = true;
-
-    for (current = this; current; current = current.traverseNextNode(false, this, true)) {
-      delete current._revealed;
-      delete current._revealedInTree;
-    }
-
-    this.updateDOMStructure();
   }
 
   expandRecursively() {
@@ -1940,100 +1921,37 @@ DataGrid.DataGridNode = class extends Common.Object {
     return event.pageX >= left && event.pageX <= left + this.disclosureToggleWidth;
   }
 
-  /**
-   * @param {!NODE_TYPE} node
-   * @return {boolean}
-   */
-  _isParentOf(node) {
-    for (var parent = node.parent; parent; parent = parent.parent) {
-      if (this === parent)
-        return true;
-    }
-    return false;
-  }
-
-  /**
-   * @return {boolean}
-   */
-  attachedToDOM() {
-    return this._attachedToDOM;
-  }
-
-  attachToDOM() {
-    if (!this.dataGrid)
+  _attach() {
+    if (!this.dataGrid || this._attached)
       return;
 
-    var previousNode = this.traversePreviousNode(true, true);
-    if (previousNode && !previousNode._attachedToDOM)
-      previousNode = null;
-    var expectedPreviousElement = previousNode ? previousNode.element() : this.dataGrid._topFillerRow;
-
-    // In the event that the previous item(s) are being moved to be children of this node, keep walking back until we
-    // get a non-child.
-    var previousDOMElement = null;
-    var previousDOMGridNode = null;
-    if (this._element && this._element.previousSibling) {
-      previousDOMElement = this._element.previousSibling;
-      previousDOMGridNode = previousDOMElement[DataGrid.DataGrid._dataGridNodeSymbol];
-    }
-    while (previousDOMGridNode && this._isParentOf(previousDOMGridNode)) {
-      previousDOMGridNode = previousDOMElement.previousSibling[DataGrid.DataGrid._dataGridNodeSymbol];
-      previousDOMElement = previousDOMGridNode ? previousDOMElement.previousSibling : null;
-    }
+    this._attached = true;
 
-    if (previousDOMElement === expectedPreviousElement)
-      return;
-
-    this.willAttach();
-    this._attachedToDOM = true;
-    delete this._revealed;
-
-    this.dataGrid.dataTableBody.insertBefore(this.element(), expectedPreviousElement.nextSibling);
+    var previousNode = this.traversePreviousNode(true, true);
+    var previousElement = previousNode ? previousNode.element() : this.dataGrid._topFillerRow;
+    this.dataGrid.dataTableBody.insertBefore(this.element(), previousElement.nextSibling);
 
     if (this.expanded) {
       for (var i = 0; i < this.children.length; ++i)
-        this.children[i].attachToDOM();
+        this.children[i]._attach();
     }
   }
 
-  detachFromDOM() {
-    if (!this._attachedToDOM)
+  _detach() {
+    if (!this._attached)
       return;
+
+    this._attached = false;
+
     if (this._element)
       this._element.remove();
 
-    this._attachedToDOM = false;
+    for (var i = 0; i < this.children.length; ++i)
+      this.children[i]._detach();
 
-    delete this._depth;
-    delete this._revealed;
-    this._attachedToDOM = false;
     this.wasDetached();
-
-    if (!this.revealedInTree())
-      this.children.forEach(child => child.detachFromDOM());
-  }
-
-  _unlink() {
-    var previousParent = this.parent;
-    this.parent = null;
-    this.nextSibling = null;
-    this.previousSibling = null;
-    for (var current = this; current; current = current.traverseNextNode(false, this, true)) {
-      current.dataGrid = null;
-      current._revealedInTree = false;
-    }
-    this.updateDOMStructure(previousParent);
   }
 
-  /**
-   * @protected
-   */
-  willAttach() {
-  }
-
-  /**
-   * @protected
-   */
   wasDetached() {
   }