Devtools: Create a separate mode to turn LayoutEditor on

BUG=501896

Review URL: https://codereview.chromium.org/1293793008

git-svn-id: svn://svn.chromium.org/blink/trunk@200872 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/core/inspector/InspectorDOMAgent.cpp

@@ -1220,15 +1220,10 @@ bool InspectorDOMAgent::handleMouseMove(LocalFrame* frame, const PlatformMouseEv
 
 void InspectorDOMAgent::setSearchingForNode(ErrorString* errorString, SearchMode searchMode, JSONObject* highlightInspectorObject)
 {
-    if (m_searchingForNode == searchMode)
-        return;
-
     m_searchingForNode = searchMode;
     m_overlay->setInspectModeEnabled(searchMode != NotSearching);
     if (searchMode != NotSearching) {
         m_inspectModeHighlightConfig = highlightConfigFromInspectorObject(errorString, highlightInspectorObject);
-        if (!m_inspectModeHighlightConfig)
-            return;
     } else {
         m_hoveredNodeForInspectMode.clear();
         hideHighlight(errorString);

third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

@@ -50,6 +50,7 @@ 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");
@@ -135,6 +136,12 @@ WebInspector.ElementsPanel.prototype = {
         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;
     },
 
@@ -263,6 +270,9 @@ WebInspector.ElementsPanel.prototype = {
         // Perform attach if necessary.
         if (this.isShowing())
             this.wasShown();
+
+        if (this._showLayoutEditor)
+            domModel.setHighlighter(new WebInspector.ElementsPanel.LayoutEditorNodeHighlighter(target, treeOutline));
     },
 
     /**
@@ -278,6 +288,8 @@ WebInspector.ElementsPanel.prototype = {
         treeOutline.unwireFromDOMModel();
         this._treeOutlines.remove(treeOutline);
         treeOutline.element.remove();
+        if (this._showLayoutEditor)
+            domModel.setHighlighter(null);
     },
 
     _updateTreeOutlineVisibleWidth: function()
@@ -880,7 +892,11 @@ WebInspector.ElementsPanel.prototype = {
         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;
 
@@ -1082,6 +1098,29 @@ WebInspector.ElementsPanel.prototype = {
         }
     },
 
+    _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
 }
 
@@ -1261,3 +1300,56 @@ WebInspector.ElementsPanel.HiddenMarkerDecorator.prototype = {
         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
+}
\ No newline at end of file

third_party/WebKit/Source/devtools/front_end/sdk/DOMModel.js

@@ -1733,9 +1733,7 @@ WebInspector.DOMModel.prototype = {
     highlightDOMNodeForTwoSeconds: function(nodeId)
     {
         this.highlightDOMNode(nodeId);
-
-        if (!Runtime.experiments.isEnabled("layoutEditor"))
-            this._hideDOMNodeHighlightTimeout = setTimeout(WebInspector.DOMModel.hideDOMNodeHighlight.bind(WebInspector.DOMModel), 2000);
+        this._hideDOMNodeHighlightTimeout = setTimeout(WebInspector.DOMModel.hideDOMNodeHighlight.bind(WebInspector.DOMModel), 2000);
     },
 
     /**
@@ -1798,7 +1796,6 @@ WebInspector.DOMModel.prototype = {
             highlightConfig.eventTargetColor = WebInspector.Color.PageHighlight.EventTarget.toProtocolRGBA();
             highlightConfig.shapeColor = WebInspector.Color.PageHighlight.Shape.toProtocolRGBA();
             highlightConfig.shapeMarginColor = WebInspector.Color.PageHighlight.ShapeMargin.toProtocolRGBA();
-            highlightConfig.showLayoutEditor = Runtime.experiments.isEnabled("layoutEditor");
             highlightConfig.displayAsMaterial = Runtime.experiments.isEnabled("materialDesign");
         }
         return highlightConfig;

third_party/WebKit/Source/web/InspectorOverlayImpl.cpp

@@ -363,7 +363,7 @@ void InspectorOverlayImpl::drawNodeHighlight()
 
     RefPtr<JSONObject> highlightJSON = highlight.asJSONObject();
     evaluateInOverlay("drawHighlight", highlightJSON.release());
-    if (m_layoutEditor) {
+    if (m_layoutEditor && m_nodeHighlightConfig.showLayoutEditor) {
         RefPtr<JSONObject> layoutEditorInfo = m_layoutEditor->buildJSONInfo();
         if (layoutEditorInfo)
             evaluateInOverlay("showLayoutEditor", layoutEditorInfo.release());