DevTools: Accessibility - Fix TreeOutline item contrast ratio

Small patch to fix an issue with the colors of the TreeOutine.
Specifically, in the dark theme the selected item in the tree does not
have sufficient contrast when focus is placed outside the tree.

The following image shows the change:
https://imgur.com/a/WXY2CtT

The fix was to add a new css variable into inspectorStyle.css which is
given the existing foreground color in the light theme, but is over-
ridden in the dark theme with a better contrasting color. The new
color is then applied in treeoutline.css to selected non-focused items.

Change-Id: Iec42e6dbbc2264651dd9c6b0238a1e65ecf6246b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1540270Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: James Lissiak <jalissia@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#644826}

third_party/blink/renderer/devtools/front_end/ui/inspectorStyle.css

@@ -40,6 +40,7 @@
     --toolbar-bg-color: #f3f3f3;
     --toolbar-hover-bg-color: #eaeaea;
     --selection-fg-color: white;
+    --selection-inactive-fg-color: #5a5a5a;
     --selection-inactive-bg-color: #dadada;
     --tab-selected-fg-color: #333;
     --tab-selected-bg-color: var(--toolbar-bg-color);
@@ -60,6 +61,7 @@
     --toolbar-bg-color: #333333;
     --toolbar-hover-bg-color: #202020;
     --selection-fg-color: #cdcdcd;
+    --selection-inactive-fg-color: #cdcdcd;
     --selection-inactive-bg-color: hsl(0, 0%, 28%);
     --tab-selected-fg-color: #eaeaea;
     --tab-selected-bg-color: black;

third_party/blink/renderer/devtools/front_end/ui/treeoutline.css

@@ -35,6 +35,10 @@
     margin-left: -10000px;
 }
 
+.tree-outline:not(.hide-selection-when-blurred) li.selected {
+    color: var(--selection-inactive-fg-color);
+}
+
 .tree-outline:not(.hide-selection-when-blurred) li.selected .selection {
     display: block;
     background-color: var(--selection-inactive-bg-color);