Title: [156675] trunk/Source/WebInspectorUI
- Revision
- 156675
- Author
- grao...@apple.com
- Date
- 2013-09-30 13:10:14 -0700 (Mon, 30 Sep 2013)
Log 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().
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (156674 => 156675)
--- trunk/Source/WebInspectorUI/ChangeLog 2013-09-30 20:07:35 UTC (rev 156674)
+++ trunk/Source/WebInspectorUI/ChangeLog 2013-09-30 20:10:14 UTC (rev 156675)
@@ -1,5 +1,31 @@
2013-09-30 Antoine Quint <grao...@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 <grao...@apple.com>
+
Web Inspector: Popover displaying "reasons for compositing" may remain on screen after selected layer is removed
https://bugs.webkit.org/show_bug.cgi?id=117575
Modified: trunk/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js (156674 => 156675)
--- trunk/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js 2013-09-30 20:07:35 UTC (rev 156674)
+++ trunk/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js 2013-09-30 20:10:14 UTC (rev 156675)
@@ -92,6 +92,19 @@
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");
+ }
}
this.hasChildren = this.children.length > 0;
Modified: trunk/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css (156674 => 156675)
--- trunk/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css 2013-09-30 20:07:35 UTC (rev 156674)
+++ trunk/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css 2013-09-30 20:10:14 UTC (rev 156675)
@@ -166,6 +166,14 @@
display: block;
}
+.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 */
.layer-tree.panel .bottom-bar {
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
