DevTools: Tweak timeline tree view bars

Source/devtools/front_end/timeline/timelinePanel.css

Index: Source/devtools/front_end/timeline/timelinePanel.css
diff --git a/Source/devtools/front_end/timeline/timelinePanel.css b/Source/devtools/front_end/timeline/timelinePanel.css
index cc3e8381aa1e0dc87ff763790d9a6e60bab97dce..b3eb40056247493232054bc2c87149f8d77db059 100644
--- a/Source/devtools/front_end/timeline/timelinePanel.css
+++ b/Source/devtools/front_end/timeline/timelinePanel.css
@@ -1039,16 +1039,20 @@
     text-overflow: ellipsis;
 }
 
+.timeline-tree-view .data-grid .background-bar-container {
+    position: absolute;
+    left: 3px;
+    right: 0;
+}
+
 .timeline-tree-view .data-grid .background-bar {
+    float: right;

[paulirish, 2015/09/10 00:11:43]

The render times will be much faster if we do this with abs pos instead of
floats.

[alph, 2015/09/10 17:37:09]

Bars were shown 2px less than they are. So if a bar was less than 2px it was not
visible.

     height: 15px;
-    background-color: hsla(0, 100%, 74%, 0.1);
-    position: absolute;
-    right: -2px;
-    bottom: 0px;
-    border-bottom: 1px solid hsl(0, 100%, 74%);
+    background-color: hsla(43, 84%, 64%, 0.2);
+    border-bottom: 1px solid hsl(43, 84%, 64%);
 }
 
 .timeline-tree-view .data-grid .selected .background-bar {
-    background-color: rgba(255,255,255,0.25);
+    background-color: rgba(255, 255, 255, 0.25);
     border-bottom-color: transparent;
 }