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

Source/devtools/front_end/elements/ElementsTreeOutline.js

Index: Source/devtools/front_end/elements/ElementsTreeOutline.js
diff --git a/Source/devtools/front_end/elements/ElementsTreeOutline.js b/Source/devtools/front_end/elements/ElementsTreeOutline.js
index 84179ff928acafd5d6354af4d8629c35f20b6743..d795aa36ebd5ef2a4c2285a8aa97bb403862403c 100644
--- a/Source/devtools/front_end/elements/ElementsTreeOutline.js
+++ b/Source/devtools/front_end/elements/ElementsTreeOutline.js
@@ -426,6 +426,7 @@ WebInspector.ElementsTreeOutline.prototype = {
      */
     selectDOMNode: function(node, focus)
     {
+        this.toggleNodeActions(false);
         if (this._selectedDOMNode === node) {
             this._revealAndSelectNode(node, !focus);
             return;
@@ -442,6 +443,106 @@ WebInspector.ElementsTreeOutline.prototype = {
             this._selectedNodeChanged();
     },
 
+    _createNodeToolbar: function()

[pfeldman, 2015/09/15 20:56:50]

I think this all needs to be done on the elements panel level since
ElementsTreeOutline is a reusable component that is instantiated for console,
event listeners, object property sections, etc. The actions we are looking at
are ElementsPanel-only.

+    {
+        var toolbar = new WebInspector.Toolbar();
+        toolbar.element.classList.add("node-actions-toolbar");
+        this._hideElementButton = new WebInspector.ToolbarButton(WebInspector.UIString("Hide element"), "visibility-off-toolbar-item");
+        this._hideElementButton.setAction("elements.hide-element");
+        toolbar.appendToolbarItem(this._hideElementButton);
+        this._forceElementStateButton = new WebInspector.ToolbarMenuButton(WebInspector.UIString("Force element state"), "pin-toolbar-item", this._showForceElementStateMenu.bind(this));
+        toolbar.appendToolbarItem(this._forceElementStateButton);
+        this._breakpointsButton = new WebInspector.ToolbarMenuButton(WebInspector.UIString("Toggle breakpoints"), "add-breakpoint-toolbar-item", this._showBreakpointsMenu.bind(this));
+        toolbar.appendToolbarItem(this._breakpointsButton);
+        toolbar.appendSeparator();
+        this._editAsHTMLButton = new WebInspector.ToolbarButton(WebInspector.UIString("Edit as HTML"), "edit-toolbar-item");
+        this._editAsHTMLButton.setAction("elements.edit-as-html");
+        toolbar.appendToolbarItem(this._editAsHTMLButton);
+        return toolbar;
+    },
+
+    /**
+     * @return {!Element}
+     */
+    nodeActionsElement: function()
+    {
+        if (this._nodeActionsElement)
+            return this._nodeActionsElement;
+
+        this._nodeActionsElement = createElementWithClass("div", "node-actions-container");
+        var button = this._nodeActionsElement.createChild("div", "node-actions-toggle");
+        button.addEventListener("click", this.toggleNodeActions.bind(this, null));
+        this._nodeActionsToolbar = this._createNodeToolbar();
+        this._nodeActionsElement.appendChild(this._nodeActionsToolbar.element);
+        return this._nodeActionsElement;
+    },
+
+    /**
+     * @param {?boolean} toggled
+     */
+    toggleNodeActions: function(toggled)
+    {
+        if (!this._nodeActionsElement)
+            return;
+        if (toggled === null)
+            toggled = !this.nodeActionsVisible();
+        this._nodeActionsElement.classList.toggle("expanded", toggled);
+        var toolbarElement = this._nodeActionsToolbar.element;
+        if (toggled && toolbarElement.totalOffsetTop() < this.element.parentElement.totalOffsetTop()) {
+            toolbarElement.style.top = this._nodeActionsElement.parentElement.offsetHeight + "px";
+            toolbarElement.classList.add("node-actions-toolbar-below");
+        } else {
+            toolbarElement.style.top = "";
+            toolbarElement.classList.remove("node-actions-toolbar-below");
+        }
+    },
+
+    /**
+     * @return {boolean}
+     */
+    nodeActionsVisible: function()
+    {
+        return this._nodeActionsElement.classList.contains("expanded");
+    },
+
+    _updateToolbarButtons: function()
+    {
+        if (!Runtime.experiments.isEnabled("materialDesign"))
+            return;
+        var node = this.selectedDOMNode();
+        if (!node)
+            return;
+        var classText = node.getAttribute("class");
+        this._hideElementButton.setToggled(this.isToggledToHidden(node));
+        this._editAsHTMLButton.setToggled(false);
+        this._breakpointsButton.setEnabled(!node.pseudoType());
+        this._breakpointsButton.setToggled(WebInspector.domBreakpointsSidebarPane.hasBreakpoints(node));
+        this._forceElementStateButton.setEnabled(node.nodeType() === Node.ELEMENT_NODE && !node.pseudoType());
+        this._forceElementStateButton.setToggled(!!WebInspector.CSSStyleModel.fromNode(node).pseudoState(node).length);
+    },
+
+    /**
+     * @param {!WebInspector.ContextMenu} contextMenu
+     */
+    _showBreakpointsMenu: function(contextMenu)
+    {
+        var node = this.selectedDOMNode();
+        if (!node)
+            return;
+        WebInspector.domBreakpointsSidebarPane.populateNodeContextMenu(node, contextMenu, false);
+    },
+
+    /**
+     * @param {!WebInspector.ContextMenu} contextMenu
+     */
+    _showForceElementStateMenu: function(contextMenu)
+    {
+        var node = this.selectedDOMNode();
+        if (!node)
+            return;
+        WebInspector.ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, node);
+    },
+
     /**
      * @return {boolean}
      */
@@ -511,6 +612,7 @@ WebInspector.ElementsTreeOutline.prototype = {
     _selectedNodeChanged: function()
     {
         this.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedDOMNode);
+        this._updateToolbarButtons();
     },
 
     /**
@@ -717,6 +819,9 @@ WebInspector.ElementsTreeOutline.prototype = {
     {
         var element = this._treeElementFromEvent(event);
 
+        if (event.target.parentElement === this._nodeActionsElement)
+            return;
+
         if (!element || element.isEventWithinDisclosureTriangle(event))
             return;
 
@@ -734,6 +839,11 @@ WebInspector.ElementsTreeOutline.prototype = {
             delete this._previousHoveredElement;
         }
 
+        if (Runtime.experiments.isEnabled("materialDesign") && event.target === this._nodeActionsToolbar.element) {
+            WebInspector.DOMModel.hideDOMNodeHighlight();
+            return;
+        }
+
         if (element) {
             element.hovered = true;
             this._previousHoveredElement = element;
@@ -943,10 +1053,9 @@ WebInspector.ElementsTreeOutline.prototype = {
 
     /**
      * @param {!WebInspector.DOMNode} node
-     * @param {boolean=} startEditing
      * @param {function()=} callback
      */
-    toggleEditAsHTML: function(node, startEditing, callback)
+    toggleEditAsHTML: function(node, callback)
     {
         var treeElement = node[this._treeElementSymbol];
         if (!treeElement || !treeElement.hasEditableNode())
@@ -959,6 +1068,11 @@ WebInspector.ElementsTreeOutline.prototype = {
         var index = node.index;
         var wasExpanded = treeElement.expanded;
 
+        var startEditing = true;
+        if (Runtime.experiments.isEnabled("materialDesign")) {
+            startEditing = !this._editAsHTMLButton.toggled();
+            this._editAsHTMLButton.setToggled(startEditing);
+        }
         treeElement.toggleEditAsHTML(editingFinished.bind(this), startEditing);
 
         /**
@@ -967,6 +1081,7 @@ WebInspector.ElementsTreeOutline.prototype = {
          */
         function editingFinished(success)
         {
+            this._updateToolbarButtons();
             if (callback)
                 callback();
             if (!success)
@@ -1588,6 +1703,7 @@ WebInspector.ElementsTreeOutline.prototype = {
         var treeElement = node[this._treeElementSymbol];
         if (treeElement)
             treeElement.updateDecorations();
+        this._updateToolbarButtons();
     },
 
     __proto__: TreeOutline.prototype