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-hint {
+    display: inline;
+}
+
+.elements-disclosure li .selected-hint:before {
+    content: "== $0";
     font-style: italic;
-    content: " == $0";
-    color: black;
     opacity: 0.6;
     position: absolute;
+    white-space: nowrap;
+    margin-left: 4px;
+}
+
+.elements-disclosure li:not(.selected) .selected-hint:before {

[lushnikov, 2017/03/24 22:05:11]

you don't need half of these styles; let's make a less invasive solution

[luoe, 2017/03/25 01:38:23]

Extra styles removed.

+    content: "";
 }
 
 .elements-disclosure li.selected.editing-as-html:after {
     display: none;
 }
 
 .elements-disclosure ol li.selected:focus:after {
     color: white;
 }
 
@@ skipping 312 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;
 }