From 7bff6c515da93b6bea8f70c52cee79849f947f93 Mon Sep 17 00:00:00 2001
From: Julian Descottes <jdescottes@mozilla.com>
Date: Tue, 19 Jan 2016 01:44:44 +0100
Subject: [PATCH] Bug 1239673 - memorytable: set tree-node-odd from JS.
 r=vporof

Only visible table rows are rendered, therefore we
cannot rely on :nth-child(2) to create background stripes.

This commit adds the source index to the treeNode props.
Using this index, the treeNode can add a "tree-node-odd"
className to its element.

In css, tree-node-odd is then used to add the alternate
background color to a row,

--HG--
extra : rebase_source : 9ce30781c0e7a2197486a7e0271283f87fc8dff5
---
 devtools/client/shared/components/tree.js | 4 +++-
 devtools/client/themes/memory.css         | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/devtools/client/shared/components/tree.js b/devtools/client/shared/components/tree.js
index 58f9a565d335..8d714a61e8f5 100644
--- a/devtools/client/shared/components/tree.js
+++ b/devtools/client/shared/components/tree.js
@@ -64,9 +64,10 @@ const TreeNode = createFactory(createClass({
       onCollapse: this.props.onCollapse
     });
 
+    let isOddRow = this.props.index % 2;
     return dom.div(
       {
-        className: "tree-node div",
+        className: `tree-node div ${isOddRow ? "tree-node-odd" : ""}`,
         onFocus: this.props.onFocus,
         onClick: this.props.onFocus,
         onBlur: this.props.onBlur,
@@ -251,6 +252,7 @@ const Tree = module.exports = createClass({
       let { item, depth } = toRender[i];
       nodes.push(TreeNode({
         key: this.props.getKey(item),
+        index: begin + i,
         item: item,
         depth: depth,
         renderItem: this.props.renderItem,
diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css
index 76c2f8853a03..55e2d89af284 100644
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -332,7 +332,7 @@ html, body, #app, #memory-tool {
   display: flex;
 }
 
-.tree-node:nth-child(2n) {
+.tree-node-odd {
   background-color: var(--row-alt-background-color);
 }