High contrast support for Inspect devices

Fixed the background and foreground on the tab-header when on
focused. Set border on dialog and fix the color on the background and
inputs.

Before: https://imgur.com/a/iEyWDf7
After: https://imgur.com/a/iVnvDpc

Bug: 1048378
Change-Id: I59312eff672a7f9386e7e78223ba0e5c58cd3eb2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2109493Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Kham Udom <khamu@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#752565}

chrome/browser/resources/inspect/inspect.css

@@ -326,7 +326,7 @@ dialog.config::backdrop {
 
 dialog.config {
   background: white;
-  border: 0;
+  border: 1px solid transparent;
   border-radius: 3px;
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
   color: #333;
@@ -444,3 +444,48 @@ dialog.target-discovery .port-forwarding {
 .config-buttons > label {
   flex-grow: 1
 }
+
+@media (forced-colors: active) {
+  .content-header {
+    background: Canvas;
+    border-bottom-color: transparent;
+    forced-color-adjust: none;
+  }
+  .tab-header {
+    forced-color-adjust: none;
+  }
+  .tab-header.selected {
+    background-color: Highlight;
+    border-inline-start-color: Highlight;
+  }
+  .tab-header > button {
+    background-color: ButtonFace;
+  }
+  .tab-header:not(.selected) > button {
+    color: ButtonText;
+  }
+  .tab-header.selected > button {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+  .tab-header > button:focus {
+    background-color: Highlight;
+    color: HighlightText;
+    outline: none;
+  }
+  dialog.config {
+    background: Canvas;
+    border-color: CanvasText;
+    color: CanvasText;
+    forced-color-adjust: none;
+  }
+  .config-list-row.selected,
+  .config-list-row.selected:hover,
+  .config-list-row:hover {
+    background-color: Highlight;
+  }
+  .config-list-row input {
+    border-color: ButtonText;
+    outline: none;
+  }
+}