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

Source/devtools/front_end/elements/ElementsTreeElement.js

Index: Source/devtools/front_end/elements/ElementsTreeElement.js
diff --git a/Source/devtools/front_end/elements/ElementsTreeElement.js b/Source/devtools/front_end/elements/ElementsTreeElement.js
index e00769ec313aee8af82cb1a1116d735aa8bf1efc..b12cc80e8f6981d3278774962674b0989db8094d 100644
--- a/Source/devtools/front_end/elements/ElementsTreeElement.js
+++ b/Source/devtools/front_end/elements/ElementsTreeElement.js
@@ -40,8 +40,9 @@ WebInspector.ElementsTreeElement = function(node, elementCloseTag)
     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;
 
@@ -164,6 +165,19 @@ WebInspector.ElementsTreeElement.prototype = {
     },
 
     /**
+     * @return {!Element}
+     */
+    gutterElement: function()
+    {
+        return this._gutterContainer;
+    },
+
+    _decorationsClicked: function()
+    {
+        this.treeOutline.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.DecorationsClicked, this._node);
+    },
+
+    /**
      * @param {string} searchQuery
      */
     highlightSearchResults: function(searchQuery)
@@ -265,6 +279,7 @@ WebInspector.ElementsTreeElement.prototype = {
             this.selectionElement.className = "selection fill";
             listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
         }
+        this.selectionElement.style.height = listItemElement.offsetHeight + "px";

[pfeldman, 2015/09/17 00:06:18]

Is this related to the dgozman's change rollout?

[samli, 2015/09/17 18:08:04]

Yeah, doesn't show up in my diff locally.

     },
 
     /**
@@ -770,10 +785,11 @@ WebInspector.ElementsTreeElement.prototype = {
 
     /**
      * @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;
@@ -822,6 +838,7 @@ WebInspector.ElementsTreeElement.prototype = {
          */
         function dispose()
         {
+            disposeCallback();
             delete this._editing;
             this.treeOutline.setMultilineEditing(null);
 
@@ -1065,7 +1082,7 @@ WebInspector.ElementsTreeElement.prototype = {
             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;
         }
 
@@ -1118,7 +1135,7 @@ WebInspector.ElementsTreeElement.prototype = {
             (n === node ? decorations : descendantDecorations).push(decoration);
         }
 
-        Promise.all(promises).then(setTitle.bind(this));
+        Promise.all(promises).then(setTitle.bind(this)).then(this._updateGutter.bind(this));
 
         /**
          * @this {WebInspector.ElementsTreeElement}
@@ -1179,6 +1196,11 @@ WebInspector.ElementsTreeElement.prototype = {
         }
     },
 
+    _updateGutter: function()
+    {
+        this._gutterContainer.classList.toggle("has-decorations", this._decorationsElement.hasChildNodes());

[pfeldman, 2015/09/17 00:06:18]

Do this within setTitle and rename it?

[samli, 2015/09/17 18:08:04]

Done.

+    },
+
     /**
      * @param {!Node} parentElement
      * @param {string} name
@@ -1531,8 +1553,14 @@ WebInspector.ElementsTreeElement.prototype = {
                 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()