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 218 matching lines @@
   _createSelection() {
     var listItemElement = this.listItemElement;
     if (!listItemElement)
       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);
+
+      var hintElement = listItemElement.createChild('div', 'selected-hint');

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

you gonna re-create this multiple times on .updateTitle()

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

I've added a check to make sure a hintElement doesn't already exist first.

I've also pulled out _createHint() to avoid unnecessary hint making on hover. 
createSelection() in the hovered setter, which we don't want to trigger building
a hint element.

+      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;
   }
@@ skipping 1360 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;