Skip to content

GitLab

T
tangled
Commit 85ae0cfa authored by pfeldman@chromium.org's avatar pfeldman@chromium.org
Browse files
Options

DevTools: minor flame chart speedups. 

R=loislo@chromium.org

Review URL: https://codereview.chromium.org/188293003

git-svn-id: svn://svn.chromium.org/blink/trunk@168624 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent a9731b11
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 51 deletions
third_party/WebKit/Source/devtools/front_end/FlameChart.js
View file @ 85ae0cfa
......@@ -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");
this._minTextWidth = 2 * textPadding + dotsWidth;
var minTextWidth = this._minTextWidth;
var lastDrawOffset = new Int32Array(this._dataProvider.maxStackDepth());
......@@ -919,8 +920,6 @@ WebInspector.FlameChart.MainPane.prototype = {
}
context.textBaseline = "alphabetic";
context.fillStyle = "#333";
this._dotsWidth = context.measureText("\u2026").width;
for (i = 0; i < lastTitleIndex; ++i) {
entryIndex = titleIndexes[i];
......@@ -1005,30 +1004,28 @@ 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;
maxSize -= this._measureWidth(context, "\u2026");
var dotRegExp=/[\.\$]/g;
var match = dotRegExp.exec(title);
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 +1033,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 {!CanvasRenderingContext2D} context
* @param {string} text
* @return {number}
*/
_measureWidth: function(context, text)
{
if (text.length > 20)
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 +1074,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 +1086,8 @@ WebInspector.FlameChart.MainPane.prototype = {
onResize: function()
{
this._offsetWidth = this.element.offsetWidth;
this._offsetHeight = this.element.offsetHeight;
this._scheduleUpdate();
},
......@@ -1078,7 +1095,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 +1110,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 +1121,7 @@ WebInspector.FlameChart.MainPane.prototype = {
{
this._highlightedEntryIndex = -1;
this._selectedEntryIndex = -1;
this._textWidth = {};
this.update();
},
......
third_party/WebKit/Source/devtools/front_end/TimelineFlameChart.js
View file @ 85ae0cfa
......@@ -198,32 +198,14 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
return;
}
var recordIndex = this._pushRecord(record, true, level, record.startTime, record.endTime);
var currentTime = record.startTime;
for (var i = 0; i < record.children.length; ++i) {
var childRecord = record.children[i];
var childStartTime = childRecord.startTime;
var childEndTime = childRecord.endTime;
if (childStartTime === childEndTime) {
this._appendRecord(childRecord, level + 1);
continue;
}
if (currentTime !== childStartTime) {
if (recordIndex !== -1) {
this._timelineData.entryTotalTimes[recordIndex] = childStartTime - record.startTime;
recordIndex = -1;
} else {
this._pushRecord(record, true, level, currentTime, childStartTime);
}
}
this._pushRecord(record, false, level, childStartTime, childEndTime);
this._appendRecord(childRecord, level + 1);
currentTime = childEndTime;
if (record.children.length) {
this._pushRecord(record, true, level, record.startTime, record.startTime + record.selfTime);
this._pushRecord(record, false, level, record.startTime + record.selfTime, record.endTime);
} else {
this._pushRecord(record, true, level, record.startTime, record.endTime);
}
if (recordIndex === -1 && recordEndTime !== currentTime || record.children.length === 0)
this._pushRecord(record, true, level, currentTime, recordEndTime);
for (var i = 0; i < record.children.length; ++i)
this._appendRecord(record.children[i], level + 1);
this._maxStackDepth = Math.max(this._maxStackDepth, level + 2);
},
......@@ -336,9 +318,6 @@ WebInspector.TimelineFlameChart.prototype = {
*/
refreshRecords: function(textFilter)
{
this._dataProvider.reset();
this._mainView.reset();
this.setSelectedRecord(this._selectedRecord);
},
reset: function()
......@@ -346,7 +325,6 @@ WebInspector.TimelineFlameChart.prototype = {
this._automaticallySizeWindow = true;
this._dataProvider.reset();
this._mainView.setWindowTimes(0, Infinity);
delete this._selectedRecord;
},
_onRecordingStarted: function()
......@@ -412,7 +390,6 @@ WebInspector.TimelineFlameChart.prototype = {
*/
setSelectedRecord: function(record)
{
this._selectedRecord = record;
var entryRecords = this._dataProvider._records;
for (var entryIndex = 0; entryIndex < entryRecords.length; ++entryIndex) {
if (entryRecords[entryIndex] === record) {
......@@ -421,10 +398,6 @@ WebInspector.TimelineFlameChart.prototype = {
}
}
this._mainView.setSelectedEntry(-1);
if (this._selectedElement) {
this._selectedElement.remove();
delete this._selectedElement;
}
},
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment