DevTools: iterate on keyboard focused styles

- Focus color is now 'blue', closer to the background color of a
  focused console message.
- In both Objects and Nodes, focus highlight's width fits tightly
  around the text content.

Screenshot: https://imgur.com/a/aLyGRqJ

Bug: 865674
Change-Id: Ie0fb14897dc855cd7713b2ce6ba0328ef205fc7a
Reviewed-on: https://chromium-review.googlesource.com/c/1368842Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#615792}

third_party/blink/renderer/devtools/front_end/elements/elementsTreeOutline.css

@@ -97,9 +97,10 @@
     background-color: var(--selection-inactive-bg-color);
 }
 
-.elements-disclosure .elements-tree-outline.hide-selection-when-blurred li.selected:focus[data-keyboard-focus="true"] .selection {
-    background: rgba(0, 0, 0, 0.08);
+.elements-disclosure .elements-tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .highlight > * {
+    background: var(--focus-bg-color);
     border-radius: 2px;
+    box-shadow: 0px 0px 0px 2px var(--focus-bg-color);
 }
 
 .elements-disclosure ol {

third_party/blink/renderer/devtools/front_end/object_ui/objectPropertiesSection.css

@@ -65,3 +65,14 @@
 .property-prompt {
     margin-left: 4px;
 }
+
+.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
+    background: none;
+}
+
+.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] ::content > *,
+.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .name-and-value {
+    background: var(--focus-bg-color);
+    border-radius: 2px;
+    box-shadow: 0px 0px 0px 2px var(--focus-bg-color);
+}

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

@@ -36,6 +36,7 @@
     --accent-color: #03a9f4;
     --accent-color-b: #2196f3;
     --accent-color-c: #3e82f7;
+    --focus-bg-color: hsl(214, 40%, 92%);
     --toolbar-bg-color: #f3f3f3;
     --toolbar-hover-bg-color: #eaeaea;
     --selection-fg-color: white;
@@ -53,6 +54,7 @@
     --accent-color: #32699f;
     --accent-color-b: #2f84da;
     --accent-color-c: #1f4061;
+    --focus-bg-color: hsl(214, 19%, 27%);
     --toolbar-bg-color: #333333;
     --toolbar-hover-bg-color: #202020;
     --selection-fg-color: #cdcdcd;

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

@@ -159,7 +159,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
 }
 
 .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
-    background: rgba(0, 0, 0, 0.08);
+    background: var(--focus-bg-color);
     border-radius: 2px;
 }