DevTools: Smooth CPU utilization overview chart on timeline

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 294 matching lines @@
         this._backgroundCanvas.height = this.element.clientHeight * window.devicePixelRatio;
     },
 
     /**
      * @override
      */
     update: function()
     {
         WebInspector.TimelineEventOverview.prototype.update.call(this);
         var /** @const */ quantSizePx = 4 * window.devicePixelRatio;
+        var width = this._canvas.width;
         var height = this._canvas.height;
         var baseLine = height;
         var timeOffset = this._model.minimumRecordTime();
         var timeSpan = this._model.maximumRecordTime() - timeOffset;
-        var scale = this._canvas.width / timeSpan;
+        var scale = width / timeSpan;
         var quantTime = quantSizePx / scale;
         var categories = WebInspector.TimelineUIUtils.categories();
         var categoryOrder = ["idle", "loading", "painting", "rendering", "scripting", "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;
 
         for (var thread of this._model.virtualThreads())
             drawThreadEvents.call(this, this._backgroundCanvas.getContext("2d"), thread.events);
         drawThreadEvents.call(this, this._context, this._model.mainThreadEvents());
 
         /**
          * @param {!CanvasRenderingContext2D} ctx
          * @param {!Array<!WebInspector.TracingModel.Event>} events
          * @this {WebInspector.TimelineEventOverview}
          */
         function drawThreadEvents(ctx, events)
         {
-            var quantizer = new WebInspector.Quantizer(timeOffset, quantTime, drawSample.bind(this));
+            var quantizer = new WebInspector.Quantizer(timeOffset, quantTime, drawSample);
             var x = 0;
             var categoryIndexStack = [];
+            var paths = [];
+            var lastY = [];
+            for (var i = 0; i < categoryOrder.length; ++i) {
+                paths[i] = new Path2D();
+                paths[i].moveTo(-1, height + 1);

[caseq, 2015/08/25 21:35:56]

0, height?

[alph, 2015/08/25 21:36:48]

Done.

+                lastY[i] = height;
+            }
 
             /**
              * @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;
-                    var h = counters[i] / quantTime * height;
-                    ctx.fillStyle = this._categoryColor(categories[categoryOrder[i]]);
-                    ctx.fillRect(x, y - h, quantSizePx, h);
+                for (var i = idleIndex + 1; i < categoryOrder.length; ++i) {
+                    var h = (counters[i] || 0) / quantTime * height;
                     y -= h;
+                    paths[i].bezierCurveTo(x, lastY[i], x, y, x + quantSizePx / 2, y);
+                    lastY[i] = y;
                 }
                 x += quantSizePx;
             }
 
             /**
              * @param {!WebInspector.TracingModel.Event} e
              */
             function onEventStart(e)
             {
                 var index = categoryIndexStack.length ? categoryIndexStack.peekLast() : idleIndex;
                 quantizer.appendInterval(e.startTime, index);
                 categoryIndexStack.push(WebInspector.TimelineUIUtils.eventStyle(e).category._overviewIndex || otherIndex);
             }
 
             /**
              * @param {!WebInspector.TracingModel.Event} e
              */
             function onEventEnd(e)
             {
                 quantizer.appendInterval(e.endTime, categoryIndexStack.pop());
             }
 
             WebInspector.TimelineModel.forEachEvent(events, onEventStart, onEventEnd);
             quantizer.appendInterval(timeOffset + timeSpan + quantTime, idleIndex);  // Kick drawing the last bucket.
+            for (var i = categoryOrder.length - 1; i > 0; --i) {
+                paths[i].lineTo(width + 1, height + 1);
+                ctx.fillStyle = this._categoryColor(categories[categoryOrder[i]]);
+                ctx.fill(paths[i]);
+            }
         }
     },
 
     __proto__: WebInspector.TimelineEventOverview.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
  * @param {!WebInspector.TimelineModel} model
@@ skipping 459 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;
     }
 }