Devtools: Fix frontend part of LayoutEditor

Source/devtools/front_end/components/InspectElementModeController.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * 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
  * notice, this list of conditions and the following disclaimer.
  *
@@ skipping 15 matching lines @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.InspectElementModeController = function()
 {
     this._toggleSearchButton = new WebInspector.ToolbarButton(WebInspector.UIString("Select an element in the page to inspect it"), "node-search-toolbar-item");
-    InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.EnterInspectElementMode, this._toggleSearch, this);
+    if (Runtime.experiments.isEnabled("layoutEditor")) {
+        this._layoutEditorButton = new WebInspector.ToolbarButton(WebInspector.UIString("Toggle Layout Editor"), "layout-editor-toolbar-item");
+        this._layoutEditorButton.addEventListener("click", this._toggleLayoutEditor, this);
+    }
+
+    this._mode = DOMAgent.InspectMode.None;
+    InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.EnterInspectElementMode, this._toggleInspectMode, this);
     WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.SuspendStateChanged, this._suspendStateChanged, this);
     WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Page);
 }
 
 /**
  * @return {!WebInspector.KeyboardShortcut.Descriptor}
  */
 WebInspector.InspectElementModeController.createShortcut = function()
 {
     return WebInspector.KeyboardShortcut.makeDescriptor("c", WebInspector.KeyboardShortcut.Modifiers.CtrlOrMeta | WebInspector.KeyboardShortcut.Modifiers.Shift);
 }
 
 WebInspector.InspectElementModeController.prototype = {
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetAdded: function(target)
     {
         // When DevTools are opening in the inspect element mode, the first target comes in
         // much later than the InspectorFrontendAPI.enterInspectElementMode event.
-        if (!this.started())
+        if (this._mode === DOMAgent.InspectMode.None)
             return;
         var domModel = WebInspector.DOMModel.fromTarget(target);
-        domModel.setInspectMode(WebInspector.moduleSetting("showUAShadowDOM").get() ? DOMAgent.InspectMode.SearchForUAShadowDOM : DOMAgent.InspectMode.SearchForNode);
+        domModel.setInspectMode(this._mode);
     },
 
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetRemoved: function(target)
     {
     },
 
     /**
      * @return {boolean}
      */
-    started: function()
+    isInInspectElementMode: function()
     {
-        return this._toggleSearchButton.toggled();
+        return this._mode === DOMAgent.InspectMode.SearchForNode || this._mode === DOMAgent.InspectMode.SearchForUAShadowDOM;
     },
 
-    stop: function()
+    /**
+     * @return {boolean}
+     */
+    isInLayoutEditorMode: function()
     {
-        if (this.started())
-            this._toggleSearch();
+        return this._mode === DOMAgent.InspectMode.ShowLayoutEditor;
     },
 
-    disable: function()
+    stopInspection: function()
     {
-        this.stop();
-        this._toggleSearchButton.setEnabled(false);
+        if (this._mode && this._mode !== DOMAgent.InspectMode.None)
+            this._toggleInspectMode();
     },
 
-    enable: function()
+    _toggleLayoutEditor: function()
     {
-        this._toggleSearchButton.setEnabled(true);
+        var mode = this.isInLayoutEditorMode() ? DOMAgent.InspectMode.None : DOMAgent.InspectMode.ShowLayoutEditor;
+        this._setMode(mode);
     },
 
-    _toggleSearch: function()
+    _toggleInspectMode: function()
     {
-        if (!this._toggleSearchButton.enabled())
-            return;
+        var mode;

[dgozman, 2015/09/22 23:46:56]

if suspended return

[sergeyv, 2015/09/22 23:52:34]

Done.

+        if (this.isInInspectElementMode())
+            mode = DOMAgent.InspectMode.None;
+        else
+            mode = WebInspector.moduleSetting("showUAShadowDOM").get() ? DOMAgent.InspectMode.SearchForUAShadowDOM : DOMAgent.InspectMode.SearchForNode;
 
-        var shouldEnable = !this.started();
-        this._toggleSearchButton.setToggled(shouldEnable);
+        this._setMode(mode);
+    },
 
-        for (var domModel of WebInspector.DOMModel.instances()) {
-            var mode;
-            if (!shouldEnable)
-                mode = DOMAgent.InspectMode.None;
-            else if (WebInspector.moduleSetting("showUAShadowDOM").get())
-                mode = DOMAgent.InspectMode.SearchForUAShadowDOM;
-            else
-                mode = DOMAgent.InspectMode.SearchForNode;
+    /**
+     * @param {!DOMAgent.InspectMode} mode
+     */
+    _setMode: function(mode)
+    {
+        this._mode = mode;
+        for (var domModel of WebInspector.DOMModel.instances())
+            domModel.setInspectMode(mode);
 
-            domModel.setInspectMode(mode);
+        if (this._layoutEditorButton) {
+            this._layoutEditorButton.setEnabled(!this.isInInspectElementMode());
+            this._layoutEditorButton.setToggled(this.isInLayoutEditorMode());
         }
+
+        this._toggleSearchButton.setEnabled(!this.isInLayoutEditorMode());
+        this._toggleSearchButton.setToggled(this.isInInspectElementMode());
     },
 
     _suspendStateChanged: function()
     {
-        if (WebInspector.targetManager.allTargetsSuspended())
-            this._toggleSearchButton.setToggled(false);
+        if (!WebInspector.targetManager.allTargetsSuspended())
+            return;
+
+        this._mode = DOMAgent.InspectMode.None;
+        this._toggleSearchButton.setToggled(false);
+        if (this._layoutEditorButton)
+            this._layoutEditorButton.setToggled(false);
     }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ActionDelegate}
  */
 WebInspector.InspectElementModeController.ToggleSearchActionDelegate = function()
 {
 }
 
 WebInspector.InspectElementModeController.ToggleSearchActionDelegate.prototype = {
     /**
      * @override
      * @param {!WebInspector.Context} context
      * @param {string} actionId
      */
     handleAction: function(context, actionId)
     {
         if (!WebInspector.inspectElementModeController)
             return;
-        WebInspector.inspectElementModeController._toggleSearch();
+        WebInspector.inspectElementModeController._toggleInspectMode();
     }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ToolbarItem.Provider}
  */
 WebInspector.InspectElementModeController.ToggleButtonProvider = function()
 {
 }
 
 WebInspector.InspectElementModeController.ToggleButtonProvider.prototype = {
     /**
      * @override
      * @return {?WebInspector.ToolbarItem}
      */
     item: function()
     {
         if (!WebInspector.inspectElementModeController)
             return null;
 
         return WebInspector.inspectElementModeController._toggleSearchButton;
     }
 }
 
+/**
+ * @constructor
+ * @implements {WebInspector.ToolbarItem.Provider}
+ */
+WebInspector.InspectElementModeController.LayoutEditorButtonProvider = function()
+{
+}
+
+WebInspector.InspectElementModeController.LayoutEditorButtonProvider.prototype = {
+    /**
+     * @override
+     * @return {?WebInspector.ToolbarItem}
+     */
+    item: function()
+    {
+        if (!WebInspector.inspectElementModeController)
+            return null;
+
+        return WebInspector.inspectElementModeController._layoutEditorButton;
+    }
+}
+
 /** @type {?WebInspector.InspectElementModeController} */
-WebInspector.inspectElementModeController = null;
+WebInspector.inspectElementModeController = null;