DevTools: device mode devices remember last used zoom

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

 // Copyright 2016 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.
 
 /**
  * @param {!WebInspector.DeviceModeModel} model
  * @param {!WebInspector.Setting} showMediaInspectorSetting
  * @param {!WebInspector.Setting} showRulersSetting
  * @constructor
  */
 WebInspector.DeviceModeToolbar = function(model, showMediaInspectorSetting, showRulersSetting)
 {
     this._model = model;
     this._showMediaInspectorSetting = showMediaInspectorSetting;
     this._showRulersSetting = showRulersSetting;
 
     this._deviceOutlineSetting = this._model.deviceOutlineSetting();
     this._showDeviceScaleFactorSetting = WebInspector.settings.createSetting("emulation.showDeviceScaleFactor", false);
     this._showDeviceScaleFactorSetting.addChangeListener(this._updateDeviceScaleFactorVisibility, this);
 
     this._showUserAgentTypeSetting = WebInspector.settings.createSetting("emulation.showUserAgentType", false);
     this._showUserAgentTypeSetting.addChangeListener(this._updateUserAgentTypeVisibility, this);
 
     this._showNetworkConditionsSetting = WebInspector.settings.createSetting("emulation.showNetworkConditions", false);
     this._showNetworkConditionsSetting.addChangeListener(this._updateNetworkConditionsVisibility, this);
 
     /** @type {!Map<!WebInspector.EmulatedDevice, !WebInspector.EmulatedDevice.Mode>} */
     this._lastMode = new Map();
 
+    /** @type {!Map<!WebInspector.EmulatedDevice, number>} */
+    this._lastScale = new Map();
+
     this._element = createElementWithClass("div", "device-mode-toolbar");
 
     var leftContainer = this._element.createChild("div", "device-mode-toolbar-spacer");
     leftContainer.createChild("div", "device-mode-toolbar-spacer");
     var leftToolbar = new WebInspector.Toolbar("", leftContainer);
     leftToolbar.makeWrappable();
     this._fillLeftToolbar(leftToolbar);
 
     var mainToolbar = new WebInspector.Toolbar("", this._element);
     mainToolbar.makeWrappable();
@@ skipping 149 matching lines @@
 
         toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
     },
 
 
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _appendScaleMenuItems: function(contextMenu)
     {
-        var scaleSetting = this._model.scaleSetting();
         if (this._model.type() === WebInspector.DeviceModeModel.Type.Device) {
-            contextMenu.appendItem(WebInspector.UIString("Fit to window (%.0f%%)", this._model.fitScale() * 100), scaleSetting.set.bind(scaleSetting, this._model.fitScale()), false);
+            contextMenu.appendItem(WebInspector.UIString("Fit to window (%.0f%%)", this._model.fitScale() * 100), this._onScaleMenuChanged.bind(this, this._model.fitScale()), false);
             contextMenu.appendSeparator();
         }
-        appendScaleItem(WebInspector.UIString("50%"), 0.5);
-        appendScaleItem(WebInspector.UIString("75%"), 0.75);
-        appendScaleItem(WebInspector.UIString("100%"), 1);
-        appendScaleItem(WebInspector.UIString("125%"), 1.25);
-        appendScaleItem(WebInspector.UIString("150%"), 1.5);
+        var boundAppendScaleItem = appendScaleItem.bind(this);
+        boundAppendScaleItem(WebInspector.UIString("50%"), 0.5);
+        boundAppendScaleItem(WebInspector.UIString("75%"), 0.75);
+        boundAppendScaleItem(WebInspector.UIString("100%"), 1);
+        boundAppendScaleItem(WebInspector.UIString("125%"), 1.25);
+        boundAppendScaleItem(WebInspector.UIString("150%"), 1.5);
 
         /**
          * @param {string} title
          * @param {number} value
+         * @this {!WebInspector.DeviceModeToolbar}
          */
         function appendScaleItem(title, value)
         {
-            contextMenu.appendCheckboxItem(title, scaleSetting.set.bind(scaleSetting, value), scaleSetting.get() === value, false);
+            contextMenu.appendCheckboxItem(title, this._onScaleMenuChanged.bind(this, value), this._model.scaleSetting().get() === value, false);
         }
     },
 
     /**
+     * @param {number} value
+     */
+    _onScaleMenuChanged: function(value)
+    {
+        var device = this._model.device();
+        if (device)
+            this._lastScale.set(device, value);
+        this._model.scaleSetting().set(value);
+    },
+
+    /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _appendDeviceScaleMenuItems: function(contextMenu)
     {
         var deviceScaleFactorSetting = this._model.deviceScaleFactorSetting();
         var defaultValue = this._model.uaSetting().get() === WebInspector.DeviceModeModel.UA.Mobile || this._model.uaSetting().get() === WebInspector.DeviceModeModel.UA.MobileNoTouch ? WebInspector.DeviceModeModel.defaultMobileScaleFactor : window.devicePixelRatio;
         appendDeviceScaleFactorItem(WebInspector.UIString("Default: %.1f", defaultValue), 0);
         contextMenu.appendSeparator();
         appendDeviceScaleFactorItem(WebInspector.UIString("1"), 1);
         appendDeviceScaleFactorItem(WebInspector.UIString("2"), 2);
@@ skipping 83 matching lines @@
         var shadowRoot = WebInspector.createShadowRootWithCoreStyles(container, "emulation/deviceModeToolbar.css");
         shadowRoot.appendChild(element);
         return new WebInspector.ToolbarItem(container);
     },
 
     /**
      * @param {!WebInspector.EmulatedDevice} device
      */
     _emulateDevice: function(device)
     {
-        this._model.emulate(WebInspector.DeviceModeModel.Type.Device, device, this._lastMode.get(device) || device.modes[0]);
+        var lastDevice = this._model.device();
+        var lastOrientation = this._model.mode() ? this._model.mode().orientation : null;
+        var newMode = this._lastMode.get(device) || device.modes[0];
+        if (device !== lastDevice && lastOrientation && newMode && lastOrientation !== newMode.orientation) {
+            var matchingModes = device.modes.filter((mode) => mode.orientation === lastOrientation);

[dgozman, 2016/10/21 20:32:56]

I remember we agreed to revert this and leave as is, didn't we?

[luoe, 2016/10/22 01:58:02]

Correct, this should now be reverted.

+            newMode = matchingModes[0] || newMode;
+        }
+        this._model.emulate(WebInspector.DeviceModeModel.Type.Device, device, newMode, this._lastScale.get(device));
     },
 
     _switchToResponsive: function()
     {
         this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
     },
 
     /**
      * @param {!Array<!WebInspector.EmulatedDevice>} devices
      * @return {!Array<!WebInspector.EmulatedDevice>}
@@ skipping 230 matching lines @@
                         this._emulateDevice(device);
                         return;
                     }
                 }
             }
         }
 
         this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
     }
 }