DevTools: allow independent sidebar and viewport resize while in responsive mode.

Source/devtools/front_end/sdk/OverridesSupport.js

Index: Source/devtools/front_end/sdk/OverridesSupport.js
diff --git a/Source/devtools/front_end/sdk/OverridesSupport.js b/Source/devtools/front_end/sdk/OverridesSupport.js
index 986f56a6ec1d2a5ebb4cec09fa4f18459b252493..61d0a43a7438b14ae11205db03593a7b6f7b8859 100644
--- a/Source/devtools/front_end/sdk/OverridesSupport.js
+++ b/Source/devtools/front_end/sdk/OverridesSupport.js
@@ -491,6 +491,14 @@ WebInspector.OverridesSupport.prototype = {
 
     _onPageResizerAvailableSizeChanged: function()
     {
+        var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(this.settings.deviceMetrics.get());
+        if (!metrics.isValid())
+            return;
+
+        var available = this._pageResizer.availableDipSize();
+        if (available.width > metrics.width && available.height > metrics.height)
+            return;
+
         this._deviceMetricsChanged();
     },
 
@@ -550,21 +558,39 @@ WebInspector.OverridesSupport.prototype = {
                 overrideWidth = 0;
                 overrideHeight = 0;
             } else {
-                var widthScale = dipWidth ? dipWidth / Math.max(available.width, 1) : 1;
-                var heightScale = dipHeight ? dipHeight / Math.max(available.height, 1) : 1;
-                var scale = 1 / Math.max(widthScale, heightScale);
-                this._pageResizer.enable(dipWidth ? Math.max(Math.floor(dipWidth * scale), 1) : 0, dipHeight ? Math.max(Math.floor(dipHeight * scale), 1) : 0, scale);
-                if (!dipWidth)
-                    overrideWidth = Math.round(available.width / scale);
-                if (!dipHeight)
-                    overrideHeight = Math.round(available.height / scale);
+                this._pageResizer.enable(Math.min(dipWidth, available.width), Math.min(dipHeight, available.height), 0);
             }
         }
-        PageAgent.setDeviceMetricsOverride(
-            overrideWidth, overrideHeight, metrics.deviceScaleFactor,
-            this.settings.emulateViewport.get(), this._pageResizer ? true : this.settings.deviceFitWindow.get(),
-            metrics.textAutosizing, metrics.fontScaleFactor(),
-            apiCallback.bind(this));
+
+        // Do not emulate resolution more often than 10Hz.
+        this._setDeviceMetricsTimers = (this._setDeviceMetricsTimers || 0) + 1;
+        if (overrideWidth || overrideHeight)
+            setTimeout(setDeviceMetricsOverride.bind(this), 100);

[dgozman, 2014/05/26 20:45:30]

I think, we should issue the very first command immediately instead of 100ms
later.

[pfeldman, 2014/05/27 07:37:13]

How do I distinguish the first command from the second if I issue it
immediately?

[dgozman, 2014/05/27 07:55:44]

You can issue PageAgent call immediately, and clear _setDeviceMetricsTimers and
retry with another call in a timeout.

+        else
+            setDeviceMetricsOverride.call(this);
+
+        /**
+         * @this {WebInspector.OverridesSupport}
+         */
+        function setDeviceMetricsOverride()
+        {
+            // Drop heavy intermediate commands.
+            this._setDeviceMetricsTimers--;
+            var isExpensive = overrideWidth || overrideHeight;
+            if (isExpensive && this._setDeviceMetricsTimers) {
+                var commandThreshold = 100;
+                var time = window.performance.now();
+                if (time - this._lastExpensivePageAgentCommandTime < commandThreshold)
+                    return;
+                this._lastExpensivePageAgentCommandTime = time;
+            }
+
+            PageAgent.setDeviceMetricsOverride(
+                overrideWidth, overrideHeight, metrics.deviceScaleFactor,
+                this.settings.emulateViewport.get(), this._pageResizer ? false : this.settings.deviceFitWindow.get(),
+                metrics.textAutosizing, metrics.fontScaleFactor(),
+                apiCallback.bind(this));
+        }
 
         this.maybeHasActiveOverridesChanged();
 
@@ -656,6 +682,8 @@ WebInspector.OverridesSupport.prototype = {
 
     _showRulersChanged: function()
     {
+        if (WebInspector.experimentsSettings.responsiveDesign.isEnabled())

[dgozman, 2014/05/26 20:45:30]

This works bad in undocked. Just use |this.showMetricsRulers()| instead of
|true| below.

[pfeldman, 2014/05/27 07:37:13]

Not sure I follow, no matter what the options are, I don't want to paint neither
viewport size nor the grid when responsive design is on.

[dgozman, 2014/05/27 07:55:44]

Responsive deisng is only on in docked mode.

+            return;
         PageAgent.setShowViewportSizeOnResize(true, this.showMetricsRulers());
     },