Web Inspector: CPU Usage Timeline - Make Threads section expandable / collapsable
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Mar 2019 00:48:04 +0000 (00:48 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Mar 2019 00:48:04 +0000 (00:48 +0000)
https://bugs.webkit.org/show_bug.cgi?id=195085

Reviewed by Matt Baker.

* UserInterface/Base/Setting.js:
New setting to save the Threads expanded/collapsed state.

* UserInterface/Views/CPUTimelineView.css:
(.timeline-view.cpu > .content > .details > .subtitle):
(.timeline-view.cpu > .content > .details > details > .subtitle.threads):
(.timeline-view.cpu > .content > .details > .subtitle): Deleted.
(.timeline-view.cpu > .content > .details > .subtitle.threads): Deleted.
Ensure subtitle styles apply now that one of the subtitles is inside
of a <details> / <summary> element.

* UserInterface/Views/CPUTimelineView.js:
(WI.CPUTimelineView.prototype.initialLayout):
Make the Threads group a <details> / <summary> expandable / collapsed element.

* UserInterface/Views/Main.css:
(summary):
(summary::-webkit-details-marker):
Default styles for <summary>.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@242242 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css
Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js
Source/WebInspectorUI/UserInterface/Views/Main.css

index dfeb033..429194e 100644 (file)
@@ -1,5 +1,32 @@
 2019-02-28  Joseph Pecoraro  <pecoraro@apple.com>
 
+        Web Inspector: CPU Usage Timeline - Make Threads section expandable / collapsable
+        https://bugs.webkit.org/show_bug.cgi?id=195085
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Base/Setting.js:
+        New setting to save the Threads expanded/collapsed state.
+
+        * UserInterface/Views/CPUTimelineView.css:
+        (.timeline-view.cpu > .content > .details > .subtitle):
+        (.timeline-view.cpu > .content > .details > details > .subtitle.threads):
+        (.timeline-view.cpu > .content > .details > .subtitle): Deleted.
+        (.timeline-view.cpu > .content > .details > .subtitle.threads): Deleted.
+        Ensure subtitle styles apply now that one of the subtitles is inside
+        of a <details> / <summary> element.
+
+        * UserInterface/Views/CPUTimelineView.js:
+        (WI.CPUTimelineView.prototype.initialLayout):
+        Make the Threads group a <details> / <summary> expandable / collapsed element.
+
+        * UserInterface/Views/Main.css:
+        (summary):
+        (summary::-webkit-details-marker):
+        Default styles for <summary>.
+
+2019-02-28  Joseph Pecoraro  <pecoraro@apple.com>
+
         Web Inspector: View.removeSubview not removing the element properly when not parented
         https://bugs.webkit.org/show_bug.cgi?id=195146
 
index 713022a..d95c975 100644 (file)
@@ -129,6 +129,7 @@ WI.settings = {
     canvasRecordingAutoCaptureFrameCount: new WI.Setting("canvas-recording-auto-capture-frame-count", 1),
     clearLogOnNavigate: new WI.Setting("clear-log-on-navigate", true),
     clearNetworkOnNavigate: new WI.Setting("clear-network-on-navigate", true),
+    cpuTimelineThreadDetailsExpanded: new WI.Setting("cpu-timeline-thread-details-expanded", false),
     emulateInUserGesture: new WI.Setting("emulate-in-user-gesture", false),
     enableControlFlowProfiler: new WI.Setting("enable-control-flow-profiler", false),
     enableLineWrapping: new WI.Setting("enable-line-wrapping", false),
index 17e40df..168a0ea 100644 (file)
@@ -62,12 +62,13 @@ body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler {
     right: var(--cpu-timeline-view-details-timeline-ruler-offset-start);
 }
 
-.timeline-view.cpu > .content > .details > .subtitle {
+.timeline-view.cpu > .content > .details > .subtitle,
+.timeline-view.cpu > .content > .details > details > .subtitle {
     padding: 0 10px 10px;
     border-bottom: 1px solid var(--border-color);
 }
 
-.timeline-view.cpu > .content > .details > .subtitle.threads {
+.timeline-view.cpu > .content > .details > details > .subtitle.threads {
     position: relative;
     z-index: calc(var(--timeline-marker-z-index) + 1);
     padding-top: 10px;
index 7fdb07d..60a1693 100644 (file)
@@ -178,7 +178,7 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView
         this._breakdownLegendPaintElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Paint);
         this._breakdownLegendStyleElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Style);
 
-        let detailsContainerElement = this._detailsContainerElement = contentElement.appendChild(document.createElement("div"));
+        let detailsContainerElement = contentElement.appendChild(document.createElement("div"));
         detailsContainerElement.classList.add("details");
 
         this._timelineRuler = new WI.TimelineRuler;
@@ -199,32 +199,39 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView
 
         this._cpuUsageView = new WI.CPUUsageStackedView(WI.UIString("Total"));
         this.addSubview(this._cpuUsageView);
-        this._detailsContainerElement.appendChild(this._cpuUsageView.element);
+        detailsContainerElement.appendChild(this._cpuUsageView.element);
 
         this._mainThreadWorkIndicatorView = new WI.CPUUsageIndicatorView;
         this.addSubview(this._mainThreadWorkIndicatorView);
-        this._detailsContainerElement.appendChild(this._mainThreadWorkIndicatorView.element);
+        detailsContainerElement.appendChild(this._mainThreadWorkIndicatorView.element);
 
         this._mainThreadWorkIndicatorView.chart.element.addEventListener("click", this._handleIndicatorClick.bind(this));
 
-        let threadsSubtitleElement = detailsContainerElement.appendChild(document.createElement("div"));
-        threadsSubtitleElement.classList.add("subtitle", "threads");
+        this._threadsDetailsElement = detailsContainerElement.appendChild(document.createElement("details"));
+        this._threadsDetailsElement.open = WI.settings.cpuTimelineThreadDetailsExpanded.value;
+        this._threadsDetailsElement.addEventListener("toggle", (event) => {
+            WI.settings.cpuTimelineThreadDetailsExpanded.value = this._threadsDetailsElement.open;
+            this.updateLayout();
+        });
+
+        let threadsSubtitleElement = this._threadsDetailsElement.appendChild(document.createElement("summary"));
+        threadsSubtitleElement.classList.add("subtitle", "threads", "expandable");
         threadsSubtitleElement.textContent = WI.UIString("Threads");
 
         this._mainThreadUsageView = new WI.CPUUsageView(WI.UIString("Main Thread"));
         this._mainThreadUsageView.element.classList.add("main-thread");
         this.addSubview(this._mainThreadUsageView);
-        this._detailsContainerElement.appendChild(this._mainThreadUsageView.element);
+        this._threadsDetailsElement.appendChild(this._mainThreadUsageView.element);
 
         this._webkitThreadUsageView = new WI.CPUUsageView(WI.UIString("WebKit Threads"));
         this._webkitThreadUsageView.element.classList.add("non-main-thread");
         this.addSubview(this._webkitThreadUsageView);
-        this._detailsContainerElement.appendChild(this._webkitThreadUsageView.element);
+        this._threadsDetailsElement.appendChild(this._webkitThreadUsageView.element);
 
         this._unknownThreadUsageView = new WI.CPUUsageView(WI.UIString("Other Threads"));
         this._unknownThreadUsageView.element.classList.add("non-main-thread");
         this.addSubview(this._unknownThreadUsageView);
-        this._detailsContainerElement.appendChild(this._unknownThreadUsageView.element);
+        this._threadsDetailsElement.appendChild(this._unknownThreadUsageView.element);
 
         this._workerViews = [];
 
@@ -510,22 +517,25 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView
         }
 
         layoutView(this._cpuUsageView, null, CPUTimelineView.cpuUsageViewHeight, {dataPoints, min, max, average});
-        layoutView(this._mainThreadUsageView, "mainThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: mainThreadMin, max: mainThreadMax, average: mainThreadAverage});
-        layoutView(this._webkitThreadUsageView, "webkitThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: webkitThreadMin, max: webkitThreadMax, average: webkitThreadAverage});
-        layoutView(this._unknownThreadUsageView, "unknownThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: unknownThreadMin, max: unknownThreadMax, average: unknownThreadAverage});
 
-        this._removeWorkerThreadViews();
+        if (this._threadsDetailsElement.open) {
+            layoutView(this._mainThreadUsageView, "mainThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: mainThreadMin, max: mainThreadMax, average: mainThreadAverage});
+            layoutView(this._webkitThreadUsageView, "webkitThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: webkitThreadMin, max: webkitThreadMax, average: webkitThreadAverage});
+            layoutView(this._unknownThreadUsageView, "unknownThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: unknownThreadMin, max: unknownThreadMax, average: unknownThreadAverage});
 
-        for (let [workerId, workerData] of workersDataMap) {
-            let worker = WI.targetManager.targetForIdentifier(workerId);
-            let displayName = worker ? worker.displayName : WI.UIString("Worker Thread");
-            let workerView = new WI.CPUUsageView(displayName);
-            workerView.element.classList.add("worker-thread");
-            this.addSubview(workerView);
-            this._detailsContainerElement.insertBefore(workerView.element, this._webkitThreadUsageView.element);
-            this._workerViews.push(workerView);
+            this._removeWorkerThreadViews();
 
-            layoutView(workerView, "usage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints: workerData.dataPoints, min: workerData.min, max: workerData.max, average: workerData.average});
+            for (let [workerId, workerData] of workersDataMap) {
+                let worker = WI.targetManager.targetForIdentifier(workerId);
+                let displayName = worker ? worker.displayName : WI.UIString("Worker Thread");
+                let workerView = new WI.CPUUsageView(displayName);
+                workerView.element.classList.add("worker-thread");
+                this.addSubview(workerView);
+                this._threadsDetailsElement.insertBefore(workerView.element, this._webkitThreadUsageView.element);
+                this._workerViews.push(workerView);
+
+                layoutView(workerView, "usage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints: workerData.dataPoints, min: workerData.min, max: workerData.max, average: workerData.average});
+            }
         }
 
         function xScaleIndicatorRange(sampleIndex) {
index 2977eb3..b087142 100644 (file)
     supported-color-schemes: light dark;
 }
 
+summary {
+    outline: none;
+}
+
+summary::-webkit-details-marker {
+    color: hsl(0, 0%, 55%);
+}
+
 body {
     font-family: -webkit-system-font, sans-serif;
     font-size: 11px;