DevTools: improve $0 selected element hint in elements

third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js

Index: third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js b/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
index d5492c6ad3d960b075018923be879930be00870b..e018f370f325f3017009d1405465ab983bf97d9d 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js
@@ -239,6 +239,13 @@ Elements.ElementsTreeElement = class extends UI.TreeElement {
     }
   }
 
+  _createHint() {
+    if (this.listItemElement && !this._hintElement) {
+      this._hintElement = this.listItemElement.createChild('span', 'selected-hint');
+      this._hintElement.title = Common.UIString('Use $0 in the console to refer to this element.');
+    }
+  }
+
   /**
    * @override
    */
@@ -328,6 +335,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel);
     }
     this._createSelection();
+    this._createHint();
     this.treeOutline.suppressRevealAndSelect = false;
     return true;
   }
@@ -1048,11 +1056,14 @@ Elements.ElementsTreeElement = class extends UI.TreeElement {
       this.updateDecorations();
       this.listItemElement.insertBefore(this._gutterContainer, this.listItemElement.firstChild);
       delete this._highlightResult;
+      delete this.selectionElement;
+      delete this._hintElement;
+      if (this.selected) {
+        this._createSelection();
+        this._createHint();
+      }

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

Drive by: It turns out that making tons of search queries creates tons of
unnecessary selectionElements in the dom!  Since searching doesn't affect
selection, we should be doing delete/create only inside this branch.

     }
 
-    delete this.selectionElement;
-    if (this.selected)
-      this._createSelection();
     this._highlightSearchResults();
   }