FlameChart: speed up bars drawing procedure.

Source/devtools/front_end/FlameChart.js

Index: Source/devtools/front_end/FlameChart.js
diff --git a/Source/devtools/front_end/FlameChart.js b/Source/devtools/front_end/FlameChart.js
index f676621e7c8717853a6e98ac2bb07058766afc43..8dfba77804d13c99f1390be6e643555bdaf648f9 100644
--- a/Source/devtools/front_end/FlameChart.js
+++ b/Source/devtools/front_end/FlameChart.js
@@ -217,7 +217,7 @@ WebInspector.FlameChart.ColorGenerator.prototype = {
         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)"}
     }
 }
 
@@ -316,15 +316,22 @@ WebInspector.FlameChart.prototype = {
         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;
 
@@ -343,6 +350,7 @@ WebInspector.FlameChart.prototype = {
 
         this._timelineData = {
             entries: entries,
+            colorIndexEntryChains: colorIndexEntryChains,
             totalTime: this._cpuProfileView.profileHead.totalTime,
         }
 
@@ -368,6 +376,7 @@ WebInspector.FlameChart.prototype = {
         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;
@@ -410,8 +419,13 @@ WebInspector.FlameChart.prototype = {
 
             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;
 
@@ -423,6 +437,7 @@ WebInspector.FlameChart.prototype = {
 
         this._timelineData = {
             entries: entries,
+            colorIndexEntryChains: colorIndexEntryChains,
             totalTime: samplesCount,
         };
 
@@ -614,7 +629,7 @@ WebInspector.FlameChart.prototype = {
         var timelineData = this._calculateTimelineData();
         if (!timelineData)
             return;
-        var timelineEntries = timelineData.entries;
+        var colorIndexEntryChains = timelineData.colorIndexEntryChains;
 
         var ratio = window.devicePixelRatio;
         var canvasWidth = width * ratio;
@@ -630,20 +645,26 @@ WebInspector.FlameChart.prototype = {
         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);
-
-                callback(flameChart, context, entry, anchorBox, flameChart._highlightedEntryIndex === i);
+                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);
+                }
             }
         }
 
@@ -651,8 +672,11 @@ WebInspector.FlameChart.prototype = {
         {
             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();
         }