[DevTools] Set row background instead of the table

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 c2596267caea68d095106b00f39f98a78c32f41d..3b60022f00126a3ca54a9eedb99bceae2ab1a77f 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
@@ -1273,6 +1273,7 @@ DataGrid.DataGridNode = class extends Common.Object {
 
     /** @type {boolean} */
     this._isRoot = false;
+    this._isStriped = true;

[dgozman, 2017/05/22 18:45:27]

Please add a test for this functionality, e.g. dump it in data-grid.html test.

   }
 
   /**
@@ -1656,8 +1657,10 @@ DataGrid.DataGridNode = class extends Common.Object {
       current = current.traverseNextNode(false, child, true);
     }
 
-    if (this.expanded)
+    if (this.expanded) {
       child._attach();
+      this.updateStripesBelowThisNode();
+    }
     if (!this.revealed)
       child.revealed = false;
   }
@@ -1685,6 +1688,7 @@ DataGrid.DataGridNode = class extends Common.Object {
 
     if (this.children.length <= 0)
       this.setHasChildren(false);
+    this.updateStripesBelowThisNode();
   }
 
   removeChildren() {
@@ -1698,6 +1702,7 @@ DataGrid.DataGridNode = class extends Common.Object {
 
     this.children = [];
     this.setHasChildren(false);
+    this.updateStripesBelowThisNode();
   }
 
   /**
@@ -1769,6 +1774,7 @@ DataGrid.DataGridNode = class extends Common.Object {
       }
 
       this._shouldRefreshChildren = false;
+      this.updateStripesBelowThisNode();
     }
 
     if (this._element)
@@ -1954,6 +1960,17 @@ DataGrid.DataGridNode = class extends Common.Object {
       this.children[i]._detach();
   }
 
+  updateStripesBelowThisNode() {
+    function next(node) {

[alph, 2017/05/22 19:11:46]

annotate plz

+      return node.traverseNextNode(true, null, false);

[allada, 2017/05/22 19:10:29]

Can we inline this?

+    }
+    var isStriped = this.isStriped();
+    for (var sibling = next(this); sibling; sibling = next(sibling)) {
+      isStriped = !isStriped;
+      sibling.setStriped(isStriped);
+    }
+  }
+
   savePosition() {
     if (this._savedPosition)
       return;
@@ -1972,6 +1989,21 @@ DataGrid.DataGridNode = class extends Common.Object {
 
     this._savedPosition = null;
   }
+
+  /**
+   * @param {boolean} isStriped
+   */
+  setStriped(isStriped) {
+    this._isStriped = isStriped;
+    this.element().classList.toggle('data-grid-odd-row', isStriped);

[allada, 2017/05/22 19:10:29]

Can we try something like this instead, so we don't force a node creation when
it may never be inserted into the dom:

if (this._element)
  this._element.classList.toggle('data-grid-odd-row', isStriped);

+  }
+
+  /**
+   * @return {boolean}
+   */
+  isStriped() {
+    return this._isStriped;
+  }
 };
 
 /**