FlameChart: speed up bars drawing procedure.

Source/devtools/front_end/FlameChart.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 199 matching lines @@
 
     /**
      * @param {!number} index
      * @param {number=} sat
      */
     _createPair: function(index, sat)
     {
         var hue = (index * 7 + 12 * (index % 2)) % 360;
         if (typeof sat !== "number")
             sat = 100;
-        return {highlighted: "hsla(" + hue + ", " + sat + "%, 33%, 0.7)", normal: "hsla(" + hue + ", " + sat + "%, 66%, 0.7)"}
+        return {index: index, highlighted: "hsla(" + hue + ", " + sat + "%, 33%, 0.7)", normal: "hsla(" + hue + ", " + sat + "%, 66%, 0.7)"}
     }
 }
 
 /**
  * @constructor
  * @param {!Object} colorPair
  * @param {!number} depth
  * @param {!number} duration
  * @param {!number} startTime
  * @param {Object} node
@@ skipping 78 matching lines @@
             for (var i = fromArray.length - 1; i >= 0; --i)
                 toArray.push(fromArray[i]);
         }
 
         var stack = [];
         appendReversedArray(stack, this._cpuProfileView.profileHead.children);
 
         var levelOffsets = /** @type {Array.<!number>} */ ([0]);
         var levelExitIndexes = /** @type {Array.<!number>} */ ([0]);
         var colorGenerator = WebInspector.FlameChart._colorGenerator;
+        var colorIndexEntryChains = [];

[yurys, 2013/09/05 11:43:25]

Should we specify the size as the total number of colors? I suspect that the
array may get into the slow mode otherwise.

[loislo, 2013/09/06 08:15:57]

Unfortunately we don't know the number of colors before processing.
So, we need to do a separate pass for that.

 
         while (stack.length) {
             var level = levelOffsets.length - 1;
             var node = stack.pop();
             var offset = levelOffsets[level];
 
-            var colorPair = colorGenerator._colorPairForID(node.functionName + ":" + node.url + ":" + node.lineNumber);
+            var id = node.functionName + ":" + node.url + ":" + node.lineNumber;
+            var colorPair = colorGenerator._colorPairForID(id);
+            var colorIndexEntries = colorIndexEntryChains[colorPair.index];
+            if (!colorIndexEntries)
+                colorIndexEntries = colorIndexEntryChains[colorPair.index] = [];
 
-            entries.push(new WebInspector.FlameChart.Entry(colorPair, level, node.totalTime, offset, node));
+            var entry = new WebInspector.FlameChart.Entry(colorPair, level, node.totalTime, offset, node);
+            entries.push(entry);
+            colorIndexEntries.push(entry);
 
             ++index;
 
             levelOffsets[level] += node.totalTime;
             if (node.children.length) {
                 levelExitIndexes.push(stack.length);
                 levelOffsets.push(offset + node.selfTime / 2);
                 appendReversedArray(stack, node.children);
             }
 
             while (stack.length === levelExitIndexes[levelExitIndexes.length - 1]) {
                 levelOffsets.pop();
                 levelExitIndexes.pop();
             }
         }
 
         this._timelineData = {
             entries: entries,
+            colorIndexEntryChains: colorIndexEntryChains,
             totalTime: this._cpuProfileView.profileHead.totalTime,
         }
 
         return this._timelineData;
     },
 
     _calculateTimelineDataForSamples: function()
     {
         if (this._timelineData)
             return this._timelineData;
 
         if (!this._cpuProfileView.profileHead)
             return null;
 
         var samples = this._cpuProfileView.samples;
         var idToNode = this._cpuProfileView._idToNode;
         var gcNode = this._cpuProfileView._gcNode;
         var samplesCount = samples.length;
 
         var index = 0;
         var entries = /** @type {Array.<!WebInspector.FlameChart.Entry>} */ ([]);
 
         var openIntervals = [];
         var stackTrace = [];
         var colorGenerator = WebInspector.FlameChart._colorGenerator;
+        var colorIndexEntryChains = [];
         for (var sampleIndex = 0; sampleIndex < samplesCount; sampleIndex++) {
             var node = idToNode[samples[sampleIndex]];
             stackTrace.length = 0;
             while (node) {
                 stackTrace.push(node);
                 node = node.parent;
             }
             stackTrace.pop(); // Remove (root) node
 
             var depth = 0;
@@ skipping 22 matching lines @@
             }
             if (depth < openIntervals.length)
                 openIntervals.length = depth;
             if (!node) {
                 entries[intervalIndex].selfTime += 1;
                 continue;
             }
 
             while (node) {
                 var colorPair = colorGenerator._colorPairForID(node.functionName + ":" + node.url + ":" + node.lineNumber);
+                var colorIndexEntries = colorIndexEntryChains[colorPair.index];
+                if (!colorIndexEntries)
+                    colorIndexEntries = colorIndexEntryChains[colorPair.index] = [];
 
-                entries.push(new WebInspector.FlameChart.Entry(colorPair, depth, 1, sampleIndex, node));
+                var entry = new WebInspector.FlameChart.Entry(colorPair, depth, 1, sampleIndex, node);
+                entries.push(entry);
+                colorIndexEntries.push(entry);
                 openIntervals.push({node: node, index: index});
                 ++index;
 
                 node = stackTrace.pop();
                 ++depth;
             }
             entries[entries.length - 1].selfTime += 1;
         }
 
         this._timelineData = {
             entries: entries,
+            colorIndexEntryChains: colorIndexEntryChains,
             totalTime: samplesCount,
         };
 
         return this._timelineData;
     },
 
     _onMouseMove: function(event)
     {
         if (this._isDragging)
             return;
@@ skipping 171 matching lines @@
 
     /**
      * @param {!number} height
      * @param {!number} width
      */
     draw: function(width, height)
     {
         var timelineData = this._calculateTimelineData();
         if (!timelineData)
             return;
-        var timelineEntries = timelineData.entries;
+        var colorIndexEntryChains = timelineData.colorIndexEntryChains;
 
         var ratio = window.devicePixelRatio;
         var canvasWidth = width * ratio;
         var canvasHeight = height * ratio;
         this._canvas.width = canvasWidth;
         this._canvas.height = canvasHeight;
         this._canvas.style.width = width + "px";
         this._canvas.style.height = height + "px";
 
         var barHeight = this._barHeight;
 
         var context = this._canvas.getContext("2d");
         context.scale(ratio, ratio);
         var visibleTimeLeft = this._timeWindowLeft - this._paddingLeftTime;
         var timeWindowRight = this._timeWindowRight;
+        var lastUsedColor = "";
 
         function forEachEntry(flameChart, callback)
         {
             var anchorBox = new AnchorBox();
-            for (var i = 0; i < timelineEntries.length; ++i) {
-                var entry = timelineEntries[i];
-                var startTime = entry.startTime;
-                if (startTime > timeWindowRight)
-                    break;
-                if ((startTime + entry.duration) < visibleTimeLeft)
+            for (var j = 1; j < colorIndexEntryChains.length; ++j) {

[yurys, 2013/09/05 11:43:25]

Starting from 1 is unusual, can you change
WebInspector.FlameChart.ColorGenerator to start assigning indexes from 0
instead?

[loislo, 2013/09/06 08:15:57]

Done.

+                var entries = colorIndexEntryChains[j];
+                if (!entries)
                     continue;
-                flameChart._entryToAnchorBox(entry, anchorBox);
+                for (var i = 0; i < entries.length; ++i) {
+                    var entry = entries[i];
+                    var startTime = entry.startTime;
+                    if (startTime > timeWindowRight)
+                        break;
+                    if ((startTime + entry.duration) < visibleTimeLeft)
+                        continue;
+                    flameChart._entryToAnchorBox(entry, anchorBox);
 
-                callback(flameChart, context, entry, anchorBox, flameChart._highlightedEntryIndex === i);
+                    callback(flameChart, context, entry, anchorBox, flameChart._highlightedEntryIndex === i);
+                }
             }
         }
 
         function drawBar(flameChart, context, entry, anchorBox, highlighted)
         {
             context.beginPath();
             context.rect(anchorBox.x, anchorBox.y, anchorBox.width - 1, anchorBox.height - 1);
-            var colorPair = entry.colorPair;
-            context.fillStyle = highlighted ? colorPair.highlighted : colorPair.normal;
+            var color = highlighted ? entry.colorPair.highlighted : entry.colorPair.normal;
+            if (lastUsedColor !== color) {
+                lastUsedColor = color;
+                context.fillStyle = color;
+            }
             context.fill();
         }
 
         forEachEntry(this, drawBar);
 
         context.font = (barHeight - 4) + "px " + window.getComputedStyle(this.element, null).getPropertyValue("font-family");
         context.textBaseline = "alphabetic";
         context.fillStyle = "#333";
         this._dotsWidth = context.measureText("\u2026").width;
         var textPaddingLeft = 2;
@@ skipping 128 matching lines @@
         this._timelineGrid.updateDividers(this._calculator);
         this._overviewGrid.updateDividers(this._overviewCalculator);
         if (this._updateOverviewCanvas) {
             this._drawOverviewCanvas(this._overviewContainer.clientWidth, this._overviewContainer.clientHeight - 20);
             this._updateOverviewCanvas = false;
         }
     },
 
     __proto__: WebInspector.View.prototype
 };