[DevTools] Add Toolbox page to undocked DevTools frontend.

Source/devtools/front_end/main/AdvancedApp.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.App}
  */
 WebInspector.AdvancedApp = function()
 {
     WebInspector.App.call(this);
+    WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._openToolboxWindow, this);
 };
 
 WebInspector.AdvancedApp.prototype = {
     createGlobalStatusBarItems: function()
     {
         this.appendInspectStatusBarItem();
 
         if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
             this._toggleResponsiveDesignButton = new WebInspector.StatusBarButton(WebInspector.UIString("Responsive design mode."), "responsive-design-status-bar-item");
             this._toggleResponsiveDesignButton.toggled = WebInspector.settings.responsiveDesignMode.get();
@@ skipping 19 matching lines @@
     createRootView: function()
     {
         var rootView = new WebInspector.RootView();
 
         this._rootSplitView = new WebInspector.SplitView(false, true, WebInspector.dockController.canDock() ? "InspectorView.splitViewState" : "InspectorView.dummySplitViewState", 300, 300);
         this._rootSplitView.show(rootView.element);
 
         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());
+            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);
         WebInspector.dockController.addEventListener(WebInspector.DockController.Events.AfterDockSideChanged, this._onAfterDockSideChange, this);
         this._onDockSideChange();
 
         rootView.attachToBody();
     },
 
-    _onBeforeDockSideChange: function()
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _openToolboxWindow: function(event)
     {
+        if (/** @type {string} */ (event.data) !== 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.ToolboxApp} 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) === 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();
-            return;
+        this._updatePageResizer();
+
+        if (!this._isDocked()) {
+            this._updateForUndocked();
+        } else if (this._toolbox && event && /** @type {string} */ (event.data) === WebInspector.DockController.State.Undocked) {
+            // Don't update yet for smooth transition.
+            this._rootSplitView.hideSidebar();
+        } else {
+            this._updateForDocked(WebInspector.dockController.dockSide());
         }
+    },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onAfterDockSideChange: function(event)
+    {
+        if (this._changingDockSide) {

[apavlov, 2014/06/04 09:04:25]

We prefer early returns:

if (!this._changingDocSide)
    return;

[dgozman, 2014/06/04 11:16:18]

Done.

+            this._changingDockSide = false;
+            if (/** @type {string} */ (event.data) === WebInspector.DockController.State.Undocked) {
+                // Restore docked layout in case of smooth transition.
+                this._updateForDocked(WebInspector.dockController.dockSide());
+            }
+            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);
         this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), dockSide === WebInspector.DockController.State.DockedToBottom);
         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()
     {
         return WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
     },
 
     /**
+     * @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);
     },
 
     __proto__: WebInspector.App.prototype
 };
+
+
+/**
+ * @constructor
+ */
+WebInspector.ToolboxApp = function()

[apavlov, 2014/06/04 09:04:25]

Shouldn't this extend WebInspector.App?

[dgozman, 2014/06/04 11:16:19]

Not really. Renamed to just WebInspector.Toolbox.

+{
+    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 main = window.opener.WebInspector.app;

[apavlov, 2014/06/04 09:04:25]

mainApp?

[dgozman, 2014/06/04 11:16:19]

Renamed to |advancedApp| and added typecast.

+    var rootView = new WebInspector.RootView();
+    this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
+    this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, main._onSetInspectedPageBounds.bind(main, true), main);

[apavlov, 2014/06/04 09:04:24]

You don't need the last argument (main), since the callback is already bound to
its receiver.

Also, is this listener ever removed when the devtools get docked?

[dgozman, 2014/06/04 11:16:19]

Done.
No. AdvancedApp filters out unnecessary events. We also don't get this event
when the window is not showing anywhere.

+    if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
+        this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
+        this._responsiveDesignView.show(rootView.element);
+    } else

[apavlov, 2014/06/04 09:04:24]

braces around the else-arm

[dgozman, 2014/06/04 11:16:18]

Done.

+        this._inspectedPagePlaceholder.show(rootView.element);
+    rootView.attachToBody();
+    main._toolboxLoaded(this);
+};

[apavlov, 2014/06/04 09:04:25]

we don't normally place ';' after function literals

[dgozman, 2014/06/04 11:16:18]

Done.

+
+WebInspector.ToolboxApp.prototype = {

[apavlov, 2014/06/04 09:04:24]

If there's no inheritance, this is not needed

[dgozman, 2014/06/04 11:16:19]

Done.

+};