DevTools: improve $0 selected element hint in elements

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

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 221 matching lines @@
       return;
 
     if (!this.selectionElement) {
       this.selectionElement = createElement('div');
       this.selectionElement.className = 'selection fill';
       this.selectionElement.style.setProperty('margin-left', (-this._computeLeftIndent()) + 'px');
       listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
     }
   }
 
+  _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
    */
   onbind() {
     if (!this._elementCloseTag)
       this._node[this.treeOutline.treeElementSymbol()] = this;
   }
 
   /**
    * @override
@@ skipping 69 matching lines @@
    * @return {boolean}
    */
   onselect(selectedByUser) {
     this.treeOutline.suppressRevealAndSelect = true;
     this.treeOutline.selectDOMNode(this._node, selectedByUser);
     if (selectedByUser) {
       this._node.highlight();
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel);
     }
     this._createSelection();
+    this._createHint();
     this.treeOutline.suppressRevealAndSelect = false;
     return true;
   }
 
   /**
    * @override
    * @return {boolean}
    */
   ondelete() {
     var startTagTreeElement = this.treeOutline.findTreeElement(this._node);
@@ skipping 700 matching lines @@
         else
           this.childrenListElement.classList.add('shadow-root-depth-' + depth);
       }
       var highlightElement = createElement('span');
       highlightElement.className = 'highlight';
       highlightElement.appendChild(nodeInfo);
       this.title = highlightElement;
       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();
   }
 
   /**
    * @return {number}
    */
   _computeLeftIndent() {
     var treeElement = this.parent;
     var depth = 0;
     while (treeElement !== null) {
@@ skipping 543 matching lines @@
 Elements.ElementsTreeElement.ForbiddenClosingTagElements = new Set([
   'area', 'base',  'basefont', 'br',   'canvas',   'col',  'command', 'embed',  'frame', 'hr',
   'img',  'input', 'keygen',   'link', 'menuitem', 'meta', 'param',   'source', 'track', 'wbr'
 ]);
 
 // These tags we do not allow editing their tag name.
 Elements.ElementsTreeElement.EditTagBlacklist = new Set(['html', 'head', 'body']);
 
 /** @typedef {{cancel: function(), commit: function(), resize: function(), editor:!UI.TextEditor}} */
 Elements.MultilineEditorController;