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

Source/devtools/front_end/elements/ElementsPanel.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 33 matching lines @@
     this._splitWidget.show(this.element);
 
     this._searchableView = new WebInspector.SearchableView(this);
     this._searchableView.setMinimumSize(25, 28);
     this._searchableView.setPlaceholder(WebInspector.UIString("Find by string, selector, or XPath"));
     var stackElement = this._searchableView.element;
 
     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();
     this._elementsPanelTreeOutilneSplit.setMainWidget(this._searchableView);
     this._splitWidget.setMainWidget(this._elementsPanelTreeOutilneSplit);
 
     this._contentElement.id = "elements-content";
     // FIXME: crbug.com/425984
     if (WebInspector.moduleSetting("domWordWrap").get())
         this._contentElement.classList.add("elements-wrap");
@@ skipping 25 matching lines @@
     this._updateSidebarPosition();
     this._loadSidebarViews();
 
     /** @type {!Array.<!WebInspector.ElementsTreeOutline>} */
     this._treeOutlines = [];
     /** @type {!Map.<!WebInspector.DOMModel, !WebInspector.ElementsTreeOutline>} */
     this._modelToTreeOutline = new Map();
     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()
     {
         var node = this.selectedDOMNode();
         var treeOutline = this._treeOutlineForNode(node);
         if (!node || !treeOutline)
             return;
         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));
         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);
+
+        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()
     {
         var node = this.selectedDOMNode();
         var treeOutline = this._treeOutlineForNode(node);
         if (!node || !treeOutline)
             return;
 
         var startEditing = true;
         if (Runtime.experiments.isEnabled("materialDesign")) {
             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));
     },
 
     /**
      * @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);
     },
 
+    /**
+     * @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");
 
         for (var i = 0; i < extensions.length; ++i) {
             var descriptor = extensions[i].descriptor();
             if (descriptor["location"] !== "elements-panel")
                 continue;
 
             var title = WebInspector.UIString(descriptor["title"]);
@@ skipping 36 matching lines @@
     {
         var domModel = WebInspector.DOMModel.fromTarget(target);
         if (!domModel)
             return;
         var treeOutline = new WebInspector.ElementsTreeOutline(domModel, true, true);
         treeOutline.setWordWrap(WebInspector.moduleSetting("domWordWrap").get());
         treeOutline.wireToDOMModel();
         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);
 
         // Perform attach if necessary.
         if (this.isShowing())
             this.wasShown();
 
     },
 
     /**
@@ skipping 114 matching lines @@
         if (!selectedNode && this._lastValidSelectedNode)
             this._selectedPathOnReset = this._lastValidSelectedNode.path();
 
         this._breadcrumbs.setSelectedNode(selectedNode);
 
         WebInspector.context.setFlavor(WebInspector.DOMNode, selectedNode);
 
         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() { },
 
     _reset: function()
     {
         delete this.currentQuery;
     },
 
     /**
@@ skipping 668 matching lines @@
     setWidgetBelowDOM: function(widget)
     {
         if (widget) {
             this._elementsPanelTreeOutilneSplit.setSidebarWidget(widget);
             this._elementsPanelTreeOutilneSplit.showBoth(true);
         } else {
             this._elementsPanelTreeOutilneSplit.hideSidebar(true);
         }
     },
 
-    _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
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ContextMenu.Provider}
  */
 WebInspector.ElementsPanel.ContextMenuProvider = function()
 {
 }
@@ skipping 158 matching lines @@
 WebInspector.ElementsPanel.HiddenMarkerDecorator.prototype = {
     /**
      * @override
      * @param {!WebInspector.DOMNode} node
      * @return {?{title: string, color: string}}
      */
     decorate: function(node)
     {
         return { color: "#555", title: WebInspector.UIString("Element is hidden") };
     }
-}
+}