Attachment 361836 Details for Bug 194556 – [PATCH] Proposed Fix

[patch] [PATCH] Proposed Fix

experimental-flag-1.patch (text/plain), 15.79 KB, created by Joseph Pecoraro on 2019-02-12 13:55:28 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Joseph Pecoraro

Created: 2019-02-12 13:55:28 PST

Size: 15.79 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 6689a2b17cf..f39f41f82a0 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,24 @@
>+2019-02-12  Joseph Pecoraro  <pecoraro@apple.com>
>+
>+        Web Inspector: Experimental setting for CPU Usage Timeline improvements
>+        https://bugs.webkit.org/show_bug.cgi?id=194556
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * UserInterface/Main.html:
>+        * UserInterface/Views/LegacyCPUTimelineView.css: Added.
>+        * UserInterface/Views/LegacyCPUTimelineView.js: Added.
>+        Copy of CPUTimelineView.js/css to be used when the setting is not set.
>+
>+        * UserInterface/Views/ContentView.js:
>+        (WI.ContentView.createFromRepresentedObject):
>+        ContentView to create based on the setting.
>+
>+        * UserInterface/Base/Setting.js:
>+        * UserInterface/Views/SettingsTabContentView.js:
>+        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
>+        Experimental switch.
>+
> 2019-02-12  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         Web Inspector: Timeline.prototype.recordsInTimeRange uses a property most records do not have
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Setting.js b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>index 6c8e6271d7c..270cf26ff04 100644
>--- a/Source/WebInspectorUI/UserInterface/Base/Setting.js
>+++ b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>@@ -152,6 +152,7 @@ WI.settings = {
>     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),
>     experimentalEnableAuditTab: new WI.Setting("experimental-enable-audit-tab", false),
>diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
>index c97d00d2bbf..40ddf839515 100644
>--- a/Source/WebInspectorUI/UserInterface/Main.html
>+++ b/Source/WebInspectorUI/UserInterface/Main.html
>@@ -127,6 +127,7 @@
>     <link rel="stylesheet" href="Views/Layers3DContentView.css">
>     <link rel="stylesheet" href="Views/LayoutTimelineOverviewGraph.css">
>     <link rel="stylesheet" href="Views/LayoutTimelineView.css">
>+    <link rel="stylesheet" href="Views/LegacyCPUTimelineView.css">
>     <link rel="stylesheet" href="Views/LogContentView.css">
>     <link rel="stylesheet" href="Views/LogIcon.css">
>     <link rel="stylesheet" href="Views/MediaTimelineOverviewGraph.css">
>@@ -702,6 +703,7 @@
>     <script src="Views/LayoutTimelineDataGridNode.js"></script>
>     <script src="Views/LayoutTimelineOverviewGraph.js"></script>
>     <script src="Views/LayoutTimelineView.js"></script>
>+    <script src="Views/LegacyCPUTimelineView.js"></script>
>     <script src="Views/LineChart.js"></script>
>     <script src="Views/LogContentView.js"></script>
>     <script src="Views/MediaTimelineDataGridNode.js"></script>
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentView.js b/Source/WebInspectorUI/UserInterface/Views/ContentView.js
>index 558e45e0246..959036b9cfe 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ContentView.js
>@@ -84,7 +84,9 @@ WI.ContentView = class ContentView extends WI.View
>                 return new WI.RenderingFrameTimelineView(representedObject, extraArguments);
> 
>             if (timelineType === WI.TimelineRecord.Type.CPU)
>-                return new WI.CPUTimelineView(representedObject, extraArguments);
>+                if (WI.settings.experimentalEnableCPUUsageEnhancements.value)
>+                    return new WI.CPUTimelineView(representedObject, extraArguments);
>+                return new WI.LegacyCPUTimelineView(representedObject, extraArguments);
> 
>             if (timelineType === WI.TimelineRecord.Type.Memory)
>                 return new WI.MemoryTimelineView(representedObject, extraArguments);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css
>new file mode 100644
>index 00000000000..a37d9a4a45c
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css
>@@ -0,0 +1,69 @@
>+/*
>+ * 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 .line-chart > svg > path {
>+    stroke: var(--cpu-stroke-color);
>+    fill: var(--cpu-fill-color);
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.js
>new file mode 100644
>index 00000000000..86b46174aec
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.js
>@@ -0,0 +1,195 @@
>+/*
>+ * 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);
>+    }
>+
>+    // 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; }
>+
>+    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;
>+
>+        const cpuUsageViewHeight = 75; // Keep this in sync with .legacy-cpu-usage-view
>+
>+        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), cpuUsageViewHeight);
>+
>+            function yScale(value) {
>+                return size.height - (((value - graphMin) / graphMax) * size.height);
>+            }
>+
>+            view.updateChart(dataPoints, size, visibleEndTime, min, max, average, xScale, yScale);
>+        }
>+
>+        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();
>+    }
>+};
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
>index 15734b98bfa..52299bb0909 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
>@@ -261,6 +261,9 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
>         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();
>+
>         let reloadInspectorButton = document.createElement("button");
>         reloadInspectorButton.textContent = WI.UIString("Reload Web Inspector");
>         reloadInspectorButton.addEventListener("click", (event) => {
>@@ -285,6 +288,7 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
> 
>         listenForChange(WI.settings.experimentalEnableLayersTab);
>         listenForChange(WI.settings.experimentalEnableNewTabBar);
>+        listenForChange(WI.settings.experimentalEnableCPUUsageEnhancements);
> 
>         this.addSettingsView(experimentalSettingsView);
>     }

Actions: View | Formatted Diff | Diff

Attachments on bug 194556: 361836