Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(286)

Unified Diff: third_party/WebKit/Source/devtools/front_end/profiler/CPUProfileFlameChart.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month 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: third_party/WebKit/Source/devtools/front_end/profiler/CPUProfileFlameChart.js
diff --git a/third_party/WebKit/Source/devtools/front_end/profiler/CPUProfileFlameChart.js b/third_party/WebKit/Source/devtools/front_end/profiler/CPUProfileFlameChart.js
index 3d5e76de93e6fc951f48de0407eeed3538e1ca1a..c5930e3f206aa0f45b4fea9a920d10291df1e583 100644
--- a/third_party/WebKit/Source/devtools/front_end/profiler/CPUProfileFlameChart.js
+++ b/third_party/WebKit/Source/devtools/front_end/profiler/CPUProfileFlameChart.js
@@ -28,239 +28,218 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-
/**
- * @constructor
* @implements {WebInspector.FlameChartDataProvider}
- * @param {?WebInspector.Target} target
+ * @unrestricted
*/
-WebInspector.ProfileFlameChartDataProvider = function(target)
-{
+WebInspector.ProfileFlameChartDataProvider = class {
+ /**
+ * @param {?WebInspector.Target} target
+ */
+ constructor(target) {
WebInspector.FlameChartDataProvider.call(this);
this._target = target;
this._colorGenerator = WebInspector.ProfileFlameChartDataProvider.colorGenerator();
-};
-
-WebInspector.ProfileFlameChartDataProvider.prototype = {
- /**
- * @override
- * @return {number}
- */
- barHeight: function()
- {
- return 15;
- },
-
- /**
- * @override
- * @return {number}
- */
- textBaseline: function()
- {
- return 4;
- },
-
- /**
- * @override
- * @return {number}
- */
- textPadding: function()
- {
- return 2;
- },
-
- /**
- * @override
- * @return {number}
- */
- minimumBoundary: function()
- {
- return this._cpuProfile.profileStartTime;
- },
-
- /**
- * @override
- * @return {number}
- */
- totalTime: function()
- {
- return this._cpuProfile.profileHead.total;
- },
-
- /**
- * @override
- * @param {number} value
- * @param {number=} precision
- * @return {string}
- */
- formatValue: function(value, precision)
- {
- return Number.preciseMillisToString(value, precision);
- },
-
- /**
- * @override
- * @return {number}
- */
- maxStackDepth: function()
- {
- return this._maxStackDepth;
- },
-
- /**
- * @override
- * @return {?WebInspector.FlameChart.TimelineData}
- */
- timelineData: function()
- {
- return this._timelineData || this._calculateTimelineData();
- },
-
- /**
- * @return {!WebInspector.FlameChart.TimelineData}
- */
- _calculateTimelineData: function()
- {
- throw "Not implemented.";
- },
-
- /**
- * @override
- * @param {number} entryIndex
- * @return {?Element}
- */
- prepareHighlightedEntryInfo: function(entryIndex)
- {
- throw "Not implemented.";
- },
-
- /**
- * @override
- * @param {number} entryIndex
- * @return {boolean}
- */
- canJumpToEntry: function(entryIndex)
- {
- return this._entryNodes[entryIndex].scriptId !== "0";
- },
-
- /**
- * @override
- * @param {number} entryIndex
- * @return {string}
- */
- entryTitle: function(entryIndex)
- {
- var node = this._entryNodes[entryIndex];
- return WebInspector.beautifyFunctionName(node.functionName);
- },
-
- /**
- * @override
- * @param {number} entryIndex
- * @return {?string}
- */
- entryFont: function(entryIndex)
- {
- if (!this._font) {
- this._font = (this.barHeight() - 4) + "px " + WebInspector.fontFamily();
- this._boldFont = "bold " + this._font;
- }
- var node = this._entryNodes[entryIndex];
- return node.deoptReason ? this._boldFont : this._font;
- },
-
- /**
- * @override
- * @param {number} entryIndex
- * @return {string}
- */
- entryColor: function(entryIndex)
- {
- var node = this._entryNodes[entryIndex];
- // For idle and program, we want different 'shades of gray', so we fallback to functionName as scriptId = 0
- // For rest of nodes e.g eval scripts, if url is empty then scriptId will be guaranteed to be non-zero
- return this._colorGenerator.colorForID(node.url || (node.scriptId !== "0" ? node.scriptId : node.functionName));
- },
-
- /**
- * @override
- * @param {number} entryIndex
- * @param {!CanvasRenderingContext2D} context
- * @param {?string} text
- * @param {number} barX
- * @param {number} barY
- * @param {number} barWidth
- * @param {number} barHeight
- * @return {boolean}
- */
- decorateEntry: function(entryIndex, context, text, barX, barY, barWidth, barHeight)
- {
- return false;
- },
-
- /**
- * @override
- * @param {number} entryIndex
- * @return {boolean}
- */
- forceDecoration: function(entryIndex)
- {
- return false;
- },
-
- /**
- * @override
- * @return {number}
- */
- paddingLeft: function()
- {
- return 0;
- },
-
- /**
- * @override
- * @param {number} entryIndex
- * @return {string}
- */
- textColor: function(entryIndex)
- {
- return "#333";
- }
-};
-
+ }
-/**
- * @return {!WebInspector.FlameChart.ColorGenerator}
- */
-WebInspector.ProfileFlameChartDataProvider.colorGenerator = function()
-{
+ /**
+ * @return {!WebInspector.FlameChart.ColorGenerator}
+ */
+ static colorGenerator() {
if (!WebInspector.ProfileFlameChartDataProvider._colorGenerator) {
- var colorGenerator = new WebInspector.FlameChart.ColorGenerator(
- { min: 30, max: 330 },
- { min: 50, max: 80, count: 5 },
- { min: 80, max: 90, count: 3 });
-
- colorGenerator.setColorForID("(idle)", "hsl(0, 0%, 94%)");
- colorGenerator.setColorForID("(program)", "hsl(0, 0%, 80%)");
- colorGenerator.setColorForID("(garbage collector)", "hsl(0, 0%, 80%)");
- WebInspector.ProfileFlameChartDataProvider._colorGenerator = colorGenerator;
+ var colorGenerator = new WebInspector.FlameChart.ColorGenerator(
+ {min: 30, max: 330}, {min: 50, max: 80, count: 5}, {min: 80, max: 90, count: 3});
+
+ colorGenerator.setColorForID('(idle)', 'hsl(0, 0%, 94%)');
+ colorGenerator.setColorForID('(program)', 'hsl(0, 0%, 80%)');
+ colorGenerator.setColorForID('(garbage collector)', 'hsl(0, 0%, 80%)');
+ WebInspector.ProfileFlameChartDataProvider._colorGenerator = colorGenerator;
}
return WebInspector.ProfileFlameChartDataProvider._colorGenerator;
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ barHeight() {
+ return 15;
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ textBaseline() {
+ return 4;
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ textPadding() {
+ return 2;
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ minimumBoundary() {
+ return this._cpuProfile.profileStartTime;
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ totalTime() {
+ return this._cpuProfile.profileHead.total;
+ }
+
+ /**
+ * @override
+ * @param {number} value
+ * @param {number=} precision
+ * @return {string}
+ */
+ formatValue(value, precision) {
+ return Number.preciseMillisToString(value, precision);
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ maxStackDepth() {
+ return this._maxStackDepth;
+ }
+
+ /**
+ * @override
+ * @return {?WebInspector.FlameChart.TimelineData}
+ */
+ timelineData() {
+ return this._timelineData || this._calculateTimelineData();
+ }
+
+ /**
+ * @return {!WebInspector.FlameChart.TimelineData}
+ */
+ _calculateTimelineData() {
+ throw 'Not implemented.';
+ }
+
+ /**
+ * @override
+ * @param {number} entryIndex
+ * @return {?Element}
+ */
+ prepareHighlightedEntryInfo(entryIndex) {
+ throw 'Not implemented.';
+ }
+
+ /**
+ * @override
+ * @param {number} entryIndex
+ * @return {boolean}
+ */
+ canJumpToEntry(entryIndex) {
+ return this._entryNodes[entryIndex].scriptId !== '0';
+ }
+
+ /**
+ * @override
+ * @param {number} entryIndex
+ * @return {string}
+ */
+ entryTitle(entryIndex) {
+ var node = this._entryNodes[entryIndex];
+ return WebInspector.beautifyFunctionName(node.functionName);
+ }
+
+ /**
+ * @override
+ * @param {number} entryIndex
+ * @return {?string}
+ */
+ entryFont(entryIndex) {
+ if (!this._font) {
+ this._font = (this.barHeight() - 4) + 'px ' + WebInspector.fontFamily();
+ this._boldFont = 'bold ' + this._font;
+ }
+ var node = this._entryNodes[entryIndex];
+ return node.deoptReason ? this._boldFont : this._font;
+ }
+
+ /**
+ * @override
+ * @param {number} entryIndex
+ * @return {string}
+ */
+ entryColor(entryIndex) {
+ var node = this._entryNodes[entryIndex];
+ // For idle and program, we want different 'shades of gray', so we fallback to functionName as scriptId = 0
+ // For rest of nodes e.g eval scripts, if url is empty then scriptId will be guaranteed to be non-zero
+ return this._colorGenerator.colorForID(node.url || (node.scriptId !== '0' ? node.scriptId : node.functionName));
+ }
+
+ /**
+ * @override
+ * @param {number} entryIndex
+ * @param {!CanvasRenderingContext2D} context
+ * @param {?string} text
+ * @param {number} barX
+ * @param {number} barY
+ * @param {number} barWidth
+ * @param {number} barHeight
+ * @return {boolean}
+ */
+ decorateEntry(entryIndex, context, text, barX, barY, barWidth, barHeight) {
+ return false;
+ }
+
+ /**
+ * @override
+ * @param {number} entryIndex
+ * @return {boolean}
+ */
+ forceDecoration(entryIndex) {
+ return false;
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ paddingLeft() {
+ return 0;
+ }
+
+ /**
+ * @override
+ * @param {number} entryIndex
+ * @return {string}
+ */
+ textColor(entryIndex) {
+ return '#333';
+ }
};
/**
- * @constructor
* @implements {WebInspector.Searchable}
- * @extends {WebInspector.VBox}
- * @param {!WebInspector.SearchableView} searchableView
- * @param {!WebInspector.FlameChartDataProvider} dataProvider
+ * @unrestricted
*/
-WebInspector.CPUProfileFlameChart = function(searchableView, dataProvider)
-{
- WebInspector.VBox.call(this);
- this.element.id = "cpu-flame-chart";
+WebInspector.CPUProfileFlameChart = class extends WebInspector.VBox {
+ /**
+ * @param {!WebInspector.SearchableView} searchableView
+ * @param {!WebInspector.FlameChartDataProvider} dataProvider
+ */
+ constructor(searchableView, dataProvider) {
+ super();
+ this.element.id = 'cpu-flame-chart';
this._searchableView = searchableView;
this._overviewPane = new WebInspector.CPUProfileFlameChart.OverviewPane(dataProvider);
@@ -272,379 +251,352 @@ WebInspector.CPUProfileFlameChart = function(searchableView, dataProvider)
this._overviewPane.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
this._dataProvider = dataProvider;
this._searchResults = [];
-};
+ }
+
+ /**
+ * @override
+ */
+ focus() {
+ this._mainPane.focus();
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _onWindowChanged(event) {
+ var windowLeft = event.data.windowTimeLeft;
+ var windowRight = event.data.windowTimeRight;
+ this._mainPane.setWindowTimes(windowLeft, windowRight);
+ }
+
+ /**
+ * @param {number} timeLeft
+ * @param {number} timeRight
+ */
+ selectRange(timeLeft, timeRight) {
+ this._overviewPane._selectRange(timeLeft, timeRight);
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _onEntrySelected(event) {
+ this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, event.data);
+ }
+
+ update() {
+ this._overviewPane.update();
+ this._mainPane.update();
+ }
+
+ /**
+ * @override
+ * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
+ * @param {boolean} shouldJump
+ * @param {boolean=} jumpBackwards
+ */
+ performSearch(searchConfig, shouldJump, jumpBackwards) {
+ var matcher = createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? '' : 'i');
+
+ var selectedEntryIndex = this._searchResultIndex !== -1 ? this._searchResults[this._searchResultIndex] : -1;
+ this._searchResults = [];
+ var entriesCount = this._dataProvider._entryNodes.length;
+ for (var index = 0; index < entriesCount; ++index) {
+ if (this._dataProvider.entryTitle(index).match(matcher))
+ this._searchResults.push(index);
+ }
-WebInspector.CPUProfileFlameChart.prototype = {
- focus: function()
- {
- this._mainPane.focus();
- },
-
- /**
- * @param {!WebInspector.Event} event
- */
- _onWindowChanged: function(event)
- {
- var windowLeft = event.data.windowTimeLeft;
- var windowRight = event.data.windowTimeRight;
- this._mainPane.setWindowTimes(windowLeft, windowRight);
- },
-
- /**
- * @param {number} timeLeft
- * @param {number} timeRight
- */
- selectRange: function(timeLeft, timeRight)
- {
- this._overviewPane._selectRange(timeLeft, timeRight);
- },
-
- /**
- * @param {!WebInspector.Event} event
- */
- _onEntrySelected: function(event)
- {
- this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, event.data);
- },
-
- update: function()
- {
- this._overviewPane.update();
- this._mainPane.update();
- },
-
- /**
- * @override
- * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
- * @param {boolean} shouldJump
- * @param {boolean=} jumpBackwards
- */
- performSearch: function(searchConfig, shouldJump, jumpBackwards)
- {
- var matcher = createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? "" : "i");
-
- var selectedEntryIndex = this._searchResultIndex !== -1 ? this._searchResults[this._searchResultIndex] : -1;
- this._searchResults = [];
- var entriesCount = this._dataProvider._entryNodes.length;
- for (var index = 0; index < entriesCount; ++index) {
- if (this._dataProvider.entryTitle(index).match(matcher))
- this._searchResults.push(index);
- }
-
- if (this._searchResults.length) {
- this._searchResultIndex = this._searchResults.indexOf(selectedEntryIndex);
- if (this._searchResultIndex === -1)
- this._searchResultIndex = jumpBackwards ? this._searchResults.length - 1 : 0;
- this._mainPane.setSelectedEntry(this._searchResults[this._searchResultIndex]);
- } else {
- this.searchCanceled();
- }
- this._searchableView.updateSearchMatchesCount(this._searchResults.length);
- this._searchableView.updateCurrentMatchIndex(this._searchResultIndex);
- },
-
- /**
- * @override
- */
- searchCanceled: function()
- {
- this._mainPane.setSelectedEntry(-1);
- this._searchResults = [];
- this._searchResultIndex = -1;
- },
-
- /**
- * @override
- */
- jumpToNextSearchResult: function()
- {
- this._searchResultIndex = (this._searchResultIndex + 1) % this._searchResults.length;
- this._mainPane.setSelectedEntry(this._searchResults[this._searchResultIndex]);
- this._searchableView.updateCurrentMatchIndex(this._searchResultIndex);
- },
-
- /**
- * @override
- */
- jumpToPreviousSearchResult: function()
- {
- this._searchResultIndex = (this._searchResultIndex - 1 + this._searchResults.length) % this._searchResults.length;
- this._mainPane.setSelectedEntry(this._searchResults[this._searchResultIndex]);
- this._searchableView.updateCurrentMatchIndex(this._searchResultIndex);
- },
-
- /**
- * @override
- * @return {boolean}
- */
- supportsCaseSensitiveSearch: function()
- {
- return true;
- },
-
- /**
- * @override
- * @return {boolean}
- */
- supportsRegexSearch: function()
- {
- return false;
- },
-
- __proto__: WebInspector.VBox.prototype
+ if (this._searchResults.length) {
+ this._searchResultIndex = this._searchResults.indexOf(selectedEntryIndex);
+ if (this._searchResultIndex === -1)
+ this._searchResultIndex = jumpBackwards ? this._searchResults.length - 1 : 0;
+ this._mainPane.setSelectedEntry(this._searchResults[this._searchResultIndex]);
+ } else {
+ this.searchCanceled();
+ }
+ this._searchableView.updateSearchMatchesCount(this._searchResults.length);
+ this._searchableView.updateCurrentMatchIndex(this._searchResultIndex);
+ }
+
+ /**
+ * @override
+ */
+ searchCanceled() {
+ this._mainPane.setSelectedEntry(-1);
+ this._searchResults = [];
+ this._searchResultIndex = -1;
+ }
+
+ /**
+ * @override
+ */
+ jumpToNextSearchResult() {
+ this._searchResultIndex = (this._searchResultIndex + 1) % this._searchResults.length;
+ this._mainPane.setSelectedEntry(this._searchResults[this._searchResultIndex]);
+ this._searchableView.updateCurrentMatchIndex(this._searchResultIndex);
+ }
+
+ /**
+ * @override
+ */
+ jumpToPreviousSearchResult() {
+ this._searchResultIndex = (this._searchResultIndex - 1 + this._searchResults.length) % this._searchResults.length;
+ this._mainPane.setSelectedEntry(this._searchResults[this._searchResultIndex]);
+ this._searchableView.updateCurrentMatchIndex(this._searchResultIndex);
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ supportsCaseSensitiveSearch() {
+ return true;
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ supportsRegexSearch() {
+ return false;
+ }
};
/**
- * @constructor
* @implements {WebInspector.TimelineGrid.Calculator}
+ * @unrestricted
*/
-WebInspector.CPUProfileFlameChart.OverviewCalculator = function(dataProvider)
-{
+WebInspector.CPUProfileFlameChart.OverviewCalculator = class {
+ constructor(dataProvider) {
this._dataProvider = dataProvider;
-};
-
-WebInspector.CPUProfileFlameChart.OverviewCalculator.prototype = {
- /**
- * @override
- * @return {number}
- */
- paddingLeft: function()
- {
- return 0;
- },
-
- /**
- * @param {!WebInspector.CPUProfileFlameChart.OverviewPane} overviewPane
- */
- _updateBoundaries: function(overviewPane)
- {
- this._minimumBoundaries = overviewPane._dataProvider.minimumBoundary();
- var totalTime = overviewPane._dataProvider.totalTime();
- this._maximumBoundaries = this._minimumBoundaries + totalTime;
- this._xScaleFactor = overviewPane._overviewContainer.clientWidth / totalTime;
- },
-
- /**
- * @override
- * @param {number} time
- * @return {number}
- */
- computePosition: function(time)
- {
- return (time - this._minimumBoundaries) * this._xScaleFactor;
- },
-
- /**
- * @override
- * @param {number} value
- * @param {number=} precision
- * @return {string}
- */
- formatValue: function(value, precision)
- {
- return this._dataProvider.formatValue(value - this._minimumBoundaries, precision);
- },
-
- /**
- * @override
- * @return {number}
- */
- maximumBoundary: function()
- {
- return this._maximumBoundaries;
- },
-
- /**
- * @override
- * @return {number}
- */
- minimumBoundary: function()
- {
- return this._minimumBoundaries;
- },
-
- /**
- * @override
- * @return {number}
- */
- zeroTime: function()
- {
- return this._minimumBoundaries;
- },
-
- /**
- * @override
- * @return {number}
- */
- boundarySpan: function()
- {
- return this._maximumBoundaries - this._minimumBoundaries;
- }
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ paddingLeft() {
+ return 0;
+ }
+
+ /**
+ * @param {!WebInspector.CPUProfileFlameChart.OverviewPane} overviewPane
+ */
+ _updateBoundaries(overviewPane) {
+ this._minimumBoundaries = overviewPane._dataProvider.minimumBoundary();
+ var totalTime = overviewPane._dataProvider.totalTime();
+ this._maximumBoundaries = this._minimumBoundaries + totalTime;
+ this._xScaleFactor = overviewPane._overviewContainer.clientWidth / totalTime;
+ }
+
+ /**
+ * @override
+ * @param {number} time
+ * @return {number}
+ */
+ computePosition(time) {
+ return (time - this._minimumBoundaries) * this._xScaleFactor;
+ }
+
+ /**
+ * @override
+ * @param {number} value
+ * @param {number=} precision
+ * @return {string}
+ */
+ formatValue(value, precision) {
+ return this._dataProvider.formatValue(value - this._minimumBoundaries, precision);
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ maximumBoundary() {
+ return this._maximumBoundaries;
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ minimumBoundary() {
+ return this._minimumBoundaries;
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ zeroTime() {
+ return this._minimumBoundaries;
+ }
+
+ /**
+ * @override
+ * @return {number}
+ */
+ boundarySpan() {
+ return this._maximumBoundaries - this._minimumBoundaries;
+ }
};
/**
- * @constructor
- * @extends {WebInspector.VBox}
* @implements {WebInspector.FlameChartDelegate}
- * @param {!WebInspector.FlameChartDataProvider} dataProvider
+ * @unrestricted
*/
-WebInspector.CPUProfileFlameChart.OverviewPane = function(dataProvider)
-{
- WebInspector.VBox.call(this);
- this.element.classList.add("cpu-profile-flame-chart-overview-pane");
- this._overviewContainer = this.element.createChild("div", "cpu-profile-flame-chart-overview-container");
- this._overviewGrid = new WebInspector.OverviewGrid("cpu-profile-flame-chart");
- this._overviewGrid.element.classList.add("fill");
- this._overviewCanvas = this._overviewContainer.createChild("canvas", "cpu-profile-flame-chart-overview-canvas");
+WebInspector.CPUProfileFlameChart.OverviewPane = class extends WebInspector.VBox {
+ /**
+ * @param {!WebInspector.FlameChartDataProvider} dataProvider
+ */
+ constructor(dataProvider) {
+ super();
+ this.element.classList.add('cpu-profile-flame-chart-overview-pane');
+ this._overviewContainer = this.element.createChild('div', 'cpu-profile-flame-chart-overview-container');
+ this._overviewGrid = new WebInspector.OverviewGrid('cpu-profile-flame-chart');
+ this._overviewGrid.element.classList.add('fill');
+ this._overviewCanvas = this._overviewContainer.createChild('canvas', 'cpu-profile-flame-chart-overview-canvas');
this._overviewContainer.appendChild(this._overviewGrid.element);
this._overviewCalculator = new WebInspector.CPUProfileFlameChart.OverviewCalculator(dataProvider);
this._dataProvider = dataProvider;
this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
-};
-
-WebInspector.CPUProfileFlameChart.OverviewPane.prototype = {
- /**
- * @override
- * @param {number} windowStartTime
- * @param {number} windowEndTime
- */
- requestWindowTimes: function(windowStartTime, windowEndTime)
- {
- this._selectRange(windowStartTime, windowEndTime);
- },
-
- /**
- * @override
- * @param {number} startTime
- * @param {number} endTime
- */
- updateRangeSelection: function(startTime, endTime)
- {
- },
-
- /**
- * @param {number} timeLeft
- * @param {number} timeRight
- */
- _selectRange: function(timeLeft, timeRight)
- {
- var startTime = this._dataProvider.minimumBoundary();
- var totalTime = this._dataProvider.totalTime();
- this._overviewGrid.setWindow((timeLeft - startTime) / totalTime, (timeRight - startTime) / totalTime);
- },
-
- /**
- * @param {!WebInspector.Event} event
- */
- _onWindowChanged: function(event)
- {
- var startTime = this._dataProvider.minimumBoundary();
- var totalTime = this._dataProvider.totalTime();
- var data = {
- windowTimeLeft: startTime + this._overviewGrid.windowLeft() * totalTime,
- windowTimeRight: startTime + this._overviewGrid.windowRight() * totalTime
- };
- this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.WindowChanged, data);
- },
-
- /**
- * @return {?WebInspector.FlameChart.TimelineData}
- */
- _timelineData: function()
- {
- return this._dataProvider.timelineData();
- },
-
- onResize: function()
- {
- this._scheduleUpdate();
- },
-
- _scheduleUpdate: function()
- {
- if (this._updateTimerId)
- return;
- this._updateTimerId = this.element.window().requestAnimationFrame(this.update.bind(this));
- },
-
- update: function()
- {
- this._updateTimerId = 0;
- var timelineData = this._timelineData();
- if (!timelineData)
- return;
- this._resetCanvas(this._overviewContainer.clientWidth, this._overviewContainer.clientHeight - WebInspector.FlameChart.DividersBarHeight);
- this._overviewCalculator._updateBoundaries(this);
- this._overviewGrid.updateDividers(this._overviewCalculator);
- this._drawOverviewCanvas();
- },
-
- _drawOverviewCanvas: function()
- {
- var canvasWidth = this._overviewCanvas.width;
- var canvasHeight = this._overviewCanvas.height;
- var drawData = this._calculateDrawData(canvasWidth);
- var context = this._overviewCanvas.getContext("2d");
- var ratio = window.devicePixelRatio;
- var offsetFromBottom = ratio;
- var lineWidth = 1;
- var yScaleFactor = canvasHeight / (this._dataProvider.maxStackDepth() * 1.1);
- context.lineWidth = lineWidth;
- context.translate(0.5, 0.5);
- context.strokeStyle = "rgba(20,0,0,0.4)";
- context.fillStyle = "rgba(214,225,254,0.8)";
- context.moveTo(-lineWidth, canvasHeight + lineWidth);
- context.lineTo(-lineWidth, Math.round(canvasHeight - drawData[0] * yScaleFactor - offsetFromBottom));
- var value;
- for (var x = 0; x < canvasWidth; ++x) {
- value = Math.round(canvasHeight - drawData[x] * yScaleFactor - offsetFromBottom);
- context.lineTo(x, value);
- }
- context.lineTo(canvasWidth + lineWidth, value);
- context.lineTo(canvasWidth + lineWidth, canvasHeight + lineWidth);
- context.fill();
- context.stroke();
- context.closePath();
- },
-
- /**
- * @param {number} width
- * @return {!Uint8Array}
- */
- _calculateDrawData: function(width)
- {
- var dataProvider = this._dataProvider;
- var timelineData = this._timelineData();
- var entryStartTimes = timelineData.entryStartTimes;
- var entryTotalTimes = timelineData.entryTotalTimes;
- var entryLevels = timelineData.entryLevels;
- var length = entryStartTimes.length;
- var minimumBoundary = this._dataProvider.minimumBoundary();
-
- var drawData = new Uint8Array(width);
- var scaleFactor = width / dataProvider.totalTime();
-
- for (var entryIndex = 0; entryIndex < length; ++entryIndex) {
- var start = Math.floor((entryStartTimes[entryIndex] - minimumBoundary) * scaleFactor);
- var finish = Math.floor((entryStartTimes[entryIndex] - minimumBoundary + entryTotalTimes[entryIndex]) * scaleFactor);
- for (var x = start; x <= finish; ++x)
- drawData[x] = Math.max(drawData[x], entryLevels[entryIndex] + 1);
- }
- return drawData;
- },
-
- /**
- * @param {number} width
- * @param {number} height
- */
- _resetCanvas: function(width, height)
- {
- var ratio = window.devicePixelRatio;
- this._overviewCanvas.width = width * ratio;
- this._overviewCanvas.height = height * ratio;
- this._overviewCanvas.style.width = width + "px";
- this._overviewCanvas.style.height = height + "px";
- },
-
- __proto__: WebInspector.VBox.prototype
+ }
+
+ /**
+ * @override
+ * @param {number} windowStartTime
+ * @param {number} windowEndTime
+ */
+ requestWindowTimes(windowStartTime, windowEndTime) {
+ this._selectRange(windowStartTime, windowEndTime);
+ }
+
+ /**
+ * @override
+ * @param {number} startTime
+ * @param {number} endTime
+ */
+ updateRangeSelection(startTime, endTime) {
+ }
+
+ /**
+ * @param {number} timeLeft
+ * @param {number} timeRight
+ */
+ _selectRange(timeLeft, timeRight) {
+ var startTime = this._dataProvider.minimumBoundary();
+ var totalTime = this._dataProvider.totalTime();
+ this._overviewGrid.setWindow((timeLeft - startTime) / totalTime, (timeRight - startTime) / totalTime);
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _onWindowChanged(event) {
+ var startTime = this._dataProvider.minimumBoundary();
+ var totalTime = this._dataProvider.totalTime();
+ var data = {
+ windowTimeLeft: startTime + this._overviewGrid.windowLeft() * totalTime,
+ windowTimeRight: startTime + this._overviewGrid.windowRight() * totalTime
+ };
+ this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.WindowChanged, data);
+ }
+
+ /**
+ * @return {?WebInspector.FlameChart.TimelineData}
+ */
+ _timelineData() {
+ return this._dataProvider.timelineData();
+ }
+
+ /**
+ * @override
+ */
+ onResize() {
+ this._scheduleUpdate();
+ }
+
+ _scheduleUpdate() {
+ if (this._updateTimerId)
+ return;
+ this._updateTimerId = this.element.window().requestAnimationFrame(this.update.bind(this));
+ }
+
+ update() {
+ this._updateTimerId = 0;
+ var timelineData = this._timelineData();
+ if (!timelineData)
+ return;
+ this._resetCanvas(
+ this._overviewContainer.clientWidth,
+ this._overviewContainer.clientHeight - WebInspector.FlameChart.DividersBarHeight);
+ this._overviewCalculator._updateBoundaries(this);
+ this._overviewGrid.updateDividers(this._overviewCalculator);
+ this._drawOverviewCanvas();
+ }
+
+ _drawOverviewCanvas() {
+ var canvasWidth = this._overviewCanvas.width;
+ var canvasHeight = this._overviewCanvas.height;
+ var drawData = this._calculateDrawData(canvasWidth);
+ var context = this._overviewCanvas.getContext('2d');
+ var ratio = window.devicePixelRatio;
+ var offsetFromBottom = ratio;
+ var lineWidth = 1;
+ var yScaleFactor = canvasHeight / (this._dataProvider.maxStackDepth() * 1.1);
+ context.lineWidth = lineWidth;
+ context.translate(0.5, 0.5);
+ context.strokeStyle = 'rgba(20,0,0,0.4)';
+ context.fillStyle = 'rgba(214,225,254,0.8)';
+ context.moveTo(-lineWidth, canvasHeight + lineWidth);
+ context.lineTo(-lineWidth, Math.round(canvasHeight - drawData[0] * yScaleFactor - offsetFromBottom));
+ var value;
+ for (var x = 0; x < canvasWidth; ++x) {
+ value = Math.round(canvasHeight - drawData[x] * yScaleFactor - offsetFromBottom);
+ context.lineTo(x, value);
+ }
+ context.lineTo(canvasWidth + lineWidth, value);
+ context.lineTo(canvasWidth + lineWidth, canvasHeight + lineWidth);
+ context.fill();
+ context.stroke();
+ context.closePath();
+ }
+
+ /**
+ * @param {number} width
+ * @return {!Uint8Array}
+ */
+ _calculateDrawData(width) {
+ var dataProvider = this._dataProvider;
+ var timelineData = this._timelineData();
+ var entryStartTimes = timelineData.entryStartTimes;
+ var entryTotalTimes = timelineData.entryTotalTimes;
+ var entryLevels = timelineData.entryLevels;
+ var length = entryStartTimes.length;
+ var minimumBoundary = this._dataProvider.minimumBoundary();
+
+ var drawData = new Uint8Array(width);
+ var scaleFactor = width / dataProvider.totalTime();
+
+ for (var entryIndex = 0; entryIndex < length; ++entryIndex) {
+ var start = Math.floor((entryStartTimes[entryIndex] - minimumBoundary) * scaleFactor);
+ var finish =
+ Math.floor((entryStartTimes[entryIndex] - minimumBoundary + entryTotalTimes[entryIndex]) * scaleFactor);
+ for (var x = start; x <= finish; ++x)
+ drawData[x] = Math.max(drawData[x], entryLevels[entryIndex] + 1);
+ }
+ return drawData;
+ }
+
+ /**
+ * @param {number} width
+ * @param {number} height
+ */
+ _resetCanvas(width, height) {
+ var ratio = window.devicePixelRatio;
+ this._overviewCanvas.width = width * ratio;
+ this._overviewCanvas.height = height * ratio;
+ this._overviewCanvas.style.width = width + 'px';
+ this._overviewCanvas.style.height = height + 'px';
+ }
};

Powered by Google App Engine
This is Rietveld 408576698