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,

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,

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);
 }