[DevTools] Add Toolbox page to undocked DevTools frontend.

Source/devtools/front_end/main/AdvancedApp.js

Index: Source/devtools/front_end/main/AdvancedApp.js
diff --git a/Source/devtools/front_end/main/AdvancedApp.js b/Source/devtools/front_end/main/AdvancedApp.js
index 9ffa1d18141553d07baf7f846d332a7e5bce0f21..cecf8ee10712305dcc36f52e80f5beff35651723 100644
--- a/Source/devtools/front_end/main/AdvancedApp.js
+++ b/Source/devtools/front_end/main/AdvancedApp.js
@@ -9,6 +9,7 @@
 WebInspector.AdvancedApp = function()
 {
     WebInspector.App.call(this);
+    WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._openToolboxWindow, this);
 
     if (!WebInspector.experimentsSettings.responsiveDesign.isEnabled())
         return;
@@ -40,12 +41,13 @@ WebInspector.AdvancedApp.prototype = {
         WebInspector.inspectorView.show(this._rootSplitView.sidebarElement());
 
         this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
-        this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds, this);
+        this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds.bind(this, false), this);
         if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
-            var responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
-            responsiveDesignView.show(this._rootSplitView.mainElement());
-        } else
+            this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
+            this._responsiveDesignView.show(this._rootSplitView.mainElement());
+        } else {
             this._inspectedPagePlaceholder.show(this._rootSplitView.mainElement());
+        }
 
         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._onBeforeDockSideChange, this);
         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._onDockSideChange, this);
@@ -55,21 +57,91 @@ WebInspector.AdvancedApp.prototype = {
         rootView.attachToBody();
     },
 
-    _onBeforeDockSideChange: function()
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _openToolboxWindow: function(event)
+    {
+        if (/** @type {string} */ (event.data.to) !== WebInspector.DockController.State.Undocked)
+            return;
+
+        if (this._toolboxWindow || !WebInspector.experimentsSettings.responsiveDesign.isEnabled())
+            return;
+
+        var toolbox = (window.location.search ? "&" : "?") + "toolbox=true";
+        var hash = window.location.hash;
+        var url = window.location.href.replace(hash, "") + toolbox + hash;
+        this._toolboxWindow = window.open(url, undefined);
+    },
+
+    /**
+     * @param {!WebInspector.Toolbox} toolbox
+     */
+    _toolboxLoaded: function(toolbox)
+    {
+        this._toolbox = toolbox;
+        this._updatePageResizer();
+    },
+
+    _updatePageResizer: function()
     {
+        if (WebInspector.experimentsSettings.responsiveDesign.isEnabled())
+            WebInspector.overridesSupport.setPageResizer(this._isDocked() ? this._responsiveDesignView : (this._toolbox ? this._toolbox._responsiveDesignView : null));
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onBeforeDockSideChange: function(event)
+    {
+        if (/** @type {string} */ (event.data.to) === WebInspector.DockController.State.Undocked && this._toolbox) {
+            // Hide inspectorView and force layout to mimic the undocked state.
+            this._rootSplitView.hideSidebar();
+            this._inspectedPagePlaceholder.update();
+        }
+
         this._changingDockSide = true;
     },
 
-    _onDockSideChange: function()
+    /**
+     * @param {!WebInspector.Event=} event
+     */
+    _onDockSideChange: function(event)
     {
-        var dockSide = WebInspector.dockController.dockSide();
-        if (dockSide === WebInspector.DockController.State.Undocked) {
-            this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
-            this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
-            this._rootSplitView.hideMain();
+        this._updatePageResizer();
+
+        var toDockSide = event ? /** @type {string} */ (event.data.to) : WebInspector.dockController.dockSide();
+        if (toDockSide === WebInspector.DockController.State.Undocked) {
+            this._updateForUndocked();
+        } else if (this._toolbox && event && /** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
+            // Don't update yet for smooth transition.
+            this._rootSplitView.hideSidebar();
+        } else {
+            this._updateForDocked(toDockSide);
+        }
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onAfterDockSideChange: function(event)
+    {
+        // We may get here on the first dock side change while loading without BeforeDockSideChange.
+        if (!this._changingDockSide)
             return;
+        this._changingDockSide = false;
+        if (/** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
+            // Restore docked layout in case of smooth transition.
+            this._updateForDocked(/** @type {string} */ (event.data.to));
         }
+        this._inspectedPagePlaceholder.update();
+    },
 
+    /**
+     * @param {string} dockSide
+     */
+    _updateForDocked: function(dockSide)
+    {
         this._rootSplitView.setVertical(dockSide === WebInspector.DockController.State.DockedToLeft || dockSide === WebInspector.DockController.State.DockedToRight);
         this._rootSplitView.setSecondIsSidebar(dockSide === WebInspector.DockController.State.DockedToRight || dockSide === WebInspector.DockController.State.DockedToBottom);
         this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), true);
@@ -77,10 +149,11 @@ WebInspector.AdvancedApp.prototype = {
         this._rootSplitView.showBoth();
     },
 
-    _onAfterDockSideChange: function()
+    _updateForUndocked: function()
     {
-        this._changingDockSide = false;
-        this._inspectedPagePlaceholder.update();
+        this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
+        this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
+        this._rootSplitView.hideMain();
     },
 
     _isDocked: function()
@@ -89,11 +162,12 @@ WebInspector.AdvancedApp.prototype = {
     },
 
     /**
+     * @param {boolean} toolbox
      * @param {!WebInspector.Event} event
      */
-    _onSetInspectedPageBounds: function(event)
+    _onSetInspectedPageBounds: function(toolbox, event)
     {
-        if (this._changingDockSide || !this._isDocked())
+        if (this._changingDockSide || (this._isDocked() === toolbox))
             return;
         var bounds = /** @type {{x: number, y: number, width: number, height: number}} */ (event.data);
         InspectorFrontendHost.setInspectedPageBounds(bounds);
@@ -120,4 +194,32 @@ WebInspector.AdvancedApp.ResponsiveDesignButtonProvider.prototype = {
             return null;
         return /** @type {!WebInspector.AdvancedApp} */ (WebInspector.app)._toggleResponsiveDesignButton || null;
     }
-}
+}
+
+/**
+ * @constructor
+ */
+WebInspector.Toolbox = function()
+{
+    if (!window.opener)
+        return;
+
+    WebInspector.zoomManager = window.opener.WebInspector.zoomManager;
+    WebInspector.overridesSupport = window.opener.WebInspector.overridesSupport;
+    WebInspector.settings = window.opener.WebInspector.settings;
+    WebInspector.experimentsSettings = window.opener.WebInspector.experimentsSettings;
+    WebInspector.installPortStyles();
+
+    var advancedApp = /** @type {!WebInspector.AdvancedApp} */ (window.opener.WebInspector.app);
+    var rootView = new WebInspector.RootView();
+    this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
+    this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, advancedApp._onSetInspectedPageBounds.bind(advancedApp, true));
+    if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
+        this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
+        this._responsiveDesignView.show(rootView.element);
+    } else {
+        this._inspectedPagePlaceholder.show(rootView.element);
+    }
+    rootView.attachToBody();
+    advancedApp._toolboxLoaded(this);
+}