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