[DevTools] Add Toolbox page to undocked DevTools frontend.

Source/devtools/front_end/components/Toolbox.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.
+
+/**
+ * This is a toolbox instance in main window.
+ * @constructor
+ * @extends {WebInspector.Object}
+ * @implements {WebInspector.OverridesSupport.PageResizer}
+ */
+WebInspector.Toolbox = function()
+{
+    WebInspector.Object.call(this);
+
+    this._changingDockSide = true;
+    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.bind(this, true), this);
+    if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
+        WebInspector.overridesSupport.setPageResizer(this);
+        this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
+        this._responsiveDesignView.addEventListener(WebInspector.ResponsiveDesignView.Events.Toggled, this.onResponsiveDesignToggled.bind(this, true), this);
+        this._responsiveDesignView.addEventListener(WebInspector.ResponsiveDesignView.Events.ResizeRequested, this.onResponsiveDesignResizeRequested.bind(this, true), this);
+        this._responsiveDesignView.addEventListener(WebInspector.ResponsiveDesignView.Events.AvailableSizeChanged, this.onResponsiveDesignAvailableSizeChanged.bind(this, true), this);
+        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);
+    rootView.attachToBody();
+
+    this._onDockSideChange(new WebInspector.Event(this, WebInspector.DockController.Events.DockSideChanged, undefined));
+    delete this._changingDockSide;
+    this._updateInspectedPagePlaceholder();
+};
+
+WebInspector.Toolbox.prototype = {
+    _onBeforeDockSideChange: function(event)
+    {
+        if (event.data === WebInspector.DockController.State.Undocked) {
+            this._createToolboxChild(WebInspector.dockController.toolboxWindow());

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

It seems like Toolbox and DockController share the toolbox docking
responsibilities. Should we move the code from dock controller here?

+            // Hide inspectorView and force layout to mimic the undocked state.
+            this._rootSplitView.hideSidebar();
+            this._inspectedPagePlaceholder.update();
+
+            // Prepare toolbox window layout.
+            this._updatePageResizer(this._toolboxChild.responsiveDesignView());
+        }
+        this._changingDockSide = true;
+    },
+
+    _onDockSideChange: function(event)
+    {
+        if (event.data == WebInspector.DockController.State.Undocked) {
+            // Switching from undocked to docked. Prepare main window layout.
+            this._updatePageResizer(this._responsiveDesignView);
+        }
+
+        // Update inspectorView UI.
+        if (WebInspector.dockController.dockSide() === WebInspector.DockController.State.Undocked) {
+            this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
+            this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
+            this._rootSplitView.hideMain();
+        } else if (event.data === WebInspector.DockController.State.Undocked) {
+            this._rootSplitView.hideSidebar();
+        } else {
+            this._updateForDocked(WebInspector.dockController.dockSide());
+        }
+    },
+
+    _onAfterDockSideChange: function(event)
+    {
+        delete this._changingDockSide;
+        if (event.data === WebInspector.DockController.State.Undocked)
+            this._updateForDocked(WebInspector.dockController.dockSide());
+        this._updateInspectedPagePlaceholder();
+        if (WebInspector.experimentsSettings.responsiveDesign.isEnabled())
+            WebInspector.overridesSupport.pageResizerAvailableSizeChanged();
+    },
+
+    /**
+     * @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();
+    },
+
+    _createToolboxChild: function(toolboxWindow)
+    {
+        if (!this._toolboxChild) {
+            toolboxWindow.InspectorFrontendHost = window.InspectorFrontendHost;
+            toolboxWindow.WebInspector.zoomManager = WebInspector.zoomManager;
+            this._toolboxChild = toolboxWindow.WebInspector.ToolboxChild.initialize(this);
+        }
+    },
+
+    /**
+     * @return {boolean}
+     */
+    _isDocked: function()
+    {
+        return WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
+    },
+
+    _updateInspectedPagePlaceholder: function()
+    {
+        if (this._isDocked())
+            this._inspectedPagePlaceholder.update();
+        else
+            this._toolboxChild.inspectedPagePlaceholder().update();
+    },
+
+    onResponsiveDesignToggled: function(docked, event)
+    {
+        var enabled = /** @type {boolean} */ (event.data);
+        var placeholder = docked ? this._inspectedPagePlaceholder : this._toolboxChild.inspectedPagePlaceholder();
+        if (enabled)
+            placeholder.clearMinimumSizeAndMargins();
+        else
+            placeholder.restoreMinimumSizeAndMargins();
+    },
+
+    onResponsiveDesignResizeRequested: function(docked, event)
+    {
+        if (this._changingDockSide || docked !== this._isDocked())
+            return;
+        var size = /** @type {!Size} */ (event.data);
+        WebInspector.overridesSupport.pageResizerResizeRequested(size);
+    },
+
+    onResponsiveDesignAvailableSizeChanged: function(docked)
+    {
+        if (this._changingDockSide || docked !== this._isDocked())
+            return;
+        WebInspector.overridesSupport.pageResizerAvailableSizeChanged();
+    },
+
+    onSetInspectedPageBounds: function(docked, event)
+    {
+        if (this._changingDockSide || docked !== this._isDocked())
+            return;
+        InspectorFrontendHost.setInspectedPageBounds(event.data);
+    },
+
+    /**
+     * WebInspector.OverridesSupport.PageResizer implementation.
+     * @param {number} dipWidth
+     * @param {number} dipHeight
+     * @param {number} scale
+     */
+    enable: function(dipWidth, dipHeight, scale)
+    {
+        this._pageResizerState = { dipWidth: dipWidth, dipHeight: dipHeight, scale: scale };
+        if (WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked)
+            this._responsiveDesignView.enable(dipWidth, dipHeight, scale);
+        else
+            this._toolboxChild.responsiveDesignView().enable(dipWidth, dipHeight, scale);
+    },
+
+    /**
+     * WebInspector.OverridesSupport.PageResizer implementation.
+     */
+    disable: function()
+    {
+        delete this._pageResizerState;
+        if (WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked)
+            this._responsiveDesignView.disable();
+        else
+            this._toolboxChild.responsiveDesignView().disable();
+    },
+
+    /**
+     * WebInspector.OverridesSupport.PageResizer implementation.
+     * @return {!Size}
+     */
+    availableDipSize: function()
+    {
+        if (this._changingDockSide)
+            return this._lastAvailableDipSize || (new Size(window.innerWidth, window.innerHeight));
+
+        if (WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked)
+            this._lastAvailableDipSize = this._responsiveDesignView.availableDipSize();
+        else
+            this._lastAvailableDipSize = this._toolboxChild.responsiveDesignView().availableDipSize();
+        return this._lastAvailableDipSize;
+    },
+
+    /**
+     * @param {!WebInspector.OverridesSupport.PageResizer} resizer
+     */
+    _updatePageResizer: function(resizer)
+    {
+        if (this._pageResizerState)
+            resizer.enable(this._pageResizerState.dipWidth, this._pageResizerState.dipHeight, this._pageResizerState.scale);
+        else
+            resizer.disable();
+    },
+
+    __proto__: WebInspector.Object.prototype
+};
+
+/**
+ * @type {?WebInspector.Toolbox}
+ */
+WebInspector.toolbox;
+
+
+/**
+ * @constructor
+ * @param {!WebInspector.Toolbox} toolboxMain
+ */
+WebInspector.ToolboxChild = function(toolboxMain)
+{
+    var rootView = new WebInspector.RootView();
+
+    this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
+    this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, toolboxMain.onSetInspectedPageBounds.bind(toolboxMain, false), toolboxMain);
+    if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
+        this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
+        this._responsiveDesignView.addEventListener(WebInspector.ResponsiveDesignView.Events.Toggled, toolboxMain.onResponsiveDesignToggled.bind(toolboxMain, false), toolboxMain);
+        this._responsiveDesignView.addEventListener(WebInspector.ResponsiveDesignView.Events.ResizeRequested, toolboxMain.onResponsiveDesignResizeRequested.bind(toolboxMain, false), toolboxMain);
+        this._responsiveDesignView.addEventListener(WebInspector.ResponsiveDesignView.Events.AvailableSizeChanged, toolboxMain.onResponsiveDesignAvailableSizeChanged.bind(toolboxMain, false), toolboxMain);
+        this._responsiveDesignView.show(rootView.element);
+    } else
+        this._inspectedPagePlaceholder.show(rootView.element);
+
+    rootView.attachToBody();
+};
+
+WebInspector.ToolboxChild.prototype = {
+    /**
+     * @return {!WebInspector.InspectedPagePlaceholder}
+     */
+    inspectedPagePlaceholder: function()
+    {
+        return this._inspectedPagePlaceholder;
+    },
+
+    /**
+     * @return {!WebInspector.ResponsiveDesignView}
+     */
+    responsiveDesignView: function()
+    {
+        return this._responsiveDesignView;
+    }
+};
+
+/**
+ * @type {!WebInspector.ToolboxChild}
+ */
+WebInspector.ToolboxChild._instance;
+
+/**
+ * Creates a toolbox child instance inside toolbox window.
+ * @param {!WebInspector.Toolbox} toolboxMain
+ * @return {!WebInspector.ToolboxChild}
+ */
+WebInspector.ToolboxChild.initialize = function(toolboxMain)
+{
+    return new WebInspector.ToolboxChild(toolboxMain);
+};