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

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

 // Copyright 2015 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
  * @param {function()} updateCallback
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.DeviceModeModel = function(updateCallback)
@@ skipping 118 matching lines @@
     {
         var resetPageScaleFactor = this._type !== type || this._device !== device || this._mode !== mode;
         this._type = type;
 
         if (type === WebInspector.DeviceModeModel.Type.Device) {
             console.assert(device && mode, "Must pass device and mode for device emulation");
             this._device = device;
             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;
             this._mode = null;
         }
 
         if (type !== WebInspector.DeviceModeModel.Type.None)
             WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.DeviceModeEnabled);
         this._calculateAndEmulate(resetPageScaleFactor);
     },
@@ skipping 281 matching lines @@
         var outline = new Insets(0, 0, 0, 0);
         if (this._type !== WebInspector.DeviceModeModel.Type.Device)
             return outline;
         var orientation = this._device.orientationByName(this._mode.orientation);
         if (this._deviceOutlineSetting.get())
             outline = orientation.outlineInsets || outline;
         return outline;
     },
 
     /**
+     * @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)
     {
         if (!this._target)
             this._onTargetAvailable = this._calculateAndEmulate.bind(this, resetPageScaleFactor);
 
         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) {
             this._fitScale = this._calculateFitScale(this._availableSize.width, this._availableSize.height);
             this._appliedUserAgentType = WebInspector.DeviceModeModel.UA.Desktop;
             this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), 1, 0, false, "", resetPageScaleFactor);
             this._applyUserAgent("");
             this._applyTouch(false, false);
         } else if (this._type === WebInspector.DeviceModeModel.Type.Responsive) {
             var screenWidth = this._widthSetting.get();
@@ skipping 12 matching lines @@
         }
         if (this._target)
             this._target.renderingAgent().setShowViewportSizeOnResize(this._type === WebInspector.DeviceModeModel.Type.None);
         this._updateCallback.call(null);
     },
 
     /**
      * @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);
+    },
+
+    /**
      * @param {number} width
      * @param {number} height
      */
     setSizeAndScaleToFit: function(width, height)
     {
         this._scaleSetting.set(this._calculateFitScale(width, height));
         this.setWidth(width);
     },
 
     /**
@@ skipping 43 matching lines @@
             positionY * scale,
             Math.min(pageWidth * scale, this._availableSize.width - this._screenRect.left - positionX * scale),
             Math.min(pageHeight * scale, this._availableSize.height - this._screenRect.top - positionY * scale));
         this._scale = scale;
 
         if (scale === 1 && this._availableSize.width >= screenSize.width && this._availableSize.height >= screenSize.height) {
             // When we have enough space, no page size override is required. This will speed things up and remove lag.
             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;
         }
 
         this._deviceMetricsThrottler.schedule(setDeviceMetricsOverride.bind(this));
 
         /**
          * @this {WebInspector.DeviceModeModel}
          * @return {!Promise.<?>}
@@ skipping 28 matching lines @@
 
     /**
      * @param {boolean} touchEnabled
      * @param {boolean} mobile
      */
     _applyTouch: function(touchEnabled, mobile)
     {
         WebInspector.MultitargetTouchModel.instance().setTouchEnabled(touchEnabled, mobile);
     }
 }