DevTools: Show GPU utilization bar on timeline

Source/devtools/front_end/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 503 matching lines @@
 .sidebar-tree-item .timeline-frame-overview-status-bar-item {
     position: absolute;
     right: 10px;
     top: 4px;
 }
 
 .timeline-frame-container {
     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;
     pointer-events: auto;
 }
 
 .timeline-frame-strip {
     position: absolute;
     height: 19px;
 }
 
 #timeline-grid-header {
     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;
-    z-index: 350;
-    width: 100%;
-    overflow: hidden;
+    padding: 1px 0;
 }
 
-.timeline-cpu-bars .timeline-graph-bar {
+.timeline-utilization-strip {
+    z-index: 350;
+    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-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;
     top: 0;
     height: 100%;
 }
 
 .timeline-cpu-curtain-left {
     left: 0;
 }
@@ skipping 30 matching lines @@
 
 @-webkit-keyframes timeline_record_highlight {
     from {background-color: rgba(255, 255, 120, 1); }
     to { background-color: rgba(255, 255, 120, 0); }
 }
 
 .timeline-filters-header {
     flex: 0 0 23px;
     overflow: hidden;
 }