- Revision
- 258809
- Author
- [email protected]
- Date
- 2020-03-21 11:06:32 -0700 (Sat, 21 Mar 2020)
Log Message
Web Inspector: REGRESSION(r257380, r257759): focusing the inspected page when docked dims most of the interface
https://bugs.webkit.org/show_bug.cgi?id=209366
Reviewed by Timothy Hatcher.
* UserInterface/Views/ButtonNavigationItem.css:
(body.window-inactive .navigation-bar .item.button > img): Added.
(body.window-inactive .navigation-bar .item.button.disabled > img): Added.
(body:matches(.window-inactive, .window-docked-inactive) .navigation-bar .item.button > img): Deleted.
(body:matches(.window-inactive, .window-docked-inactive) .navigation-bar .item.button.disabled > img): Deleted.
* UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:
(body.window-inactive .timeline-overview-graph.rendering-frame > .frame-marker): Added.
(body:matches(.window-inactive, .window-docked-inactive) .timeline-overview-graph.rendering-frame > .frame-marker): Deleted.
* UserInterface/Views/TabBar.css:
(body:not(.docked).window-inactive .tab-bar): Added.
(body.docked.window-inactive .tab-bar): Added.
(body.window-inactive .tab-bar > .border): Added.
(body.window-inactive .tab-bar > .navigation-bar > .item.divider): Added.
(body:not(.docked).window-inactive .tab-bar > .tabs > .item): Added.
(body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(body.window-inactive .tab-bar > .tabs > .item > .icon): Added.
(body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected > .icon): Added.
(body.window-inactive .tab-bar > .tabs > .item > .title): Added.
(body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected > .title): Added.
(body:not(.docked).window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked).window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked).window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Added.
(@media (prefers-color-scheme: dark) body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar): Added.
(@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar > .tabs > .item): Added.
(@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar): Deleted.
(body.docked:matches(.window-inactive, .window-docked-inactive) .tab-bar): Deleted.
(body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .border): Deleted.
(body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .navigation-bar > .item.divider): Deleted.
(body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item): Deleted.
(body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(body.docked:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item > .icon): Deleted.
(body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected > .icon): Deleted.
(body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item > .title): Deleted.
(body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected > .title): Deleted.
(body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Deleted.
(@media (prefers-color-scheme: dark) body.docked:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(@media (prefers-color-scheme: dark) body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar): Deleted.
(@media (prefers-color-scheme: dark) body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item): Deleted.
(@media (prefers-color-scheme: dark) body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
* UserInterface/Views/TimelineRecordFrame.css:
(body.window-inactive .timeline-record-frame.selected): Added.
(body:matches(.window-inactive, .window-docked-inactive) .timeline-record-frame.selected): Deleted.
* UserInterface/Views/TimelineRuler.css:
(body.window-inactive .timeline-ruler > .header > .divider): Added.
(body:matches(.window-inactive, .window-docked-inactive) .timeline-ruler > .header > .divider): Deleted.
* UserInterface/Views/Variables.css:
(body.window-inactive): Added.
(body.window-inactive *): Added.
(@media (prefers-color-scheme: dark) body.window-inactive): Added.
(@media (prefers-color-scheme: dark) body.window-inactive *): Added.
(body:matches(.window-inactive, .window-docked-inactive)): Deleted.
(body:matches(.window-inactive, .window-docked-inactive) *): Deleted.
(@media (prefers-color-scheme: dark) body:matches(.window-inactive, .window-docked-inactive)): Deleted.
(@media (prefers-color-scheme: dark) body:matches(.window-inactive, .window-docked-inactive) *): Deleted.
Remove usage of `.window-docked-inactive` as we don't want the UI to change when the focus
switches between the inspected page and the docked Web Inspector area, which happens a lot.
* UserInterface/Views/BreakpointTreeElement.css:
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.breakpoint.selected .status > .status-image.resolved): Added.
(.tree-outline:focus .item.breakpoint.selected .status > .status-image.resolved): Deleted.
* UserInterface/Views/CallFrameTreeElement.css:
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.call-frame.selected .status > .status-image): Added.
(.tree-outline:focus .item.call-frame.selected .status > .status-image): Deleted.
* UserInterface/Views/CanvasSidebarPanel.css:
(body:not(.window-inactive, .window-docked-inactive) .sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline:focus-within .item.processing.selected .subtitle > progress): Added.
(.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline:focus .item.processing.selected .subtitle > progress): Deleted.
* UserInterface/Views/DOMTreeContentView.css:
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom-tree:focus-within .tree-outline.dom li:matches(.selected, .hovered) .status-image.breakpoint): Added.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom-tree:focus-within .tree-outline.dom li:matches(.selected, .hovered) .status-image.breakpoint.subtree): Added.
(body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus li:matches(.selected, .hovered) .status-image.breakpoint): Deleted.
(body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus li:matches(.selected, .hovered) .status-image.breakpoint.subtree): Deleted.
* UserInterface/Views/DOMTreeOutline.css:
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:not(.non-selectable):focus-within li.selected .selection-area): Added.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.inspected-node.selected > span::after): Added.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .pseudo-class-indicator): Added.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected): Added.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected *): Added.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.parent.selected::before): Added.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.parent.expanded.selected::before): Added.
(.tree-outline.dom:not(.non-selectable):focus-within li.selected .selection-area): Deleted.
(.tree-outline.dom:focus-within li.inspected-node.selected > span::after): Deleted.
(.tree-outline.dom:focus-within li.selected .pseudo-class-indicator): Deleted.
(.tree-outline.dom:focus-within li.selected): Deleted.
(.tree-outline.dom:focus-within li.selected *): Deleted.
(.tree-outline.dom:focus-within li.parent.selected::before): Deleted.
(.tree-outline.dom:focus-within li.parent.expanded.selected::before): Deleted.
* UserInterface/Views/Main.css:
(:focus .selected .go-to-arrow, .selected:focus .go-to-arrow): Added.
(:focus .selected .go-to-arrow:active, .selected .go:focus-to-arrow:active): Added.
(@media (prefers-color-scheme: dark) :focus .selected .go-to-arrow, .selected:focus .go-to-arrow): Added.
(:focus .selected .go-to-arrow): Deleted.
(:focus .selected .go-to-arrow:active): Deleted.
(@media (prefers-color-scheme: dark) :focus .selected .go-to-arrow): Deleted.
* UserInterface/Views/RecordingActionTreeElement.css:
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.recording-action.selected:not(.invalid, .initial-state, .has-context-replacer, .name-unknown) > .icon): Added.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.recording-action.selected > .titles .parameter.swizzled, body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.recording-action.selected::before): Added.
(.tree-outline:focus .item.recording-action.selected:not(.invalid, .initial-state, .has-context-replacer, .name-unknown) > .icon): Deleted.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.recording-action.selected > .titles .parameter.swizzled, body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.recording-action.selected::before): Deleted.
* UserInterface/Views/ResourceTreeElement.css:
(.item.resource.resource-type-websocket:not(.selected) .status .ready-state.open, .tree-outline:not(:focus-within) .item.resource.resource-type-websocket.selected .status .ready-state.open, body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.open): Added.
(.item.resource.resource-type-websocket:not(.selected) .status .ready-state.connecting, .tree-outline:not(:focus-within) .item.resource.resource-type-websocket.selected .status .ready-state.connecting, body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.connecting): Added.
(.item.resource.resource-type-websocket:not(.selected) .status .ready-state.open, .tree-outline:not(:focus) .item.resource.resource-type-websocket.selected .status .ready-state.open, body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.open): Deleted.
(.item.resource.resource-type-websocket:not(.selected) .status .ready-state.connecting, .tree-outline:not(:focus) .item.resource.resource-type-websocket.selected .status .ready-state.connecting, body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.connecting): Deleted.
* UserInterface/Views/ScriptDetailsTimelineView.css:
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected .alternate-subtitle): Added.
(.tree-outline:focus .item.selected .alternate-subtitle): Deleted.
* UserInterface/Views/SourceCodeTreeElement.css:
(.tree-outline .item .status > .toggle-script-blackbox, body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected .status > .toggle-script-blackbox.pattern-blackboxed): Added.
(.tree-outline .item .status > .toggle-script-blackbox, .tree-outline:focus .item.selected .status > .toggle-script-blackbox.pattern-blackboxed): Deleted.
* UserInterface/Views/ThreadTreeElement.css:
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within > .item.thread.selected .status-button.resume): Added.
(.tree-outline:focus > .item.thread.selected .status-button.resume): Deleted.
* UserInterface/Views/TimelineOverview.css:
(.timeline-overview > .tree-outline.timelines .item.selected + .item): Added.
(body:not(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines:focus-within .item.selected + .item): Added.
(@media (prefers-color-scheme: dark) .timeline-overview > .tree-outline.timelines .item.selected + .item): Added.
(.timeline-overview > .tree-outline.timelines .item.selected + .item, body:matches(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.
(.timeline-overview > .tree-outline.timelines :focus .item.selected + .item): Deleted.
(@media (prefers-color-scheme: dark) .timeline-overview > .tree-outline.timelines .item.selected + .item, body:matches(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.
* UserInterface/Views/TreeElementStatusButton.css:
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected > .status > .status-button): Added.
(:focus .item.selected > .status > .status-button): Deleted.
Fix cases where `:focus` was still being checked from the `WI.TreeOutline` instead of the
individual `WI.TreeElement`. We should be using `:focus-within`, but only if the window or
docked Web Inspector area is also focused.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (258808 => 258809)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-03-21 18:06:32 UTC (rev 258809)
@@ -1,3 +1,138 @@
+2020-03-21 Devin Rousso <[email protected]>
+
+ Web Inspector: REGRESSION(r257380, r257759): focusing the inspected page when docked dims most of the interface
+ https://bugs.webkit.org/show_bug.cgi?id=209366
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/ButtonNavigationItem.css:
+ (body.window-inactive .navigation-bar .item.button > img): Added.
+ (body.window-inactive .navigation-bar .item.button.disabled > img): Added.
+ (body:matches(.window-inactive, .window-docked-inactive) .navigation-bar .item.button > img): Deleted.
+ (body:matches(.window-inactive, .window-docked-inactive) .navigation-bar .item.button.disabled > img): Deleted.
+ * UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:
+ (body.window-inactive .timeline-overview-graph.rendering-frame > .frame-marker): Added.
+ (body:matches(.window-inactive, .window-docked-inactive) .timeline-overview-graph.rendering-frame > .frame-marker): Deleted.
+ * UserInterface/Views/TabBar.css:
+ (body:not(.docked).window-inactive .tab-bar): Added.
+ (body.docked.window-inactive .tab-bar): Added.
+ (body.window-inactive .tab-bar > .border): Added.
+ (body.window-inactive .tab-bar > .navigation-bar > .item.divider): Added.
+ (body:not(.docked).window-inactive .tab-bar > .tabs > .item): Added.
+ (body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (body.window-inactive .tab-bar > .tabs > .item > .icon): Added.
+ (body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected > .icon): Added.
+ (body.window-inactive .tab-bar > .tabs > .item > .title): Added.
+ (body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected > .title): Added.
+ (body:not(.docked).window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked).window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked).window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Added.
+ (@media (prefers-color-scheme: dark) body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar): Added.
+ (@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar > .tabs > .item): Added.
+ (@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar): Deleted.
+ (body.docked:matches(.window-inactive, .window-docked-inactive) .tab-bar): Deleted.
+ (body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .border): Deleted.
+ (body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .navigation-bar > .item.divider): Deleted.
+ (body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item): Deleted.
+ (body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (body.docked:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item > .icon): Deleted.
+ (body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected > .icon): Deleted.
+ (body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item > .title): Deleted.
+ (body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected > .title): Deleted.
+ (body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Deleted.
+ (@media (prefers-color-scheme: dark) body.docked:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ * UserInterface/Views/TimelineRecordFrame.css:
+ (body.window-inactive .timeline-record-frame.selected): Added.
+ (body:matches(.window-inactive, .window-docked-inactive) .timeline-record-frame.selected): Deleted.
+ * UserInterface/Views/TimelineRuler.css:
+ (body.window-inactive .timeline-ruler > .header > .divider): Added.
+ (body:matches(.window-inactive, .window-docked-inactive) .timeline-ruler > .header > .divider): Deleted.
+ * UserInterface/Views/Variables.css:
+ (body.window-inactive): Added.
+ (body.window-inactive *): Added.
+ (@media (prefers-color-scheme: dark) body.window-inactive): Added.
+ (@media (prefers-color-scheme: dark) body.window-inactive *): Added.
+ (body:matches(.window-inactive, .window-docked-inactive)): Deleted.
+ (body:matches(.window-inactive, .window-docked-inactive) *): Deleted.
+ (@media (prefers-color-scheme: dark) body:matches(.window-inactive, .window-docked-inactive)): Deleted.
+ (@media (prefers-color-scheme: dark) body:matches(.window-inactive, .window-docked-inactive) *): Deleted.
+ Remove usage of `.window-docked-inactive` as we don't want the UI to change when the focus
+ switches between the inspected page and the docked Web Inspector area, which happens a lot.
+
+ * UserInterface/Views/BreakpointTreeElement.css:
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.breakpoint.selected .status > .status-image.resolved): Added.
+ (.tree-outline:focus .item.breakpoint.selected .status > .status-image.resolved): Deleted.
+ * UserInterface/Views/CallFrameTreeElement.css:
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.call-frame.selected .status > .status-image): Added.
+ (.tree-outline:focus .item.call-frame.selected .status > .status-image): Deleted.
+ * UserInterface/Views/CanvasSidebarPanel.css:
+ (body:not(.window-inactive, .window-docked-inactive) .sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline:focus-within .item.processing.selected .subtitle > progress): Added.
+ (.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline:focus .item.processing.selected .subtitle > progress): Deleted.
+ * UserInterface/Views/DOMTreeContentView.css:
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom-tree:focus-within .tree-outline.dom li:matches(.selected, .hovered) .status-image.breakpoint): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom-tree:focus-within .tree-outline.dom li:matches(.selected, .hovered) .status-image.breakpoint.subtree): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus li:matches(.selected, .hovered) .status-image.breakpoint): Deleted.
+ (body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus li:matches(.selected, .hovered) .status-image.breakpoint.subtree): Deleted.
+ * UserInterface/Views/DOMTreeOutline.css:
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:not(.non-selectable):focus-within li.selected .selection-area): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.inspected-node.selected > span::after): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .pseudo-class-indicator): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected *): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.parent.selected::before): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.parent.expanded.selected::before): Added.
+ (.tree-outline.dom:not(.non-selectable):focus-within li.selected .selection-area): Deleted.
+ (.tree-outline.dom:focus-within li.inspected-node.selected > span::after): Deleted.
+ (.tree-outline.dom:focus-within li.selected .pseudo-class-indicator): Deleted.
+ (.tree-outline.dom:focus-within li.selected): Deleted.
+ (.tree-outline.dom:focus-within li.selected *): Deleted.
+ (.tree-outline.dom:focus-within li.parent.selected::before): Deleted.
+ (.tree-outline.dom:focus-within li.parent.expanded.selected::before): Deleted.
+ * UserInterface/Views/Main.css:
+ (:focus .selected .go-to-arrow, .selected:focus .go-to-arrow): Added.
+ (:focus .selected .go-to-arrow:active, .selected .go:focus-to-arrow:active): Added.
+ (@media (prefers-color-scheme: dark) :focus .selected .go-to-arrow, .selected:focus .go-to-arrow): Added.
+ (:focus .selected .go-to-arrow): Deleted.
+ (:focus .selected .go-to-arrow:active): Deleted.
+ (@media (prefers-color-scheme: dark) :focus .selected .go-to-arrow): Deleted.
+ * UserInterface/Views/RecordingActionTreeElement.css:
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.recording-action.selected:not(.invalid, .initial-state, .has-context-replacer, .name-unknown) > .icon): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.recording-action.selected > .titles .parameter.swizzled, body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.recording-action.selected::before): Added.
+ (.tree-outline:focus .item.recording-action.selected:not(.invalid, .initial-state, .has-context-replacer, .name-unknown) > .icon): Deleted.
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.recording-action.selected > .titles .parameter.swizzled, body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.recording-action.selected::before): Deleted.
+ * UserInterface/Views/ResourceTreeElement.css:
+ (.item.resource.resource-type-websocket:not(.selected) .status .ready-state.open, .tree-outline:not(:focus-within) .item.resource.resource-type-websocket.selected .status .ready-state.open, body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.open): Added.
+ (.item.resource.resource-type-websocket:not(.selected) .status .ready-state.connecting, .tree-outline:not(:focus-within) .item.resource.resource-type-websocket.selected .status .ready-state.connecting, body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.connecting): Added.
+ (.item.resource.resource-type-websocket:not(.selected) .status .ready-state.open, .tree-outline:not(:focus) .item.resource.resource-type-websocket.selected .status .ready-state.open, body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.open): Deleted.
+ (.item.resource.resource-type-websocket:not(.selected) .status .ready-state.connecting, .tree-outline:not(:focus) .item.resource.resource-type-websocket.selected .status .ready-state.connecting, body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.connecting): Deleted.
+ * UserInterface/Views/ScriptDetailsTimelineView.css:
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected .alternate-subtitle): Added.
+ (.tree-outline:focus .item.selected .alternate-subtitle): Deleted.
+ * UserInterface/Views/SourceCodeTreeElement.css:
+ (.tree-outline .item .status > .toggle-script-blackbox, body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected .status > .toggle-script-blackbox.pattern-blackboxed): Added.
+ (.tree-outline .item .status > .toggle-script-blackbox, .tree-outline:focus .item.selected .status > .toggle-script-blackbox.pattern-blackboxed): Deleted.
+ * UserInterface/Views/ThreadTreeElement.css:
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within > .item.thread.selected .status-button.resume): Added.
+ (.tree-outline:focus > .item.thread.selected .status-button.resume): Deleted.
+ * UserInterface/Views/TimelineOverview.css:
+ (.timeline-overview > .tree-outline.timelines .item.selected + .item): Added.
+ (body:not(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines:focus-within .item.selected + .item): Added.
+ (@media (prefers-color-scheme: dark) .timeline-overview > .tree-outline.timelines .item.selected + .item): Added.
+ (.timeline-overview > .tree-outline.timelines .item.selected + .item, body:matches(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.
+ (.timeline-overview > .tree-outline.timelines :focus .item.selected + .item): Deleted.
+ (@media (prefers-color-scheme: dark) .timeline-overview > .tree-outline.timelines .item.selected + .item, body:matches(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.
+ * UserInterface/Views/TreeElementStatusButton.css:
+ (body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected > .status > .status-button): Added.
+ (:focus .item.selected > .status > .status-button): Deleted.
+ Fix cases where `:focus` was still being checked from the `WI.TreeOutline` instead of the
+ individual `WI.TreeElement`. We should be using `:focus-within`, but only if the window or
+ docked Web Inspector area is also focused.
+
2020-03-20 Devin Rousso <[email protected]>
Web Inspector: REGRESSION(r257835): close and undock buttons are shown in remote inspector
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -41,7 +41,7 @@
filter: none;
}
-.tree-outline:focus .item.breakpoint.selected .status > .status-image.resolved {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.breakpoint.selected .status > .status-image.resolved {
stroke: var(--selected-foreground-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -96,11 +96,11 @@
opacity: 0.3;
}
-body:matches(.window-inactive, .window-docked-inactive) .navigation-bar .item.button > img {
+body.window-inactive .navigation-bar .item.button > img {
opacity: 0.6;
}
-body:matches(.window-inactive, .window-docked-inactive) .navigation-bar .item.button.disabled > img {
+body.window-inactive .navigation-bar .item.button.disabled > img {
opacity: 0.18;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -59,7 +59,7 @@
fill: hsl(0, 0%, 57%);
}
-.tree-outline:focus .item.call-frame.selected .status > .status-image {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.call-frame.selected .status > .status-image {
fill: var(--selected-foreground-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -87,7 +87,7 @@
vertical-align: -3px;
}
-.sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline:focus .item.processing.selected .subtitle > progress {
+body:not(.window-inactive, .window-docked-inactive) .sidebar > .panel.navigation.canvas > .content > .recording-content > .tree-outline:focus-within .item.processing.selected .subtitle > progress {
filter: brightness(10);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -59,7 +59,7 @@
fill: var(--breakpoint-color);
}
-body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus li:matches(.selected, .hovered) .status-image.breakpoint {
+body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus-within li:matches(.selected, .hovered) .status-image.breakpoint {
stroke: var(--selected-foreground-color);
}
@@ -76,7 +76,7 @@
stroke: var(--breakpoint-color);
}
-body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus li:matches(.selected, .hovered) .status-image.breakpoint.subtree {
+body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus-within li:matches(.selected, .hovered) .status-image.breakpoint.subtree {
stroke: var(--selected-foreground-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -61,7 +61,7 @@
border-top: 2px solid var(--selected-background-color);
}
-.tree-outline.dom:not(.non-selectable):focus-within li.selected .selection-area {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:not(.non-selectable):focus-within li.selected .selection-area {
background-color: var(--selected-background-color);
}
@@ -82,7 +82,7 @@
white-space: pre;
}
-.tree-outline.dom:focus-within li.inspected-node.selected > span::after {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.inspected-node.selected > span::after {
color: var(--selected-secondary-text-color);
}
@@ -152,7 +152,7 @@
left: var(--item-pseudo-class-indicator-start);
}
-.tree-outline.dom:focus-within li.selected .pseudo-class-indicator {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .pseudo-class-indicator {
background-color: var(--selected-foreground-color);
}
@@ -160,11 +160,11 @@
padding-left: 2px;
}
-.tree-outline.dom:focus-within li.selected {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected {
color: white;
}
-.tree-outline.dom:focus-within li.selected * {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected * {
color: inherit;
}
@@ -202,7 +202,7 @@
float: left;
}
-.tree-outline.dom:focus-within li.parent.selected::before {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.parent.selected::before {
background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
}
@@ -210,7 +210,7 @@
background-image: url(../Images/DisclosureTriangles.svg#open-normal);
}
-.tree-outline.dom:focus-within li.parent.expanded.selected::before {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.parent.expanded.selected::before {
background-image: url(../Images/DisclosureTriangles.svg#open-selected);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FolderIcon.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/FolderIcon.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FolderIcon.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -27,7 +27,7 @@
content: url(../Images/FolderGeneric.svg#light)
}
-.tree-outline .folder-icon.selected:focus .icon {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .folder-icon.selected .icon {
content: url(../Images/FolderGeneric.svg#dark)
}
@@ -35,7 +35,7 @@
content: url(../Images/Origin.svg#light);
}
-.tree-outline .origin-icon.selected:focus .icon {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .origin-icon.selected .icon {
content: url(../Images/Origin.svg#dark);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -307,11 +307,13 @@
transform: revert;
}
-:focus .selected .go-to-arrow {
+:focus .selected .go-to-arrow,
+.selected:focus .go-to-arrow {
background-image: url(../Images/GoToArrow.svg#selected);
}
-:focus .selected .go-to-arrow:active {
+:focus .selected .go-to-arrow:active,
+.selected:focus .go-to-arrow:active {
background-image: url(../Images/GoToArrow.svg#selected-active);
}
@@ -568,7 +570,8 @@
filter: invert();
}
- :focus .selected .go-to-arrow {
+ :focus .selected .go-to-arrow,
+ .selected:focus .go-to-arrow {
filter: unset;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -50,7 +50,7 @@
float: right;
}
-.tree-outline:focus .item.recording-action.selected:not(.invalid, .initial-state, .has-context-replacer, .name-unknown) > .icon {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.recording-action.selected:not(.invalid, .initial-state, .has-context-replacer, .name-unknown) > .icon {
filter: invert();
opacity: 1;
}
@@ -65,8 +65,8 @@
font-style: italic;
}
-body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.recording-action.selected > .titles .parameter.swizzled,
-body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.recording-action.selected::before {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.recording-action.selected > .titles .parameter.swizzled,
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.recording-action.selected::before {
color: var(--selected-secondary-text-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -58,6 +58,6 @@
pointer-events: none;
}
-body:matches(.window-inactive, .window-docked-inactive) .timeline-overview-graph.rendering-frame > .frame-marker {
+body.window-inactive .timeline-overview-graph.rendering-frame > .frame-marker {
background-image: linear-gradient(to right, hsl(0, 0%, 60%), hsl(0, 0%, 60%));
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -41,13 +41,13 @@
}
.item.resource.resource-type-websocket:not(.selected) .status .ready-state.open,
-.tree-outline:not(:focus) .item.resource.resource-type-websocket.selected .status .ready-state.open,
+.tree-outline:not(:focus-within) .item.resource.resource-type-websocket.selected .status .ready-state.open,
body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.open {
background-color: limegreen;
}
.item.resource.resource-type-websocket:not(.selected) .status .ready-state.connecting,
-.tree-outline:not(:focus) .item.resource.resource-type-websocket.selected .status .ready-state.connecting,
+.tree-outline:not(:focus-within) .item.resource.resource-type-websocket.selected .status .ready-state.connecting,
body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .ready-state.connecting {
background-color: yellow;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptDetailsTimelineView.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptDetailsTimelineView.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptDetailsTimelineView.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -43,7 +43,7 @@
color: hsla(0, 0%, 0%, 0.7);
}
-.tree-outline:focus .item.selected .alternate-subtitle {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected .alternate-subtitle {
color: hsla(0, 0%, 100%, 0.9);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -24,7 +24,7 @@
*/
.tree-outline .item .status > .toggle-script-blackbox,
-.tree-outline:focus .item.selected .status > .toggle-script-blackbox.pattern-blackboxed {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected .status > .toggle-script-blackbox.pattern-blackboxed {
content: url(../Images/Hide.svg#white);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -46,12 +46,12 @@
background-size: 100% 200%;
}
-body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar {
+body:not(.docked).window-inactive .tab-bar {
background-image: none;
background-color: var(--tab-item-extra-light-border-color);
}
-body.docked:matches(.window-inactive, .window-docked-inactive) .tab-bar {
+body.docked.window-inactive .tab-bar {
background-color: var(--background-color-unfocused);
}
@@ -77,7 +77,7 @@
filter: brightness(80%);
}
-body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .border {
+body.window-inactive .tab-bar > .border {
background-color: var(--tab-item-light-border-color);
}
@@ -104,7 +104,7 @@
background-color: var(--tab-item-medium-border-color);
}
-body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .navigation-bar > .item.divider {
+body.window-inactive .tab-bar > .navigation-bar > .item.divider {
background-color: var(--tab-item-light-border-color);
}
@@ -232,7 +232,7 @@
border-right-color: var(--tab-item-dark-border-color);
}
-body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item {
+body:not(.docked).window-inactive .tab-bar > .tabs > .item {
border-right-color: var(--tab-item-light-border-color) !important;
border-left-color: var(--tab-item-light-border-color) !important;
@@ -242,7 +242,7 @@
transition: none;
}
-body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected {
+body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
background-image: none;
background-color: hsl(0, 0%, 96%);
}
@@ -251,7 +251,7 @@
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.15) inset;
}
-body.docked:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected {
+body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
background-color: hsl(0, 0%, 90%);
}
@@ -291,11 +291,11 @@
opacity: 0.35;
}
-body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item > .icon {
+body.window-inactive .tab-bar > .tabs > .item > .icon {
opacity: 0.3;
}
-body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected > .icon {
+body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected > .icon {
opacity: 0.4;
}
@@ -309,7 +309,7 @@
-webkit-margin-start: 6px;
}
-body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item > .title {
+body.window-inactive .tab-bar > .tabs > .item > .title {
color: hsla(0, 0%, var(--foreground-lightness), 0.4);
}
@@ -329,7 +329,7 @@
color: hsla(0, 0%, var(--foreground-lightness), 0.8);
}
-body:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected > .title {
+body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected > .title {
color: hsla(0, 0%, var(--foreground-lightness), 0.5);
}
@@ -365,9 +365,9 @@
border-right: var(--tab-item-medium-border-style);
}
-body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
-body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
-body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
+body:not(.docked).window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
+body:not(.docked).window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
+body:not(.docked).window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
border-right-color: var(--tab-item-light-border-color);
}
@@ -419,7 +419,7 @@
background-color: var(--background-color);
}
- body.docked:matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected {
+ body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
background-color: hsl(0, 0%, 20%);
}
@@ -431,7 +431,7 @@
opacity: 0.6;
}
- body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar {
+ body:not(.docked).window-inactive .tab-bar {
--tab-item-border-color: hsl(0, 0%, 34%);
background-image: none;
@@ -438,12 +438,12 @@
background-color: hsl(0, 0%, 13%);
}
- body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item {
+ body:not(.docked).window-inactive .tab-bar > .tabs > .item {
background-image: none;
background-color: hsl(0, 0%, 13%);
}
- body:not(.docked):matches(.window-inactive, .window-docked-inactive) .tab-bar > .tabs > .item:not(.disabled).selected {
+ body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
background-color: hsl(0, 0%, 19%);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -42,7 +42,7 @@
fill: hsla(0, 0%, var(--foreground-lightness), 0.7);
}
-.tree-outline:focus > .item.thread.selected .status-button.resume {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within > .item.thread.selected .status-button.resume {
fill: var(--selected-foreground-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -116,12 +116,11 @@
border-top: 1px solid hsla(0, 0%, 0%, 0.09);
}
-.timeline-overview > .tree-outline.timelines .item.selected + .item,
-body:matches(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines .item.selected + .item {
+.timeline-overview > .tree-outline.timelines .item.selected + .item {
border-top-color: hsl(0, 0%, 83%);
}
-.timeline-overview > .tree-outline.timelines :focus .item.selected + .item {
+body:not(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines:focus-within .item.selected + .item {
border-top-color: hsl(209, 100%, 49%);
}
@@ -245,8 +244,7 @@
border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
}
- .timeline-overview > .tree-outline.timelines .item.selected + .item,
- body:matches(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines .item.selected + .item {
+ .timeline-overview > .tree-outline.timelines .item.selected + .item {
border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -53,7 +53,7 @@
background: linear-gradient(to right, var(--selected-text-background-color), var(--selected-text-background-color)) no-repeat 1px -1px;
}
-body:matches(.window-inactive, .window-docked-inactive) .timeline-record-frame.selected {
+body.window-inactive .timeline-record-frame.selected {
background: linear-gradient(to right, hsl(0, 0%, 96%), hsl(0, 0%, 96%)) no-repeat 1px -1px;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -74,7 +74,7 @@
background-image: linear-gradient(to bottom, hsla(0, 0%, 70%, 0), hsla(0, 0%, 70%, 2) 85%);
}
-body:matches(.window-inactive, .window-docked-inactive) .timeline-ruler > .header > .divider {
+body.window-inactive .timeline-ruler > .header > .divider {
background-image: linear-gradient(to bottom, hsla(0, 0%, 85%, 0), hsla(0, 0%, 85%, 1) 85%);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -34,7 +34,7 @@
color: hsl(0, 0%, 50%);
}
-:focus .item.selected > .status > .status-button {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected > .status > .status-button {
color: white;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -119,7 +119,7 @@
display: block;
}
-.tree-outline .item.selected:focus .disclosure-button {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected .disclosure-button {
background-image: url(../Images/DisclosureTriangles.svg#closed-selected) !important;
}
@@ -127,7 +127,7 @@
background-image: url(../Images/DisclosureTriangles.svg#open-normal);
}
-.tree-outline .item.selected.expanded:focus .disclosure-button {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected.expanded .disclosure-button {
background-image: url(../Images/DisclosureTriangles.svg#open-selected) !important;
}
@@ -175,7 +175,7 @@
background-color: var(--selected-background-color-unfocused);
}
-.tree-outline .item.selected:focus {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected {
color: var(--selected-foreground-color);
background-color: var(--selected-background-color);
outline: none;
@@ -221,7 +221,7 @@
font-size: 9px;
}
-.tree-outline .item.selected:focus .subtitle {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.selected .subtitle {
color: hsla(0, 0%, 100%, 0.9);
}
@@ -236,7 +236,7 @@
height: 14px;
}
-.tree-outline:not(.large) .item.selected:focus .status .indeterminate-progress-spinner {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:not(.large):focus-within .item.selected .status .indeterminate-progress-spinner {
filter: invert();
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (258808 => 258809)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2020-03-21 15:22:05 UTC (rev 258808)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2020-03-21 18:06:32 UTC (rev 258809)
@@ -198,7 +198,7 @@
--diff-addition-border-color: hsl(90, 100%, 40%);
}
-body:matches(.window-inactive, .window-docked-inactive) {
+body.window-inactive {
/* FIXME: Use CSS4 color blend functions once they're available. */
--selected-background-color: hsla(212, 92%, 54%, 0.5);
@@ -207,7 +207,7 @@
--glyph-opacity: 0.6;
}
-body:matches(.window-inactive, .window-docked-inactive) * {
+body.window-inactive * {
--border-color: hsl(0, 0%, 85%);
--border-color-dark: hsl(0, 0%, 72%);
}
@@ -349,7 +349,7 @@
--diff-deletion-background-color: hsl(5, 40%, 28%);
}
- body:matches(.window-inactive, .window-docked-inactive) {
+ body.window-inactive {
--selected-background-color: hsla(212, 92%, 64%, 0.5);
--glyph-color: hsl(0, 0%, 52%);
@@ -356,9 +356,9 @@
--glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
}
- body:matches(.window-inactive, .window-docked-inactive) * {
+ body.window-inactive * {
/* These properties are duplicated so that they have higher specificity than WebKit's stylesheet.
- Otherwise, the variable definition inside 'body:matches(.window-inactive, .window-docked-inactive) *' in OpenSource overrides with a lighter color.
+ Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
When merging to open source, we should guard the existing .window-inactive style with
'@media not all' to avoid applying the definition too broadly. */
--border-color: hsl(0, 0%, 33%);
