Devtools UI: Add node-specific actions into a ghost toolbar in DOM

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 22 matching lines @@
  * @extends {TreeElement}
  * @param {!WebInspector.DOMNode} node
  * @param {boolean=} elementCloseTag
  */
 WebInspector.ElementsTreeElement = function(node, elementCloseTag)
 {
     // The title will be updated in onattach.
     TreeElement.call(this);
     this._node = node;
 
-    this._decorationsElement = createElementWithClass("div", "hidden");
-    this.listItemElement.appendChild(this._decorationsElement);
+    this._gutterContainer = this.listItemElement.createChild("div", "gutter-container");
+    this._decorationsElement = this._gutterContainer.createChild("div", "hidden");
+    this._decorationsElement.addEventListener("mousedown", this._decorationsClicked.bind(this));
 
     this._elementCloseTag = elementCloseTag;
 
     if (this._node.nodeType() == Node.ELEMENT_NODE && !elementCloseTag)
         this._canAddAttributes = true;
     this._searchQuery = null;
     this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit;
     if (this._node.nodeType() === Node.ELEMENT_NODE && this._node.parentNode && this._node.parentNode.nodeType() === Node.DOCUMENT_NODE && !this._node.parentNode.parentNode)
         this.setCollapsible(false);
 }
@@ skipping 102 matching lines @@
 
     /**
      * @return {boolean}
      */
     isEditing: function()
     {
         return !!this._editing;
     },
 
     /**
+     * @return {!Element}
+     */
+    gutterElement: function()
+    {
+        return this._gutterContainer;
+    },
+
+    _decorationsClicked: function()
+    {
+        this.treeOutline.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.DecorationsClicked, this._node);
+    },
+
+    /**
      * @param {string} searchQuery
      */
     highlightSearchResults: function(searchQuery)
     {
         if (this._searchQuery !== searchQuery)
             this._hideSearchHighlight();
 
         this._searchQuery = searchQuery;
         this._searchHighlightsVisible = true;
         this.updateTitle(null, true);
@@ skipping 588 matching lines @@
         tagNameElement.addEventListener('keyup', keyupListener, false);
 
         var config = new WebInspector.InplaceEditor.Config(editingComitted.bind(this), editingCancelled.bind(this), tagName);
         this._editing = WebInspector.InplaceEditor.startEditing(tagNameElement, config);
         this.listItemElement.getComponentSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
         return true;
     },
 
     /**
      * @param {function(string, string)} commitCallback
+     * @param {function()} disposeCallback
      * @param {?Protocol.Error} error
      * @param {string} initialValue
      */
-    _startEditingAsHTML: function(commitCallback, error, initialValue)
+    _startEditingAsHTML: function(commitCallback, disposeCallback, error, initialValue)
     {
         if (error)
             return;
         if (this._editing)
             return;
 
         function consume(event)
         {
             if (event.eventPhase === Event.AT_TARGET)
                 event.consume(true);
@@ skipping 28 matching lines @@
         {
             commitCallback(initialValue, newValue);
             dispose.call(this);
         }
 
         /**
          * @this {WebInspector.ElementsTreeElement}
          */
         function dispose()
         {
+            disposeCallback();
             delete this._editing;
             this.treeOutline.setMultilineEditing(null);
 
             // Remove editor.
             this.listItemElement.removeChild(this._htmlEditElement);
             delete this._htmlEditElement;
             // Unhide children item.
             if (this._childrenListNode)
                 this._childrenListNode.style.removeProperty("display");
             // Unhide header items.
@@ skipping 223 matching lines @@
                 if (!depth)
                     this.childrenListElement.classList.add("shadow-root-deep");
                 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._decorationsElement, this.listItemElement.firstChild);
+            this.listItemElement.insertBefore(this._gutterContainer, this.listItemElement.firstChild);
             delete this._highlightResult;
         }
 
         delete this.selectionElement;
         if (this.selected)
             this.updateSelection();
         this._preventFollowingLinksOnDoubleClick();
         this._highlightSearchResults();
     },
 
@@ skipping 32 matching lines @@
          * @param {!WebInspector.DOMPresentationUtils.MarkerDecorator} decorator
          */
         function collectDecoration(n, decorator)
         {
             var decoration = decorator.decorate(n);
             if (!decoration)
                 return;
             (n === node ? decorations : descendantDecorations).push(decoration);
         }
 
-        Promise.all(promises).then(setTitle.bind(this));
+        Promise.all(promises).then(updateDecorationsUI.bind(this));
 
         /**
          * @this {WebInspector.ElementsTreeElement}
          */
-        function setTitle()
+        function updateDecorationsUI()
         {
             this._decorationsElement.removeChildren();
             this._decorationsElement.classList.add("hidden");
             if (!decorations.length && !descendantDecorations.length)
                 return;
 
             var colors = new Set();
             var titles = createElement("div");
 
             for (var decoration of decorations) {
@@ skipping 15 matching lines @@
                     descendantColors.add(decoration.color);
                 }
             }
 
             var offset = 0;
             processColors.call(this, colors, "elements-gutter-decoration");
             if (!this.expanded)
                 processColors.call(this, descendantColors, "elements-gutter-decoration elements-has-decorated-children");
             WebInspector.Tooltip.install(this._decorationsElement, titles);
 
+            this._gutterContainer.classList.toggle("has-decorations", this._decorationsElement.hasChildNodes());
+
             /**
              * @param {!Set<string>} colors
              * @param {string} className
              * @this {WebInspector.ElementsTreeElement}
              */
             function processColors(colors, className)
             {
                 for (var color of colors) {
                     var child = this._decorationsElement.createChild("div", className);
                     this._decorationsElement.classList.remove("hidden");
@@ skipping 352 matching lines @@
         /**
          * @param {string} initialValue
          * @param {string} value
          */
         function commitChange(initialValue, value)
         {
             if (initialValue !== value)
                 node.setOuterHTML(value, selectNode);
         }
 
+        function disposeCallback()
+        {
+            if (callback)
+                callback(false);
+        }
+
         var node = this._node;
-        node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
+        node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange, disposeCallback));
     },
 
     _copyCSSPath: function()
     {
         InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.cssPath(this._node, true));
     },
 
     _copyXPath: function()
     {
         InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.xPath(this._node, true));
@@ skipping 38 matching lines @@
 
             if (object)
                 object.callFunction(scrollIntoView);
         }
 
         this._node.resolveToObject("", scrollIntoViewCallback);
     },
 
     __proto__: TreeElement.prototype
 }