Devtools[LayoutEditor]: Rework layout-editor workflow

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 866 matching lines @@
     {
         var userAgentShadowRoot = node.ancestorUserAgentShadowRoot();
         return userAgentShadowRoot ? /** @type {!WebInspector.DOMNode} */ (userAgentShadowRoot.parentNode) : node;
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      */
     revealAndSelectNode: function(node)
     {
-        if (WebInspector.inspectElementModeController && WebInspector.inspectElementModeController.enabled()) {
+        if (WebInspector.inspectElementModeController && WebInspector.inspectElementModeController.started()) {
             InspectorFrontendHost.bringToFront();
-            WebInspector.inspectElementModeController.disable();
+            WebInspector.inspectElementModeController.stop();
         }
 
         this._omitDefaultSelection = true;
-        WebInspector.inspectorView.setCurrentPanel(this);
+        WebInspector.inspectorView.setCurrentPanel(this, true);

[pfeldman, 2015/08/24 23:18:14]

Reveal node clearly needs to bring panel to front as any setCurrentPanel. You
need to suppress it for your action only.

[sergeyv, 2015/08/25 17:58:02]

Done.

         node = WebInspector.moduleSetting("showUAShadowDOM").get() ? node : this._leaveUserAgentShadowDOM(node);
+        var domModel = WebInspector.DOMModel.fromTarget(node.target());
         if (this._showLayoutEditor)
-            node.highlight();
+            node.highlightWithConfig({mode: "all", showLayoutEditor: true});
         else
             node.highlightForTwoSeconds();
 
         this.selectDOMNode(node, true);
         delete this._omitDefaultSelection;
 
         if (!this._notFirstInspectElement)
             InspectorFrontendHost.inspectElementCompleted();
         this._notFirstInspectElement = true;
     },
@@ skipping 189 matching lines @@
         } 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 {

[pfeldman, 2015/08/24 23:18:14]

drop {}

[sergeyv, 2015/08/25 17:58:02]

Done.

+            WebInspector.inspectElementModeController.enable();
+        }
+
         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());
+            domModel.setInspectModeEnabled(this._showLayoutEditor, "showLayoutEditor");
         }
         WebInspector.DOMModel.hideDOMNodeHighlight();
     },
 
     __proto__: WebInspector.Panel.prototype
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ContextMenu.Provider}
@@ skipping 186 matching lines @@
 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)
+        if (objectId || node || backendNodeId || !selectedNode) {
             WebInspector.DefaultDOMNodeHighlighter.prototype.highlightDOMNode.call(this, node, config, backendNodeId, objectId);
-        else
+        } else {
+            config.showLayoutEditor = config.showInfo;

[pfeldman, 2015/08/24 23:18:14]

Why is showInfo being converted into showLayoutEditor (I can see that it was as
well, but why?)

[sergeyv, 2015/08/25 17:58:02]

Removed this

             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;

[pfeldman, 2015/08/24 23:18:14]

Where did this code go?

[sergeyv, 2015/08/25 17:58:02]

To the backend

-        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
 }