[DevTools] Try to adjust device mode scale to avoid rounding errors.

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js

Index: third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
index f8c11cf83dfbca385ed3641cb231fee657839740..4b178fe247fc1e06c269a6d72a35b5195fbd9ddb 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
@@ -136,7 +136,7 @@ WebInspector.DeviceModeModel.prototype = {
             this._mode = mode;
             if (this._initialized) {
                 var orientation = device.orientationByName(mode.orientation);
-                this._scaleSetting.set(this._calculateFitScale(orientation.width, orientation.height, this._currentOutline()));
+                this._scaleSetting.set(this._calculateFitScale(orientation.width, orientation.height, this._currentOutline(), this._currentInsets()));
             }
         } else {
             this._device = null;
@@ -438,6 +438,16 @@ WebInspector.DeviceModeModel.prototype = {
     },
 
     /**
+     * @return {!Insets}
+     */
+    _currentInsets: function()
+    {
+        if (this._type !== WebInspector.DeviceModeModel.Type.Device || !this._mode)

[lushnikov, 2016/06/02 03:40:58]

how could this._type === WebInspector.DeviceModeModel.Type.Device, but
!this.mode?

AFAIU this._type === Device implies some value for this._mode.

[dgozman, 2016/06/03 17:47:45]

Correct.

+            return new Insets(0, 0, 0, 0);
+        return this._mode.insets;
+    },
+
+    /**
      * @param {boolean} resetPageScaleFactor
      */
     _calculateAndEmulate: function(resetPageScaleFactor)
@@ -448,12 +458,13 @@ WebInspector.DeviceModeModel.prototype = {
         if (this._type === WebInspector.DeviceModeModel.Type.Device) {
             var orientation = this._device.orientationByName(this._mode.orientation);
             var outline = this._currentOutline();
-            this._fitScale = this._calculateFitScale(orientation.width, orientation.height, outline);
+            var insets = this._currentInsets();
+            this._fitScale = this._calculateFitScale(orientation.width, orientation.height, outline, insets);
             if (this._device.mobile())
                 this._appliedUserAgentType = this._device.touch() ? WebInspector.DeviceModeModel.UA.Mobile : WebInspector.DeviceModeModel.UA.MobileNoTouch;
             else
                 this._appliedUserAgentType = this._device.touch() ? WebInspector.DeviceModeModel.UA.DesktopTouch : WebInspector.DeviceModeModel.UA.Desktop;
-            this._applyDeviceMetrics(new Size(orientation.width, orientation.height), this._mode.insets, outline, this._scaleSetting.get(), this._device.deviceScaleFactor, this._device.mobile(), this._mode.orientation === WebInspector.EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary", resetPageScaleFactor);
+            this._applyDeviceMetrics(new Size(orientation.width, orientation.height), insets, outline, this._scaleSetting.get(), this._device.deviceScaleFactor, this._device.mobile(), this._mode.orientation === WebInspector.EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary", resetPageScaleFactor);
             this._applyUserAgent(this._device.userAgent);
             this._applyTouch(this._device.touch(), this._device.mobile());
         } else if (this._type === WebInspector.DeviceModeModel.Type.None) {
@@ -486,14 +497,39 @@ WebInspector.DeviceModeModel.prototype = {
      * @param {number} screenWidth
      * @param {number} screenHeight
      * @param {!Insets=} outline
+     * @param {!Insets=} insets
      * @return {number}
      */
-    _calculateFitScale: function(screenWidth, screenHeight, outline)
+    _calculateFitScale: function(screenWidth, screenHeight, outline, insets)
     {
         var outlineWidth = outline ? outline.left + outline.right : 0;
         var outlineHeight = outline ? outline.top + outline.bottom : 0;
+        var insetsWidth = insets ? insets.left + insets.right : 0;
+        var insetsHeight = insets ? insets.top + insets.bottom : 0;
         var scale = Math.min(screenWidth ? this._preferredSize.width / (screenWidth + outlineWidth) : 1, screenHeight ? this._preferredSize.height / (screenHeight + outlineHeight) : 1);
-        return Math.min(scale, 1);
+        scale = Math.min(Math.ceil(scale * 100), 100);
+
+        var sharpScale = scale;
+        while (sharpScale > scale * 0.7) {

[lushnikov, 2016/06/02 03:40:58]

where does 0.7 come from?

[dgozman, 2016/06/03 17:47:45]

Arbitrary number to not make scale too small. For example, when the real fit
scale if 0.49, we don't want to go down to 0.1.

+            var sharp = true;
+            if (screenWidth)
+                sharp = sharp && this._isInteger((screenWidth - insetsWidth) * sharpScale / 100);

[lushnikov, 2016/06/02 03:40:58]

i don't follow this logic. Can you please explain? 

(i believe the real question is: what are insets and why do they affect scale?)

[dgozman, 2016/06/03 17:47:45]

We try to scale so that no rounding error will occur later. The actual emulated
size is (screenSize - insets), and it should stay integer.

+            if (screenHeight)
+                sharp = sharp && this._isInteger((screenHeight - insetsHeight) * sharpScale / 100);
+            if (sharp)
+                return sharpScale / 100;
+            sharpScale -= 1;
+        }
+        return scale / 100;
+    },
+
+    /**
+     * @param {number} n
+     * @return {boolean}
+     */
+    _isInteger: function(n)

[lushnikov, 2016/06/02 03:40:58]

There is a built-in: Number.isInteger(n)

[dgozman, 2016/06/20 18:59:42]

Done.

+    {
+        return n === Math.round(n);
     },
 
     /**
@@ -560,7 +596,7 @@ WebInspector.DeviceModeModel.prototype = {
             pageWidth = 0;
             pageHeight = 0;
         }
-        if (this._visiblePageRect.width === pageWidth * scale && this._visiblePageRect.height === pageHeight * scale) {
+        if (this._visiblePageRect.width === pageWidth * scale && this._visiblePageRect.height === pageHeight * scale && this._isInteger(pageWidth * scale) && this._isInteger(pageHeight * scale)) {
             // When we only have to apply scale, do not resize the page. This will speed things up and remove lag.
             pageWidth = 0;
             pageHeight = 0;