[DevTools] Add Toolbox page to undocked DevTools frontend.

Source/devtools/front_end/components/DockController.js

Index: Source/devtools/front_end/components/DockController.js
diff --git a/Source/devtools/front_end/components/DockController.js b/Source/devtools/front_end/components/DockController.js
index 0d9b1a0519a202fd19725c499339532f6b0503c8..dcfad75f42c4a594d2de908e8fcbdf79d3c2159a 100644
--- a/Source/devtools/front_end/components/DockController.js
+++ b/Source/devtools/front_end/components/DockController.js
@@ -116,16 +116,73 @@ WebInspector.DockController.prototype = {
         if (this._dockSide === dockSide)
             return;
 
+        // We have to create toolbox window while still docked.
+        // In the case of starting undocked there are no listeners yet, so
+        // toolbox window must be created here.
+        if (dockSide === WebInspector.DockController.State.Undocked) {
+            this._openToolboxWindow();
+            if (this._toolboxWindowLoaded)
+                this._doChangeDockSide(dockSide);
+            else
+                this._toolboxWindowLoadedCallback = this._doChangeDockSide.bind(this, dockSide);
+        } else {
+            delete this._toolboxWindowLoadedCallback;
+            this._doChangeDockSide(dockSide);
+        }
+    },
+
+    /**
+     * @param {string} dockSide
+     */
+    _doChangeDockSide: function(dockSide)
+    {
         this.dispatchEventToListeners(WebInspector.DockController.Events.BeforeDockSideChanged, dockSide);
-        InspectorFrontendHost.setIsDocked(dockSide !== WebInspector.DockController.State.Undocked, this._setIsDockedResponse.bind(this));
+        var oldDockSide = this._dockSide;
+        InspectorFrontendHost.setIsDocked(dockSide !== WebInspector.DockController.State.Undocked, this._setIsDockedResponse.bind(this, oldDockSide));
         this._dockSide = dockSide;
         this._updateUI();
-        this.dispatchEventToListeners(WebInspector.DockController.Events.DockSideChanged, this._dockSide);
+        this.dispatchEventToListeners(WebInspector.DockController.Events.DockSideChanged, oldDockSide);
     },
 
-    _setIsDockedResponse: function()
+    /**
+     * @param {string} oldDockSide
+     */
+    _setIsDockedResponse: function(oldDockSide)
+    {
+        this.dispatchEventToListeners(WebInspector.DockController.Events.AfterDockSideChanged, oldDockSide);
+    },
+
+    _openToolboxWindow: function()
+    {
+        if (this._toolboxWindow)
+            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);
+
+        this._onToolboxWindowLoadedBound = this._onToolboxWindowLoaded.bind(this);
+        this._toolboxWindow.addEventListener("DOMContentLoaded", this._onToolboxWindowLoadedBound, false);

[pfeldman, 2014/05/27 15:37:04]

DOMContentLoaded should fire just once.

+    },
+
+    _onToolboxWindowLoaded: function()
+    {
+        this._toolboxWindow.removeEventListener("DOMContentLoaded", this._onToolboxWindowLoadedBound, false);
+        this._toolboxWindowLoaded = true;
+
+        if (this._toolboxWindowLoadedCallback) {
+            this._toolboxWindowLoadedCallback(this._toolboxWindow);
+            delete this._toolboxWindowLoadedCallback;
+        }
+    },
+
+    /**
+     * @return {?Window}
+     */
+    toolboxWindow: function()
     {
-        this.dispatchEventToListeners(WebInspector.DockController.Events.AfterDockSideChanged, this._dockSide);
+        return this._toolboxWindowLoaded ? this._toolboxWindow : null;
     },
 
     _updateUI: function()