Commit c24920f7 authored by graouts@apple.com's avatar 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().


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@156675 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent edaf7841
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>
Web Inspector: Popover displaying "reasons for compositing" may remain on screen after selected layer is removed
......
......@@ -92,6 +92,19 @@ WebInspector.LayerTreeDataGrid.prototype = {
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;
......
......@@ -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 {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment