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 248 matching lines @@
         var listItemElement = this.listItemElement;
         if (!listItemElement)
             return;
 
         if (!this.selectionElement) {
             this.selectionElement = createElement("div");
             this.selectionElement.className = "selection selected";
             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
      */
     onbind: function()
     {
         if (!this._elementCloseTag)
             this._node[this.treeOutline.treeElementSymbol()] = this;
     },
 
     /**
@@ skipping 483 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 276 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(setTitle.bind(this)).then(this._updateActionsToolbar.bind(this));
 
         /**
          * @this {WebInspector.ElementsTreeElement}
          */
         function setTitle()
         {
             this._decorationsElement.removeChildren();
             this._decorationsElement.classList.add("hidden");
             if (!decorations.length && !descendantDecorations.length)
                 return;
@@ skipping 392 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
 }