Changeset 242242 in webkit


Ignore:
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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r242241 r242242  
     12019-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
    1282019-02-28  Joseph Pecoraro  <pecoraro@apple.com>
    229
  • trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

    r242049 r242242  
    130130    clearLogOnNavigate: new WI.Setting("clear-log-on-navigate", true),
    131131    clearNetworkOnNavigate: new WI.Setting("clear-network-on-navigate", true),
     132    cpuTimelineThreadDetailsExpanded: new WI.Setting("cpu-timeline-thread-details-expanded", false),
    132133    emulateInUserGesture: new WI.Setting("emulate-in-user-gesture", false),
    133134    enableControlFlowProfiler: new WI.Setting("enable-control-flow-profiler", false),
  • trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css

    r242104 r242242  
    6363}
    6464
    65 .timeline-view.cpu > .content > .details > .subtitle {
     65.timeline-view.cpu > .content > .details > .subtitle,
     66.timeline-view.cpu > .content > .details > details > .subtitle {
    6667    padding: 0 10px 10px;
    6768    border-bottom: 1px solid var(--border-color);
    6869}
    6970
    70 .timeline-view.cpu > .content > .details > .subtitle.threads {
     71.timeline-view.cpu > .content > .details > details > .subtitle.threads {
    7172    position: relative;
    7273    z-index: calc(var(--timeline-marker-z-index) + 1);
  • trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js

    r242194 r242242  
    179179        this._breakdownLegendStyleElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Style);
    180180
    181         let detailsContainerElement = this._detailsContainerElement = contentElement.appendChild(document.createElement("div"));
     181        let detailsContainerElement = contentElement.appendChild(document.createElement("div"));
    182182        detailsContainerElement.classList.add("details");
    183183
     
    200200        this._cpuUsageView = new WI.CPUUsageStackedView(WI.UIString("Total"));
    201201        this.addSubview(this._cpuUsageView);
    202         this._detailsContainerElement.appendChild(this._cpuUsageView.element);
     202        detailsContainerElement.appendChild(this._cpuUsageView.element);
    203203
    204204        this._mainThreadWorkIndicatorView = new WI.CPUUsageIndicatorView;
    205205        this.addSubview(this._mainThreadWorkIndicatorView);
    206         this._detailsContainerElement.appendChild(this._mainThreadWorkIndicatorView.element);
     206        detailsContainerElement.appendChild(this._mainThreadWorkIndicatorView.element);
    207207
    208208        this._mainThreadWorkIndicatorView.chart.element.addEventListener("click", this._handleIndicatorClick.bind(this));
    209209
    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");
    212219        threadsSubtitleElement.textContent = WI.UIString("Threads");
    213220
     
    215222        this._mainThreadUsageView.element.classList.add("main-thread");
    216223        this.addSubview(this._mainThreadUsageView);
    217         this._detailsContainerElement.appendChild(this._mainThreadUsageView.element);
     224        this._threadsDetailsElement.appendChild(this._mainThreadUsageView.element);
    218225
    219226        this._webkitThreadUsageView = new WI.CPUUsageView(WI.UIString("WebKit Threads"));
    220227        this._webkitThreadUsageView.element.classList.add("non-main-thread");
    221228        this.addSubview(this._webkitThreadUsageView);
    222         this._detailsContainerElement.appendChild(this._webkitThreadUsageView.element);
     229        this._threadsDetailsElement.appendChild(this._webkitThreadUsageView.element);
    223230
    224231        this._unknownThreadUsageView = new WI.CPUUsageView(WI.UIString("Other Threads"));
    225232        this._unknownThreadUsageView.element.classList.add("non-main-thread");
    226233        this.addSubview(this._unknownThreadUsageView);
    227         this._detailsContainerElement.appendChild(this._unknownThreadUsageView.element);
     234        this._threadsDetailsElement.appendChild(this._unknownThreadUsageView.element);
    228235
    229236        this._workerViews = [];
     
    511518
    512519        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            }
    529539        }
    530540
  • trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

    r242018 r242242  
    3232}
    3333
     34summary {
     35    outline: none;
     36}
     37
     38summary::-webkit-details-marker {
     39    color: hsl(0, 0%, 55%);
     40}
     41
    3442body {
    3543    font-family: -webkit-system-font, sans-serif;
Note: See TracChangeset for help on using the changeset viewer.