DevTools: Show frame rate on timeline events overview.

Source/devtools/front_end/timeline/TimelineEventOverview.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 14 matching lines @@
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineOverviewBase}
  * @param {!WebInspector.TimelineModel} model
+ * @param {!WebInspector.TimelineFrameModelBase} frameModel
  */
-WebInspector.TimelineEventOverview = function(model)
+WebInspector.TimelineEventOverview = function(model, frameModel)
 {
     WebInspector.TimelineOverviewBase.call(this, model);
     this.element.id = "timeline-overview-events";
+    this._frameModel = frameModel;
 
     this._fillStyles = {};
     var categories = WebInspector.TimelineUIUtils.categories();
     for (var category in categories) {
         this._fillStyles[category] = categories[category].fillColorStop1;
         categories[category].addEventListener(WebInspector.TimelineCategory.Events.VisibilityChanged, this._onCategoryVisibilityChanged, this);
     }
 
     this._disabledCategoryFillStyle = "hsl(0, 0%, 67%)";
 }
 
 /** @const */
-WebInspector.TimelineEventOverview._mainStripHeight = 16;
+WebInspector.TimelineEventOverview._fullStripHeight = 16;
 /** @const */
 WebInspector.TimelineEventOverview._smallStripHeight = 8;
 
 WebInspector.TimelineEventOverview.prototype = {
     /**
      * @override
      */
     dispose: function()
     {
         WebInspector.TimelineOverviewBase.prototype.dispose.call(this);
         var categories = WebInspector.TimelineUIUtils.categories();
         for (var category in categories)
             categories[category].removeEventListener(WebInspector.TimelineCategory.Events.VisibilityChanged, this._onCategoryVisibilityChanged, this);
     },
 
     /**
      * @override
      */
     update: function()
     {
         this.resetCanvas();
         var threads = this._model.virtualThreads();
         var mainThreadEvents = this._model.mainThreadEvents();
         var networkHeight = this._canvas.clientHeight
-            - WebInspector.TimelineEventOverview._mainStripHeight
+            - WebInspector.TimelineEventOverview._fullStripHeight
             - 2 * WebInspector.TimelineEventOverview._smallStripHeight;
         var position = 0;
         if (Runtime.experiments.isEnabled("inputEventsOnTimelineOverview")) {
             var inputHeight = this._drawInputEvents(mainThreadEvents, position, WebInspector.TimelineEventOverview._smallStripHeight);
             position += inputHeight;
             networkHeight -= inputHeight;
         }
+        if (Runtime.experiments.isEnabled("frameRateOnEventsOverview"))
+            networkHeight -= WebInspector.TimelineEventOverview._fullStripHeight;
         position += this._drawNetwork(mainThreadEvents, position, networkHeight);
-        position += this._drawEvents(mainThreadEvents, position, WebInspector.TimelineEventOverview._mainStripHeight);
+        if (Runtime.experiments.isEnabled("frameRateOnEventsOverview"))
+            position += this._drawFrames(position, WebInspector.TimelineEventOverview._fullStripHeight);
+        position += this._drawEvents(mainThreadEvents, position, WebInspector.TimelineEventOverview._fullStripHeight);
         for (var thread of threads.filter(function(thread) { return !thread.isWorker(); }))
             this._drawEvents(thread.events, position, WebInspector.TimelineEventOverview._smallStripHeight);
         position += WebInspector.TimelineEventOverview._smallStripHeight;
         for (var thread of threads.filter(function(thread) { return thread.isWorker(); }))
             this._drawEvents(thread.events, position, WebInspector.TimelineEventOverview._smallStripHeight);
         position += WebInspector.TimelineEventOverview._smallStripHeight;
         console.assert(position === this._canvas.clientHeight);
     },
 
     /**
@@ skipping 139 matching lines @@
             var bar = ditherer.appendInterval(category, lastX, pos);
             if (bar)
                 this._renderBar(bar.start, bar.end, position, visualHeight, categoryColor.call(this, category));
             lastX = pos;
         }
 
         WebInspector.TimelineModel.forEachEvent(events, onEventStart.bind(this), onEventEnd.bind(this));
         return stripHeight;
     },
 
+    /**
+     * @param {number} position
+     * @param {number} height
+     * @return {number}
+     */
+    _drawFrames: function(position, height)
+    {
+        var /** @const */ padding = 2;
+        var /** @const */ baseFrameDurationMs = 1e3 / 60;
+        var visualHeight = (height - padding) * window.devicePixelRatio;
+        var timeOffset = this._model.minimumRecordTime();
+        var timeSpan = this._model.maximumRecordTime() - timeOffset;
+        var scale = this._canvas.width / timeSpan;
+        var frames = this._frameModel.frames();
+        var baseY = (position + height) * window.devicePixelRatio;
+        var y = baseY + 10;
+        var ctx = this._context;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, position * window.devicePixelRatio, this._canvas.width, height * window.devicePixelRatio);
+        ctx.clip();
+        ctx.beginPath();
+        ctx.lineWidth = 1 * window.devicePixelRatio;
+        ctx.strokeStyle = "hsl(110, 50%, 60%)";
+        ctx.fillStyle = "hsl(110, 50%, 70%)";
+        ctx.moveTo(0, y);
+        for (var i = 0; i < frames.length; ++i) {
+            var frame = frames[i];
+            var x = 0.5 + Math.round((frame.startTime - timeOffset) * scale);
+            ctx.lineTo(x, y);
+            y = 0.5 + Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1));

[yurys, 2015/06/05 08:26:28]

Can it happen that we have >60fps and the bar would be too high?

[alph, 2015/06/05 08:54:23]

That's why there's a Math.min

+            ctx.lineTo(x, y);
+        }
+        ctx.lineTo(this._canvas.width, y);
+        ctx.lineTo(this._canvas.width, baseY + 10);
+        ctx.closePath();
+        ctx.stroke();
+        ctx.fill();
+        ctx.restore();
+        return height;
+    },
+
     _onCategoryVisibilityChanged: function()
     {
         this.update();
     },
 
     /**
      * @param {number} begin
      * @param {number} end
      * @param {number} position
      * @param {number} height
@@ skipping 81 matching lines @@
         for (var g of this._groupError.keys()) {
             if (!g)
                 continue;
             var value = this._groupError.get(g);
             value += (1 - value) * ratio;
             this._groupError.set(g, value);
         }
         return toDistribute;
     }
 }