DevTools: Show GPU utilization bar on timeline

Source/devtools/front_end/TimelineOverviewPane.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 49 matching lines @@
     this._overviewItems[WebInspector.TimelineOverviewPane.Mode.Frames] = new WebInspector.SidebarTreeElement("timeline-overview-sidebar-frames",
         WebInspector.UIString("Frames"));
     this._overviewItems[WebInspector.TimelineOverviewPane.Mode.Memory] = new WebInspector.SidebarTreeElement("timeline-overview-sidebar-memory",
         WebInspector.UIString("Memory"));
 
     for (var mode in this._overviewItems) {
         var item = this._overviewItems[mode];
         item.onselect = this.setMode.bind(this, mode);
         topPaneSidebarTree.appendChild(item);
     }
-    
+
     this._overviewGrid = new WebInspector.OverviewGrid("timeline");
     this.element.appendChild(this._overviewGrid.element);
 
     this._innerSetMode(WebInspector.TimelineOverviewPane.Mode.Events);
 
     var categories = WebInspector.TimelinePresentationModel.categories();
     for (var category in categories)
         categories[category].addEventListener(WebInspector.TimelineCategory.Events.VisibilityChanged, this._onCategoryVisibilityChanged, this);
 
     this._overviewCalculator = new WebInspector.TimelineOverviewCalculator();
@@ skipping 463 matching lines @@
     for (var category in categories)
         this._fillStyles[category] = WebInspector.TimelinePresentationModel.createFillStyleForCategory(this._context, 0, WebInspector.TimelineEventOverview._stripGradientHeight, categories[category]);
 
     this._disabledCategoryFillStyle = WebInspector.TimelinePresentationModel.createFillStyle(this._context, 0, WebInspector.TimelineEventOverview._stripGradientHeight,
         "rgb(218, 218, 218)", "rgb(170, 170, 170)", "rgb(143, 143, 143)");
 
     this._disabledCategoryBorderStyle = "rgb(143, 143, 143)";
 }
 
 /** @const */
-WebInspector.TimelineEventOverview._numberOfStrips = 3;
-
-/** @const */
 WebInspector.TimelineEventOverview._stripGradientHeight = 120;
 
 WebInspector.TimelineEventOverview.prototype = {
     update: function()
     {
         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;
 
         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)
         {
             if (record.type === WebInspector.TimelineModel.RecordType.BeginFrame)
                 return;
             var recordStart = Math.floor((WebInspector.TimelineModel.startTimeInSeconds(record) - timeOffset) * scale);
             var recordEnd = Math.ceil((WebInspector.TimelineModel.endTimeInSeconds(record) - timeOffset) * scale);
             var category = WebInspector.TimelinePresentationModel.categoryForRecord(record);
             if (category.overviewStripGroupIndex < 0)
@@ skipping 23 matching lines @@
     },
 
     /**
      * @param {number} begin
      * @param {number} end
      * @param {number} height
      * @param {WebInspector.TimelineCategory} category
      */
     _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;
         var y = category.overviewStripGroupIndex * height + stripPadding + 0.5;
         var width = Math.max(end - begin, 1);
 
         this._context.save();
         this._context.translate(x, y);
         this._context.scale(1, innerStripHeight / WebInspector.TimelineEventOverview._stripGradientHeight);
         this._context.fillStyle = category.hidden ? this._disabledCategoryFillStyle : this._fillStyles[category.name];
@@ skipping 209 matching lines @@
             this._context.fillRect(0, y, this._maxInnerBarWidth, Math.floor(height));
             this._context.strokeStyle = WebInspector.TimelinePresentationModel.categories()[category].borderColor;
             this._context.beginPath();
             this._context.moveTo(0, y);
             this._context.lineTo(this._maxInnerBarWidth, y);
             this._context.stroke();
             this._context.restore();
 
             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;
 
         this._context.strokeStyle = "rgba(90, 90, 90, 0.3)";
         this._context.beginPath();
         this._context.moveTo(x, y1);
         this._context.lineTo(x, y0);
         this._context.lineTo(x + width, y0);
         this._context.lineTo(x + width, y1);
@@ skipping 95 matching lines @@
 WebInspector.TimelineWindowFilter.prototype = {
     /**
      * @param {!WebInspector.TimelinePresentationModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return record.lastChildEndTime >= this._pane._windowStartTime && record.startTime <= this._pane._windowEndTime;
     }
 }