Source/devtools/front_end/FlameChart.js - Issue 188293003: DevTools: minor flame chart speedups.

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

Issue 188293003: DevTools: minor flame chart speedups. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: 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

Index: Source/devtools/front_end/FlameChart.js

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

index c1cfd9e146f21a059759c40ec84ddee3582f30e7..b6db8daa18906fccbeef84f1273fcc84fe95881d 100644

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

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

@@ -474,7 +474,7 @@ WebInspector.FlameChart.OverviewPane.prototype = {

{

if (this._updateTimerId)

return;

- this._updateTimerId = setTimeout(this.update.bind(this), 10);

+ this._updateTimerId = requestAnimationFrame(this.update.bind(this));

update: function()

@@ -613,6 +613,7 @@ WebInspector.FlameChart.MainPane = function(dataProvider, flameChartDelegate, is

this._paddingLeft = 15;

this._highlightedEntryIndex = -1;

this._selectedEntryIndex = -1;

+ this._textWidth = {};

}

WebInspector.FlameChart.MainPane.prototype = {

@@ -824,9 +825,9 @@ WebInspector.FlameChart.MainPane.prototype = {

var titleIndexes = new Uint32Array(timelineData.entryTotalTimes);

var lastTitleIndex = 0;

- var dotsWidth = context.measureText("\u2026").width;

var textPadding = this._dataProvider.textPadding();

- this._minTextWidth = context.measureText("\u2026").width + 2 * textPadding;

+ var dotsWidth = this._measureWidth(context, "\u2026");

loislo 2014/03/06 06:04:51 lets also assign it to this._dotWidth

pfeldman 2014/03/06 11:19:57 I removed this._dotsWidth instead.

+ this._minTextWidth = 2 * textPadding + dotsWidth;

var minTextWidth = this._minTextWidth;

var lastDrawOffset = new Int32Array(this._dataProvider.maxStackDepth());

@@ -919,8 +920,7 @@ WebInspector.FlameChart.MainPane.prototype = {

}

context.textBaseline = "alphabetic";

- context.fillStyle = "#333";

- this._dotsWidth = context.measureText("\u2026").width;

+ this._dotsWidth = this._measureWidth(context, "\u2026");

loislo 2014/03/06 06:04:51 looks like we don't need this line.

alph 2014/03/06 06:24:46 Could that be done in the constructor?

pfeldman 2014/03/06 11:19:57 Same here, removed

pfeldman 2014/03/06 11:19:57 It might depend on the styles, though I am not sur

for (i = 0; i < lastTitleIndex; ++i) {

entryIndex = titleIndexes[i];

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

_prepareText: function(context, title, maxSize)

{

- if (maxSize < this._dotsWidth)

- return null;

- var titleWidth = context.measureText(title).width;

+ var titleWidth = this._measureWidth(context, title);

if (maxSize > titleWidth)

return title;

maxSize -= this._dotsWidth;

@@ -1016,19 +1014,19 @@ WebInspector.FlameChart.MainPane.prototype = {

if (!match) {

var visiblePartSize = maxSize / titleWidth;

var newTextLength = Math.floor(title.length * visiblePartSize) + 1;

- var minTextLength = 4;

+ var minTextLength = 2;

if (newTextLength < minTextLength)

return null;

var substring;

do {

--newTextLength;

substring = title.substring(0, newTextLength);

- } while (context.measureText(substring).width > maxSize);

+ } while (this._measureWidth(context, substring).width > maxSize);

return title.substring(0, newTextLength) + "\u2026";

}

while (match) {

var substring = title.substring(match.index + 1);

- var width = context.measureText(substring).width;

+ var width = this._measureWidth(context, substring).width;

if (maxSize > width)

return "\u2026" + substring;

match = dotRegExp.exec(title);

@@ -1036,10 +1034,28 @@ WebInspector.FlameChart.MainPane.prototype = {

var i = 0;

do {

++i;

- } while (context.measureText(title.substring(0, i)).width < maxSize);

+ } while (this._measureWidth(context, title.substring(0, i)).width < maxSize);

return title.substring(0, i - 1) + "\u2026";

+ /**

+ * @param {Context} context

alph 2014/03/06 06:24:46 !Context

pfeldman 2014/03/06 11:19:57 Done.

+ * @param {string} text

+ * @return {number}

+ */

+ _measureWidth: function(context, text)

+ {

+ if (text.length > 20)

alph 2014/03/06 06:24:46 I'm wondering does it really help the performance?

pfeldman 2014/03/06 11:19:57 It prevents from forcing layout.

alph 2014/03/06 11:23:27 I was asking about that 'if' statement, not about

+ return context.measureText(text).width;

+ var width = this._textWidth[text];

+ if (!width) {

+ width = context.measureText(text).width;

+ this._textWidth[text] = width;

+ }

+ return width;

+ },

_updateBoundaries: function()

{

this._totalTime = this._dataProvider.totalTime();

@@ -1059,7 +1075,7 @@ WebInspector.FlameChart.MainPane.prototype = {

this._timeWindowRight = this._windowRight * this._totalTime;

}

- this._pixelWindowWidth = this.element.clientWidth - this._paddingLeft;

+ this._pixelWindowWidth = this._offsetWidth - this._paddingLeft;

this._totalPixels = Math.floor(this._pixelWindowWidth / this._windowWidth);

this._pixelWindowLeft = Math.floor(this._totalPixels * this._windowLeft);

this._pixelWindowRight = Math.floor(this._totalPixels * this._windowRight);

@@ -1071,6 +1087,8 @@ WebInspector.FlameChart.MainPane.prototype = {

onResize: function()

{

+ this._offsetWidth = this.element.offsetWidth;

+ this._offsetHeight = this.element.offsetHeight;

this._scheduleUpdate();

@@ -1078,7 +1096,7 @@ WebInspector.FlameChart.MainPane.prototype = {

{

if (this._updateTimerId)

return;

- this._updateTimerId = setTimeout(this.update.bind(this), 10);

+ this._updateTimerId = requestAnimationFrame(this.update.bind(this));

update: function()

@@ -1093,9 +1111,9 @@ WebInspector.FlameChart.MainPane.prototype = {

this._timelineGrid.showDividers();

else

this._timelineGrid.hideDividers();

- this.draw(this.element.clientWidth, this.element.clientHeight);

+ this.draw(this._offsetWidth, this._offsetHeight);

this._calculator._updateBoundaries(this);

- this._timelineGrid.element.style.width = this.element.clientWidth;

+ this._timelineGrid.element.style.width = this._offsetWidth;

var offsets = this._dataProvider.dividerOffsets(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());

this._timelineGrid.updateDividers(this._calculator, offsets, true);

@@ -1104,6 +1122,7 @@ WebInspector.FlameChart.MainPane.prototype = {

{

this._highlightedEntryIndex = -1;

this._selectedEntryIndex = -1;

+ this._textWidth = {};

this.update();

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