DevTools: Show GPU utilization bar on timeline

Source/devtools/front_end/timelinePanel.css

Index: Source/devtools/front_end/timelinePanel.css
diff --git a/Source/devtools/front_end/timelinePanel.css b/Source/devtools/front_end/timelinePanel.css
index a8c987122d22d8e0cfd041fd1d03348f93d779eb..8b9442cdb850b506cf1567131e531d3f09bc542d 100644
--- a/Source/devtools/front_end/timelinePanel.css
+++ b/Source/devtools/front_end/timelinePanel.css
@@ -521,8 +521,8 @@
     height: 19px;
     overflow: hidden;
     background-color: rgb(220, 220, 220);
-    opacity: 0.6;
-    color: #222;
+    opacity: 0.8;
+    color: black;
     text-align: center;
     padding-top: 3px;
     z-index: 350;
@@ -538,23 +538,33 @@
     pointer-events: none;
 }
 
-.timeline-cpu-bars {
-    position: absolute;
-    top: 0;
+.timeline-utilization-strips {
+    display: flex;
+    flex-flow: column nowrap;

[caseq, 2013/11/05 14:26:58]

consider using .vbox

[alph, 2013/11/05 14:59:16]

Done.

     height: 19px;
+    padding: 1px 0;
+}
+
+.timeline-utilization-strip {
     z-index: 350;
-    width: 100%;
     overflow: hidden;
+    flex: 1 1 auto;

[caseq, 2013/11/05 14:26:58]

flex: auto;

[alph, 2013/11/05 14:59:16]

Done.

+    position: relative;
 }
 
-.timeline-cpu-bars .timeline-graph-bar {
+.timeline-utilization-strip .timeline-graph-bar {
     border-color: rgb(192, 192, 192);
     background-color: rgba(0, 0, 0, 0.1);
-    top: 4px;
-    bottom: 4px;
+    top: 1px;

[caseq, 2013/11/05 14:26:58]

can we use margins instead?

[alph, 2013/11/05 14:59:16]

Done.

+    bottom: 1px;
     height: auto;
 }
 
+.timeline-utilization-strip.gpu .timeline-graph-bar {
+    background-color: red;
+    border: none;
+}
+
 .timeline-cpu-curtain-left, .timeline-cpu-curtain-right {
     background-color: rgba(0, 0, 0, 0.15);
     position: absolute;