DevTools: Tweak timeline tree view bars

Source/devtools/front_end/timeline/timelinePanel.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 1021 matching lines @@
     border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .timeline-tree-view .data-grid .name-container .activity-link {
     flex: auto;
     text-align: right;
     overflow: hidden;
     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;
 }