Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (242740 => 242741)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-03-11 21:26:54 UTC (rev 242741)
@@ -1,5 +1,35 @@
2019-03-11 Joseph Pecoraro <[email protected]>
+ Web Inspector: CPU Usage Timeline - Enable by default
+ https://bugs.webkit.org/show_bug.cgi?id=195471
+
+ Reviewed by Devin Rousso.
+
+ Remove experimental setting and include the CPU timeline in the
+ default set of timelines.
+
+ * UserInterface/Base/Setting.js:
+ * UserInterface/Controllers/TimelineManager.js:
+ (WI.TimelineManager.defaultTimelineTypes):
+ * UserInterface/Main.html:
+ * UserInterface/Views/CPUTimelineOverviewGraph.css:
+ (.timeline-overview-graph.cpu > .stacked-column-chart > svg > rect.selected):
+ (.timeline-overview-graph.cpu > .column-chart > svg > rect): Deleted.
+ (body[dir=rtl] .timeline-overview-graph.cpu > .column-chart): Deleted.
+ * UserInterface/Views/CPUTimelineOverviewGraph.js:
+ (WI.CPUTimelineOverviewGraph):
+ (WI.CPUTimelineOverviewGraph.prototype.layout):
+ * UserInterface/Views/ContentView.js:
+ (WI.ContentView.createFromRepresentedObject):
+ * UserInterface/Views/LegacyCPUTimelineView.css: Removed.
+ * UserInterface/Views/LegacyCPUTimelineView.js: Removed.
+ * UserInterface/Views/SettingsTabContentView.js:
+ (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
+ * UserInterface/Views/Variables.css:
+ (:root):
+
+2019-03-11 Joseph Pecoraro <[email protected]>
+
Web Inspector: CPU Usage Timeline - Better Thread chart layout values
https://bugs.webkit.org/show_bug.cgi?id=195547
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2019-03-11 21:26:54 UTC (rev 242741)
@@ -158,7 +158,6 @@
zoomFactor: new WI.Setting("zoom-factor", 1),
// Experimental
- experimentalEnableCPUUsageEnhancements: new WI.Setting("experimental-cpu-usage", false),
experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
experimentalEnableNewTabBar: new WI.Setting("experimental-enable-new-tab-bar", false),
experimentalEnableSourcesTab: new WI.Setting("experimental-enable-sources-tab", false),
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js 2019-03-11 21:26:54 UTC (rev 242741)
@@ -107,6 +107,9 @@
WI.TimelineRecord.Type.Script,
];
+ if (WI.CPUInstrument.supported())
+ defaultTypes.push(WI.TimelineRecord.Type.CPU);
+
if (WI.FPSInstrument.supported())
defaultTypes.push(WI.TimelineRecord.Type.RenderingFrame);
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2019-03-11 21:26:54 UTC (rev 242741)
@@ -129,7 +129,6 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
- <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -712,7 +711,6 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-03-11 21:26:54 UTC (rev 242741)
@@ -82,13 +82,3 @@
stroke: var(--selected-background-color-active) !important;
stroke-opacity: 0.8;
}
-
-/* LegacyCPUTimeline */
-.timeline-overview-graph.cpu > .column-chart > svg > rect {
- stroke: var(--cpu-stroke-color);
- fill: var(--cpu-main-thread-fill-color);
-}
-
-body[dir=rtl] .timeline-overview-graph.cpu > .column-chart {
- transform: scaleX(-1);
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.js (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.js 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.js 2019-03-11 21:26:54 UTC (rev 242741)
@@ -38,11 +38,8 @@
this._cpuTimeline.addEventListener(WI.Timeline.Event.RecordAdded, this._cpuTimelineRecordAdded, this);
let size = new WI.Size(0, this.height);
- if (WI.settings.experimentalEnableCPUUsageEnhancements.value) {
- this._chart = new WI.StackedColumnChart(size);
- this._chart.initializeSections(["main-thread-usage", "worker-thread-usage", "total-usage"]);
- } else
- this._chart = new WI.ColumnChart(size);
+ this._chart = new WI.StackedColumnChart(size);
+ this._chart.initializeSections(["main-thread-usage", "worker-thread-usage", "total-usage"]);
this.addSubview(this._chart);
this.element.appendChild(this._chart.element);
@@ -129,16 +126,13 @@
// Bars for each record.
for (let record of visibleRecords) {
+ let additionalClass = record === this.selectedRecord ? "selected" : undefined;
let w = intervalWidth;
+ let x = xScale(record.startTime - (CPUTimelineOverviewGraph.samplingRatePerSecond / 2));
+ let h1 = Math.max(minimumDisplayHeight, yScale(record.mainThreadUsage));
+ let h2 = Math.max(minimumDisplayHeight, yScale(record.mainThreadUsage + record.workerThreadUsage));
let h3 = Math.max(minimumDisplayHeight, yScale(record.usage));
- let x = xScale(record.startTime - (CPUTimelineOverviewGraph.samplingRatePerSecond / 2));
- if (WI.settings.experimentalEnableCPUUsageEnhancements.value) {
- let additionalClass = record === this.selectedRecord ? "selected" : undefined;
- let h1 = Math.max(minimumDisplayHeight, yScale(record.mainThreadUsage));
- let h2 = Math.max(minimumDisplayHeight, yScale(record.mainThreadUsage + record.workerThreadUsage));
- this._chart.addColumnSet(x, height, w, [h1, h2, h3], additionalClass);
- } else
- this._chart.addColumn(x, height - h3, w, h3);
+ this._chart.addColumnSet(x, height, w, [h1, h2, h3], additionalClass);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js 2019-03-11 21:26:54 UTC (rev 242741)
@@ -83,11 +83,8 @@
if (timelineType === WI.TimelineRecord.Type.RenderingFrame)
return new WI.RenderingFrameTimelineView(representedObject, extraArguments);
- if (timelineType === WI.TimelineRecord.Type.CPU) {
- if (WI.settings.experimentalEnableCPUUsageEnhancements.value)
- return new WI.CPUTimelineView(representedObject, extraArguments);
- return new WI.LegacyCPUTimelineView(representedObject, extraArguments);
- }
+ if (timelineType === WI.TimelineRecord.Type.CPU)
+ return new WI.CPUTimelineView(representedObject, extraArguments);
if (timelineType === WI.TimelineRecord.Type.Memory)
return new WI.MemoryTimelineView(representedObject, extraArguments);
Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css 2019-03-11 21:26:54 UTC (rev 242741)
@@ -1,69 +0,0 @@
-/*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-body .timeline-view.legacy-cpu {
- overflow: scroll;
-}
-
-.timeline-view.legacy-cpu > .content {
- margin-top: 10px;
-}
-
-.timeline-view.legacy-cpu > .content .subtitle {
- font-family: -webkit-system-font, sans-serif;
- font-size: 14px;
-}
-
-.timeline-view.legacy-cpu > .content > .details {
- position: relative;
-}
-
-.timeline-view.legacy-cpu > .content > .details > .timeline-ruler {
- position: absolute;
- top: 5px;
- bottom: 0;
- right: 0;
- left: 0;
-
- --cpu-timeline-view-details-timeline-ruler-offset-start: 150px;
-}
-
-body[dir=ltr] .timeline-view.legacy-cpu > .content > .details > .timeline-ruler {
- left: var(--cpu-timeline-view-details-timeline-ruler-offset-start);
-}
-
-body[dir=rtl] .timeline-view.legacy-cpu > .content > .details > .timeline-ruler {
- right: var(--cpu-timeline-view-details-timeline-ruler-offset-start);
-}
-
-.timeline-view.legacy-cpu > .content > .details > .subtitle {
- padding: 0 10px 10px;
- border-bottom: 1px solid var(--border-color);
-}
-
-.timeline-view.legacy-cpu .cpu-usage-view .area-chart > svg > path {
- stroke: var(--cpu-stroke-color);
- fill: var(--cpu-main-thread-fill-color);
-}
Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.js (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.js 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.js 2019-03-11 21:26:54 UTC (rev 242741)
@@ -1,202 +0,0 @@
-/*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WI.LegacyCPUTimelineView = class LegacyCPUTimelineView extends WI.TimelineView
-{
- constructor(timeline, extraArguments)
- {
- console.assert(timeline.type === WI.TimelineRecord.Type.CPU, timeline);
-
- super(timeline, extraArguments);
-
- this._recording = extraArguments.recording;
- this._maxUsage = -Infinity;
-
- this.element.classList.add("legacy-cpu");
-
- let contentElement = this.element.appendChild(document.createElement("div"));
- contentElement.classList.add("content");
-
- let detailsContainerElement = this._detailsContainerElement = contentElement.appendChild(document.createElement("div"));
- detailsContainerElement.classList.add("details");
-
- this._timelineRuler = new WI.TimelineRuler;
- this.addSubview(this._timelineRuler);
- detailsContainerElement.appendChild(this._timelineRuler.element);
-
- let detailsSubtitleElement = detailsContainerElement.appendChild(document.createElement("div"));
- detailsSubtitleElement.classList.add("subtitle");
- detailsSubtitleElement.textContent = WI.UIString("CPU Usage");
-
- this._cpuUsageView = new WI.CPUUsageView;
- this.addSubview(this._cpuUsageView);
- this._detailsContainerElement.appendChild(this._cpuUsageView.element);
-
- timeline.addEventListener(WI.Timeline.Event.RecordAdded, this._cpuTimelineRecordAdded, this);
- }
-
- // Static
-
- static get cpuUsageViewHeight() { return 150; }
-
- // Public
-
- shown()
- {
- super.shown();
-
- this._timelineRuler.updateLayout(WI.View.LayoutReason.Resize);
- }
-
- closed()
- {
- console.assert(this.representedObject instanceof WI.Timeline);
- this.representedObject.removeEventListener(null, null, this);
- }
-
- reset()
- {
- super.reset();
-
- this._maxUsage = -Infinity;
-
- this.clear();
- }
-
- clear()
- {
- this._cpuUsageView.clear();
- }
-
- get scrollableElements()
- {
- return [this.element];
- }
-
- // Protected
-
- get showsFilterBar() { return false; }
-
- initialLayout()
- {
- this.element.style.setProperty("--cpu-usage-view-height", LegacyCPUTimelineView.cpuUsageViewHeight + "px");
- }
-
- layout()
- {
- if (this.layoutReason === WI.View.LayoutReason.Resize)
- return;
-
- // Always update timeline ruler.
- this._timelineRuler.zeroTime = this.zeroTime;
- this._timelineRuler.startTime = this.startTime;
- this._timelineRuler.endTime = this.endTime;
-
- let graphStartTime = this.startTime;
- let graphEndTime = this.endTime;
- let secondsPerPixel = this._timelineRuler.secondsPerPixel;
- let visibleEndTime = Math.min(this.endTime, this.currentTime);
-
- let discontinuities = this._recording.discontinuitiesInTimeRange(graphStartTime, visibleEndTime);
-
- // Don't include the record before the graph start if the graph start is within a gap.
- let includeRecordBeforeStart = !discontinuities.length || discontinuities[0].startTime > graphStartTime;
- let visibleRecords = this.representedObject.recordsInTimeRange(graphStartTime, visibleEndTime, includeRecordBeforeStart);
- if (!visibleRecords.length || (visibleRecords.length === 1 && visibleRecords[0].endTime < graphStartTime)) {
- this.clear();
- return;
- }
-
- let dataPoints = [];
- let max = -Infinity;
- let min = Infinity;
- let average = 0;
-
- for (let record of visibleRecords) {
- let time = record.startTime;
- let usage = record.usage;
-
- if (discontinuities.length && discontinuities[0].endTime < time) {
- let startDiscontinuity = discontinuities.shift();
- let endDiscontinuity = startDiscontinuity;
- while (discontinuities.length && discontinuities[0].endTime < time)
- endDiscontinuity = discontinuities.shift();
- dataPoints.push({time: startDiscontinuity.startTime, size: 0});
- dataPoints.push({time: endDiscontinuity.endTime, size: 0});
- dataPoints.push({time: endDiscontinuity.endTime, size: usage});
- }
-
- dataPoints.push({time, size: usage});
- max = Math.max(max, usage);
- min = Math.min(min, usage);
- average += usage;
- }
-
- average /= visibleRecords.length;
-
- // If the graph end time is inside a gap, the last data point should
- // only be extended to the start of the discontinuity.
- if (discontinuities.length)
- visibleEndTime = discontinuities[0].startTime;
-
- function layoutView(view, {dataPoints, min, max, average}) {
- if (min === Infinity)
- min = 0;
- if (max === -Infinity)
- max = 0;
-
- // Zoom in to the top of each graph to accentuate small changes.
- let graphMin = min * 0.95;
- let graphMax = (max * 1.05) - graphMin;
-
- function xScale(time) {
- return (time - graphStartTime) / secondsPerPixel;
- }
-
- let size = new WI.Size(xScale(graphEndTime), LegacyCPUTimelineView.cpuUsageViewHeight);
-
- function yScale(value) {
- return size.height - (((value - graphMin) / graphMax) * size.height);
- }
-
- view.updateChart(dataPoints, size, visibleEndTime, min, max, average, xScale, yScale, "size");
- }
-
- layoutView(this._cpuUsageView, {dataPoints, min, max, average});
- }
-
- // Private
-
- _cpuTimelineRecordAdded(event)
- {
- let cpuTimelineRecord = event.data.record;
- console.assert(cpuTimelineRecord instanceof WI.CPUTimelineRecord);
-
- this._maxUsage = Math.max(this._maxUsage, cpuTimelineRecord.usage);
-
- if (cpuTimelineRecord.startTime >= this.startTime && cpuTimelineRecord.endTime <= this.endTime)
- this.needsLayout();
- }
-};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js 2019-03-11 21:26:54 UTC (rev 242741)
@@ -272,9 +272,6 @@
experimentalSettingsView.addSetting(WI.UIString("User Interface:"), WI.settings.experimentalEnableNewTabBar, WI.UIString("Enable New Tab Bar"));
experimentalSettingsView.addSeparator();
- experimentalSettingsView.addSetting(WI.unlocalizedString("CPU Usage:"), WI.settings.experimentalEnableCPUUsageEnhancements, WI.unlocalizedString("Enhancements"));
- experimentalSettingsView.addSeparator();
-
experimentalSettingsView.addSetting(WI.UIString("Styles:"), WI.settings.experimentalEnableStylesJumpToEffective, WI.UIString("Show Jump to Effective Property Button"));
experimentalSettingsView.addSeparator();
@@ -305,7 +302,6 @@
listenForChange(WI.settings.experimentalEnableSourcesTab);
listenForChange(WI.settings.experimentalEnableLayersTab);
listenForChange(WI.settings.experimentalEnableNewTabBar);
- listenForChange(WI.settings.experimentalEnableCPUUsageEnhancements);
listenForChange(WI.settings.experimentalEnableStylesJumpToEffective);
this.addSettingsView(experimentalSettingsView);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (242740 => 242741)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-03-11 21:26:50 UTC (rev 242740)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-03-11 21:26:54 UTC (rev 242741)
@@ -132,10 +132,6 @@
--memory-max-comparison-fill-color: hsl(220, 10%, 75%);
--memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
- /* LegacyCPUTimeline */
- --cpu-fill-color: hsl(81, 80%, 50%);
- --cpu-stroke-color: hsl(118, 33%, 42%);
-
--cpu-other-thread-fill-color: hsl(81, 80%, 50%);
--cpu-other-thread-stroke-color: hsl(81, 80%, 30%);
--cpu-main-thread-fill-color: hsl(118, 43%, 55%);
