- Revision
- 245833
- Author
- drou...@apple.com
- Date
- 2019-05-28 17:14:35 -0700 (Tue, 28 May 2019)
Log 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:
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (245832 => 245833)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-05-28 23:57:27 UTC (rev 245832)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-05-29 00:14:35 UTC (rev 245833)
@@ -1,3 +1,35 @@
+2019-05-28 Devin Rousso <drou...@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 <nvasil...@apple.com>
Web Inspector: Provide UIString descriptions to improve localizations
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (245832 => 245833)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-05-28 23:57:27 UTC (rev 245832)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-05-29 00:14:35 UTC (rev 245833)
@@ -1041,7 +1041,6 @@
localizedStrings["Storage"] = "Storage";
/* 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";
localizedStrings["Styles Invalidated"] = "Styles Invalidated";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css (245832 => 245833)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css 2019-05-28 23:57:27 UTC (rev 245832)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css 2019-05-29 00:14:35 UTC (rev 245833)
@@ -27,17 +27,6 @@
overflow: scroll;
}
-.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;
font-size: 14px;
@@ -95,6 +84,17 @@
background-color: var(--background-color-content);
}
+.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;
text-align: center;
@@ -149,7 +149,7 @@
-webkit-margin-end: 8px;
}
-.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);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js (245832 => 245833)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js 2019-05-28 23:57:27 UTC (rev 245832)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js 2019-05-29 00:14:35 UTC (rev 245833)
@@ -54,14 +54,14 @@
static displayNameForSampleType(type)
{
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);
}
@@ -211,10 +211,10 @@
this._breakdownLegendElement = breakdownChartContainerElement.appendChild(document.createElement("div"));
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"));
dividerElement.classList.add("divider");
@@ -1300,19 +1300,19 @@
}
markRecordEntries(scriptRecords, (record) => {
- return WI.CPUTimelineView.SampleType.Script;
+ return CPUTimelineView.SampleType._javascript_;
});
markRecordEntries(layoutRecords, (record) => {
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;
}
});
@@ -1326,16 +1326,16 @@
case undefined:
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;
}
@@ -1822,7 +1822,7 @@
// NOTE: UI follows this order.
WI.CPUTimelineView.SampleType = {
- Script: "sample-type-script",
+ _javascript_: "sample-type-_javascript_",
Layout: "sample-type-layout",
Paint: "sample-type-paint",
Style: "sample-type-style",
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css (245832 => 245833)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css 2019-05-28 23:57:27 UTC (rev 245832)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css 2019-05-29 00:14:35 UTC (rev 245833)
@@ -27,12 +27,6 @@
overflow: scroll;
}
-.timeline-view.memory > .content > .overview {
- padding: 10px;
- margin-bottom: 10px;
- border-bottom: 1px solid var(--border-color);
-}
-
.timeline-view.memory > .content .subtitle {
font-family: -webkit-system-font, sans-serif;
font-size: 14px;
@@ -68,6 +62,9 @@
.timeline-view.memory > .content > .overview {
display: flex;
justify-content: center;
+ margin-bottom: 10px;
+ padding: 10px;
+ border-bottom: 1px solid var(--border-color);
}
.timeline-view.memory > .content > .overview > .chart {
