DevTools: improve $0 selected element hint in elements

third_party/WebKit/Source/devtools/front_end/elements/elementsTreeOutline.css

Index: third_party/WebKit/Source/devtools/front_end/elements/elementsTreeOutline.css
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/elementsTreeOutline.css b/third_party/WebKit/Source/devtools/front_end/elements/elementsTreeOutline.css
index bff1df95a9e3c2261619dfa3f6c136d0ff84b0da..d647f015f13a49007583a8bd01967222fa2cc009 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/elementsTreeOutline.css
+++ b/third_party/WebKit/Source/devtools/front_end/elements/elementsTreeOutline.css
@@ -25,20 +25,12 @@
     margin-left: -13px;
 }
 
-.elements-disclosure li.selected:after {
+.elements-disclosure li.selected .selected-hint:before {
     font-style: italic;
     content: " == $0";
-    color: black;
     opacity: 0.6;
     position: absolute;
-}
-
-.elements-disclosure li.selected.editing-as-html:after {

[lushnikov, 2017/03/25 09:42:31]

these classes served an important role of making '== $0 ' white when selected.
How do you solve this now?

[luoe, 2017/03/27 17:26:27]

After removing the 'color: black' style, the selected-hint text color inherits
from the default platform color, which is a less intense black.  Doing so
changes the current color slightly, but also lets the 'color: white' style on
Line 123 apply here.  I think we can simplify and remove this one-off style,
even if the hint text is no longer black.

As for the display: none, it's now being hidden without the need for this CSS
rule.

ElementsTreeElement.js does this to its children:
while (child) {
  child.style.display = 'none';
  child = child.nextSibling;
}

That said, the 'editing-as-html' class is no longer used so I'll remove that!

-    display: none;
-}
-
-.elements-disclosure ol li.selected:focus:after {
-    color: white;
+    white-space: pre;
 }
 
 .elements-disclosure li.parent::before {