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);
-    }
+    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
@@ skipping 27 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()
-    {
-        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();
         var treeOutline = this._treeOutlineForNode(node);
         if (!node || !treeOutline)
             return;
         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();
         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._updateActionsToolbarButtons.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);
     },
 
+    _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");
 
         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 170 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._updateActions(selectedNode);
+            this._updateActionsToolbarButtons(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") };
     }
-}
+}