Bug 1239673 - memorytable: set tree-node-odd from JS. r=vporof
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 19 Jan 2016 01:44:44 +0100
changeset 281361 1cf358aab01b00bd6e04c492c1a604548063ea19
parent 281360 f1573412a4adaa48a1b955a0ecf4f2908381374c
child 281362 673d16803c0c9caf3a3d2012c7b0cbe74a356b80
push id29935
push userphilringnalda@gmail.com
push dateSun, 24 Jan 2016 02:12:02 +0000
treeherdermozilla-central@a2e81822194a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs1239673
milestone46.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/themes/memory.css
--- a/devtools/client/shared/components/tree.js
+++ b/devtools/client/shared/components/tree.js
@@ -59,19 +59,20 @@ const TreeNode = createFactory(createCla
     const arrow = ArrowExpander({
       item: this.props.item,
       expanded: this.props.expanded,
       visible: this.props.hasChildren,
       onExpand: this.props.onExpand,
       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,
         style: {
           padding: 0,
           margin: 0
         }
       },
@@ -246,16 +247,17 @@ const Tree = module.exports = createClas
         }
       })
     ];
 
     for (let i = 0; i < toRender.length; i++) {
       let { item, depth } = toRender[i];
       nodes.push(TreeNode({
         key: this.props.getKey(item),
+        index: begin + i,
         item: item,
         depth: depth,
         renderItem: this.props.renderItem,
         focused: this.props.focused === item,
         expanded: this.props.isExpanded(item),
         hasChildren: !!this.props.getChildren(item).length,
         onExpand: this._onExpand,
         onCollapse: this._onCollapse,
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -327,17 +327,17 @@ html, body, #app, #memory-tool {
   /**
    * Flex: contains several span columns, all of which need to be laid out
    * horizontally. All columns except the last one have percentage widths, and
    * the last one needs to flex to fill out all remaining horizontal space.
    */
   display: flex;
 }
 
-.tree-node:nth-child(2n) {
+.tree-node-odd {
   background-color: var(--row-alt-background-color);
 }
 
 .tree-node:hover {
   background-color: var(--row-hover-background-color);
 }
 
 .heap-tree-item.focused {