Changeset 242604 in webkit
- Timestamp:
- Mar 7, 2019 11:24:23 AM (5 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 9 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r242602 r242604 1 2019-03-07 Devin Rousso <drousso@apple.com> 2 3 Web Inspector: REGRESSION(r242118): WI.ScopeBar missing background 4 https://bugs.webkit.org/show_bug.cgi?id=195299 5 6 Reviewed by Joseph Pecoraro. 7 8 Rework the way `color`, `background-color`, and `border-color` are set for `WI.ScopeBar` to 9 use CSS variables instead. Divides the variables into three categories: 10 - default: these are the values that the `WI.ScopeBar` would use normally 11 - override: these are values that take precidence over the default (e.g. set by other elements) 12 - falls back to default when no value is set 13 - actual: this is the resulting value that will be used when displaying 14 - this way, other elements can "mirror" the styling of the `WI.ScopeBar` 15 16 * UserInterface/Views/ScopeBar.css: 17 (.scope-bar): 18 (.scope-bar > li): 19 (.scope-bar > li::before): 20 (.scope-bar > li:matches(.selected, :hover)): 21 (.scope-bar > li:not(.selected):hover::after): 22 (.scope-bar > li.selected:active::after): 23 (.scope-bar > li.multiple > select): 24 (body[dir=ltr] .scope-bar > li.multiple > select): 25 (body[dir=rtl] .scope-bar > li.multiple > select): 26 (.scope-bar > li.multiple:not(.selected) > select): Added. 27 (.scope-bar > li.multiple > .arrows): 28 (.scope-bar > li::before): Deleted. 29 (.scope-bar.default-item-selected > li.multiple.selected::before): Deleted. 30 (.scope-bar > li:matches(.selected, :hover)::before): Deleted. 31 (.scope-bar > li.selected:active::before): Deleted. 32 (.scope-bar > li.multiple.selected > select): Deleted. 33 (body[dir=ltr] .scope-bar > li.multiple > .arrows): Deleted. 34 (body[dir=rtl] .scope-bar > li.multiple > .arrows): Deleted. 35 (.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows): Deleted. 36 (.scope-bar > li:matches(.selected, :active)): Deleted. 37 (@media (prefers-color-scheme: dark)): Deleted. 38 Switch to using `::after` since `::before` is more commonly used. 39 40 * UserInterface/Views/MultipleScopeBarItem.js: 41 (WI.MultipleScopeBarItem.prototype._handleMouseDown): 42 Drive-by: fix the <select> alignment by re-firing the "mousedown" event on it. 43 44 * UserInterface/Views/AuditTestGroupContentView.js: 45 (WI.AuditTestGroupContentView.prototype.layout): 46 * UserInterface/Views/AuditTestGroupContentView.css: 47 (.content-view.audit-test-group > header > nav > .scope-bar > li): 48 (.content-view.audit-test-group > header > nav > .scope-bar > li:not(:hover, .selected)): 49 (.content-view.audit-test-group > header > nav > .scope-bar > li > img): Added. 50 (.content-view.audit-test-group > header > nav > .scope-bar > li.pass > img): Added. 51 (.content-view.audit-test-group > header > nav > .scope-bar > li.warn > img): Added. 52 (.content-view.audit-test-group > header > nav > .scope-bar > li.fail > img): Added. 53 (.content-view.audit-test-group > header > nav > .scope-bar > li.error > img): Added. 54 (.content-view.audit-test-group > header > nav > .scope-bar > li.unsupported > img): Added. 55 (.content-view.audit-test-group > section > .audit-test-case:first-child, .content-view.audit-test-group > section > .audit-test-case.filtered ~ .audit-test-case:not(.filtered), .content-view.audit-test-group > section > .audit-test-group + .audit-test-case, .content-view.audit-test-group > section > .audit-test-case + .audit-test-group): Added. 56 (.content-view.audit-test-group > section > .audit-test-case:not(.filtered) ~ .audit-test-case:not(.filtered)): Added. 57 (.content-view.audit-test-group > header > nav > .scope-bar > li::before): Deleted. 58 (.content-view.audit-test-group > header > nav > .scope-bar > li.pass::before): Deleted. 59 (.content-view.audit-test-group > header > nav > .scope-bar > li.warn::before): Deleted. 60 (.content-view.audit-test-group > header > nav > .scope-bar > li.fail::before): Deleted. 61 (.content-view.audit-test-group > header > nav > .scope-bar > li.error::before): Deleted. 62 (.content-view.audit-test-group > header > nav > .scope-bar > li.unsupported::before): Deleted. 63 (.content-view.audit-test-group > section > .audit-test-case:first-child, .content-view.audit-test-group > section > .audit-test-group + .audit-test-case, .content-view.audit-test-group > section > .audit-test-case + .audit-test-group): Deleted. 64 Replace the `::before` image with an actual `<img>` now that the `WI.ScopeBar` itself uses 65 a pseudo-element for the background styling. 66 67 * UserInterface/Views/LogContentView.js: 68 (WI.LogContentView): 69 * UserInterface/Views/LogContentView.css: 70 (.log-scope-bar > li:not(.unread) > .indicator): Added. 71 (.log-scope-bar > li.unread > .indicator): Added. 72 (.log-scope-bar > li.unread:hover > .indicator): Added. 73 (.log-scope-bar > li.unread.errors > .indicator): Added. 74 (.log-scope-bar > li.unread.warnings > .indicator): Added. 75 (.log-scope-bar > li.unread.logs > .indicator): Added. 76 (.log-scope-bar > li.unread::before): Deleted. 77 (body[dir=ltr] .log-scope-bar > li.unread::before): Deleted. 78 (body[dir=rtl] .log-scope-bar > li.unread::before): Deleted. 79 (.log-scope-bar > li.unread:hover::before): Deleted. 80 (.log-scope-bar > li.unread.errors::before): Deleted. 81 (.log-scope-bar > li.unread.warnings::before): Deleted. 82 (.log-scope-bar > li.unread.logs::before): Deleted. 83 Replace the `::before` unread indicator with an actual `<div>` now that the `WI.ScopeBar` 84 itself uses a pseudo-element for the background styling. 85 86 * UserInterface/Views/TimelineRecordingContentView.css: 87 (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected): 88 (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple): Deleted. 89 (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows): Deleted. 90 91 * UserInterface/Views/CanvasSidebarPanel.js: 92 (WI.CanvasSidebarPanel.prototype._updateRecordingScopeBar): 93 Drive-by: fix typo. 94 1 95 2019-03-07 Devin Rousso <drousso@apple.com> 2 96 -
trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css
r239760 r242604 80 80 81 81 .content-view.audit-test-group > header > nav > .scope-bar > li { 82 display: inline-flex;83 align-items: center;84 82 margin: 0 3px; 85 83 } 86 84 87 85 .content-view.audit-test-group > header > nav > .scope-bar > li:not(:hover, .selected) { 88 border: 1px solidvar(--selected-background-color-unfocused);86 --scope-bar-border-color-override: var(--selected-background-color-unfocused); 89 87 } 90 88 … … 93 91 } 94 92 95 .content-view.audit-test-group > header > nav > .scope-bar > li ::before{93 .content-view.audit-test-group > header > nav > .scope-bar > li > img { 96 94 width: 16px; 97 95 height: 16px; 98 margin-top: 1px;96 margin-top: 2px; 99 97 -webkit-margin-end: 4px; 98 vertical-align: -4px; 100 99 } 101 100 102 .content-view.audit-test-group > header > nav > .scope-bar > li.pass ::before{101 .content-view.audit-test-group > header > nav > .scope-bar > li.pass > img { 103 102 content: url(../Images/AuditTestPass.svg); 104 103 } 105 104 106 .content-view.audit-test-group > header > nav > .scope-bar > li.warn ::before{105 .content-view.audit-test-group > header > nav > .scope-bar > li.warn > img { 107 106 content: url(../Images/AuditTestWarn.svg); 108 107 } 109 108 110 .content-view.audit-test-group > header > nav > .scope-bar > li.fail ::before{109 .content-view.audit-test-group > header > nav > .scope-bar > li.fail > img { 111 110 content: url(../Images/AuditTestFail.svg); 112 111 } 113 112 114 .content-view.audit-test-group > header > nav > .scope-bar > li.error ::before{113 .content-view.audit-test-group > header > nav > .scope-bar > li.error > img { 115 114 content: url(../Images/AuditTestError.svg); 116 115 } 117 116 118 .content-view.audit-test-group > header > nav > .scope-bar > li.unsupported ::before{117 .content-view.audit-test-group > header > nav > .scope-bar > li.unsupported > img { 119 118 content: url(../Images/AuditTestUnsupported.svg); 120 119 } … … 137 136 138 137 .content-view.audit-test-group > section > .audit-test-case:first-child, 138 .content-view.audit-test-group > section > .audit-test-case.filtered ~ .audit-test-case:not(.filtered), 139 139 .content-view.audit-test-group > section > .audit-test-group + .audit-test-case, 140 140 .content-view.audit-test-group > section > .audit-test-case + .audit-test-group { 141 141 margin-top: var(--audit-test-vertical-space); 142 } 143 144 .content-view.audit-test-group > section > .audit-test-case:not(.filtered) ~ .audit-test-case:not(.filtered) { 145 margin-top: unset; 142 146 } 143 147 -
trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.js
r240270 r242604 120 120 }); 121 121 scopeBarItem.selected = true; 122 123 scopeBarItem.element.insertBefore(document.createElement("img"), scopeBarItem.element.firstChild); 124 122 125 scopeBarItems.push(scopeBarItem); 123 126 }; -
trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js
r242511 r242604 516 516 } 517 517 518 this._scopeBar = new WI.ScopeBar("canvas-recording a-scope-bar", scopeBarItems, selectedScopeBarItem, true);518 this._scopeBar = new WI.ScopeBar("canvas-recording-scope-bar", scopeBarItems, selectedScopeBarItem, true); 519 519 this._scopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionChanged, this); 520 520 this._recordingNavigationBar.insertNavigationItem(this._scopeBar, 0); -
trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
r242578 r242604 24 24 */ 25 25 26 .log-scope-bar > li.unread::before { 27 content: ''; 26 .log-scope-bar > li:not(.unread) > .indicator { 27 display: none; 28 } 29 30 .log-scope-bar > li.unread > .indicator { 28 31 display: inline-block; 29 vertical-align: baseline;30 31 margin-left: -10px;32 margin-right: 2px;33 32 width: 8px; 34 33 height: 8px; 35 34 animation: unread-background-pulse 1.5s ease-in-out infinite alternate-reverse; 36 35 -webkit-clip-path: circle(50% at 50% 50%); 37 animation: unread-background-pulse 1.5s ease-in-out infinite alternate-reverse; 38 39 --unread-indicator-margin-start: -10px; 40 --unread-indicator-margin-end: 2px; 41 } 42 43 body[dir=ltr] .log-scope-bar > li.unread::before { 44 margin-left: var(--unread-indicator-margin-start); 45 margin-right: var(--unread-indicator-margin-end); 46 } 47 48 body[dir=rtl] .log-scope-bar > li.unread::before { 49 margin-left: var(--unread-indicator-margin-end); 50 margin-right: var(--unread-indicator-margin-start); 51 } 52 53 .log-scope-bar > li.unread:hover::before { 36 37 -webkit-margin-start: -10px; 38 -webkit-margin-end: 2px; 39 } 40 41 .log-scope-bar > li.unread:hover > .indicator { 54 42 visibility: hidden; 55 43 } 56 44 57 .log-scope-bar > li.unread.errors ::before{45 .log-scope-bar > li.unread.errors > .indicator { 58 46 background-color: hsl(0, 95%, 72%); 59 47 } 60 48 61 .log-scope-bar > li.unread.warnings ::before{49 .log-scope-bar > li.unread.warnings > .indicator { 62 50 background-color: hsl(48, 98%, 51%); 63 51 } 64 52 65 .log-scope-bar > li.unread.logs ::before{53 .log-scope-bar > li.unread.logs > .indicator { 66 54 background-color: hsl(213, 92%, 77%); 67 55 } -
trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js
r242174 r242604 92 92 ]; 93 93 94 for (let scopeBarItem of scopeBarItems) { 95 let indicatorElement = scopeBarItem.element.insertBefore(document.createElement("div"), scopeBarItem.element.firstChild); 96 indicatorElement.className = "indicator"; 97 } 98 94 99 this._scopeBar = new WI.ScopeBar("log-scope-bar", scopeBarItems, scopeBarItems[0]); 95 100 this._scopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this); -
trunk/Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js
r237593 r242604 172 172 return; 173 173 174 if (event.__original) 175 return; 176 174 177 // Only support click to select when the item is not selected yet. 175 // Clicking when selected will cause the menu it appear instead. 176 if (this._element.classList.contains("selected")) 177 return; 178 // Clicking when selected will cause the menu to appear instead. 179 if (this._element.classList.contains("selected")) { 180 let newEvent = new event.constructor(event.type, event); 181 newEvent.__original = event; 182 183 event.stop(); 184 185 this._selectElement.dispatchEvent(newEvent); 186 return; 187 } 178 188 179 189 this.selected = true; -
trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
r242578 r242604 27 27 padding: 0 3px; 28 28 overflow: hidden; 29 30 --scope-bar-text-color-default: var(--text-color); 31 --scope-bar-background-color-default: unset; 32 --scope-bar-border-color-default: unset; 29 33 } 30 34 … … 37 41 font-size: 11px; 38 42 line-height: 11px; 39 color: hsl(0, 0%, 18%);43 color: var(--scope-bar-text-color); 40 44 text-align: center; 45 46 --scope-bar-text-color: var(--scope-bar-text-color-override, var(--scope-bar-text-color-default)); 47 --scope-bar-background-color: var(--scope-bar-background-color-override, var(--scope-bar-background-color-default)); 48 --scope-bar-border-color: var(--scope-bar-border-color-override, var(--scope-bar-border-color-default)); 41 49 } 42 50 43 .scope-bar > li:: before{51 .scope-bar > li::after { 44 52 position: absolute; 45 53 content: ""; 46 54 left: 0; 47 55 top: 0; 48 width: 100%; 49 height: 100%; 56 z-index: -1; 57 width: calc(100% - 2px); 58 height: calc(100% - 2px); 59 background-color: var(--scope-bar-background-color); 60 border: 1px solid var(--scope-bar-border-color); 50 61 border-radius: 3px; 51 62 opacity: var(--glyph-opacity); 52 z-index: -1;53 }54 55 .scope-bar.default-item-selected > li.multiple.selected::before {56 display: none;57 63 } 58 64 59 65 .scope-bar > li:matches(.selected, :hover) { 60 color: var(--selected-foreground-color); 66 --scope-bar-text-color-default: var(--selected-foreground-color); 67 --scope-bar-background-color-default: var(--glyph-color-active); 68 --scope-bar-border-color-default: var(--glyph-color-active); 61 69 } 62 70 63 .scope-bar > li:matches(.selected, :hover)::before { 64 background-color: var(--glyph-color-active); 65 } 66 67 .scope-bar > li:not(.selected):hover::before { 71 .scope-bar > li:not(.selected):hover::after { 68 72 opacity: 0.5; 69 73 } 70 74 71 .scope-bar > li.selected:active:: before{75 .scope-bar > li.selected:active::after { 72 76 filter: brightness(0.8); 73 77 } … … 78 82 79 83 .scope-bar > li.multiple > select { 80 display: none; 84 position: absolute; 85 top: 1px; 86 width: 0; 87 height: 0; 88 margin: 0; 81 89 opacity: 0; 82 83 /* Positioned so the text in the menu aligns with the content text. */ 84 position: absolute; 85 top: -5px; 86 left: -4px; 87 right: 0; 88 bottom: 0; 90 pointer-events: none; 89 91 } 90 92 91 93 body[dir=ltr] .scope-bar > li.multiple > select { 92 top: -5px; 93 left: -4px; 94 left: 1px; 94 95 } 95 96 96 97 body[dir=rtl] .scope-bar > li.multiple > select { 97 top: -6px; 98 left: -10px; 98 right: 1px; 99 99 } 100 100 101 .scope-bar > li.multiple .selected> select {102 display: block;101 .scope-bar > li.multiple:not(.selected) > select { 102 display: none; 103 103 } 104 104 … … 110 110 margin-top: -1px; 111 111 margin-bottom: -1px; 112 - -scope-bar-select-arrows-margin-start: 6px;112 -webkit-margin-start: 6px; 113 113 } 114 115 body[dir=ltr] .scope-bar > li.multiple > .arrows {116 margin-left: var(--scope-bar-select-arrows-margin-start);117 }118 119 body[dir=rtl] .scope-bar > li.multiple > .arrows {120 margin-right: var(--scope-bar-select-arrows-margin-start);121 }122 123 .scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows {124 color: var(--selected-foreground-color);125 }126 127 .scope-bar > li:matches(.selected, :active) {128 transition-duration: 75ms;129 }130 131 @media (prefers-color-scheme: dark) {132 .scope-bar > li {133 color: var(--text-color);134 }135 } -
trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css
r241857 r242604 54 54 } 55 55 56 .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple { 57 background-color: transparent; 58 color: var(--text-color); 59 } 60 61 .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows { 62 color: var(--text-color); 56 .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected { 57 --scope-bar-text-color-override: var(--text-color); 58 --scope-bar-background-color-override: transparent; 59 --scope-bar-border-color-override: transparent; 63 60 } 64 61
Note: See TracChangeset
for help on using the changeset viewer.