Changeset 242242 in webkit
- Timestamp:
- Feb 28, 2019, 4:48:04 PM (6 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r242241 r242242 1 2019-02-28 Joseph Pecoraro <pecoraro@apple.com> 2 3 Web Inspector: CPU Usage Timeline - Make Threads section expandable / collapsable 4 https://bugs.webkit.org/show_bug.cgi?id=195085 5 6 Reviewed by Matt Baker. 7 8 * UserInterface/Base/Setting.js: 9 New setting to save the Threads expanded/collapsed state. 10 11 * UserInterface/Views/CPUTimelineView.css: 12 (.timeline-view.cpu > .content > .details > .subtitle): 13 (.timeline-view.cpu > .content > .details > details > .subtitle.threads): 14 (.timeline-view.cpu > .content > .details > .subtitle): Deleted. 15 (.timeline-view.cpu > .content > .details > .subtitle.threads): Deleted. 16 Ensure subtitle styles apply now that one of the subtitles is inside 17 of a <details> / <summary> element. 18 19 * UserInterface/Views/CPUTimelineView.js: 20 (WI.CPUTimelineView.prototype.initialLayout): 21 Make the Threads group a <details> / <summary> expandable / collapsed element. 22 23 * UserInterface/Views/Main.css: 24 (summary): 25 (summary::-webkit-details-marker): 26 Default styles for <summary>. 27 1 28 2019-02-28 Joseph Pecoraro <pecoraro@apple.com> 2 29 -
trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js
r242049 r242242 130 130 clearLogOnNavigate: new WI.Setting("clear-log-on-navigate", true), 131 131 clearNetworkOnNavigate: new WI.Setting("clear-network-on-navigate", true), 132 cpuTimelineThreadDetailsExpanded: new WI.Setting("cpu-timeline-thread-details-expanded", false), 132 133 emulateInUserGesture: new WI.Setting("emulate-in-user-gesture", false), 133 134 enableControlFlowProfiler: new WI.Setting("enable-control-flow-profiler", false), -
trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css
r242104 r242242 63 63 } 64 64 65 .timeline-view.cpu > .content > .details > .subtitle { 65 .timeline-view.cpu > .content > .details > .subtitle, 66 .timeline-view.cpu > .content > .details > details > .subtitle { 66 67 padding: 0 10px 10px; 67 68 border-bottom: 1px solid var(--border-color); 68 69 } 69 70 70 .timeline-view.cpu > .content > .details > .subtitle.threads {71 .timeline-view.cpu > .content > .details > details > .subtitle.threads { 71 72 position: relative; 72 73 z-index: calc(var(--timeline-marker-z-index) + 1); -
trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js
r242194 r242242 179 179 this._breakdownLegendStyleElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Style); 180 180 181 let detailsContainerElement = this._detailsContainerElement =contentElement.appendChild(document.createElement("div"));181 let detailsContainerElement = contentElement.appendChild(document.createElement("div")); 182 182 detailsContainerElement.classList.add("details"); 183 183 … … 200 200 this._cpuUsageView = new WI.CPUUsageStackedView(WI.UIString("Total")); 201 201 this.addSubview(this._cpuUsageView); 202 this._detailsContainerElement.appendChild(this._cpuUsageView.element);202 detailsContainerElement.appendChild(this._cpuUsageView.element); 203 203 204 204 this._mainThreadWorkIndicatorView = new WI.CPUUsageIndicatorView; 205 205 this.addSubview(this._mainThreadWorkIndicatorView); 206 this._detailsContainerElement.appendChild(this._mainThreadWorkIndicatorView.element);206 detailsContainerElement.appendChild(this._mainThreadWorkIndicatorView.element); 207 207 208 208 this._mainThreadWorkIndicatorView.chart.element.addEventListener("click", this._handleIndicatorClick.bind(this)); 209 209 210 let threadsSubtitleElement = detailsContainerElement.appendChild(document.createElement("div")); 211 threadsSubtitleElement.classList.add("subtitle", "threads"); 210 this._threadsDetailsElement = detailsContainerElement.appendChild(document.createElement("details")); 211 this._threadsDetailsElement.open = WI.settings.cpuTimelineThreadDetailsExpanded.value; 212 this._threadsDetailsElement.addEventListener("toggle", (event) => { 213 WI.settings.cpuTimelineThreadDetailsExpanded.value = this._threadsDetailsElement.open; 214 this.updateLayout(); 215 }); 216 217 let threadsSubtitleElement = this._threadsDetailsElement.appendChild(document.createElement("summary")); 218 threadsSubtitleElement.classList.add("subtitle", "threads", "expandable"); 212 219 threadsSubtitleElement.textContent = WI.UIString("Threads"); 213 220 … … 215 222 this._mainThreadUsageView.element.classList.add("main-thread"); 216 223 this.addSubview(this._mainThreadUsageView); 217 this._ detailsContainerElement.appendChild(this._mainThreadUsageView.element);224 this._threadsDetailsElement.appendChild(this._mainThreadUsageView.element); 218 225 219 226 this._webkitThreadUsageView = new WI.CPUUsageView(WI.UIString("WebKit Threads")); 220 227 this._webkitThreadUsageView.element.classList.add("non-main-thread"); 221 228 this.addSubview(this._webkitThreadUsageView); 222 this._ detailsContainerElement.appendChild(this._webkitThreadUsageView.element);229 this._threadsDetailsElement.appendChild(this._webkitThreadUsageView.element); 223 230 224 231 this._unknownThreadUsageView = new WI.CPUUsageView(WI.UIString("Other Threads")); 225 232 this._unknownThreadUsageView.element.classList.add("non-main-thread"); 226 233 this.addSubview(this._unknownThreadUsageView); 227 this._ detailsContainerElement.appendChild(this._unknownThreadUsageView.element);234 this._threadsDetailsElement.appendChild(this._unknownThreadUsageView.element); 228 235 229 236 this._workerViews = []; … … 511 518 512 519 layoutView(this._cpuUsageView, null, CPUTimelineView.cpuUsageViewHeight, {dataPoints, min, max, average}); 513 layoutView(this._mainThreadUsageView, "mainThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: mainThreadMin, max: mainThreadMax, average: mainThreadAverage}); 514 layoutView(this._webkitThreadUsageView, "webkitThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: webkitThreadMin, max: webkitThreadMax, average: webkitThreadAverage}); 515 layoutView(this._unknownThreadUsageView, "unknownThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: unknownThreadMin, max: unknownThreadMax, average: unknownThreadAverage}); 516 517 this._removeWorkerThreadViews(); 518 519 for (let [workerId, workerData] of workersDataMap) { 520 let worker = WI.targetManager.targetForIdentifier(workerId); 521 let displayName = worker ? worker.displayName : WI.UIString("Worker Thread"); 522 let workerView = new WI.CPUUsageView(displayName); 523 workerView.element.classList.add("worker-thread"); 524 this.addSubview(workerView); 525 this._detailsContainerElement.insertBefore(workerView.element, this._webkitThreadUsageView.element); 526 this._workerViews.push(workerView); 527 528 layoutView(workerView, "usage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints: workerData.dataPoints, min: workerData.min, max: workerData.max, average: workerData.average}); 520 521 if (this._threadsDetailsElement.open) { 522 layoutView(this._mainThreadUsageView, "mainThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: mainThreadMin, max: mainThreadMax, average: mainThreadAverage}); 523 layoutView(this._webkitThreadUsageView, "webkitThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: webkitThreadMin, max: webkitThreadMax, average: webkitThreadAverage}); 524 layoutView(this._unknownThreadUsageView, "unknownThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints, min: unknownThreadMin, max: unknownThreadMax, average: unknownThreadAverage}); 525 526 this._removeWorkerThreadViews(); 527 528 for (let [workerId, workerData] of workersDataMap) { 529 let worker = WI.targetManager.targetForIdentifier(workerId); 530 let displayName = worker ? worker.displayName : WI.UIString("Worker Thread"); 531 let workerView = new WI.CPUUsageView(displayName); 532 workerView.element.classList.add("worker-thread"); 533 this.addSubview(workerView); 534 this._threadsDetailsElement.insertBefore(workerView.element, this._webkitThreadUsageView.element); 535 this._workerViews.push(workerView); 536 537 layoutView(workerView, "usage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints: workerData.dataPoints, min: workerData.min, max: workerData.max, average: workerData.average}); 538 } 529 539 } 530 540 -
trunk/Source/WebInspectorUI/UserInterface/Views/Main.css
r242018 r242242 32 32 } 33 33 34 summary { 35 outline: none; 36 } 37 38 summary::-webkit-details-marker { 39 color: hsl(0, 0%, 55%); 40 } 41 34 42 body { 35 43 font-family: -webkit-system-font, sans-serif;
Note:
See TracChangeset
for help on using the changeset viewer.