DevTools: [timeline] Include other thread costs in 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 236 matching lines @@
             path["transfer"].rect(r - tickWidth / 2, y, tickWidth, bandHeight - 1);
         }
     },
 
     __proto__: WebInspector.TimelineEventOverview.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
- * @param {string} id
- * @param {string} title
  * @param {!WebInspector.TimelineModel} model
  */
-WebInspector.TimelineEventOverview.Thread = function(id, title, model)
+WebInspector.TimelineEventOverview.CPUActivity = function(model)
 {
-    WebInspector.TimelineEventOverview.call(this, id, title, model)
+    WebInspector.TimelineEventOverview.call(this, "cpu-activity", WebInspector.UIString("CPU"), model);
     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%)";
+    this._backgroundCanvas = this.element.createChild("canvas", "fill background");
 }
 
-WebInspector.TimelineEventOverview.Thread.prototype = {
+WebInspector.TimelineEventOverview.CPUActivity.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);
     },
 
     _onCategoryVisibilityChanged: function()
     {
         this.update();
     },
 
     /**
      * @param {!WebInspector.TimelineCategory} category
      * @return {string}
      */
     _categoryColor: function(category)
     {
         return category.hidden ? this._disabledCategoryFillStyle : this._fillStyles[category.name];
     },
 
-    __proto__: WebInspector.TimelineEventOverview.prototype
-}
+    /**
+     * @override
+     */
+    resetCanvas: function()
+    {
+        WebInspector.TimelineEventOverview.prototype.resetCanvas.call(this);
+        this._backgroundCanvas.width = this.element.clientWidth * window.devicePixelRatio;
+        this._backgroundCanvas.height = this.element.clientHeight * window.devicePixelRatio;
+    },
 
-/**
- * @constructor
- * @extends {WebInspector.TimelineEventOverview.Thread}
- * @param {!WebInspector.TimelineModel} model
- */
-WebInspector.TimelineEventOverview.MainThread = function(model)
-{
-    WebInspector.TimelineEventOverview.Thread.call(this, "main-thread", WebInspector.UIString("CPU"), model)
-}
-
-WebInspector.TimelineEventOverview.MainThread.prototype = {
     /**
      * @override
      */
     update: function()
     {
         WebInspector.TimelineEventOverview.prototype.update.call(this);
-        var events = this._model.mainThreadEvents();
-        if (!events.length)
-            return;
         var /** @const */ quantSizePx = 4 * window.devicePixelRatio;
         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 quantTime = quantSizePx / scale;
-        var quantizer = new WebInspector.Quantizer(timeOffset, quantTime, drawSample.bind(this));
-        var ctx = this._context;
+        var quantizer;
         var x = 0;
         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;
         var categoryIndexStack = [];
 
+        var ctx = this._backgroundCanvas.getContext("2d");
+        this._model.virtualThreads().forEach(function (thread) { drawThreadEvents.call(this, thread.events); }, this);

[caseq, 2015/08/25 01:37:56]

extract a named function?

[alph, 2015/08/25 17:29:26]

Done.

+        ctx = this._context;

[caseq, 2015/08/25 01:37:56]

can we pass this explicitly rather than swap the contexts on the go?

[alph, 2015/08/25 17:29:26]

Done.

+        drawThreadEvents.call(this, this._model.mainThreadEvents());
+
         /**
          * @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 16 matching lines @@
         }
 
         /**
          * @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.
+        /**
+         * @param {!Array<!WebInspector.TracingModel.Event>} events
+         * @this {WebInspector.TimelineEventOverview}
+         */
+        function drawThreadEvents(events)
+        {
+            quantizer = new WebInspector.Quantizer(timeOffset, quantTime, drawSample.bind(this));
+            x = 0;
+            categoryIndexStack = [];

[caseq, 2015/08/25 01:37:56]

The above three look scary and puzzling, too!

[alph, 2015/08/25 17:29:26]

Done.

+            WebInspector.TimelineModel.forEachEvent(events, onEventStart, onEventEnd);
+            quantizer.appendInterval(timeOffset + timeSpan + quantTime, idleIndex);  // Kick drawing the last bucket.
+        }
     },
 
-    __proto__: WebInspector.TimelineEventOverview.Thread.prototype
+    __proto__: WebInspector.TimelineEventOverview.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
  * @param {!WebInspector.TimelineModel} model
  * @param {!WebInspector.TimelineFrameModelBase} frameModel
  */
 WebInspector.TimelineEventOverview.Responsiveness = function(model, frameModel)
 {
@@ skipping 455 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;
     }
 }