Changeset 156675 in webkit

Timestamp:

Sep 30, 2013 1:10:14 PM (11 years ago)

Author:

Antoine Quint

Message:

Web Inspector: rows in the Layer sidebar panel may have the incorrect background color
​https://bugs.webkit.org/show_bug.cgi?id=122108

Reviewed by Darin Adler.

The LayerTreeDataGrid is a custom DataGrid subclass which exposes a .setChildren() method
used to sort chidren without DOM order manipulation, for performance reason. However, since
the way the alternating background color is usually implemented is based on the built-in
CSS pseudo-classes working with DOM order, the background colors of nodes in the LayerTreeDataGrid
can be incorrect depending on the sort order and the number of nodes. To fix this, we now manually
set "even" and "odd" CSS classes on those nodes when they're sorted such that we have a chance
to style them as intended.

• UserInterface/LayerTreeDataGrid.js:

(WebInspector.LayerTreeDataGrid.prototype._updateChildren):
Check if the data grid node index is even or odd and reflect this via an exclusive "even"
or "odd" CSS class name.

• UserInterface/LayerTreeSidebarPanel.css:

(.layer-tree.panel .data-container tbody > tr.even):
(.layer-tree.panel .data-container tbody > tr.odd):
Apply alternating colors based on the exclusive "even" and "odd" CSS class names as applied in
WebInspector.LayerTreeDataGrid.prototype._updateChildren().

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/LayerTreeDataGrid.js (modified) (1 diff)
• UserInterface/LayerTreeSidebarPanel.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2013-09-30  Antoine Quint  <graouts@apple.com>
+
+        Web Inspector: rows in the Layer sidebar panel may have the incorrect background color
+        https://bugs.webkit.org/show_bug.cgi?id=122108
+
+        Reviewed by Darin Adler.
+
+        The LayerTreeDataGrid is a custom DataGrid subclass which exposes a .setChildren() method
+        used to sort chidren without DOM order manipulation, for performance reason. However, since
+        the way the alternating background color is usually implemented is based on the built-in
+        CSS pseudo-classes working with DOM order, the background colors of nodes in the LayerTreeDataGrid
+        can be incorrect depending on the sort order and the number of nodes. To fix this, we now manually
+        set "even" and "odd" CSS classes on those nodes when they're sorted such that we have a chance
+        to style them as intended. 
+
+        * UserInterface/LayerTreeDataGrid.js:
+        (WebInspector.LayerTreeDataGrid.prototype._updateChildren):
+        Check if the data grid node index is even or odd and reflect this via an exclusive "even"
+        or "odd" CSS class name.
+
+        * UserInterface/LayerTreeSidebarPanel.css:
+        (.layer-tree.panel .data-container tbody > tr.even):
+        (.layer-tree.panel .data-container tbody > tr.odd):
+        Apply alternating colors based on the exclusive "even" and "odd" CSS class names as applied in
+        WebInspector.LayerTreeDataGrid.prototype._updateChildren().
+
 2013-09-30  Antoine Quint  <graouts@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js

@@ -93 +93 @@
             var ty = (i - child._domIndex) * 100;
             child.element.style.webkitTransform = "translateY(" + ty + "%)";
+
+            // Since the DOM order won't necessarily match the visual order of the
+            // children in the data grid we manually set "even" and "odd" and CSS
+            // class names on the data grid nodes so that they may be styled with
+            // a different mechanism than the built-in CSS pseudo-classes.
+            var classList = child.element.classList;
+            if (i % 2) {
+                classList.remove("odd");
+                classList.add("even");
+            } else {
+                classList.remove("even");
+                classList.add("odd");
+            }
         }
 

trunk/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css

@@ -167 +167 @@
 }
 
+.layer-tree.panel .data-container tbody > tr.even {
+    background-color: white;
+}
+
+.layer-tree.panel .data-container tbody > tr.odd {
+    background-color: rgb(243, 246, 250);
+}
+
 /* Bottom bar */