DevTools: improve $0 selected element hint in elements

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

 /*
  * Copyright (c) 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .elements-disclosure {
     width: 100%;
     display: inline-block;
     line-height: normal;
 }
 
 .elements-disclosure li {
     /** Keep margin-left & padding-left in sync with ElementsTreeElements.updateDecorators **/
     padding: 0 0 0 14px;
     margin-top: 1px;
     margin-left: -2px;
     word-wrap: break-word;
     position: relative;
     min-height: 14px;
 }
 
 .elements-disclosure li.parent {
     /** Keep it in sync with ElementsTreeElements.updateDecorators **/
     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 {
     box-sizing: border-box;
 }
 
 .elements-disclosure li.parent::before {
     -webkit-user-select: none;
     -webkit-mask-image: url(Images/treeoutlineTriangles.png);
     -webkit-mask-size: 32px 24px;
@@ skipping 304 matching lines @@
     border-color: hsla(0,0%,0%,0.1);
 }
 
 .elements-tree-outline ol.shadow-root {
     border-color: hsla(0,0%,80%,1);
 }
 
 li.selected:not(.always-parent) + ol.children {
     border-color: hsla(216,68%,80%,1) !important;
 }