From e991071f67041513ff77ef8eed461bad3bc32805 Mon Sep 17 00:00:00 2001 From: Kham Udom Date: Thu, 13 Feb 2020 12:50:55 -0800 Subject: [PATCH] High contrast work on Sources debugger panel The changes fixes the hover and and keyboard focus on the panel. The header gets a focus ring and when hovering or focusing the content item, the background and foreground changes. Before: https://imgur.com/a/gZD8xLg After: https://imgur.com/a/LVruJ6P Bug: 1048378 Change-Id: If697639f8a5b7d73844e1aab63c9bb2db884b295 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2055546 Commit-Queue: Kham Udom Reviewed-by: Mathias Bynens --- .../domBreakpointsSidebarPane.css | 12 ++++++++++++ .../xhrBreakpointsSidebarPane.css | 12 ++++++++++++ .../event_listeners/eventListenersView.css | 6 ++---- .../object_ui/objectPropertiesSection.css | 5 +++++ front_end/sources/callStackSidebarPane.css | 12 ++++++++++++ .../javaScriptBreakpointsSidebarPane.css | 12 ++++++++++++ front_end/sources/threadsSidebarPane.css | 12 ++++++++++++ .../sources/watchExpressionsSidebarPane.css | 18 ++++++++++++++++++ front_end/ui/inspectorCommon.css | 4 ++++ 9 files changed, 89 insertions(+), 4 deletions(-) diff --git a/front_end/browser_debugger/domBreakpointsSidebarPane.css b/front_end/browser_debugger/domBreakpointsSidebarPane.css index f9a34b21e8..d90e101a0e 100644 --- a/front_end/browser_debugger/domBreakpointsSidebarPane.css +++ b/front_end/browser_debugger/domBreakpointsSidebarPane.css @@ -38,3 +38,15 @@ background-color: hsl(46, 98%, 22%); color: #ccc; } + +@media (forced-colors: active) { + .breakpoint-list .breakpoint-entry:hover, + .breakpoint-entry[data-keyboard-focus="true"] { + forced-color-adjust: none; + background-color: Highlight; + } + .breakpoint-list .breakpoint-entry:hover *, + .breakpoint-entry[data-keyboard-focus="true"] * { + color: HighlightText; + } +} diff --git a/front_end/browser_debugger/xhrBreakpointsSidebarPane.css b/front_end/browser_debugger/xhrBreakpointsSidebarPane.css index 266c7d1614..665833ec98 100644 --- a/front_end/browser_debugger/xhrBreakpointsSidebarPane.css +++ b/front_end/browser_debugger/xhrBreakpointsSidebarPane.css @@ -55,3 +55,15 @@ background-color: hsl(46, 98%, 22%); color: #ccc; } + +@media (forced-colors: active) { + .breakpoint-list .breakpoint-entry:hover, + .breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] { + forced-color-adjust: none; + background-color: Highlight; + } + .breakpoint-list .breakpoint-entry:hover *, + .breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] * { + color: HighlightText; + } +} diff --git a/front_end/event_listeners/eventListenersView.css b/front_end/event_listeners/eventListenersView.css index a172c9ccb9..4900ade96e 100644 --- a/front_end/event_listeners/eventListenersView.css +++ b/front_end/event_listeners/eventListenersView.css @@ -82,12 +82,10 @@ color: HighlightText; border-color: ButtonText; } - .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .event-listener-button { + .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .event-listener-button, + .tree-outline-disclosure li[data-keyboard-focus="true"]:focus .gray-info-message { background-color: Highlight; color: HighlightText; border-color: HighlightText; } - .tree-outline-disclosure:hover li.parent::before { - background-color: ButtonText; - } } diff --git a/front_end/object_ui/objectPropertiesSection.css b/front_end/object_ui/objectPropertiesSection.css index 0ad3550d6b..58a1e88941 100644 --- a/front_end/object_ui/objectPropertiesSection.css +++ b/front_end/object_ui/objectPropertiesSection.css @@ -94,10 +94,15 @@ background: transparent; box-shadow: none; } + .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] span, .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .gray-info-message { color: HighlightText; } .tree-outline-disclosure:hover li.parent::before { background-color: ButtonText; } + .tree-outline li:hover .tree-element-title, + .tree-outline li.selected .tree-element-title { + color: ButtonText; + } } diff --git a/front_end/sources/callStackSidebarPane.css b/front_end/sources/callStackSidebarPane.css index 1f0b6c0aaf..021a7465ac 100644 --- a/front_end/sources/callStackSidebarPane.css +++ b/front_end/sources/callStackSidebarPane.css @@ -116,3 +116,15 @@ :host-context(.-theme-with-dark-background) .blackboxed-message > .link { color: hsl(0, 0%, 67%); } + +@media (forced-colors: active) { + .call-frame-item:not(.async-header):hover, + .call-frame-item[data-keyboard-focus="true"]:focus { + forced-color-adjust: none; + background-color: Highlight; + } + .call-frame-item:not(.async-header):hover *, + .call-frame-item[data-keyboard-focus="true"]:focus * { + color: HighlightText; + } +} diff --git a/front_end/sources/javaScriptBreakpointsSidebarPane.css b/front_end/sources/javaScriptBreakpointsSidebarPane.css index cb68a10a2b..9e6abcc98e 100644 --- a/front_end/sources/javaScriptBreakpointsSidebarPane.css +++ b/front_end/sources/javaScriptBreakpointsSidebarPane.css @@ -46,3 +46,15 @@ background-color: hsl(46, 98%, 22%); color: #ccc; } + +@media (forced-colors: active) { + :not(.breakpoints-list-deactivated) > .breakpoint-entry:hover, + .breakpoint-entry:focus { + forced-color-adjust: none; + background-color: Highlight; + } + :not(.breakpoints-list-deactivated) > .breakpoint-entry:hover > *, + .breakpoint-entry:focus > * { + color: HighlightText; + } +} diff --git a/front_end/sources/threadsSidebarPane.css b/front_end/sources/threadsSidebarPane.css index c10ec44d56..8b7f6b4563 100644 --- a/front_end/sources/threadsSidebarPane.css +++ b/front_end/sources/threadsSidebarPane.css @@ -48,3 +48,15 @@ .thread-item.selected .selected-thread-icon { display: block; } + +@media (forced-colors: active) { + .thread-item:hover, + .thread-item[data-keyboard-focus="true"] { + forced-color-adjust: none; + background-color: Highlight; + } + .thread-item:hover > div, + .thread-item[data-keyboard-focus="true"] > div { + color: HighlightText; + } +} diff --git a/front_end/sources/watchExpressionsSidebarPane.css b/front_end/sources/watchExpressionsSidebarPane.css index b50f760bb5..ecb09fe52f 100644 --- a/front_end/sources/watchExpressionsSidebarPane.css +++ b/front_end/sources/watchExpressionsSidebarPane.css @@ -108,3 +108,21 @@ li.watch-expression-tree-item { li.watch-expression-editing::before { background-color: transparent; } + +@media (forced-colors: active) { + .watch-expression-header:hover .watch-expression-delete-button, + .watch-expressions .dimmed { + opacity: 1; + } + li.watch-expression-tree-item * { + forced-color-adjust: none; + color: ButtonText; + } + li.watch-expression-tree-item:hover { + forced-color-adjust: none; + background-color: Highlight; + } + li.watch-expression-tree-item:hover * { + color: HighlightText; + } +} diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css index 6f010333fe..444827734e 100644 --- a/front_end/ui/inspectorCommon.css +++ b/front_end/ui/inspectorCommon.css @@ -474,6 +474,10 @@ button.link[data-keyboard-focus="true"]:focus { } @media (forced-colors: active) { + .dimmed, + .chrome-select:disabled { + opacity: 1; + } [is=ui-icon].icon-mask, :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons, .force-white-icons [is=ui-icon].spritesheet-smallicons, [is=ui-icon].force-white-icons.spritesheet-smallicons, -theme-preserve, :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons, .force-white-icons [is=ui-icon].spritesheet-largeicons, [is=ui-icon].force-white-icons.spritesheet-largeicons, -theme-preserve,