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

Source/devtools/front_end/elements/StylesSidebarPane.js

Index: Source/devtools/front_end/elements/StylesSidebarPane.js
diff --git a/Source/devtools/front_end/elements/StylesSidebarPane.js b/Source/devtools/front_end/elements/StylesSidebarPane.js
index c3245d7f973cd6c6b563a03cd34dc0e5f5ab2b73..b5808db7f8c7bf9b6ab9830dce497fadc38671c8 100644
--- a/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -45,6 +45,13 @@ WebInspector.StylesSidebarPane = function()
     filterContainerElement.appendChild(this._filterInput);
 
     var toolbar = new WebInspector.ExtensibleToolbar("styles-sidebarpane-toolbar", hbox);
+    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();
+    }
+
     toolbar.element.classList.add("styles-pane-toolbar", "toolbar-gray-toggled");
     this._currentToolbarPane = null;
 
@@ -136,6 +143,22 @@ WebInspector.StylesSidebarPane.ignoreErrorsForProperty = function(property) {
 }
 
 WebInspector.StylesSidebarPane.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);
+    },
+
     onUndoOrRedoHappened: function()
     {
         this.setNode(this.node());