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 80a38f371509baeb4425564fd393c7825819917f..1656c44b0d8e89ee8657aeaa1663e419df0f16f4 100644
--- a/Source/devtools/front_end/elements/ElementsTreeElement.js
+++ b/Source/devtools/front_end/elements/ElementsTreeElement.js
@@ -266,9 +266,29 @@ WebInspector.ElementsTreeElement.prototype = {
             listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
         }
 
+        this._updateActionsToolbar();
         this.selectionElement.style.height = listItemElement.offsetHeight + "px";
     },
 
+    _updateActionsToolbar: function()
+    {
+        if (!Runtime.experiments.isEnabled("materialDesign"))
+            return;
+        var actionsToolbar = this.treeOutline.nodeActionsElement();
+        if (this.selected && this._node.nodeType() === Node.ELEMENT_NODE && actionsToolbar.parentElement !== this.listItemElement) {
+            this.listItemElement.insertBefore(actionsToolbar, this.selectionElement.nextSibling);
+            delete this._forceShowActions;
+        }
+
+        if (actionsToolbar.parentElement === this.listItemElement) {
+            actionsToolbar.classList.toggle("markers-present", this._decorationsElement.hasChildNodes());
+            if (!this.treeOutline.nodeActionsVisible() && this._decorationsElement.hasChildNodes()) {
+                this.treeOutline.toggleNodeActions(true);
+                this._forceShowActions = true;
+            }
+        }
+    },
+
     /**
      * @override
      */
@@ -772,10 +792,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;
@@ -824,6 +845,7 @@ WebInspector.ElementsTreeElement.prototype = {
          */
         function dispose()
         {
+            disposeCallback();
             delete this._editing;
             this.treeOutline.setMultilineEditing(null);
 
@@ -1120,7 +1142,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._updateActionsToolbar.bind(this));
 
         /**
          * @this {WebInspector.ElementsTreeElement}
@@ -1533,8 +1555,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()