Changeset 242740 in webkit

Timestamp:

Mar 11, 2019, 2:26:50 PM (6 years ago)

Author:

Joseph Pecoraro

Message:

Web Inspector: CPU Usage Timeline - Better Thread chart layout values
​https://bugs.webkit.org/show_bug.cgi?id=195547

Reviewed by Devin Rousso.

• UserInterface/Views/CPUTimelineView.js:

(WI.CPUTimelineView.prototype.layout.bestThreadLayoutMax):
(WI.CPUTimelineView.prototype.layout.layoutView):
(WI.CPUTimelineView.prototype._showGraphOverlay):
Include a separate layoutMax for the combined view and a thread layoutMax
for the thread groups.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/CPUTimelineView.js (modified) (10 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-03-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: CPU Usage Timeline - Better Thread chart layout values
+        https://bugs.webkit.org/show_bug.cgi?id=195547
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/CPUTimelineView.js:
+        (WI.CPUTimelineView.prototype.layout.bestThreadLayoutMax):
+        (WI.CPUTimelineView.prototype.layout.layoutView):
+        (WI.CPUTimelineView.prototype._showGraphOverlay):
+        Include a separate layoutMax for the combined view and a thread layoutMax
+        for the thread groups.
+
 2019-03-11  Joseph Pecoraro  <pecoraro@apple.com>
 

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

@@ -461 +461 @@
         let webkitThreadMax = -Infinity;
         let unknownThreadMax = -Infinity;
+        let workerMax = -Infinity;
 
         let min = Infinity;
@@ -578 +579 @@
         unknownThreadAverage /= visibleRecords.length;
 
-        for (let [workerId, workerData] of workersDataMap)
+        for (let [workerId, workerData] of workersDataMap) {
             workerData.average = workerData.average / workerData.recordsCount;
+            if (workerData.max > workerMax)
+                workerMax = workerData.max;
+        }
 
         // If the graph end time is inside a gap, the last data point should
@@ -585 +589 @@
         if (discontinuities.length)
             visibleEndTime = discontinuities[0].startTime;
+
+        function bestThreadLayoutMax(value) {
+            if (value > 100)
+                return Math.ceil(value);            
+            return (Math.floor(value / 25) + 1) * 25;
+        }
 
         function removeGreaterThan(arr, max) {
@@ -622 +632 @@
         }
 
-        // Layout all graphs to the same time scale. The maximum value is
-        // the maximum total CPU usage across all threads.
-        let layoutMax = max;
-        this._layoutMax = max;
-
-        function layoutView(view, property, graphHeight, {dataPoints, min, max, average}) {
+        function layoutView(view, property, graphHeight, layoutMax, {dataPoints, min, max, average}) {
             if (min === Infinity)
                 min = 0;
@@ -686 +691 @@
         }
 
-        layoutView(this._cpuUsageView, null, CPUTimelineView.cpuUsageViewHeight, {dataPoints, min, max, average});
+        // Layout the combined graph to the maximum total CPU usage.
+        // Layout all the thread graphs to the same time scale, the maximum across threads / thread groups.
+        this._layoutMax = max;
+        this._threadLayoutMax = bestThreadLayoutMax(Math.max(mainThreadMax, webkitThreadMax, unknownThreadMax, workerMax));
+
+        layoutView(this._cpuUsageView, null, CPUTimelineView.cpuUsageViewHeight, this._layoutMax, {dataPoints, min, max, 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});
+            layoutView(this._mainThreadUsageView, "mainThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, this._threadLayoutMax, {dataPoints, min: mainThreadMin, max: mainThreadMax, average: mainThreadAverage});
+            layoutView(this._webkitThreadUsageView, "webkitThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, this._threadLayoutMax, {dataPoints, min: webkitThreadMin, max: webkitThreadMax, average: webkitThreadAverage});
+            layoutView(this._unknownThreadUsageView, "unknownThreadUsage", CPUTimelineView.threadCPUUsageViewHeight, this._threadLayoutMax, {dataPoints, min: unknownThreadMin, max: unknownThreadMax, average: unknownThreadAverage});
 
             this._removeWorkerThreadViews();
@@ -705 +715 @@
                 this._workerViews.push(workerView);
 
-                layoutView(workerView, "usage", CPUTimelineView.threadCPUUsageViewHeight, {dataPoints: workerData.dataPoints, min: workerData.min, max: workerData.max, average: workerData.average});
+                layoutView(workerView, "usage", CPUTimelineView.threadCPUUsageViewHeight, this._threadLayoutMax, {dataPoints: workerData.dataPoints, min: workerData.min, max: workerData.max, average: workerData.average});
             }
         }
@@ -1704 +1714 @@
         this._overlayTime = time;
 
-        let layoutMax = this._layoutMax;
         let secondsPerPixel = this._secondsPerPixelInLayout;
-        let graphMax = layoutMax * 1.05;
         let graphStartTime = this.startTime;
 
@@ -1719 +1727 @@
         let {mainThreadUsage, workerThreadUsage, webkitThreadUsage, unknownThreadUsage, workersData} = record;
 
-        function addOverlayPoint(view, graphHeight, value) {
+        function addOverlayPoint(view, graphHeight, layoutMax, value) {
             if (!value)
                 return;
 
+            let graphMax = layoutMax * 1.05;
+
             function yScale(value) {
                 return graphHeight - ((value / graphMax) * graphHeight);
@@ -1734 +1744 @@
 
         this._cpuUsageView.updateLegend(record);
-        addOverlayPoint(this._cpuUsageView, CPUTimelineView.cpuUsageViewHeight, mainThreadUsage);
-        addOverlayPoint(this._cpuUsageView, CPUTimelineView.cpuUsageViewHeight, mainThreadUsage + workerThreadUsage);
-        addOverlayPoint(this._cpuUsageView, CPUTimelineView.cpuUsageViewHeight, mainThreadUsage + workerThreadUsage + webkitThreadUsage + unknownThreadUsage);
+        addOverlayPoint(this._cpuUsageView, CPUTimelineView.cpuUsageViewHeight, this._layoutMax, mainThreadUsage);
+        addOverlayPoint(this._cpuUsageView, CPUTimelineView.cpuUsageViewHeight, this._layoutMax, mainThreadUsage + workerThreadUsage);
+        addOverlayPoint(this._cpuUsageView, CPUTimelineView.cpuUsageViewHeight, this._layoutMax, mainThreadUsage + workerThreadUsage + webkitThreadUsage + unknownThreadUsage);
 
         if (this._threadsDetailsElement.open) {
             this._mainThreadUsageView.updateLegend(mainThreadUsage);
-            addOverlayPoint(this._mainThreadUsageView, CPUTimelineView.threadCPUUsageViewHeight, mainThreadUsage);
+            addOverlayPoint(this._mainThreadUsageView, CPUTimelineView.threadCPUUsageViewHeight, this._threadLayoutMax, mainThreadUsage);
 
             this._webkitThreadUsageView.updateLegend(webkitThreadUsage);
-            addOverlayPoint(this._webkitThreadUsageView, CPUTimelineView.threadCPUUsageViewHeight, webkitThreadUsage);
+            addOverlayPoint(this._webkitThreadUsageView, CPUTimelineView.threadCPUUsageViewHeight, this._threadLayoutMax, webkitThreadUsage);
 
             this._unknownThreadUsageView.updateLegend(unknownThreadUsage);
-            addOverlayPoint(this._unknownThreadUsageView, CPUTimelineView.threadCPUUsageViewHeight, unknownThreadUsage);
+            addOverlayPoint(this._unknownThreadUsageView, CPUTimelineView.threadCPUUsageViewHeight, this._threadLayoutMax, unknownThreadUsage);
 
             for (let workerView of this._workerViews)
@@ -1756 +1766 @@
                     if (workerView) {
                         workerView.updateLegend(usage);
-                        addOverlayPoint(workerView, CPUTimelineView.threadCPUUsageViewHeight, usage);
+                        addOverlayPoint(workerView, CPUTimelineView.threadCPUUsageViewHeight, this._threadLayoutMax, usage);
                     }
                 }