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

Source/devtools/front_end/sdk/OverridesSupport.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 473 matching lines @@
             return;
         var userAgent = this.settings.overrideUserAgent.get() ? this.settings.userAgent.get() : "";
         NetworkAgent.setUserAgentOverride(userAgent);
         this._updateUserAgentWarningMessage(this._userAgent !== userAgent ? WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering.") : "");
         this._userAgent = userAgent;
         this.maybeHasActiveOverridesChanged();
     },
 
     _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();
     },
 
     _onPageResizerResizeRequested: function(event)
     {
         if (!this.settings.overrideDeviceMetrics.get())
             return;
 
         var size = /** @type {!Size} */ (event.data);
         var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(this.settings.deviceMetrics.get());
@@ skipping 39 matching lines @@
         var overrideWidth = dipWidth;
         var overrideHeight = dipHeight;
         if (this._pageResizer) {
             var available = this._pageResizer.availableDipSize();
             if (available.width >= dipWidth && available.height >= dipHeight) {
                 this._pageResizer.enable(dipWidth, dipHeight, 0);
                 // When we have enough space, no page size override is required. This will speed things up and remove lag.
                 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();
 
         /**
          * @param {?Protocol.Error} error
          * @this {WebInspector.OverridesSupport}
          */
         function apiCallback(error)
         {
             if (error) {
@@ skipping 71 matching lines @@
      * @return {boolean}
      */
     showMetricsRulers: function()
     {
         var rulersInPageResizer = this._pageResizer && this.settings.overrideDeviceMetrics.get();
         return WebInspector.settings.showMetricsRulers.get() && !rulersInPageResizer;
     },
 
     _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());
     },
 
     /**
      * @return {boolean}
      */
     hasActiveOverrides: function()
     {
         return this._hasActiveOverrides;
     },
@@ skipping 124 matching lines @@
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 
 /**
  * @type {!WebInspector.OverridesSupport}
  */
 WebInspector.overridesSupport;