DevTools: Add responsiveness strip to the timeline 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 34 matching lines @@
     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._fullStripHeight = 20;
+WebInspector.TimelineEventOverview._fullStripHeight = 24;
 /** @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()
     {
+        var /** @const */ fpsStripHeight = 20;
         this.resetCanvas();
         var threads = this._model.virtualThreads();
         var mainThreadEvents = this._model.mainThreadEvents();
         var networkHeight = this._canvas.clientHeight
             - 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;
+        if (Runtime.experiments.isEnabled("frameRateOnEventsOverview")) {

[caseq, 2015/06/17 12:56:13]

nit: nuke { }

[alph, 2015/06/17 13:22:00]

Done.

+            networkHeight -= fpsStripHeight + WebInspector.TimelineEventOverview._smallStripHeight;
+        }
         position += this._drawNetwork(mainThreadEvents, position, networkHeight);
         position += this._drawStackedUtilizationChart(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;
-        if (Runtime.experiments.isEnabled("frameRateOnEventsOverview"))
-            position += this._drawFrames(position, WebInspector.TimelineEventOverview._fullStripHeight);
+        if (Runtime.experiments.isEnabled("frameRateOnEventsOverview")) {
+            position += this._drawResponsivenessStrip(position, WebInspector.TimelineEventOverview._smallStripHeight);

[caseq, 2015/06/17 12:56:12]

Does the height of drawn strip ever vary?

[alph, 2015/06/17 13:22:00]

No, but this way the call site code is simpler. So I'd like to keep it this way
unless you object.

+            position += this._drawFrames(position, fpsStripHeight);

[caseq, 2015/06/17 12:56:13]

ditto.

[alph, 2015/06/17 13:22:00]

ditto.

+        }
         console.assert(position === this._canvas.clientHeight);
     },
 
     /**
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      * @param {number} position
      * @param {number} height
      * @return {number}
      */
     _drawInputEvents: function(events, position, height)
@@ skipping 78 matching lines @@
     },
 
     /**
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      * @param {number} position
      * @param {number} height
      * @return {number}
      */
     _drawStackedUtilizationChart: function(events, position, height)
     {
+        if (!events.length)
+            return height;
         var /** @const */ quantSizePx = 4 * window.devicePixelRatio;
         var /** @const */ padding = 1;
         var visualHeight = (height - padding) * window.devicePixelRatio;
         var baseLine = (position + height) * window.devicePixelRatio;
         var timeOffset = this._model.minimumRecordTime();
         var timeSpan = this._model.maximumRecordTime() - timeOffset;
         var scale = this._canvas.width / timeSpan;
         var quantTime = quantSizePx / scale;
         var quantizer = new WebInspector.Quantizer(timeOffset, quantTime, drawSample.bind(this));
         var ctx = this._context;
         var x = 0;
         var categories = WebInspector.TimelineUIUtils.categories();
         var categoryOrder = ["idle", "scripting", "rendering", "painting", "loading", "other"];
         var otherIndex = categoryOrder.indexOf("other");
         var idleIndex = 0;
         console.assert(idleIndex === categoryOrder.indexOf("idle"));
         for (var i = idleIndex + 1; i < categoryOrder.length; ++i)
             categories[categoryOrder[i]]._overviewIndex = i;
         var categoryIndexStack = [];
 
+        this._drawHorizontalGuide(baseLine - visualHeight + 0.5, WebInspector.UIString("100%"));
+
         /**
          * @param {!Array<number>} counters
          * @this {WebInspector.TimelineEventOverview}
          */
         function drawSample(counters)
         {
             var y = baseLine;
             for (var i = idleIndex + 1; i < counters.length; ++i) {
                 if (!counters[i])
                     continue;
@@ skipping 88 matching lines @@
     _categoryColor: function(category)
     {
         return category.hidden ? this._disabledCategoryFillStyle : this._fillStyles[category.name];
     },
 
     /**
      * @param {number} position
      * @param {number} height
      * @return {number}
      */
+    _drawResponsivenessStrip: function(position, height)
+    {
+        var /** @const */ padding = 1;
+        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 ctx = this._context;
+        ctx.beginPath();
+        var responsivenessStripY = (position + padding) * window.devicePixelRatio;
+        for (var i = 0; i < frames.length; ++i) {
+            var frame = frames[i];
+            if (!frame.hasWarnings())
+                continue;
+            var x = scale * (frame.startTime - timeOffset);
+            var w = scale * frame.duration;
+            ctx.rect(x, responsivenessStripY, w, visualHeight);
+        }
+        ctx.fillStyle = "hsl(0, 80%, 70%)";
+        ctx.fill();
+        return height;
+    },
+
+    /**
+     * @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 baseY = height * window.devicePixelRatio;
+        var ctx = this._context;
         var y = baseY + 10;
-        var ctx = this._context;
+        if (!frames.length)
+            return height;
+
         ctx.save();
+        ctx.translate(0, position * window.devicePixelRatio);
         ctx.beginPath();
-        ctx.rect(0, position * window.devicePixelRatio, this._canvas.width, height * window.devicePixelRatio);
+        ctx.rect(0, 0, this._canvas.width, height * window.devicePixelRatio);
         ctx.clip();
+        ctx.lineWidth = window.devicePixelRatio;
+
+        this._drawHorizontalGuide(baseY - visualHeight - 0.5, WebInspector.UIString("60\u2009fps"));
+
         ctx.beginPath();
-        ctx.lineWidth = 1 * window.devicePixelRatio;
-        ctx.strokeStyle = "hsl(110, 50%, 60%)";
-        ctx.fillStyle = "hsl(110, 50%, 88%)";
         ctx.moveTo(0, y);
         for (var i = 0; i < frames.length; ++i) {
             var frame = frames[i];
             var x = Math.round((frame.startTime - timeOffset) * scale) + 0.5;
             ctx.lineTo(x, y);
             ctx.lineTo(x, y + 1.5);
             y = frame.idle ? baseY + 0.5 : Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1)) - 0.5;
             ctx.lineTo(x, y + 1.5);
             ctx.lineTo(x, y);
         }
         if (frames.length) {
             var lastFrame = frames.peekLast();
             var x = Math.round((lastFrame.startTime + lastFrame.duration - timeOffset) * scale) + 0.5;
             ctx.lineTo(x, y);
         }
         ctx.lineTo(x, baseY + 10);
-        ctx.closePath();
+        ctx.fillStyle = "hsl(110, 50%, 88%)";
+        ctx.strokeStyle = "hsl(110, 50%, 60%)";
         ctx.fill();
         ctx.stroke();
         ctx.restore();
         return height;
     },
 
+    /**
+     * @param {number} y
+     * @param {string} label
+     */
+    _drawHorizontalGuide: function(y, label)
+    {
+        var ctx = this._context;
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(this._canvas.width, y);
+        ctx.strokeStyle = "hsl(0, 0%, 85%)";
+        ctx.setLineDash([3]);
+        ctx.stroke();
+        ctx.fillStyle = "hsl(0, 0%, 65%)";
+        ctx.font = "9px " + WebInspector.fontFamily();
+        ctx.fillText(label, 4, y + 8);
+        ctx.restore();
+    },
+
     _onCategoryVisibilityChanged: function()
     {
         this.update();
     },
 
     /**
      * @param {number} begin
      * @param {number} end
      * @param {number} position
      * @param {number} height
@@ skipping 159 matching lines @@
             counters[group] = this._quantDuration;
             this._callback(counters);
             interval -= this._quantDuration;
         }
         this._counters = [];
         this._counters[group] = interval;
         this._lastTime = time;
         this._remainder = this._quantDuration - interval;
     }
 }