DevTools: Extract performance monitor into a separate module.
Change-Id: Ib974add86a6a212be5fb40c88adbffaafa4aa1f6
Reviewed-on: https://chromium-review.googlesource.com/1000407
Reviewed-by: Dmitry Gozman <[email protected]>
Commit-Queue: Alexei Filippov <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#548979}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 2d418ee2c91484ac5c4c8729dd890c1e89756daadiff --git a/BUILD.gn b/BUILD.gn
index 913d62a..78a107a 100644
--- a/BUILD.gn
+++ b/BUILD.gn
@@ -461,6 +461,9 @@
"front_end/perf_ui/pieChart.css",
"front_end/perf_ui/timelineGrid.css",
"front_end/perf_ui/timelineOverviewInfo.css",
+ "front_end/performance_monitor/PerformanceMonitor.js",
+ "front_end/performance_monitor/performanceMonitor.css",
+ "front_end/performance_monitor/module.json",
"front_end/performance_test_runner/module.json",
"front_end/performance_test_runner/TimelineDataTestRunner.js",
"front_end/performance_test_runner/TimelineTestRunner.js",
@@ -742,8 +745,6 @@
"front_end/timeline/timelineStatusDialog.css",
"front_end/timeline/TimelineTreeView.js",
"front_end/timeline/TimelineUIUtils.js",
- "front_end/timeline/PerformanceMonitor.js",
- "front_end/timeline/performanceMonitor.css",
"front_end/toolbox_bootstrap/module.json",
"front_end/toolbox_bootstrap/Toolbox.js",
"front_end/toolbox.js",
@@ -1028,6 +1029,7 @@
"$resources_out_dir/node_debugger/node_debugger_module.js",
"$resources_out_dir/object_ui/object_ui_module.js",
"$resources_out_dir/perf_ui/perf_ui_module.js",
+ "$resources_out_dir/performance_monitor/performance_monitor_module.js",
"$resources_out_dir/profiler/profiler_module.js",
"$resources_out_dir/quick_open/quick_open_module.js",
"$resources_out_dir/resources/resources_module.js",
diff --git a/front_end/devtools_app.json b/front_end/devtools_app.json
index 4298706..e444158 100644
--- a/front_end/devtools_app.json
+++ b/front_end/devtools_app.json
@@ -19,6 +19,7 @@
{ "name": "layers" },
{ "name": "layer_viewer" },
{ "name": "network" },
+ { "name": "performance_monitor" },
{ "name": "product_registry_impl", "type": "remote" },
{ "name": "resources" },
{ "name": "security" },
diff --git a/front_end/timeline/PerformanceMonitor.js b/front_end/performance_monitor/PerformanceMonitor.js
similarity index 86%
rename from front_end/timeline/PerformanceMonitor.js
rename to front_end/performance_monitor/PerformanceMonitor.js
index b3e4db9..cd83433 100644
--- a/front_end/timeline/PerformanceMonitor.js
+++ b/front_end/performance_monitor/PerformanceMonitor.js
@@ -5,10 +5,10 @@
/**
* @unrestricted
*/
-Timeline.PerformanceMonitor = class extends UI.HBox {
+PerformanceMonitor.PerformanceMonitor = class extends UI.HBox {
constructor() {
super(true);
- this.registerRequiredCSS('timeline/performanceMonitor.css');
+ this.registerRequiredCSS('performance_monitor/performanceMonitor.css');
this.contentElement.classList.add('perfmon-pane');
this._model = SDK.targetManager.mainTarget().model(SDK.PerformanceMetricsModel);
/** @type {!Array<!{timestamp: number, metrics: !Map<string, number>}>} */
@@ -22,13 +22,13 @@
/** @const */
this._graphHeight = 90;
this._gridColor = UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.08)', UI.ThemeSupport.ColorUsage.Foreground);
- this._controlPane = new Timeline.PerformanceMonitor.ControlPane(this.contentElement);
+ this._controlPane = new PerformanceMonitor.PerformanceMonitor.ControlPane(this.contentElement);
const chartContainer = this.contentElement.createChild('div', 'perfmon-chart-container');
this._canvas = /** @type {!HTMLCanvasElement} */ (chartContainer.createChild('canvas'));
this.contentElement.createChild('div', 'perfmon-chart-suspend-overlay fill').createChild('div').textContent =
Common.UIString('Paused');
this._controlPane.addEventListener(
- Timeline.PerformanceMonitor.ControlPane.Events.MetricChanged, this._recalcChartHeight, this);
+ PerformanceMonitor.PerformanceMonitor.ControlPane.Events.MetricChanged, this._recalcChartHeight, this);
}
/**
@@ -66,7 +66,7 @@
animate.call(this);
/**
- * @this {Timeline.PerformanceMonitor}
+ * @this {PerformanceMonitor.PerformanceMonitor}
*/
function animate() {
this._draw();
@@ -135,7 +135,7 @@
/**
* @param {!CanvasRenderingContext2D} ctx
- * @param {!Timeline.PerformanceMonitor.ChartInfo} chartInfo
+ * @param {!PerformanceMonitor.PerformanceMonitor.ChartInfo} chartInfo
* @param {number} height
*/
_drawChart(ctx, chartInfo, height) {
@@ -172,7 +172,7 @@
}
/**
- * @param {!Timeline.PerformanceMonitor.ChartInfo} chartInfo
+ * @param {!PerformanceMonitor.PerformanceMonitor.ChartInfo} chartInfo
* @return {number}
*/
_calcMax(chartInfo) {
@@ -205,7 +205,7 @@
* @param {!CanvasRenderingContext2D} ctx
* @param {number} height
* @param {number} max
- * @param {!Timeline.PerformanceMonitor.ChartInfo} info
+ * @param {!PerformanceMonitor.PerformanceMonitor.ChartInfo} info
*/
_drawVerticalGrid(ctx, height, max, info) {
let base = Math.pow(10, Math.floor(Math.log10(max)));
@@ -222,7 +222,7 @@
ctx.beginPath();
for (let i = 0; i < 2; ++i) {
const y = calcY(scaleValue);
- const labelText = Timeline.PerformanceMonitor.MetricIndicator._formatNumber(scaleValue, info);
+ const labelText = PerformanceMonitor.PerformanceMonitor.MetricIndicator._formatNumber(scaleValue, info);
ctx.moveTo(0, y);
ctx.lineTo(4, y);
ctx.moveTo(ctx.measureText(labelText).width + 12, y);
@@ -246,8 +246,8 @@
}
/**
- * @param {!Timeline.PerformanceMonitor.ChartInfo} chartInfo
- * @param {!Timeline.PerformanceMonitor.MetricInfo} metricInfo
+ * @param {!PerformanceMonitor.PerformanceMonitor.ChartInfo} chartInfo
+ * @param {!PerformanceMonitor.PerformanceMonitor.MetricInfo} metricInfo
* @param {number} height
* @param {number} scaleMax
* @param {?Map<number, number>} stackedChartBaseLandscape
@@ -333,7 +333,7 @@
};
/** @enum {symbol} */
-Timeline.PerformanceMonitor.Format = {
+PerformanceMonitor.PerformanceMonitor.Format = {
Percent: Symbol('Percent'),
Bytes: Symbol('Bytes'),
};
@@ -341,14 +341,14 @@
/**
* @typedef {!{
* title: string,
- * metrics: !Array<!Timeline.PerformanceMonitor.MetricInfo>,
+ * metrics: !Array<!PerformanceMonitor.PerformanceMonitor.MetricInfo>,
* max: (number|undefined),
* currentMax: (number|undefined),
- * format: (!Timeline.PerformanceMonitor.Format|undefined),
+ * format: (!PerformanceMonitor.PerformanceMonitor.Format|undefined),
* smooth: (boolean|undefined)
* }}
*/
-Timeline.PerformanceMonitor.ChartInfo;
+PerformanceMonitor.PerformanceMonitor.ChartInfo;
/**
* @typedef {!{
@@ -356,9 +356,9 @@
* color: string
* }}
*/
-Timeline.PerformanceMonitor.MetricInfo;
+PerformanceMonitor.PerformanceMonitor.MetricInfo;
-Timeline.PerformanceMonitor.ControlPane = class extends Common.Object {
+PerformanceMonitor.PerformanceMonitor.ControlPane = class extends Common.Object {
/**
* @param {!Element} parent
*/
@@ -370,9 +370,9 @@
Common.settings.createSetting('perfmonActiveIndicators2', ['TaskDuration', 'JSHeapTotalSize', 'Nodes']);
/** @type {!Set<string>} */
this._enabledCharts = new Set(this._enabledChartsSetting.get());
- const format = Timeline.PerformanceMonitor.Format;
+ const format = PerformanceMonitor.PerformanceMonitor.Format;
- /** @type {!Array<!Timeline.PerformanceMonitor.ChartInfo>} */
+ /** @type {!Array<!PerformanceMonitor.PerformanceMonitor.ChartInfo>} */
this._chartsInfo = [
{
title: Common.UIString('CPU usage'),
@@ -404,12 +404,12 @@
metric.color = UI.themeSupport.patchColorText(metric.color, UI.ThemeSupport.ColorUsage.Foreground);
}
- /** @type {!Map<string, !Timeline.PerformanceMonitor.MetricIndicator>} */
+ /** @type {!Map<string, !PerformanceMonitor.PerformanceMonitor.MetricIndicator>} */
this._indicators = new Map();
for (const chartInfo of this._chartsInfo) {
const chartName = chartInfo.metrics[0].name;
const active = this._enabledCharts.has(chartName);
- const indicator = new Timeline.PerformanceMonitor.MetricIndicator(
+ const indicator = new PerformanceMonitor.PerformanceMonitor.MetricIndicator(
this.element, chartInfo, active, this._onToggle.bind(this, chartName));
this._indicators.set(chartName, indicator);
}
@@ -425,11 +425,11 @@
else
this._enabledCharts.delete(chartName);
this._enabledChartsSetting.set(Array.from(this._enabledCharts));
- this.dispatchEventToListeners(Timeline.PerformanceMonitor.ControlPane.Events.MetricChanged);
+ this.dispatchEventToListeners(PerformanceMonitor.PerformanceMonitor.ControlPane.Events.MetricChanged);
}
/**
- * @return {!Array<!Timeline.PerformanceMonitor.ChartInfo>}
+ * @return {!Array<!PerformanceMonitor.PerformanceMonitor.ChartInfo>}
*/
charts() {
return this._chartsInfo;
@@ -455,14 +455,14 @@
};
/** @enum {symbol} */
-Timeline.PerformanceMonitor.ControlPane.Events = {
+PerformanceMonitor.PerformanceMonitor.ControlPane.Events = {
MetricChanged: Symbol('MetricChanged')
};
-Timeline.PerformanceMonitor.MetricIndicator = class {
+PerformanceMonitor.PerformanceMonitor.MetricIndicator = class {
/**
* @param {!Element} parent
- * @param {!Timeline.PerformanceMonitor.ChartInfo} info
+ * @param {!PerformanceMonitor.PerformanceMonitor.ChartInfo} info
* @param {boolean} active
* @param {function(boolean)} onToggle
*/
@@ -484,14 +484,14 @@
/**
* @param {number} value
- * @param {!Timeline.PerformanceMonitor.ChartInfo} info
+ * @param {!PerformanceMonitor.PerformanceMonitor.ChartInfo} info
* @return {string}
*/
static _formatNumber(value, info) {
switch (info.format) {
- case Timeline.PerformanceMonitor.Format.Percent:
+ case PerformanceMonitor.PerformanceMonitor.Format.Percent:
return value.toLocaleString('en-US', {maximumFractionDigits: 1, style: 'percent'});
- case Timeline.PerformanceMonitor.Format.Bytes:
+ case PerformanceMonitor.PerformanceMonitor.Format.Bytes:
return Number.bytesToString(value);
default:
return value.toLocaleString('en-US', {maximumFractionDigits: 1});
@@ -502,7 +502,8 @@
* @param {number} value
*/
setValue(value) {
- this._valueElement.textContent = Timeline.PerformanceMonitor.MetricIndicator._formatNumber(value, this._info);
+ this._valueElement.textContent =
+ PerformanceMonitor.PerformanceMonitor.MetricIndicator._formatNumber(value, this._info);
}
_toggleIndicator() {
@@ -512,4 +513,5 @@
}
};
-Timeline.PerformanceMonitor.MetricIndicator._format = new Intl.NumberFormat('en-US', {maximumFractionDigits: 1});
+PerformanceMonitor.PerformanceMonitor.MetricIndicator._format =
+ new Intl.NumberFormat('en-US', {maximumFractionDigits: 1});
diff --git a/front_end/performance_monitor/module.json b/front_end/performance_monitor/module.json
new file mode 100644
index 0000000..e86cc98
--- /dev/null
+++ b/front_end/performance_monitor/module.json
@@ -0,0 +1,24 @@
+{
+ "extensions": [
+ {
+ "type": "view",
+ "location": "drawer-view",
+ "id": "performance.monitor",
+ "title": "Performance monitor",
+ "persistence": "closeable",
+ "order": 100,
+ "className": "PerformanceMonitor.PerformanceMonitor",
+ "tags": "performance, system monitor, monitor, activity, metrics"
+ }
+ ],
+ "dependencies": [
+ "sdk",
+ "ui"
+ ],
+ "scripts": [
+ "PerformanceMonitor.js"
+ ],
+ "resources": [
+ "performanceMonitor.css"
+ ]
+}
diff --git a/front_end/timeline/performanceMonitor.css b/front_end/performance_monitor/performanceMonitor.css
similarity index 100%
rename from front_end/timeline/performanceMonitor.css
rename to front_end/performance_monitor/performanceMonitor.css
diff --git a/front_end/timeline/module.json b/front_end/timeline/module.json
index c3450ac..75f4094 100644
--- a/front_end/timeline/module.json
+++ b/front_end/timeline/module.json
@@ -9,16 +9,6 @@
"className": "Timeline.TimelinePanel"
},
{
- "type": "view",
- "location": "drawer-view",
- "id": "performance.monitor",
- "title": "Performance monitor",
- "persistence": "closeable",
- "order": 100,
- "className": "Timeline.PerformanceMonitor",
- "tags": "performance, system monitor, monitor, activity, metrics"
- },
- {
"type": "setting",
"category": "Performance",
"title": "Hide chrome frame in Layers view",
@@ -239,7 +229,6 @@
"mobile_throttling"
],
"scripts": [
- "PerformanceMonitor.js",
"CountersGraph.js",
"ExtensionTracingSession.js",
"PerformanceModel.js",
@@ -260,7 +249,6 @@
"TimelinePanel.js"
],
"resources": [
- "performanceMonitor.css",
"historyToolbarButton.css",
"invalidationsTree.css",
"timelineFlamechartPopover.css",
