DevTools: Tweak timeline tree view bars

BUG=529956
R=pfeldman

Review URL: https://codereview.chromium.org/1315643009

git-svn-id: svn://svn.chromium.org/blink/trunk@202017 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js

@@ -433,7 +433,8 @@ WebInspector.TimelineTreeView.GridNode.prototype = {
             textDiv.createChild("span", "percent-column").textContent = this.data[percentColumn];
             textDiv.classList.add("profile-multiple-values");
         }
-        cell.createChild("div", "background-bar").style.width = (this._profileNode[columnIdentifier + "Time"] * 100 / this._maxTimes[columnIdentifier]).toFixed(1) + "%";
+        var bar = cell.createChild("div", "background-bar-container").createChild("div", "background-bar");
+        bar.style.width = (this._profileNode[columnIdentifier + "Time"] * 100 / this._maxTimes[columnIdentifier]).toFixed(1) + "%";
         return cell;
     },
 

third_party/WebKit/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;
     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;
 }