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