Changeset 242242 in webkit

Timestamp:

Feb 28, 2019, 4:48:04 PM (6 years ago)

Author:

Joseph Pecoraro

Message:

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>.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Base/Setting.js (modified) (1 diff)
• UserInterface/Views/CPUTimelineView.css (modified) (1 diff)
• UserInterface/Views/CPUTimelineView.js (modified) (4 diffs)
• UserInterface/Views/Main.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

@@ -130 +130 @@
     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),

trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css

@@ -63 +63 @@
 }
 
-.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);

trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js

@@ -179 +179 @@
         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");
 
@@ -200 +200 @@
         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");
 
@@ -215 +222 @@
         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 = [];
@@ -511 +518 @@
 
         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();
-
-        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);
-
-            layoutView(workerView, "usage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints: workerData.dataPoints, min: workerData.min, max: workerData.max, average: workerData.average});
+
+        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});
+
+            this._removeWorkerThreadViews();
+
+            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});
+            }
         }
 

trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

@@ -32 +32 @@
 }
 
+summary {
+    outline: none;
+}
+
+summary::-webkit-details-marker {
+    color: hsl(0, 0%, 55%);
+}
+
 body {
     font-family: -webkit-system-font, sans-serif;