Changeset 245833 in webkit
- Timestamp:
- May 28, 2019 5:14:35 PM (5 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r245827 r245833 1 2019-05-28 Devin Rousso <drousso@apple.com> 2 3 Web Inspector: Timelines: spacing around pie chart is different between CPU and Memory 4 https://bugs.webkit.org/show_bug.cgi?id=198299 5 6 Reviewed by Matt Baker. 7 8 "Style Resolution" is a much longer string than any of the legend strings in the Memory 9 timeline, and causes the CPU timeline legend to shift as a result. 10 11 Rename "Script" to "JavaScript" and "Style Resolution" to "Styles" so that the strings are 12 roughly the same length between the CPU and Memory timelines, meaning that they will appear 13 in the same spot with similar sizing. 14 15 * UserInterface/Views/CPUTimelineView.js: 16 (WI.CPUTimelineView.displayNameForSampleType): 17 (WI.CPUTimelineView.prototype.initialLayout): 18 (WI.CPUTimelineView.prototype._computeStatisticsData): 19 Drive-by: remove the `WI` prefix from all `CPUTimelineView.SampleType` since it's within the 20 same class. 21 22 * UserInterface/Views/CPUTimelineView.css: 23 (.timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-javascript): Added. 24 (.timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-script): Deleted. 25 Drive-by: move the `.overview` rules lower to be in the same area as the `.overview *` rules. 26 27 * UserInterface/Views/MemoryTimelineView.css: 28 (.timeline-view.memory > .content > .overview): 29 Drive-by: remove duplicate CSS rule. 30 31 * Localizations/en.lproj/localizedStrings.js: 32 1 33 2019-05-28 Nikita Vasilyev <nvasilyev@apple.com> 2 34 -
trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
r245827 r245833 1042 1042 /* CSS properties defined via HTML style attribute */ 1043 1043 localizedStrings["Style Attribute"] = "Style Attribute"; 1044 localizedStrings["Style Resolution"] = "Style Resolution";1045 1044 localizedStrings["Style rule"] = "Style rule"; 1046 1045 localizedStrings["Styles"] = "Styles"; -
trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css
r244479 r245833 28 28 } 29 29 30 .timeline-view.cpu > .content > .overview {31 display: flex;32 justify-content: center;33 padding: 10px;34 }35 36 .timeline-view.cpu > .content > .overview:not(:last-child) {37 margin-bottom: 10px;38 border-bottom: 1px solid var(--border-color);39 }40 41 30 .timeline-view.cpu > .content .subtitle { 42 31 font-family: -webkit-system-font, sans-serif; … … 96 85 } 97 86 87 .timeline-view.cpu > .content > .overview { 88 display: flex; 89 justify-content: center; 90 padding: 10px; 91 } 92 93 .timeline-view.cpu > .content > .overview:not(:last-child) { 94 margin-bottom: 10px; 95 border-bottom: 1px solid var(--border-color); 96 } 97 98 98 .timeline-view.cpu > .content > .overview > .chart { 99 99 width: 420px; … … 150 150 } 151 151 152 .timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type- script {152 .timeline-view.cpu > .content > .overview .legend > .row > .swatch.sample-type-javascript { 153 153 border: 1px solid var(--cpu-script-stroke-color); 154 154 background-color: var(--cpu-script-fill-color); -
trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js
r245827 r245833 55 55 { 56 56 switch (type) { 57 case WI.CPUTimelineView.SampleType.Script:58 return WI.UIString(" Script");59 case WI.CPUTimelineView.SampleType.Layout:57 case CPUTimelineView.SampleType.Script: 58 return WI.UIString("JavaScript"); 59 case CPUTimelineView.SampleType.Layout: 60 60 return WI.repeatedUIString.timelineRecordLayout(); 61 case WI.CPUTimelineView.SampleType.Paint:61 case CPUTimelineView.SampleType.Paint: 62 62 return WI.repeatedUIString.timelineRecordPaint(); 63 case WI.CPUTimelineView.SampleType.Style:64 return WI.UIString("Style Resolution");63 case CPUTimelineView.SampleType.Style: 64 return WI.UIString("Styles"); 65 65 } 66 66 console.error("Unknown sample type", type); … … 212 212 this._breakdownLegendElement.classList.add("legend"); 213 213 214 this._breakdownLegendScriptElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Script);215 this._breakdownLegendLayoutElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Layout);216 this._breakdownLegendPaintElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Paint);217 this._breakdownLegendStyleElement = appendLegendRow(this._breakdownLegendElement, WI.CPUTimelineView.SampleType.Style);214 this._breakdownLegendScriptElement = appendLegendRow(this._breakdownLegendElement, CPUTimelineView.SampleType.JavaScript); 215 this._breakdownLegendLayoutElement = appendLegendRow(this._breakdownLegendElement, CPUTimelineView.SampleType.Layout); 216 this._breakdownLegendPaintElement = appendLegendRow(this._breakdownLegendElement, CPUTimelineView.SampleType.Paint); 217 this._breakdownLegendStyleElement = appendLegendRow(this._breakdownLegendElement, CPUTimelineView.SampleType.Style); 218 218 219 219 let dividerElement = overviewElement.appendChild(document.createElement("div")); … … 1301 1301 1302 1302 markRecordEntries(scriptRecords, (record) => { 1303 return WI.CPUTimelineView.SampleType.Script;1303 return CPUTimelineView.SampleType.JavaScript; 1304 1304 }); 1305 1305 … … 1307 1307 switch (record.eventType) { 1308 1308 case WI.LayoutTimelineRecord.EventType.RecalculateStyles: 1309 return WI.CPUTimelineView.SampleType.Style;1309 return CPUTimelineView.SampleType.Style; 1310 1310 case WI.LayoutTimelineRecord.EventType.ForcedLayout: 1311 1311 case WI.LayoutTimelineRecord.EventType.Layout: 1312 return WI.CPUTimelineView.SampleType.Layout;1312 return CPUTimelineView.SampleType.Layout; 1313 1313 case WI.LayoutTimelineRecord.EventType.Paint: 1314 1314 case WI.LayoutTimelineRecord.EventType.Composite: 1315 return WI.CPUTimelineView.SampleType.Paint;1315 return CPUTimelineView.SampleType.Paint; 1316 1316 } 1317 1317 }); … … 1327 1327 samplesIdle++; 1328 1328 break; 1329 case WI.CPUTimelineView.SampleType.Script:1329 case CPUTimelineView.SampleType.JavaScript: 1330 1330 samplesScript++; 1331 1331 break; 1332 case WI.CPUTimelineView.SampleType.Layout:1332 case CPUTimelineView.SampleType.Layout: 1333 1333 samplesLayout++; 1334 1334 break; 1335 case WI.CPUTimelineView.SampleType.Paint:1335 case CPUTimelineView.SampleType.Paint: 1336 1336 samplesPaint++; 1337 1337 break; 1338 case WI.CPUTimelineView.SampleType.Style:1338 case CPUTimelineView.SampleType.Style: 1339 1339 samplesStyle++; 1340 1340 break; … … 1823 1823 // NOTE: UI follows this order. 1824 1824 WI.CPUTimelineView.SampleType = { 1825 Script: "sample-type-script",1825 JavaScript: "sample-type-javascript", 1826 1826 Layout: "sample-type-layout", 1827 1827 Paint: "sample-type-paint", -
trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
r242077 r245833 26 26 body .timeline-view.memory { 27 27 overflow: scroll; 28 }29 30 .timeline-view.memory > .content > .overview {31 padding: 10px;32 margin-bottom: 10px;33 border-bottom: 1px solid var(--border-color);34 28 } 35 29 … … 69 63 display: flex; 70 64 justify-content: center; 65 margin-bottom: 10px; 66 padding: 10px; 67 border-bottom: 1px solid var(--border-color); 71 68 } 72 69
Note: See TracChangeset
for help on using the changeset viewer.