[DevTools] Add Toolbox page to undocked DevTools frontend.

Source/devtools/front_end/ResponsiveDesignView.js

Index: Source/devtools/front_end/ResponsiveDesignView.js
diff --git a/Source/devtools/front_end/ResponsiveDesignView.js b/Source/devtools/front_end/ResponsiveDesignView.js
index b05e8c36f9604d10bd18f47b024f169930c7ee21..52ca0bb9eb8e6af72280616e852102869a03ece6 100644
--- a/Source/devtools/front_end/ResponsiveDesignView.js
+++ b/Source/devtools/front_end/ResponsiveDesignView.js
@@ -45,14 +45,12 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
     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.
@@ -72,7 +70,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         }
     },
 
-    _responsiveDesignModeChanged: function()
+    _invalidateCache: function()
     {
         delete this._cachedScale;
         delete this._cachedCssCanvasWidth;
@@ -81,35 +79,32 @@ WebInspector.ResponsiveDesignView.prototype = {
         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
@@ -118,9 +113,6 @@ WebInspector.ResponsiveDesignView.prototype = {
      */
     update: function(dipWidth, dipHeight, scale)
     {
-        if (!this._enabled)
-            return;
-
         this._scale = scale;
         this._dipWidth = dipWidth;
         this._dipHeight = dipHeight;
@@ -204,6 +196,8 @@ WebInspector.ResponsiveDesignView.prototype = {
         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";
@@ -325,7 +319,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
     _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();
@@ -374,8 +368,10 @@ WebInspector.ResponsiveDesignView.prototype = {
     {
         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();
     },
 
@@ -462,7 +458,7 @@ WebInspector.ResponsiveDesignView.prototype = {
             return;
         this._warningMessage.classList.toggle("hidden", !message);
         this._warningMessage.textContent = message;
-        this._responsiveDesignModeChanged();
+        this._invalidateCache();
         this.onResize();
     },