Devtools: Create a separate mode to turn LayoutEditor on

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 32 matching lines @@
     this._splitWidget.addEventListener(WebInspector.SplitWidget.Events.SidebarSizeChanged, this._updateTreeOutlineVisibleWidth.bind(this));
     this._splitWidget.show(this.element);
 
     this._searchableView = new WebInspector.SearchableView(this);
     this._searchableView.setMinimumSize(25, 19);
     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);
     }
@@ skipping 65 matching lines @@
         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);
@@ skipping 104 matching lines @@
         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);
         this._treeOutlines.push(treeOutline);
         this._modelToTreeOutline.set(domModel, treeOutline);
 
         // Perform attach if necessary.
         if (this.isShowing())
             this.wasShown();
+
+        if (this._showLayoutEditor)
+            domModel.setHighlighter(new WebInspector.ElementsPanel.LayoutEditorNodeHighlighter(target, treeOutline));
     },
 
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetRemoved: function(target)
     {
         var domModel = WebInspector.DOMModel.fromTarget(target);
         if (!domModel)
             return;
         var treeOutline = this._modelToTreeOutline.remove(domModel);
         treeOutline.unwireFromDOMModel();
         this._treeOutlines.remove(treeOutline);
         treeOutline.element.remove();
+        if (this._showLayoutEditor)
+            domModel.setHighlighter(null);
     },
 
     _updateTreeOutlineVisibleWidth: function()
     {
         if (!this._treeOutlines.length)
             return;
 
         var width = this._splitWidget.element.offsetWidth;
         if (this._splitWidget.isVertical())
             width -= this._splitWidget.sidebarSize();
@@ skipping 582 matching lines @@
     revealAndSelectNode: function(node)
     {
         if (WebInspector.inspectElementModeController && WebInspector.inspectElementModeController.enabled()) {
             InspectorFrontendHost.bringToFront();
             WebInspector.inspectElementModeController.disable();
         }
 
         this._omitDefaultSelection = true;
         WebInspector.inspectorView.setCurrentPanel(this);
         node = WebInspector.moduleSetting("showUAShadowDOM").get() ? node : this._leaveUserAgentShadowDOM(node);
-        node.highlightForTwoSeconds();
+        if (this._showLayoutEditor)
+            node.highlight();
+        else
+            node.highlightForTwoSeconds();
+
         this.selectDOMNode(node, true);
         delete this._omitDefaultSelection;
 
         if (!this._notFirstInspectElement)
             InspectorFrontendHost.inspectElementCompleted();
         this._notFirstInspectElement = true;
     },
 
     /**
      * @param {!Event} event
@@ skipping 181 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();
+        for (var target of targets) {
+            var domModel = WebInspector.DOMModel.fromTarget(target);
+            if (!domModel)
+                continue;
+
+            var treeOutline = /** @type {!WebInspector.ElementsTreeOutline} */(this._modelToTreeOutline.get(domModel));
+            if (this._showLayoutEditor)
+                domModel.setHighlighter(new WebInspector.ElementsPanel.LayoutEditorNodeHighlighter(target, treeOutline));
+            else
+                domModel.setHighlighter(null);
+
+            // We need to correct (turn on/off layout editor) the config which is used by inspect element mode, so we re-enable it.
+            if (WebInspector.inspectElementModeController && WebInspector.inspectElementModeController.enabled())
+                domModel.setInspectModeEnabled(true, WebInspector.moduleSetting("showUAShadowDOM").get());
+        }
+        WebInspector.DOMModel.hideDOMNodeHighlight();
+    },
+
     __proto__: WebInspector.Panel.prototype
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ContextMenu.Provider}
  */
 WebInspector.ElementsPanel.ContextMenuProvider = function()
 {
 }
@@ skipping 159 matching lines @@
     /**
      * @override
      * @param {!WebInspector.DOMNode} node
      * @return {?{title: string, color: string}}
      */
     decorate: function(node)
     {
         return { color: "#555", title: WebInspector.UIString("Element is hidden") };
     }
 }
+
+/**
+ * @constructor
+ * @extends {WebInspector.DefaultDOMNodeHighlighter}
+ * @param {!WebInspector.Target} target
+ * @param {!WebInspector.ElementsTreeOutline} treeOutline
+ */
+WebInspector.ElementsPanel.LayoutEditorNodeHighlighter = function(target, treeOutline)
+{
+    WebInspector.DefaultDOMNodeHighlighter.call(this, target.domAgent());
+    this._treeOutline = treeOutline;
+}
+
+WebInspector.ElementsPanel.LayoutEditorNodeHighlighter.prototype = {
+    /**
+     * @override
+     * @param {?WebInspector.DOMNode} node
+     * @param {!DOMAgent.HighlightConfig} config
+     * @param {!DOMAgent.BackendNodeId=} backendNodeId
+     * @param {!RuntimeAgent.RemoteObjectId=} objectId
+     */
+    highlightDOMNode: function(node, config, backendNodeId, objectId)
+    {
+        config.showLayoutEditor = config.showInfo;
+        var selectedNode = this._treeOutline.selectedDOMNode();
+        if (objectId || node || backendNodeId || !selectedNode)
+            WebInspector.DefaultDOMNodeHighlighter.prototype.highlightDOMNode.call(this, node, config, backendNodeId, objectId);
+        else
+            WebInspector.DefaultDOMNodeHighlighter.prototype.highlightDOMNode.call(this, selectedNode, config);
+    },
+
+    /**
+     * @override
+     * @param {boolean} enabled
+     * @param {boolean} inspectUAShadowDOM
+     * @param {!DOMAgent.HighlightConfig} config
+     * @param {function(?Protocol.Error)=} callback
+     */
+    setInspectModeEnabled: function(enabled, inspectUAShadowDOM, config, callback)
+    {
+        config.showLayoutEditor = config.showInfo;
+        WebInspector.DefaultDOMNodeHighlighter.prototype.setInspectModeEnabled.call(this, enabled, inspectUAShadowDOM, config, callback);
+
+        if (enabled)
+            return;
+
+        var selectedNode = this._treeOutline.selectedDOMNode();
+        if (selectedNode)
+            WebInspector.DefaultDOMNodeHighlighter.prototype.highlightDOMNode.call(this, selectedNode, config);
+    },
+
+    __proto__: WebInspector.DefaultDOMNodeHighlighter.prototype
+}