DevTools: Show GPU utilization bar on timeline

Source/devtools/front_end/TimelineOverviewPane.js

Index: Source/devtools/front_end/TimelineOverviewPane.js
diff --git a/Source/devtools/front_end/TimelineOverviewPane.js b/Source/devtools/front_end/TimelineOverviewPane.js
index fd9c6e8e51d534750a4de8bba4de194203985dd8..2b2257b9b3e78102f8d742d7853384b5b2080ed2 100644
--- a/Source/devtools/front_end/TimelineOverviewPane.js
+++ b/Source/devtools/front_end/TimelineOverviewPane.js
@@ -67,7 +67,7 @@ WebInspector.TimelineOverviewPane = function(model)
         item.onselect = this.setMode.bind(this, mode);
         topPaneSidebarTree.appendChild(item);
     }
-    
+
     this._overviewGrid = new WebInspector.OverviewGrid("timeline");
     this.element.appendChild(this._overviewGrid.element);
 
@@ -551,9 +551,6 @@ WebInspector.TimelineEventOverview = function(model)
 }
 
 /** @const */
-WebInspector.TimelineEventOverview._numberOfStrips = 3;
-
-/** @const */
 WebInspector.TimelineEventOverview._stripGradientHeight = 120;
 
 WebInspector.TimelineEventOverview.prototype = {
@@ -561,7 +558,13 @@ WebInspector.TimelineEventOverview.prototype = {
     {
         this._resetCanvas();
 
-        var stripHeight = Math.round(this._canvas.height  / WebInspector.TimelineEventOverview._numberOfStrips);
+        var numberOfStrips = 0;
+        var categories = WebInspector.TimelinePresentationModel.categories();
+        for (var category in categories)
+            numberOfStrips = Math.max(numberOfStrips, categories[category].overviewStripGroupIndex);
+        ++numberOfStrips;

[yurys, 2013/10/31 15:06:52]

Sounds like unrelated change.

[alph, 2013/10/31 16:58:00]

Reverted.

+
+        var stripHeight = Math.round(this._canvas.height / numberOfStrips);
         var timeOffset = this._model.minimumRecordTime();
         var timeSpan = this._model.maximumRecordTime() - timeOffset;
         var scale = this._canvas.width / timeSpan;
@@ -569,7 +572,7 @@ WebInspector.TimelineEventOverview.prototype = {
         var lastBarByGroup = [];
 
         this._context.fillStyle = "rgba(0, 0, 0, 0.05)";
-        for (var i = 1; i < WebInspector.TimelineEventOverview._numberOfStrips; i += 2)
+        for (var i = 1; i < numberOfStrips; i += 2)
             this._context.fillRect(0.5, i * stripHeight + 0.5, this._canvas.width, stripHeight);
 
         function appendRecord(record)
@@ -613,7 +616,7 @@ WebInspector.TimelineEventOverview.prototype = {
      */
     _renderBar: function(begin, end, height, category)
     {
-        const stripPadding = 4 * window.devicePixelRatio;
+        const stripPadding = 3 * window.devicePixelRatio;
         const innerStripHeight = height - 2 * stripPadding;
 
         var x = begin + 0.5;
@@ -843,6 +846,7 @@ WebInspector.TimelineFrameOverview.prototype = {
 
             bottomOffset -= height - 1;
         }
+
         // Draw a contour for the total frame time.
         var y0 = Math.floor(this._canvas.height - frame.duration * scale) + 0.5;
         var y1 = this._canvas.height + 0.5;