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

Source/devtools/front_end/elements/ElementsTreeOutline.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 408 matching lines @@
     {
         return this._selectedDOMNode;
     },
 
     /**
      * @param {?WebInspector.DOMNode} node
      * @param {boolean=} focus
      */
     selectDOMNode: function(node, focus)
     {
+        this.toggleNodeActions(false);
         if (this._selectedDOMNode === node) {
             this._revealAndSelectNode(node, !focus);
             return;
         }
 
         this._selectedDOMNode = node;
         this._revealAndSelectNode(node, !focus);
 
         // The _revealAndSelectNode() method might find a different element if there is inlined text,
         // and the select() call would change the selectedDOMNode and reenter this setter. So to
         // avoid calling _selectedNodeChanged() twice, first check if _selectedDOMNode is the same
         // node as the one passed in.
         if (this._selectedDOMNode === node)
             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}
+     */
     editing: function()
     {
         var node = this.selectedDOMNode();
         if (!node)
             return false;
         var treeElement = this.findTreeElement(node);
         if (!treeElement)
             return false;
         return treeElement.isEditing() || false;
     },
@@ skipping 46 matching lines @@
         if (treeElement)
             treeElement.updateTitle(this._updateRecordForHighlight(node));
         var closingTagElement = treeElement.lastChild();
         if (closingTagElement && closingTagElement.isClosingTag())
             closingTagElement.updateTitle(this._updateRecordForHighlight(node));
     },
 
     _selectedNodeChanged: function()
     {
         this.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedDOMNode);
+        this._updateToolbarButtons();
     },
 
     /**
      * @param {!Array.<!WebInspector.DOMNode>} nodes
      */
     _fireElementsTreeUpdated: function(nodes)
     {
         this.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
     },
 
@@ skipping 186 matching lines @@
                 return;
             popover.setCanShrink(false);
             popover.showForAnchor(contents, anchor);
         }
     },
 
     _onmousedown: function(event)
     {
         var element = this._treeElementFromEvent(event);
 
+        if (event.target.parentElement === this._nodeActionsElement)
+            return;
+
         if (!element || element.isEventWithinDisclosureTriangle(event))
             return;
 
         element.select();
     },
 
     _onmousemove: function(event)
     {
         var element = this._treeElementFromEvent(event);
         if (element && this._previousHoveredElement === element)
             return;
 
         if (this._previousHoveredElement) {
             this._previousHoveredElement.hovered = false;
             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;
         }
 
         if (element instanceof WebInspector.ElementsTreeElement) {
             this._domModel.highlightDOMNodeWithConfig(element.node().id, { mode: "all", showInfo: !WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) });
             return;
         }
 
@@ skipping 189 matching lines @@
             if (event.keyIdentifier === "Down" && node.nextSibling) {
                 node.moveTo(node.parentNode, node.nextSibling.nextSibling, this.selectNodeAfterEdit.bind(this, treeElement.expanded));
                 event.handled = true;
                 return;
             }
         }
     },
 
     /**
      * @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())
             return;
 
         if (node.pseudoType())
             return;
 
         var parentNode = node.parentNode;
         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);
 
         /**
          * @this {WebInspector.ElementsTreeOutline}
          * @param {boolean} success
          */
         function editingFinished(success)
         {
+            this._updateToolbarButtons();
             if (callback)
                 callback();
             if (!success)
                 return;
 
             // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
             this.runPendingUpdates();
 
             var newNode = parentNode ? parentNode.children()[index] || parentNode : null;
             if (!newNode)
@@ skipping 601 matching lines @@
 
     /**
      * @param {!WebInspector.Event} event
      */
     _markersChanged: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
         var treeElement = node[this._treeElementSymbol];
         if (treeElement)
             treeElement.updateDecorations();
+        this._updateToolbarButtons();
     },
 
     __proto__: TreeOutline.prototype
 }
 
 /**
  * @constructor
  */
 WebInspector.ElementsTreeOutline.UpdateRecord = function()
 {
@@ skipping 221 matching lines @@
             if (node) {
                 this.treeOutline._selectedDOMNode = node;
                 this.treeOutline._selectedNodeChanged();
             }
         }
         return true;
     },
 
     __proto__: TreeElement.prototype
 }