[DevTools] Add Toolbox page to undocked DevTools frontend.

Source/devtools/front_end/toolbox/ResponsiveDesignView.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.VBox}
  * @implements {WebInspector.OverridesSupport.PageResizer}
- * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
+ * @param {!WebInspector.View} innerView
  */
-WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
+WebInspector.ResponsiveDesignView = function(innerView)
 {
     WebInspector.VBox.call(this);
     this.registerRequiredCSS("responsiveDesignView.css");
 
     this._container = new WebInspector.View();
     this._container.element.classList.add("responsive-design");
 
     this._canvas = this._container.element.createChild("canvas", "fill");
     this._resetButton = this._container.element.createChild("div", "responsive-design-reset-button");
     this._resetButton.addEventListener("click", this._reset.bind(this), false);
     this._resetButton.title = WebInspector.UIString("Fit available space");
 
     this._slidersContainer = this._container.element.createChild("div", "vbox responsive-design-sliders-container");
     var hbox = this._slidersContainer.createChild("div", "hbox flex-auto");
     this._heightSliderContainer = this._slidersContainer.createChild("div", "hbox responsive-design-slider-height");
     this._pageContainer = hbox.createChild("div", "vbox flex-auto");
     this._widthSliderContainer = hbox.createChild("div", "vbox responsive-design-slider-width");
 
     this._widthSlider = this._widthSliderContainer.createChild("div", "responsive-design-slider-thumb");
     this._createResizer(this._widthSlider, false);
     this._widthZeroButton = this._widthSlider.createChild("div", "responsive-design-zero-button");
     this._widthZeroButton.addEventListener("click", this._zeroButtonClicked.bind(this, false));
     this._heightSlider = this._heightSliderContainer.createChild("div", "responsive-design-slider-thumb");
     this._createResizer(this._heightSlider, true);
     this._heightZeroButton = this._heightSlider.createChild("div", "responsive-design-zero-button");
     this._heightZeroButton.addEventListener("click", this._zeroButtonClicked.bind(this, true));
 
-    this._inspectedPagePlaceholder = inspectedPagePlaceholder;
-    inspectedPagePlaceholder.show(this.element);
+    this._innerView = innerView;
+    this._innerView.show(this.element);
 
     this._enabled = false;
-
-    WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
-    WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._updateOverridesSupportOnDockSideChange, this);
-    this._updateOverridesSupportOnDockSideChange();
 };
 
 // Measured in DIP.
 WebInspector.ResponsiveDesignView.SliderWidth = 19;
 WebInspector.ResponsiveDesignView.RulerWidth = 23;
 
+WebInspector.ResponsiveDesignView.Events = {
+    Toggled: "Toggled",
+    ResizeRequested: "ResizeRequested",
+    AvailableSizeChanged: "AvailableSizeChanged"
+};
+
 WebInspector.ResponsiveDesignView.prototype = {
-    _updateOverridesSupportOnDockSideChange: function()
-    {
-        WebInspector.overridesSupport.setPageResizer(WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked ? this : null);
-    },
-
     /**
      * WebInspector.OverridesSupport.PageResizer override.
      * @param {number} dipWidth
      * @param {number} dipHeight
      * @param {number} scale
      */
     enable: function(dipWidth, dipHeight, scale)
     {
         if (!this._enabled) {
+            WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._updateUI, this);
             this._ignoreResize = true;
             this._enabled = true;
-            this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();
-            this._inspectedPagePlaceholder.show(this._pageContainer);
+            this.dispatchEventToListeners(WebInspector.ResponsiveDesignView.Events.Toggled, true);
+            this._innerView.show(this._pageContainer);
             this._container.show(this.element);
             delete this._ignoreResize;
         }
 
         this._scale = scale;
         this._dipWidth = dipWidth;
         this._dipHeight = dipHeight;
         this._updateUI();
     },
 
     /**
      * WebInspector.OverridesSupport.PageResizer override.
      */
     disable: function()
     {
         if (!this._enabled)
             return;
 
+        WebInspector.zoomManager.removeEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._updateUI, this);
         this._ignoreResize = true;
         this._enabled = false;
         this._scale = 0;
-        this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
+        this.dispatchEventToListeners(WebInspector.ResponsiveDesignView.Events.Toggled, false);
+        //this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
         this._container.detach();
-        this._inspectedPagePlaceholder.show(this.element);
+        this._innerView.show(this.element);
         delete this._ignoreResize;
     },
 
     /**
      * WebInspector.OverridesSupport.PageResizer override.
      * @return {!Size}
      */
     availableDipSize: function()
     {
         if (typeof this._availableSize === "undefined") {
@@ skipping 36 matching lines @@
     _onResizeUpdate: function(event)
     {
         var cssOffset = event.data.currentPosition - event.data.startPosition;
         var dipOffset = cssOffset * WebInspector.zoomManager.zoomFactor();
         var newSize = this._resizeStartSize + dipOffset;
         var requested = new Size(this._dipWidth, this._dipHeight);
         if (event.target.isVertical())
             requested.height = Number.constrain(newSize, 1, this.availableDipSize().height);
         else
             requested.width = Number.constrain(newSize, 1, this.availableDipSize().width);
-        this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.ResizeRequested, requested);
+        this.dispatchEventToListeners(WebInspector.ResponsiveDesignView.Events.ResizeRequested, requested);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onResizeEnd: function(event)
     {
         delete this._resizeStartSize;
     },
 
     /**
      * @param {boolean} isHeight
      */
     _zeroButtonClicked: function(isHeight)
     {
         var size = new Size(this._dipWidth, this._dipHeight);
         var available = this.availableDipSize();
         if (isHeight)
             size.height = this._dipHeight ? 0 : available.height;
         else
             size.width = this._dipWidth ? 0 : available.width;
-        this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.ResizeRequested, size);
+        this.dispatchEventToListeners(WebInspector.ResponsiveDesignView.Events.ResizeRequested, size);
     },
 
     /**
      * Draws canvas of the specified css size in DevTools page space.
      * Canvas contains grid and rulers.
      * @param {number} cssCanvasWidth
      * @param {number} cssCanvasHeight
      */
     _drawCanvas: function(cssCanvasWidth, cssCanvasHeight)
     {
@@ skipping 126 matching lines @@
             this._heightSliderContainer.style.marginBottom = "-" + cssSliderWidth;
             this._widthSliderContainer.style.flexBasis = cssSliderWidth;
             this._widthSliderContainer.style.marginRight = "-" + cssSliderWidth;
         }
 
         var cssWidth = this._dipWidth ? (this._dipWidth / zoomFactor + "px") : (availableDip.width / zoomFactor + "px");
         var cssHeight = this._dipHeight ? (this._dipHeight / zoomFactor + "px") : (availableDip.height / zoomFactor + "px");
         if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHeight) {
             this._slidersContainer.style.width = cssWidth;
             this._slidersContainer.style.height = cssHeight;
-            this._inspectedPagePlaceholder.onResize();
+            this._innerView.onResize();
         }
 
         if (this._cachedScale !== this._scale || this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanvasHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor)
             this._drawCanvas(cssCanvasWidth, cssCanvasHeight);
 
         this._cachedScale = this._scale;
         this._cachedCssCanvasWidth = cssCanvasWidth;
         this._cachedCssCanvasHeight = cssCanvasHeight;
         this._cachedCssHeight = cssHeight;
         this._cachedCssWidth = cssWidth;
         this._cachedZoomFactor = zoomFactor;
     },
 
     onResize: function()
     {
         if (!this._enabled || this._ignoreResize)
             return;
+        var oldSize = this._availableSize;
         delete this._availableSize;
-        this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged);
+        if (!this.availableDipSize().isEqual(oldSize))
+            this.dispatchEventToListeners(WebInspector.ResponsiveDesignView.Events.AvailableSizeChanged);
         this._updateUI();
     },
 
-    _onZoomChanged: function()
-    {
-        this._updateUI();
-    },
-
     /**
      * Resets emulated size to available space.
      */
     _reset: function()
     {
-        this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.ResizeRequested, this.availableDipSize());
+        this.dispatchEventToListeners(WebInspector.ResponsiveDesignView.Events.ResizeRequested, this.availableDipSize());
     },
 
     __proto__: WebInspector.VBox.prototype
 };