[DevTools] Add Toolbox page to undocked DevTools frontend.

Source/devtools/front_end/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
  */
@@ skipping 27 matching lines @@
     this._heightSlider = this._heightSliderContainer.createChild("div", "responsive-design-slider-thumb");
     this._heightSlider.createChild("div", "responsive-design-thumb-handle");
     this._createResizer(this._heightSlider, true);
 
     this._inspectedPagePlaceholder = inspectedPagePlaceholder;
     inspectedPagePlaceholder.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);
     WebInspector.settings.responsiveDesignMode.addChangeListener(this._responsiveDesignModeChanged, this);
-
     WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(this._maybeEnableResponsiveDesign, this);
     WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(this._maybeEnableResponsiveDesign, this);
     WebInspector.overridesSupport.settings.overrideDeviceResolution.addChangeListener(this._maybeEnableResponsiveDesign, this);
-
-    this._updateOverridesSupportOnDockSideChange();
+    this._responsiveDesignModeChanged();
+    this._overridesWarningUpdated();
 };
 
 // Measured in DIP.
 WebInspector.ResponsiveDesignView.SliderWidth = 19;
 WebInspector.ResponsiveDesignView.RulerWidth = 20;
 WebInspector.ResponsiveDesignView.ToolbarHeight = 23;
 
 WebInspector.ResponsiveDesignView.prototype = {
     _maybeEnableResponsiveDesign: function()
     {
         if (this._enabled)
             return;
         if (WebInspector.overridesSupport.settings.emulateViewport.get() ||
                 WebInspector.overridesSupport.settings.emulateTouchEvents.get() ||
                 WebInspector.overridesSupport.settings.overrideDeviceResolution.get()) {
             WebInspector.settings.responsiveDesignMode.set(true);
         }
     },
 
-    _responsiveDesignModeChanged: function()
+    _invalidateCache: function()
     {
         delete this._cachedScale;
         delete this._cachedCssCanvasWidth;
         delete this._cachedCssCanvasHeight;
         delete this._cachedCssHeight;
         delete this._cachedCssWidth;
         delete this._cachedZoomFactor;
         delete this._availableSize;
+    },
 
-        var enabled = WebInspector.settings.responsiveDesignMode.get() && WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
+    _responsiveDesignModeChanged: function()
+    {
+        var enabled = WebInspector.settings.responsiveDesignMode.get();
         if (enabled && !this._enabled) {
+            this._invalidateCache();
             this._ignoreResize = true;
             this._enabled = true;
             this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();
             this._inspectedPagePlaceholder.show(this._pageContainer);
             this._responsiveDesignContainer.show(this.element);
-            WebInspector.overridesSupport.setPageResizer(this);
+            this.update(this._dipWidth, this._dipHeight, this._scale);
             delete this._ignoreResize;
-        }
-
-        if (!enabled && this._enabled) {
+        } else if (!enabled && this._enabled) {
+            this._invalidateCache();
             this._ignoreResize = true;
             this._enabled = false;
             this._scale = 0;
             this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
             this._responsiveDesignContainer.detach();
             this._inspectedPagePlaceholder.show(this.element);
-            WebInspector.overridesSupport.setPageResizer(null);
             delete this._ignoreResize;
         }
     },
 
-    _updateOverridesSupportOnDockSideChange: function()
-    {
-        this._responsiveDesignModeChanged();
-    },
-
     /**
      * WebInspector.OverridesSupport.PageResizer override.
      * @param {number} dipWidth
      * @param {number} dipHeight
      * @param {number} scale
      */
     update: function(dipWidth, dipHeight, scale)
     {
-        if (!this._enabled)
-            return;
-
         this._scale = scale;
         this._dipWidth = dipWidth;
         this._dipHeight = dipHeight;
         this._resolutionWidthLabel.textContent = dipWidth + "px";
         this._resolutionHeightLabel.textContent = dipHeight + "px";
         this._updateUI();
     },
 
     /**
      * WebInspector.OverridesSupport.PageResizer override.
@@ skipping 63 matching lines @@
      * 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)
     {
         if (!this._enabled)
             return;
 
+        //console.error("_drawCanvas " + cssCanvasWidth + "x" + cssCanvasHeight + (new Error().stack));

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

please remove

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

Ops. Done.

+
         var canvas = this._canvas;
         var context = canvas.getContext("2d");
         canvas.style.width = cssCanvasWidth + "px";
         canvas.style.height = cssCanvasHeight + "px";
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var dipCanvasWidth = cssCanvasWidth * zoomFactor;
         var dipCanvasHeight = cssCanvasHeight * zoomFactor;
 
         var deviceScaleFactor = window.devicePixelRatio;
@@ skipping 101 matching lines @@
                 context.beginPath();
                 context.moveTo(0, y);
                 context.lineTo(dipGridWidth, y);
                 context.stroke();
             }
         }
     },
 
     _updateUI: function()
     {
-        if (!this._enabled)
+        if (!this._enabled || !this.isShowing())

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

Is (!this.isShowing()) by chance sufficient?

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

No, this view can be disabled but showing.

             return;
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var rect = this._canvas.parentElement.getBoundingClientRect();
         var availableDip = this.availableDipSize();
         var cssCanvasWidth = rect.width;
         var cssCanvasHeight = rect.height;
 
         this._widthSlider.classList.toggle("hidden", !!this._scale);
         this._heightSlider.classList.toggle("hidden", !!this._scale);
@@ skipping 28 matching lines @@
         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))

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

equals() for consistency (with Java)? :)

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

I have found approximately the same number of isEqual and equals methods.
Perhaps, we can unify that in a separate patch.

+            this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged);
         this._updateUI();
     },
 
     _onZoomChanged: function()
     {
         this._updateUI();
     },
 
     _createToolbar: function()
     {
@@ skipping 66 matching lines @@
         sectionElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true));
     },
 
     _overridesWarningUpdated: function()
     {
         var message = WebInspector.overridesSupport.warningMessage();
         if (this._warningMessage.textContent === message)
             return;
         this._warningMessage.classList.toggle("hidden", !message);
         this._warningMessage.textContent = message;
-        this._responsiveDesignModeChanged();
+        this._invalidateCache();
         this.onResize();
     },
 
     __proto__: WebInspector.VBox.prototype
 };