Source/devtools/front_end/FlameChart.js - Issue 185533004: FlameChart: convert colors magic into dataProvider.entryColor getter

Unified Diff: Source/devtools/front_end/FlameChart.js

Issue 185533004: FlameChart: convert colors magic into dataProvider.entryColor getter (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: color.index was removed Created 6 years, 10 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

Index: Source/devtools/front_end/FlameChart.js

diff --git a/Source/devtools/front_end/FlameChart.js b/Source/devtools/front_end/FlameChart.js

index f8238b0e9734330fdb137298f0b91d5d21fb0921..71b5a62c38cf68ffa774fdb9b5bf5ca5a9eb62a8 100644

--- a/Source/devtools/front_end/FlameChart.js

+++ b/Source/devtools/front_end/FlameChart.js

@@ -108,8 +108,7 @@ WebInspector.FlameChartDataProvider = function()

/** @typedef {!{

entryLevels: !Array.<number>,

entryTotalTimes: !Array.<number>,

- entryOffsets: !Array.<number>,

- colorEntryIndexes: !Array.<number>

+ entryOffsets: !Array.<number>

}}

WebInspector.FlameChart.TimelineData;

@@ -148,11 +147,6 @@ WebInspector.FlameChartDataProvider.prototype = {

timelineData: function() { },

/**

- * @return {!WebInspector.FlameChart.ColorGenerator}

- */

- colorGenerator: function() { },

- /**

* @param {number} entryIndex

* @return {?Array.<!{title: string, text: string}>}

@@ -181,6 +175,12 @@ WebInspector.FlameChartDataProvider.prototype = {

* @return {?string}

entryFont: function(entryIndex) { },

+ /**

+ * @param {number} entryIndex

+ * @return {!string}

+ */

+ entryColor: function(entryIndex) { },

}

/**

@@ -363,7 +363,6 @@ WebInspector.FlameChart.Events = {

WebInspector.FlameChart.ColorGenerator = function()

{

this._colors = {};

- this._colorIndexes = [];

this._currentColorIndex = 0;

}

@@ -374,45 +373,34 @@ WebInspector.FlameChart.ColorGenerator.prototype = {

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)";

}

@@ -818,7 +806,8 @@ WebInspector.FlameChart.MainPane.prototype = {

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;

@@ -826,9 +815,7 @@ WebInspector.FlameChart.MainPane.prototype = {

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;

@@ -839,41 +826,81 @@ WebInspector.FlameChart.MainPane.prototype = {

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 sear

loislo 2014/03/03 11:53:31 Nope. The array is sorted by the bar offset, so th

alph 2014/03/03 12:31:04 So, you can find the right window bound then, whic

+ 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;

@@ -885,12 +912,9 @@ WebInspector.FlameChart.MainPane.prototype = {

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);

@@ -901,9 +925,9 @@ WebInspector.FlameChart.MainPane.prototype = {

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);

}

« no previous file with comments | « Source/devtools/front_end/CPUProfileView.js ('k') | Source/devtools/front_end/TimelineFlameChart.js » ('j') | no next file with comments »