FlameChart: convert colors magic into dataProvider.entryColor getter

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 90 matching lines @@
 /**
  * @interface
  */
 WebInspector.FlameChartDataProvider = function()
 {
 }
 
 /** @typedef {!{
         entryLevels: !Array.<number>,
         entryTotalTimes: !Array.<number>,
-        entryOffsets: !Array.<number>,
-        colorEntryIndexes: !Array.<number>
+        entryOffsets: !Array.<number>
     }}
  */
 WebInspector.FlameChart.TimelineData;
 
 WebInspector.FlameChartDataProvider.prototype = {
     /**
      * @return {number}
      */
     barHeight: function() { },
 
@@ skipping 18 matching lines @@
      * @return {number}
      */
     maxStackDepth: function() { },
 
     /**
      * @return {?WebInspector.FlameChart.TimelineData}
      */
     timelineData: function() { },
 
     /**
-     * @return {!WebInspector.FlameChart.ColorGenerator}
-     */
-    colorGenerator: function() { },
-
-    /**
      * @param {number} entryIndex
      * @return {?Array.<!{title: string, text: string}>}
      */
     prepareHighlightedEntryInfo: function(entryIndex) { },
 
     /**
      * @param {number} entryIndex
      * @return {boolean}
      */
     canJumpToEntry: function(entryIndex) { },
 
     /**
      * @param {number} entryIndex
      * @return {?Object}
      */
     entryData: function(entryIndex) { },
 
     /**
      * @param {number} entryIndex
      * @return {?string}
      */
     entryTitle: function(entryIndex) { },
 
     /**
      * @param {number} entryIndex
      * @return {?string}
      */
     entryFont: function(entryIndex) { },
+
+    /**
+     * @param {number} entryIndex
+     * @return {!string}
+     */
+    entryColor: function(entryIndex) { },
 }
 
 /**
  * @constructor
  * @implements {WebInspector.TimelineGrid.Calculator}
  */
 WebInspector.FlameChart.Calculator = function()
 {
     this._paddingLeft = 0;
 }
@@ skipping 162 matching lines @@
 WebInspector.FlameChart.Events = {
     EntrySelected: "EntrySelected"
 }
 
 /**
  * @constructor
  */
 WebInspector.FlameChart.ColorGenerator = function()
 {
     this._colors = {};
-    this._colorIndexes = [];
     this._currentColorIndex = 0;
 }
 
 WebInspector.FlameChart.ColorGenerator.prototype = {
     /**
      * @param {string} id
      * @param {string|!CanvasGradient} color
      */
     setColorForID: function(id, color)
     {
-        var colorData = {index: this._currentColorIndex++, color: color};
-        this._colors[id] = colorData;
-        this._colorIndexes[colorData.index] = colorData;
+        this._colors[id] = color;
     },
 
     /**
      * @param {!string} id
      * @param {number=} sat
-     * @return {!Object}
+     * @return {!string}
      */
     colorForID: function(id, sat)
     {
         if (typeof sat !== "number")
             sat = 100;
-        var colors = this._colors;
-        var color = colors[id];
+        var color = this._colors[id];
         if (!color) {
-            colors[id] = color = this._createColor(this._currentColorIndex++, sat);
-            this._colorIndexes[color.index] = color;
+            color = this._createColor(this._currentColorIndex++, sat);
+            this._colors[id] = color;
         }
         return color;
     },
 
     /**
      * @param {!number} index
-     */
-    _colorForIndex: function(index)
-    {
-        return this._colorIndexes[index];
-    },
-
-    /**
-     * @param {!number} index
      * @param {!number} sat
      */
     _createColor: function(index, sat)
     {
         var hue = (index * 7 + 12 * (index % 2)) % 360;
-        return {index: index, color: "hsla(" + hue + ", " + sat + "%, 66%, 0.7)"};
+        return "hsla(" + hue + ", " + sat + "%, 66%, 0.7)";
     }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.View}
  * @implements {WebInspector.TimeRangeController}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
  */
 WebInspector.FlameChart.OverviewPane = function(dataProvider)
@@ skipping 385 matching lines @@
         if (!timelineData)
             return;
         var ratio = window.devicePixelRatio;
         this._canvas.width = width * ratio;
         this._canvas.height = height * ratio;
         this._canvas.style.width = width + "px";
         this._canvas.style.height = height + "px";
 
         var context = this._canvas.getContext("2d");
         context.scale(ratio, ratio);
-        var timeWindowRight = this._timeWindowRight;
+        var timeWindowRight = this._timeWindowRight - this._zeroTime;
+        var timeWindowLeft = this._timeWindowLeft - this._zeroTime;
         var timeToPixel = this._timeToPixel;
         var pixelWindowLeft = this._pixelWindowLeft;
         var paddingLeft = this._paddingLeft;
         var minWidth = this._minWidth;
         var entryTotalTimes = timelineData.entryTotalTimes;
         var entryOffsets = timelineData.entryOffsets;
         var entryLevels = timelineData.entryLevels;
-        var colorEntryIndexes = timelineData.colorEntryIndexes;
 
-        var colorGenerator = this._dataProvider.colorGenerator();
         var titleIndexes = new Uint32Array(timelineData.entryTotalTimes);
         var lastTitleIndex = 0;
         var dotsWidth = context.measureText("\u2026").width;
         var textPaddingLeft = 2;
         this._minTextWidth = context.measureText("\u2026").width + textPaddingLeft;
         var minTextWidth = this._minTextWidth;
 
         var marksField = [];
         for (var i = 0; i < this._dataProvider.maxStackDepth(); ++i)
             marksField.push(new Uint16Array(width));
+        var marksRow;
 
         var barX = 0;
+        var barY = 0;
         var barWidth = 0;
         var barRight = 0;
         var barLevel = 0;
+        var barHeight = this._barHeight;
         this._baseHeight = this._isTopDown ? WebInspector.FlameChart.DividersBarHeight : height - this._barHeight;
         context.strokeStyle = "black";
         var color;
         var entryIndex = 0;
         var entryOffset = 0;
-        for (var colorIndex = 0; colorIndex < colorEntryIndexes.length; ++colorIndex) {
-            color = colorGenerator._colorForIndex(colorIndex);
-            context.fillStyle = color.color;
-            var indexes = colorEntryIndexes[colorIndex];
-            if (!indexes)
+
+        var colorBackets = {};
+        var colors = [];
+        var backet = [];
+
+        var textBaseHeight = this._baseHeight + this._barHeight - 4;
+        var lastUsedFont = "";
+        var font;
+        var text = "";
+        var xText = 0;
+        var widthText = 0;
+        var title = "";
+
+        var entryOffsetRight = 0;
+        var maxBarLevel = height / this._barHeight;
+        for (entryIndex = 0; entryIndex < entryOffsets.length; ++entryIndex) {
+            // stop if we reached right border in time (entries were ordered by start time).
+            entryOffset = entryOffsets[entryIndex];
+            if (entryOffset > timeWindowRight)
+                break;
+
+            // skip if it is not visible (top/bottom side)
+            barLevel = entryLevels[entryIndex];
+            if (barLevel > maxBarLevel)
                 continue;
+
+            // skip if it is not visible (left side).
+            entryOffsetRight = entryOffset + entryTotalTimes[entryIndex];
+            if (entryOffsetRight < timeWindowLeft)

[alph, 2014/03/03 10:06:04]

Is it possible to find the bound using binary search rather than iterating over
all the entries?

[loislo, 2014/03/03 11:53:31]

Nope. The array is sorted by the bar offset, so the the right borders of the
bars are unsorted and we can't use binary search for that.

[alph, 2014/03/03 12:31:04]

So, you can find the right window bound then, which is startTime. Right?

+                continue;
+
+            barX = this._offsetToPosition(entryOffset);
+            barRight = this._offsetToPosition(entryOffsetRight);
+            barWidth = (barRight - barX) || minWidth;

[alph, 2014/03/03 10:06:04]

nit: Should be Math.max

[loislo, 2014/03/03 11:53:31]

Done.

+
+            // skip the bar if there is another bar here on the same level with the same or longer length.
+            marksRow = marksField[barLevel];
+            if (barWidth <= marksRow[barX])
+                continue;
+
+            marksRow[barX] = barWidth;
+            color = this._dataProvider.entryColor(entryIndex);
+            backet = colorBackets[color];
+            if (!backet)
+                backet = colorBackets[color] = [];
+            backet.push(entryIndex);
+        }
+
+        colors = Object.keys(colorBackets);
+        for (var c = 0; c < colors.length; ++c) {
+            color = colors[c];
+            context.fillStyle = color;
+            var indexes = colorBackets[color];
             context.beginPath();
             for (var i = 0; i < indexes.length; ++i) {
                 entryIndex = indexes[i];
                 entryOffset = entryOffsets[entryIndex];
-                if (entryOffset > timeWindowRight)
-                    break;
                 barX = this._offsetToPosition(entryOffset);
-                if (barX >= width)
-                    continue;
                 barRight = this._offsetToPosition(entryOffset + entryTotalTimes[entryIndex]);
-                if (barRight < 0)
-                    continue;
                 barWidth = (barRight - barX) || minWidth;

[alph, 2014/03/03 10:06:04]

ditto.

[loislo, 2014/03/03 11:53:31]

Done.

                 barLevel = entryLevels[entryIndex];
-                var marksRow = marksField[barLevel];
-                if (barWidth <= marksRow[barX]) // skip the bar if there is another bar here.
-                    continue;
-                marksRow[barX] = barWidth;
-                var barY = this._levelToHeight(barLevel);
+                barY = this._levelToHeight(barLevel);
                 context.rect(barX, barY, barWidth, this._barHeight);
                 if (barWidth > minTextWidth)
                     titleIndexes[lastTitleIndex++] = entryIndex;
             }
             context.fill();
         }
 
         context.textBaseline = "alphabetic";
         context.fillStyle = "#333";
         this._dotsWidth = context.measureText("\u2026").width;
 
-        var textBaseHeight = this._baseHeight + this._barHeight - 4;
-        var lastUsedFont = "";
-        var font;
         for (var i = 0; i < lastTitleIndex; ++i) {
             entryIndex = titleIndexes[i];
-            var text = this._dataProvider.entryTitle(entryIndex);
+            text = this._dataProvider.entryTitle(entryIndex);
             if (!text || !text.length)
                 continue;
             font = this._dataProvider.entryFont(entryIndex);
             if (font !== lastUsedFont)
                 context.font = font;
 
             entryOffset = entryOffsets[entryIndex];
             barX = this._offsetToPosition(entryOffset);
             barRight = this._offsetToPosition(entryOffset + entryTotalTimes[entryIndex]);
             barWidth = (barRight - barX) || minWidth;

[alph, 2014/03/03 10:06:04]

ditto

[loislo, 2014/03/03 11:53:31]

Done.

-            var xText = Math.max(0, barX);
-            var widthText = barWidth - textPaddingLeft + barX - xText;
-            var title = this._prepareText(context, text, widthText);
+            xText = Math.max(0, barX);
+            widthText = barWidth - textPaddingLeft + barX - xText;
+            title = this._prepareText(context, text, widthText);
             if (title)
                 context.fillText(title, xText + textPaddingLeft, textBaseHeight - entryLevels[entryIndex] * this._barHeightDelta);
         }
 
         this._updateHighlightElement();
     },
 
     _updateHighlightElement: function()
     {
         if (this._highlightElement.parentElement)
@@ skipping 132 matching lines @@
             this._timelineGrid.hideDividers();
         this.draw(this.element.clientWidth, this.element.clientHeight);
         this._calculator._updateBoundaries(this);
         this._timelineGrid.element.style.width = this.element.clientWidth;
         var offsets = this._dataProvider.dividerOffsets(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
         this._timelineGrid.updateDividers(this._calculator, offsets, true);
     },
 
     __proto__: WebInspector.View.prototype
 }