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 408 matching lines @@
     var child = this.listItemElement.firstChild;
     while (child) {
       child.style.display = 'none';
       child = child.nextSibling;
     }
     // Hide children item.
     if (this.childrenListElement)
       this.childrenListElement.style.display = 'none';
     // Append editor.
     this.listItemElement.appendChild(this._htmlEditElement);
-    this.listItemElement.classList.add('editing-as-html');
     this.treeOutline.element.addEventListener('mousedown', consume, false);
 
     self.runtime.extension(UI.TextEditorFactory).instance().then(gotFactory.bind(this));
 
     /**
      * @param {!UI.TextEditorFactory} factory
      * @this {Elements.ElementsTreeElement}
      */
     function gotFactory(factory) {
       var editor = factory.createEditor({
@@ skipping 33 matching lines @@
     }
 
     /**
      * @this {Elements.ElementsTreeElement}
      */
     function dispose() {
       this._editing.editor.widget().element.removeEventListener('blur', this._editing.commit, true);
       this._editing.editor.widget().detach();
       delete this._editing;
 
-      this.listItemElement.classList.remove('editing-as-html');
       // Remove editor.
       this.listItemElement.removeChild(this._htmlEditElement);
       delete this._htmlEditElement;
       // Unhide children item.
       if (this.childrenListElement)
         this.childrenListElement.style.removeProperty('display');
       // Unhide header items.
       var child = this.listItemElement.firstChild;
       while (child) {
         child.style.removeProperty('display');
@@ skipping 217 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();
+      }
     }
 
-    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;