Changeset 245833 in webkit

Timestamp:

May 28, 2019 5:14:35 PM (5 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Timelines: spacing around pie chart is different between CPU and Memory
​https://bugs.webkit.org/show_bug.cgi?id=198299

Reviewed by Matt Baker.

"Style Resolution" is a much longer string than any of the legend strings in the Memory
timeline, and causes the CPU timeline legend to shift as a result.

Rename "Script" to "JavaScript" and "Style Resolution" to "Styles" so that the strings are
roughly the same length between the CPU and Memory timelines, meaning that they will appear
in the same spot with similar sizing.

• UserInterface/Views/CPUTimelineView.js:

(WI.CPUTimelineView.displayNameForSampleType):
(WI.CPUTimelineView.prototype.initialLayout):
(WI.CPUTimelineView.prototype._computeStatisticsData):
Drive-by: remove the WI prefix from all CPUTimelineView.SampleType since it's within the
same class.

• UserInterface/Views/CPUTimelineView.css:

(.timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-javascript): Added.
(.timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-script): Deleted.
Drive-by: move the .overview rules lower to be in the same area as the .overview * rules.

• UserInterface/Views/MemoryTimelineView.css:

(.timeline-view.memory > .content > .overview):
Drive-by: remove duplicate CSS rule.

• Localizations/en.lproj/localizedStrings.js:

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (1 diff)
• UserInterface/Views/CPUTimelineView.css (modified) (3 diffs)
• UserInterface/Views/CPUTimelineView.js (modified) (6 diffs)
• UserInterface/Views/MemoryTimelineView.css (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-05-28  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Timelines: spacing around pie chart is different between CPU and Memory
+        https://bugs.webkit.org/show_bug.cgi?id=198299
+
+        Reviewed by Matt Baker.
+
+        "Style Resolution" is a much longer string than any of the legend strings in the Memory
+        timeline, and causes the CPU timeline legend to shift as a result.
+
+        Rename "Script" to "JavaScript" and "Style Resolution" to "Styles" so that the strings are
+        roughly the same length between the CPU and Memory timelines, meaning that they will appear
+        in the same spot with similar sizing.
+
+        * UserInterface/Views/CPUTimelineView.js:
+        (WI.CPUTimelineView.displayNameForSampleType):
+        (WI.CPUTimelineView.prototype.initialLayout):
+        (WI.CPUTimelineView.prototype._computeStatisticsData):
+        Drive-by: remove the `WI` prefix from all `CPUTimelineView.SampleType` since it's within the
+        same class.
+
+        * UserInterface/Views/CPUTimelineView.css:
+        (.timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-javascript): Added.
+        (.timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-script): Deleted.
+        Drive-by: move the `.overview` rules lower to be in the same area as the `.overview *` rules.
+
+        * UserInterface/Views/MemoryTimelineView.css:
+        (.timeline-view.memory > .content > .overview):
+        Drive-by: remove duplicate CSS rule.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2019-05-28  Nikita Vasilyev  <nvasilyev@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -1042 +1042 @@
 /* CSS properties defined via HTML style attribute */
 localizedStrings["Style Attribute"] = "Style Attribute";
-localizedStrings["Style Resolution"] = "Style Resolution";
 localizedStrings["Style rule"] = "Style rule";
 localizedStrings["Styles"] = "Styles";

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

@@ -28 +28 @@
 }
 
-.timeline-view.cpu > .content > .overview {
-    display: flex;
-    justify-content: center;
-    padding: 10px;
-}
-
-.timeline-view.cpu > .content > .overview:not(:last-child) {
-    margin-bottom: 10px;
-    border-bottom: 1px solid var(--border-color);
-}
-
 .timeline-view.cpu > .content .subtitle {
     font-family: -webkit-system-font, sans-serif;
@@ -96 +85 @@
 }
 
+.timeline-view.cpu > .content > .overview {
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+}
+
+.timeline-view.cpu > .content > .overview:not(:last-child) {
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+}
+
 .timeline-view.cpu > .content > .overview > .chart {
     width: 420px;
@@ -150 +150 @@
 }
 
-.timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-script {
+.timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-javascript {
     border: 1px solid var(--cpu-script-stroke-color);
     background-color: var(--cpu-script-fill-color);

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

@@ -55 +55 @@
     {
         switch (type) {
-        case WI.CPUTimelineView.SampleType.Script:
-            return WI.UIString("Script");
-        case WI.CPUTimelineView.SampleType.Layout:
+        case CPUTimelineView.SampleType.Script:
+            return WI.UIString("JavaScript");
+        case CPUTimelineView.SampleType.Layout:
             return WI.repeatedUIString.timelineRecordLayout();
-        case WI.CPUTimelineView.SampleType.Paint:
+        case CPUTimelineView.SampleType.Paint:
             return WI.repeatedUIString.timelineRecordPaint();
-        case WI.CPUTimelineView.SampleType.Style:
-            return WI.UIString("Style Resolution");
+        case CPUTimelineView.SampleType.Style:
+            return WI.UIString("Styles");
         }
         console.error("Unknown sample type", type);
@@ -212 +212 @@
         this._breakdownLegendElement.classList.add("legend");
 
-        this._breakdownLegendScriptElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Script);
-        this._breakdownLegendLayoutElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Layout);
-        this._breakdownLegendPaintElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Paint);
-        this._breakdownLegendStyleElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Style);
+        this._breakdownLegendScriptElement = appendLegendRow(this._breakdownLegendElement, CPUTimelineView.SampleType.JavaScript);
+        this._breakdownLegendLayoutElement = appendLegendRow(this._breakdownLegendElement, CPUTimelineView.SampleType.Layout);
+        this._breakdownLegendPaintElement = appendLegendRow(this._breakdownLegendElement, CPUTimelineView.SampleType.Paint);
+        this._breakdownLegendStyleElement = appendLegendRow(this._breakdownLegendElement, CPUTimelineView.SampleType.Style);
 
         let dividerElement = overviewElement.appendChild(document.createElement("div"));
@@ -1301 +1301 @@
 
         markRecordEntries(scriptRecords, (record) => {
-            return WI.CPUTimelineView.SampleType.Script;
+            return CPUTimelineView.SampleType.JavaScript;
         });
 
@@ -1307 +1307 @@
             switch (record.eventType) {
             case WI.LayoutTimelineRecord.EventType.RecalculateStyles:
-                return WI.CPUTimelineView.SampleType.Style;
+                return CPUTimelineView.SampleType.Style;
             case WI.LayoutTimelineRecord.EventType.ForcedLayout:
             case WI.LayoutTimelineRecord.EventType.Layout:
-                return WI.CPUTimelineView.SampleType.Layout;
+                return CPUTimelineView.SampleType.Layout;
             case WI.LayoutTimelineRecord.EventType.Paint:
             case WI.LayoutTimelineRecord.EventType.Composite:
-                return WI.CPUTimelineView.SampleType.Paint;
+                return CPUTimelineView.SampleType.Paint;
             }
         });
@@ -1327 +1327 @@
                 samplesIdle++;
                 break;
-            case WI.CPUTimelineView.SampleType.Script:
+            case CPUTimelineView.SampleType.JavaScript:
                 samplesScript++;
                 break;
-            case WI.CPUTimelineView.SampleType.Layout:
+            case CPUTimelineView.SampleType.Layout:
                 samplesLayout++;
                 break;
-            case WI.CPUTimelineView.SampleType.Paint:
+            case CPUTimelineView.SampleType.Paint:
                 samplesPaint++;
                 break;
-            case WI.CPUTimelineView.SampleType.Style:
+            case CPUTimelineView.SampleType.Style:
                 samplesStyle++;
                 break;
@@ -1823 +1823 @@
 // NOTE: UI follows this order.
 WI.CPUTimelineView.SampleType = {
-    Script: "sample-type-script",
+    JavaScript: "sample-type-javascript",
     Layout: "sample-type-layout",
     Paint: "sample-type-paint",

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

@@ -26 +26 @@
 body .timeline-view.memory {
     overflow: scroll;
-}
-
-.timeline-view.memory > .content > .overview {
-    padding: 10px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid var(--border-color);
 }
 
@@ -69 +63 @@
     display: flex;
     justify-content: center;
+    margin-bottom: 10px;
+    padding: 10px;
+    border-bottom: 1px solid var(--border-color);
 }