WebKit Bugzilla
Attachment 370764 Details for
Bug 198299
: Web Inspector: Timelines: spacing around pie chart is different between CPU and Memory
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-198299-20190528104123.patch (text/plain), 10.51 KB, created by
Devin Rousso
on 2019-05-28 10:41:24 PDT
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Devin Rousso
Created:
2019-05-28 10:41:24 PDT
Size:
10.51 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index 788d30a070f3617f9e68040cc0c4c435e933c316..95f8f79cda564aff3934280aac9667205407b05d 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,35 @@ >+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 NOBODY (OOPS!). >+ >+ "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-24 Devin Rousso <drousso@apple.com> > > Web Inspector: Overlay: don't show setting for showing rulers/guides during element selection if it's not supported >diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >index 910b908329c6f94d9a18d8c449d6176fb7ce3e30..6524187541d6a6908ab467d189a555cca932a7fa 100644 >--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >@@ -1014,7 +1014,6 @@ localizedStrings["Stop recording once page loads"] = "Stop recording once page l > localizedStrings["Stopping the \u201C%s\u201D audit"] = "Stopping the \u201C%s\u201D audit"; > localizedStrings["Storage"] = "Storage"; > localizedStrings["Style Attribute"] = "Style Attribute"; >-localizedStrings["Style Resolution"] = "Style Resolution"; > localizedStrings["Style rule"] = "Style rule"; > localizedStrings["Styles"] = "Styles"; > localizedStrings["Styles Invalidated"] = "Styles Invalidated"; >diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css >index da3c8755b8ad44236b659cc6e808a83a1cb60d51..d7b3b6652177878288dbef7d5f5ecc76215627a8 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css >+++ b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css >@@ -27,17 +27,6 @@ body .timeline-view.cpu { > 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 @@ body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler { > 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 @@ body[dir=rtl] .timeline-view.cpu > .content > .overview > .divider { > -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); > } >diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js >index 365421dc1c7cb62228d9060ebf3312ba23f3e94c..2f974cd1d0adecf842c5d199dfee14480d0f6831 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js >+++ b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js >@@ -54,14 +54,14 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView > static displayNameForSampleType(type) > { > switch (type) { >- case WI.CPUTimelineView.SampleType.Script: >- return WI.UIString("Script"); >- case WI.CPUTimelineView.SampleType.Layout: >+ case CPUTimelineView.SampleType.JavaScript: >+ return WI.UIString("JavaScript"); >+ case CPUTimelineView.SampleType.Layout: > return WI.UIString("Layout"); >- case WI.CPUTimelineView.SampleType.Paint: >+ case CPUTimelineView.SampleType.Paint: > return WI.UIString("Paint"); >- 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 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView > 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 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView > } > > 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 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView > 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 @@ WI.CPUTimelineView.LayoutReason = { > > // 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", >diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css >index 9c5c2262d92e91fdc4c806570f012b47bd71236f..c81591ee66a564bbe7590c6646077f6d2d741365 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css >+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css >@@ -27,12 +27,6 @@ body .timeline-view.memory { > 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 @@ body[dir=rtl] .timeline-view.memory > .content > .details > .timeline-ruler { > .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 {
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 198299
:
370755
|
370756
|
370764
|
370803