[DevTools] Device Mode polish.

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)
 {
     this._updateCallback = updateCallback;
     this._screenRect = new WebInspector.Rect(0, 0, 1, 1);
     this._visiblePageRect = new WebInspector.Rect(0, 0, 1, 1);
     this._availableSize = new Size(1, 1);
+    this._preferredSize = new Size(1, 1);
     this._deviceMetricsThrottler = new WebInspector.Throttler(0);
     this._appliedDeviceSize = new Size(1, 1);
     this._currentDeviceScaleFactor = window.devicePixelRatio;
     this._appliedDeviceScaleFactor = 0;
 
-    // Zero means "fit".
     this._scaleSetting = WebInspector.settings.createSetting("emulation.deviceScale", 1);
     this._scaleSetting.addChangeListener(this._scaleSettingChanged, this);
     this._widthSetting = WebInspector.settings.createSetting("emulation.deviceWidth", 400);
     this._widthSetting.addChangeListener(this._widthSettingChanged, this);
-    this._heightSetting = WebInspector.settings.createSetting("emulation.deviceHeight", 700);
+    this._heightSetting = WebInspector.settings.createSetting("emulation.deviceHeight", 0);
     this._heightSetting.addChangeListener(this._heightSettingChanged, this);
     this._uaSetting = WebInspector.settings.createSetting("emulation.deviceUA", WebInspector.DeviceModeModel.UA.Mobile);
     this._uaSetting.addChangeListener(this._uaSettingChanged, this);
     this._deviceScaleFactorSetting = WebInspector.settings.createSetting("emulation.deviceScaleFactor", 0);
     this._deviceScaleFactorSetting.addChangeListener(this._deviceScaleFactorSettingChanged, this);
 
     /** @type {!WebInspector.DeviceModeModel.Type} */
     this._type = WebInspector.DeviceModeModel.Type.None;
     /** @type {?WebInspector.EmulatedDevice} */
     this._device = null;
     /** @type {?WebInspector.EmulatedDevice.Mode} */
     this._mode = null;
     /** @type {boolean} */
     this._touchEnabled = false;
     /** @type {string} */
     this._touchConfiguration = "";
     /** @type {string} */
     this._screenOrientation = "";
     /** @type {number} */
-    this._fixedScale = 0;
+    this._fitScale = 1;
 
     /** @type {?WebInspector.Target} */
     this._target = null;
     WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Page);
 }
 
 /** @enum {string} */
 WebInspector.DeviceModeModel.Type = {
     None: "None",
     Responsive: "Responsive",
@@ skipping 19 matching lines @@
         return "";
     return WebInspector.UIString("Value must be positive integer");
 }
 
 WebInspector.DeviceModeModel._touchEventsScriptIdSymbol = Symbol("DeviceModeModel.touchEventsScriptIdSymbol");
 WebInspector.DeviceModeModel._defaultMobileUserAgent = "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36";
 WebInspector.DeviceModeModel._defaultMobileScaleFactor = 2;
 
 WebInspector.DeviceModeModel.prototype = {
     /**
-     * @param {!Size} size
+     * @param {!Size} availableSize
+     * @param {!Size} preferredSize
      */
-    setAvailableSize: function(size)
+    setAvailableSize: function(availableSize, preferredSize)
     {
-        this._availableSize = size;
+        this._availableSize = availableSize;
+        this._preferredSize = preferredSize;
         this._calculateAndEmulate(false);
     },
 
     /**
      * @param {!WebInspector.DeviceModeModel.Type} type
      * @param {?WebInspector.EmulatedDevice} device
      * @param {?WebInspector.EmulatedDevice.Mode} mode
      */
     emulate: function(type, device, mode)
     {
@@ skipping 62 matching lines @@
     },
 
     /**
      * @return {number}
      */
     scale: function()
     {
         return this._scale;
     },
 
-    suspendScaleChanges: function()
+    /**
+     * @return {number}
+     */
+    fitScale: function()
     {
-        ++this._fixedScale;
-    },
-
-    resumeScaleChanges: function()
-    {
-        if (!--this._fixedScale)
-            this._calculateAndEmulate(false);
+        return this._fitScale;
     },
 
     /**
      * @return {!Size}
      */
     appliedDeviceSize: function()
     {
         return this._appliedDeviceSize;
     },
 
@@ skipping 54 matching lines @@
             return this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mobile ? WebInspector.DeviceModeModel._defaultMobileScaleFactor : this._currentDeviceScaleFactor;
         else if (this._type === WebInspector.DeviceModeModel.Type.Device)
             return this._device.deviceScaleFactor;
         else
             return this._currentDeviceScaleFactor;
     },
 
     reset: function()
     {
         this._deviceScaleFactorSetting.set(0);
-        this._scaleSetting.set(0);
+        this._scaleSetting.set(1);
         this._widthSetting.set(400);
-        this._heightSetting.set(700);
+        this._heightSetting.set(0);
         this._uaSetting.set(WebInspector.DeviceModeModel.UA.Mobile);
     },
 
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetAdded: function(target)
     {
         if (!this._target) {
@@ skipping 59 matching lines @@
 
     /**
      * @param {boolean} resetScrollAndPageScale
      */
     _calculateAndEmulate: function(resetScrollAndPageScale)
     {
         if (this._type === WebInspector.DeviceModeModel.Type.Device) {
             var orientation = this._device.orientationByName(this._mode.orientation);
             var screenWidth = orientation.width;
             var screenHeight = orientation.height;
-            var scale = this._calculateScale(screenWidth, screenHeight);
-            this._applyDeviceMetrics(new Size(screenWidth, screenHeight), this._mode.insets, scale, this._device.deviceScaleFactor, this._device.mobile(), resetScrollAndPageScale);
+            this._applyDeviceMetrics(new Size(screenWidth, screenHeight), this._mode.insets, this._scaleSetting.get(), this._device.deviceScaleFactor, this._device.mobile(), resetScrollAndPageScale);
             this._applyUserAgent(this._device.userAgent);
             this._applyTouch(this._device.touch(), this._device.mobile());
             this._applyScreenOrientation(this._mode.orientation == WebInspector.EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary");
         } else if (this._type === WebInspector.DeviceModeModel.Type.None) {
             this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0), 1, 0, false, resetScrollAndPageScale);
             this._applyUserAgent("");
             this._applyTouch(false, false);
             this._applyScreenOrientation("");
         } else if (this._type === WebInspector.DeviceModeModel.Type.Responsive) {
-            var screenWidth = this._widthSetting.get();
-            var screenHeight = this._heightSetting.get();
-            var scale = this._calculateScale(screenWidth, screenHeight);
+            var screenWidth = this._widthSetting.get() || this._preferredSize.width / (this._scaleSetting.get() || 1);
+            var screenHeight = this._heightSetting.get() || this._preferredSize.height / (this._scaleSetting.get() || 1);
             var mobile = this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mobile;
             var defaultDeviceScaleFactor = mobile ? WebInspector.DeviceModeModel._defaultMobileScaleFactor : 0;
-            this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), scale, this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, resetScrollAndPageScale);
+            this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, resetScrollAndPageScale);
             this._applyUserAgent(mobile ? WebInspector.DeviceModeModel._defaultMobileUserAgent : "");
             this._applyTouch(this._uaSetting.get() !== WebInspector.DeviceModeModel.UA.Desktop, mobile);
             this._applyScreenOrientation(screenHeight >= screenWidth ? "portraitPrimary" : "landscapePrimary");
         }
         this._updateCallback.call(null);
     },
 
     /**
      * @param {number} screenWidth
      * @param {number} screenHeight
      * @return {number}
      */
-    _calculateScale: function(screenWidth, screenHeight)
+    _calculateFitScale: function(screenWidth, screenHeight)
     {
-        var scale = this._scaleSetting.get();
-        if (!scale) {
-            if (this._fixedScale) {
-                scale = this._scale;
-            } else {
-                scale = 1;
-                while (this._availableSize.width < screenWidth * scale || this._availableSize.height < screenHeight * scale)
-                    scale *= 0.8;
-            }
-        }
-        return scale;
+        var scale = Math.min(screenWidth ? this._preferredSize.width / screenWidth: 1, screenHeight ? this._preferredSize.height / screenHeight : 1);
+        return Math.min(scale, 1);
     },
 
     /**
      * @param {string} userAgent
      */
     _applyUserAgent: function(userAgent)
     {
         WebInspector.multitargetNetworkManager.setUserAgentOverride(userAgent);
     },
 
     /**
      * @param {!Size} screenSize
      * @param {!Insets} insets
      * @param {number} scale
      * @param {number} deviceScaleFactor
      * @param {boolean} mobile
      * @param {boolean} resetScrollAndPageScale
      */
     _applyDeviceMetrics: function(screenSize, insets, scale, deviceScaleFactor, mobile, resetScrollAndPageScale)
     {
         screenSize.width = Math.max(1, Math.floor(screenSize.width));
         screenSize.height = Math.max(1, Math.floor(screenSize.height));
+        this._fitScale = this._calculateFitScale(screenSize.width, screenSize.height);
+
         var pageWidth = screenSize.width - insets.left - insets.right;
         var pageHeight = screenSize.height - insets.top - insets.bottom;
         var positionX = insets.left;
         var positionY = insets.top;
 
         this._appliedDeviceSize = screenSize;
         this._screenRect = new WebInspector.Rect(
             Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2),
             0,
             screenSize.width * scale,
@@ skipping 96 matching lines @@
         if (!this._target || orientation === this._screenOrientation)
             return;
 
         this._screenOrientation = orientation;
         if (!this._screenOrientation)
             this._target.screenOrientationAgent().clearScreenOrientationOverride();
         else
             this._target.screenOrientationAgent().setScreenOrientationOverride(this._screenOrientation === "landscapePrimary" ? 90 : 0, /** @type {!ScreenOrientationAgent.OrientationType} */ (this._screenOrientation));
     }
 }