Bug 1916333 - [devtools] Adapt console filter input colors in High Contrast Mode. r=devtools-reviewers,accessibility-frontend-reviewers,nlapre,ochameau.

This adds proper border and outline colors to the console filter input.
The filter height is reduced so those are visible, and we also
hide the separator around it which are not needed in HCM since we
display the border on the input.

Differential Revision: https://phabricator.services.mozilla.com/D222069

devtools/client/themes/common.css

@@ -35,6 +35,8 @@
 
   --searchbox-no-match-background-color: #ffe5e5;
   --searchbox-no-match-stroke-color: var(--red-60);
+  --searchbox-background-color: transparent;
+  --searchbox-border-color: transparent;
 
   --devtools-searchinput-clear-cross-color: transparent;
   --devtools-searchinput-clear-hover-cross-color: transparent;
@@ -63,6 +65,9 @@
     --toggle-disabled-thumb-color: GrayText;
     --toggle-track-disabled-opacity: 1;
 
+    --searchbox-background-color: ButtonFace;
+    --searchbox-border-color: ButtonText;
+
     --devtools-searchinput-clear-opacity: 1;
     --devtools-searchinput-clear-cross-color: ButtonFace;
     --devtools-searchinput-clear-hover-cross-color: SelectedItemText;
@@ -293,6 +298,10 @@ iframe {
   :is(input[type="radio"], input[type="checkbox"], checkbox)& {
     outline-offset: 2px;
   }
+
+  :is(input[type="text"], input[type="search"], input:not([type]))& {
+    outline-color: var(--theme-focus-textinput-outline-color);
+  }
 }
 
 /* Toolbar buttons */
@@ -520,7 +529,8 @@ iframe {
   gap: 4px;
   padding-inline-end: 4px;
   position: relative;
-  border: 1px solid transparent;
+  border: 1px solid var(--searchbox-border-color);
+  background-color: var(--searchbox-background-color);
   height: 100%;
   box-sizing: border-box;
 }
@@ -543,6 +553,7 @@ iframe {
    is focused (e.g. a button), we only want the outline on that element */
 .devtools-searchbox:focus-within:has(input:focus-visible) {
   outline: var(--theme-focus-outline);
+  outline-color: var(--theme-focus-textinput-outline-color);
   outline-offset: -2px;
 
   &.devtools-searchbox-no-match {

devtools/client/themes/variables.css

@@ -38,6 +38,7 @@
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
   --theme-focus-outline-color: var(--blue-50);
+  --theme-focus-textinput-outline-color: var(--theme-focus-outline-color);
   --theme-focus-outline-size: 2px;
   --theme-focus-outline: var(--theme-focus-outline-size) solid var(--theme-focus-outline-color);
   --theme-outline-offset: 0px;
@@ -277,6 +278,7 @@
     --theme-selection-color: SelectedItemText;
     --theme-body-color: CanvasText;
     --theme-focus-outline-color: CanvasText;
+    --theme-focus-textinput-outline-color: SelectedItem;
     --theme-icon-color: ButtonText;
     --theme-icon-hover-color: SelectedItem;
     /* We don't want dimmed colors in high Contrast Mode, use the same colors as non-dimmed icons */

devtools/client/themes/webconsole.css

@@ -694,6 +694,14 @@ a.learn-more-link.webconsole-learn-more-link {
   /* It's important to keep this in px as it's used in JS to control the display mode
    * of the filter toolbar. */
   min-width: 150px;
+
+  /* High Contrast Mode */
+  :root[forced-colors-active] & {
+    /* Don't stretch so there is room around the input to show the borders
+       and the focus indicator */
+    align-self: unset;
+    outline-offset: 0px;
+  }
 }
 
 /* We always render the "X hidden" element in the filter bar for accessibility.