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

Source/devtools/front_end/elements/ElementsPanel.js

Index: Source/devtools/front_end/elements/ElementsPanel.js
diff --git a/Source/devtools/front_end/elements/ElementsPanel.js b/Source/devtools/front_end/elements/ElementsPanel.js
index 0c1c760abd6484437cb15d2a16bc3159c922b259..1e904d47bc7709d82131aefde8eff8fb72deb6d5 100644
--- a/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/Source/devtools/front_end/elements/ElementsPanel.js
@@ -51,11 +51,8 @@ WebInspector.ElementsPanel = function()
     this._contentElement = createElement("div");
     var crumbsContainer = createElement("div");
     this._showLayoutEditor = false;
-    if (Runtime.experiments.isEnabled("materialDesign")) {
-        this._toolbar = this._createElementsToolbar();
-        var toolbar = stackElement.createChild("div", "elements-topbar hbox");
-        toolbar.appendChild(this._toolbar.element);
-    }
+    if (Runtime.experiments.isEnabled("materialDesign"))
+        this._initializeActionsToolbar();
     stackElement.appendChild(this._contentElement);
     stackElement.appendChild(crumbsContainer);
 
@@ -103,45 +100,12 @@ WebInspector.ElementsPanel = function()
     WebInspector.targetManager.observeTargets(this);
     WebInspector.moduleSetting("showUAShadowDOM").addChangeListener(this._showUAShadowDOMChanged.bind(this));
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
-    if (Runtime.experiments.isEnabled("materialDesign"))
-        WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.MarkersChanged, this._updateToolbarButtons, this);
     WebInspector.extensionServer.addEventListener(WebInspector.ExtensionServer.Events.SidebarPaneAdded, this._extensionSidebarPaneAdded, this);
 }
 
 WebInspector.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol("title");
 
 WebInspector.ElementsPanel.prototype = {
-    /**
-     * @return {!WebInspector.Toolbar}
-     */
-    _createElementsToolbar: function()
-    {
-        var toolbar = new WebInspector.ExtensibleToolbar("elements-toolbar");
-        toolbar.element.classList.add("elements-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._editAsHTMLButton = new WebInspector.ToolbarButton(WebInspector.UIString("Edit as HTML"), "edit-toolbar-item");
-        this._editAsHTMLButton.setAction("elements.edit-as-html");
-        toolbar.appendToolbarItem(this._editAsHTMLButton);
-        toolbar.appendSeparator();
-
-        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();
-        if (Runtime.experiments.isEnabled("layoutEditor") && !Runtime.queryParam("remoteFrontend")) {
-            this._layoutEditorButton = new WebInspector.ToolbarButton(WebInspector.UIString("Toggle Layout Editor"), "layout-editor-toolbar-item");
-            toolbar.appendToolbarItem(this._layoutEditorButton);
-            this._layoutEditorButton.addEventListener("click", this._toggleLayoutEditor, this);
-            toolbar.appendSeparator();
-        }
-        return toolbar;
-    },
-
     _toggleHideElement: function()
     {
         var node = this.selectedDOMNode();
@@ -151,23 +115,6 @@ WebInspector.ElementsPanel.prototype = {
         treeOutline.toggleHideElement(node);
     },
 
-    _updateToolbarButtons: function()
-    {
-        if (!Runtime.experiments.isEnabled("materialDesign"))
-            return;
-        var node = this.selectedDOMNode();
-        if (!node)
-            return;
-        var classText = node.getAttribute("class");
-        var treeOutline = this._treeOutlineForNode(node);
-        this._hideElementButton.setToggled(treeOutline && treeOutline.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);
-    },
-
     _toggleEditAsHTML: function()
     {
         var node = this.selectedDOMNode();
@@ -180,7 +127,7 @@ WebInspector.ElementsPanel.prototype = {
             startEditing = !this._editAsHTMLButton.toggled();
             this._editAsHTMLButton.setToggled(startEditing);
         }
-        treeOutline.toggleEditAsHTML(node, startEditing, this._updateToolbarButtons.bind(this));
+        treeOutline.toggleEditAsHTML(node, startEditing, this._updateActionsToolbarButtons.bind(this, node));
     },
 
     /**
@@ -205,6 +152,127 @@ WebInspector.ElementsPanel.prototype = {
         WebInspector.ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, node);
     },
 
+    _initializeActionsToolbar: function()

[pfeldman, 2015/09/16 21:53:14]

Move this above for a better diff.

+    {
+        this._nodeActionsElement = createElementWithClass("div", "node-actions-container");
+        var button = this._nodeActionsElement.createChild("div", "node-actions-toggle");
+        button.addEventListener("click", this._toggleActionsToolbar.bind(this, null));
+        this._nodeActionsToolbar = new WebInspector.Toolbar();
+        this._nodeActionsElement.appendChild(this._nodeActionsToolbar.element);
+        this._nodeActionsElement.addEventListener("mousedown", consumeEvent);
+        WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.MarkersChanged, this._markersChanged, this);
+
+        this._nodeActionsToolbar.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");
+        this._nodeActionsToolbar.appendToolbarItem(this._hideElementButton);
+        this._forceElementStateButton = new WebInspector.ToolbarMenuButton(WebInspector.UIString("Force element state"), "pin-toolbar-item", this._showForceElementStateMenu.bind(this));
+        this._nodeActionsToolbar.appendToolbarItem(this._forceElementStateButton);
+        this._breakpointsButton = new WebInspector.ToolbarMenuButton(WebInspector.UIString("Toggle breakpoints"), "add-breakpoint-toolbar-item", this._showBreakpointsMenu.bind(this));
+        this._nodeActionsToolbar.appendToolbarItem(this._breakpointsButton);
+        this._nodeActionsToolbar.appendSeparator();
+        this._editAsHTMLButton = new WebInspector.ToolbarButton(WebInspector.UIString("Edit as HTML"), "edit-toolbar-item");
+        this._editAsHTMLButton.setAction("elements.edit-as-html");
+        this._nodeActionsToolbar.appendToolbarItem(this._editAsHTMLButton);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     */
+    _updateActionsToolbarButtons: function(node)

[pfeldman, 2015/09/16 21:53:14]

Move this back for a better diff.

+    {
+        if (!Runtime.experiments.isEnabled("materialDesign"))
+            return;
+        var classText = node.getAttribute("class");
+        var treeOutline = this._treeOutlineForNode(node);
+        this._hideElementButton.setToggled(treeOutline && treeOutline.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.DOMNode} node
+     */
+    _updateActions: function(node)
+    {
+        if (!Runtime.experiments.isEnabled("materialDesign"))
+            return;
+        var actionsToolbar = this._nodeActionsElement;

[pfeldman, 2015/09/16 21:53:14]

get those later - you don't need them for non-element nodes.

+        var treeElement = this._treeOutlineForNode(node).selectedTreeElement;
+
+        if (node.nodeType() !== Node.ELEMENT_NODE) {
+            this._nodeActionsElement.remove();
+            return;
+        }
+
+        if (treeElement.selected && node.nodeType() === Node.ELEMENT_NODE && actionsToolbar._node !== node) {

[pfeldman, 2015/09/16 21:53:14]

this is already true.

[pfeldman, 2015/09/16 21:53:14]

we use __node when we bind properties to elements.

+            treeElement.gutterElement().appendChild(actionsToolbar);
+            if (this._forceShowActions) {

[pfeldman, 2015/09/16 21:53:14]

why do we need this flag?

[samli, 2015/09/16 22:12:53]

This lets us auto-show the toolbar if there is a marker present. eg. if the
element is hidden and I reselect it, the toolbar opens and shows that the
element is hidden.

+                this._toggleActionsToolbar(false);
+                delete this._forceShowActions;
+            }
+            this._ensureActionsToolbarVisible();
+            actionsToolbar._node = node;
+        }
+
+        if (actionsToolbar._node === node) {
+            if (!this._actionsToolbarVisible() && !this._forceShowActions && node.markers().length) {
+                this._toggleActionsToolbar(true);
+                this._forceShowActions = true;
+            }
+        }
+    },
+
+    /**
+     * @param {?boolean} toggled
+     */
+    _toggleActionsToolbar: function(toggled)
+    {
+        if (!this._nodeActionsElement)
+            return;
+        if (toggled === null)
+            toggled = !this._actionsToolbarVisible();
+        this._nodeActionsElement.classList.toggle("expanded", toggled);
+        this._ensureActionsToolbarVisible();
+    },
+
+    _ensureActionsToolbarVisible: function()
+    {
+        if (!this._actionsToolbarVisible())

[pfeldman, 2015/09/16 21:53:14]

ensureVisible bails about it actionsToolbar is not visible?

[samli, 2015/09/16 22:12:53]

Renamed.

+            return;
+        var toolbarElement = this._nodeActionsToolbar.element;
+        if (toolbarElement.totalOffsetTop() < this.element.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}
+     */
+    _actionsToolbarVisible: function()
+    {
+        return this._nodeActionsElement.classList.contains("expanded");
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _markersChanged: function(event)
+    {
+        var node = /** @type {!WebInspector.DOMNode} */ (event.data);
+        if (node !== this.selectedDOMNode())
+            return;
+        this._updateActions(node);
+        this._updateActionsToolbarButtons(node);
+    },
+
     _loadSidebarViews: function()
     {
         var extensions = self.runtime.extensions("@WebInspector.Widget");
@@ -395,11 +463,11 @@ WebInspector.ElementsPanel.prototype = {
         if (selectedNode) {
             selectedNode.setAsInspectedNode();
             this._lastValidSelectedNode = selectedNode;
+            this._updateActions(selectedNode);
+            this._updateActionsToolbarButtons(selectedNode);
         }
         WebInspector.notifications.dispatchEventToListeners(WebInspector.NotificationService.Events.SelectedNodeChanged);
         this._selectedNodeChangedForTest();
-        if (Runtime.experiments.isEnabled("materialDesign"))
-            this._updateToolbarButtons();
     },
 
     _selectedNodeChangedForTest: function() { },
@@ -1088,22 +1156,6 @@ WebInspector.ElementsPanel.prototype = {
         }
     },
 
-    _toggleLayoutEditor: function()
-    {
-        this._showLayoutEditor = !this._showLayoutEditor;
-        this._layoutEditorButton.setToggled(this._showLayoutEditor);
-        var targets = WebInspector.targetManager.targets();
-
-        if (this._showLayoutEditor)
-            WebInspector.inspectElementModeController.disable();
-        else
-            WebInspector.inspectElementModeController.enable();
-
-        var mode = this._showLayoutEditor ? DOMAgent.InspectMode.ShowLayoutEditor : DOMAgent.InspectMode.None;
-        for (var domModel of WebInspector.DOMModel.instances())
-            domModel.setInspectMode(mode);
-    },
-
     __proto__: WebInspector.Panel.prototype
 }
 
@@ -1282,4 +1334,4 @@ WebInspector.ElementsPanel.HiddenMarkerDecorator.prototype = {
     {
         return { color: "#555", title: WebInspector.UIString("Element is hidden") };
     }
-}
+}