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 3b366725aa20830b1f43b7d906569a6b6ebeb862..3bc557c848dc16323894a4ada3320b58d62c83a9 100644
--- a/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/Source/devtools/front_end/elements/ElementsPanel.js
@@ -51,16 +51,10 @@ 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);
-        toolbar.appendChild(crumbsContainer);
-        stackElement.appendChild(this._contentElement);
-    } else {
-        stackElement.appendChild(this._contentElement);
-        stackElement.appendChild(crumbsContainer);
-    }
+    if (Runtime.experiments.isEnabled("materialDesign"))
+        this._initializeActionsToolbar();
+    stackElement.appendChild(this._contentElement);
+    stackElement.appendChild(crumbsContainer);
 
     this._elementsPanelTreeOutilneSplit = new WebInspector.SplitWidget(false, true, "treeOutlineAnimationTimelineWidget", 300, 300);
     this._elementsPanelTreeOutilneSplit.hideSidebar();
@@ -106,43 +100,33 @@ 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()
+    _initializeActionsToolbar: 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._nodeActionsElement = createElementWithClass("div", "node-actions-container");
+        var button = this._nodeActionsElement.createChild("div", "node-actions-toggle");
+        button.addEventListener("click", this._toggleActionsToolbar.bind(this, undefined));
+        this._nodeActionsToolbar = new WebInspector.Toolbar();
+        this._nodeActionsElement.appendChild(this._nodeActionsToolbar.element);
+        this._nodeActionsToolbar.element.addEventListener("mousedown", consumeEvent);
+        WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.MarkersChanged, this._markersChanged, this);
 
         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._nodeActionsToolbar.appendToolbarItem(this._editAsHTMLButton);
+        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));
-        toolbar.appendToolbarItem(this._forceElementStateButton);
+        this._nodeActionsToolbar.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;
+        this._nodeActionsToolbar.appendToolbarItem(this._breakpointsButton);
     },
 
     _toggleHideElement: function()
@@ -154,13 +138,13 @@ WebInspector.ElementsPanel.prototype = {
         treeOutline.toggleHideElement(node);
     },
 
-    _updateToolbarButtons: function()
+    /**
+     * @param {!WebInspector.DOMNode} node
+     */
+    _updateActionsToolbar: function(node)
     {
         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));
@@ -169,6 +153,22 @@ WebInspector.ElementsPanel.prototype = {
         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);
+
+        var treeElement = this._treeOutlineForNode(node).selectedTreeElement;
+        if (!treeElement)
+            return;
+        if (node.nodeType() !== Node.ELEMENT_NODE) {
+            this._nodeActionsElement.remove();
+            return;
+        }
+
+        var actionsToolbar = this._nodeActionsElement;
+        if (actionsToolbar.__node !== node) {
+            treeElement.gutterElement().appendChild(actionsToolbar);
+            this._positionActionsToolbar();
+            actionsToolbar.__node = node;
+            this._toggleActionsToolbar(false);
+        }
     },
 
     _toggleEditAsHTML: function()
@@ -183,7 +183,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._updateActionsToolbar.bind(this, node));
     },
 
     /**
@@ -208,6 +208,60 @@ WebInspector.ElementsPanel.prototype = {
         WebInspector.ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, node);
     },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _decorationsClicked: function(event)
+    {
+        var node = /** @type {!WebInspector.DOMNode} */(event.data);
+        this.selectDOMNode(node, true);
+        this._toggleActionsToolbar(true);
+    },
+
+    /**
+     * @param {boolean=} toggled
+     */
+    _toggleActionsToolbar: function(toggled)
+    {
+        if (toggled === undefined)
+            toggled = !this._actionsToolbarShown();
+        this._nodeActionsElement.classList.toggle("expanded", toggled);
+        this._positionActionsToolbar();
+    },
+
+    _positionActionsToolbar: function()
+    {
+        if (!this._actionsToolbarShown())
+            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}
+     */
+    _actionsToolbarShown: 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._updateActionsToolbar(node);
+    },
+
     _loadSidebarViews: function()
     {
         var extensions = self.runtime.extensions("@WebInspector.Widget");
@@ -264,6 +318,7 @@ WebInspector.ElementsPanel.prototype = {
         treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
         treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.NodePicked, this._onNodePicked, this);
         treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this);
+        treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.DecorationsClicked, this._decorationsClicked, this);
         this._treeOutlines.push(treeOutline);
         this._modelToTreeOutline.set(domModel, treeOutline);
 
@@ -398,11 +453,10 @@ WebInspector.ElementsPanel.prototype = {
         if (selectedNode) {
             selectedNode.setAsInspectedNode();
             this._lastValidSelectedNode = selectedNode;
+            this._updateActionsToolbar(selectedNode);
         }
         WebInspector.notifications.dispatchEventToListeners(WebInspector.NotificationService.Events.SelectedNodeChanged);
         this._selectedNodeChangedForTest();
-        if (Runtime.experiments.isEnabled("materialDesign"))
-            this._updateToolbarButtons();
     },
 
     _selectedNodeChangedForTest: function() { },
@@ -1091,22 +1145,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
 }
 
@@ -1285,4 +1323,4 @@ WebInspector.ElementsPanel.HiddenMarkerDecorator.prototype = {
     {
         return { color: "#555", title: WebInspector.UIString("Element is hidden") };
     }
-}
+}