[DevTools] Fix various bugs in Device Mode.

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.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
  * @extends {WebInspector.VBox}
  */
 WebInspector.DeviceModeView = function()
 {
@@ skipping 134 matching lines @@
         var cssOffsetY = event.data.currentY - event.data.startY;
         if (this._slowPositionStart) {
             cssOffsetX = (event.data.currentX - this._slowPositionStart.x) / 10 + this._slowPositionStart.x - event.data.startX;
             cssOffsetY = (event.data.currentY - this._slowPositionStart.y) / 10 + this._slowPositionStart.y - event.data.startY;
         }
 
         if (width) {
             var dipOffsetX = cssOffsetX * WebInspector.zoomManager.zoomFactor();
             var newWidth = this._resizeStart.width + dipOffsetX * 2;
             newWidth = Math.round(newWidth / this._model.scale());
-            this._model.setWidth(newWidth);
+            if (newWidth >= WebInspector.DeviceModeModel.MinDeviceSize && newWidth <= WebInspector.DeviceModeModel.MaxDeviceSize)
+                this._model.setWidth(newWidth);
         }
 
         if (height) {
             var dipOffsetY = cssOffsetY * WebInspector.zoomManager.zoomFactor();
             var newHeight = this._resizeStart.height + dipOffsetY;
             newHeight = Math.round(newHeight / this._model.scale());
-            this._model.setHeight(newHeight);
+            if (newHeight >= WebInspector.DeviceModeModel.MinDeviceSize && newHeight <= WebInspector.DeviceModeModel.MaxDeviceSize)
+                this._model.setHeight(newHeight);
         }
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onResizeEnd: function(event)
     {
         delete this._resizeStart;
         WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.ResizedViewInResponsiveMode);
@@ skipping 153 matching lines @@
         this._measureHandles();
         this._mediaInspector.setEnabled(true);
         this._toolbar.restore();
     },
 
     /**
      * @override
      */
     willHide: function()
     {
+        this._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);
         this._mediaInspector.setEnabled(false);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @param {!WebInspector.DeviceModeModel} model
  * @param {!WebInspector.Setting} showMediaInspectorSetting
  * @param {!WebInspector.Setting} showRulersSetting
  * @constructor
  */
 WebInspector.DeviceModeView.Toolbar = function(model, showMediaInspectorSetting, showRulersSetting)
 {
     this._model = model;
     this._showMediaInspectorSetting = showMediaInspectorSetting;
     this._showRulersSetting = showRulersSetting;
     /** @type {!Map<!WebInspector.EmulatedDevice, !WebInspector.EmulatedDevice.Mode>} */
     this._lastMode = new Map();
-    /** @type {?WebInspector.EmulatedDevice} */
-    this._lastDevice = null;
 
     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();
     this._fillMainToolbar(mainToolbar);
 
     var rightContainer = this._element.createChild("div", "device-mode-toolbar-spacer");
-    var rightToolbar = new WebInspector.Toolbar("", rightContainer);
+    var rightToolbar = new WebInspector.Toolbar("device-mode-toolbar-fixed-size", rightContainer);
+    rightToolbar.makeWrappable();
     this._fillRightToolbar(rightToolbar);
-    var modeToolbar = new WebInspector.Toolbar("", rightContainer);
+    var modeToolbar = new WebInspector.Toolbar("device-mode-toolbar-fixed-size", rightContainer);
+    modeToolbar.makeWrappable();
     this._fillModeToolbar(modeToolbar);
     rightContainer.createChild("div", "device-mode-toolbar-spacer");
     var optionsToolbar = new WebInspector.Toolbar("", rightContainer);
     optionsToolbar.makeWrappable(true);
     this._fillOptionsToolbar(optionsToolbar);
 
     WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.CustomDevicesUpdated, this._deviceListChanged, this);
     WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, this._deviceListChanged, this);
 
-    this._persistenceSetting = WebInspector.settings.createSetting("emulation.deviceModeViewPersistence", {type: WebInspector.DeviceModeModel.Type.Responsive, device: "", orientation: "", mode: ""});
-    this._restored = false;
+    this._persistenceSetting = WebInspector.settings.createSetting("emulation.deviceModeValue", {device: "", orientation: "", mode: ""});
 }
 
 WebInspector.DeviceModeView.Toolbar.prototype = {
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _fillLeftToolbar: function(toolbar)
     {
+        toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
         this._deviceSelectItem = new WebInspector.ToolbarMenuButton(this._appendDeviceMenuItems.bind(this));
         this._deviceSelectItem.setGlyph("");
         this._deviceSelectItem.turnIntoSelect(95);
         toolbar.appendToolbarItem(this._deviceSelectItem);
     },
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _fillMainToolbar: function(toolbar)
@@ skipping 29 matching lines @@
         {
             return !value ? "" : WebInspector.DeviceModeModel.deviceSizeValidator(value);
         }
     },
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _fillRightToolbar: function(toolbar)
     {
+        toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
         this._scaleItem = new WebInspector.ToolbarMenuButton(this._appendScaleMenuItems.bind(this));
         this._scaleItem.setTitle(WebInspector.UIString("Zoom"));
         this._scaleItem.setGlyph("");
         this._scaleItem.turnIntoSelect();
         toolbar.appendToolbarItem(this._scaleItem);
     },
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _fillModeToolbar: function(toolbar)
     {
+        toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
         this._modeButton = new WebInspector.ToolbarButton("", "rotate-screen-toolbar-item");
         this._modeButton.addEventListener("click", this._modeMenuClicked, this);
         toolbar.appendToolbarItem(this._modeButton);
     },
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _fillOptionsToolbar: function(toolbar)
     {
         this._uaItem = new WebInspector.ToolbarText();
         this._uaItem.setVisible(false);
         this._uaItem.setTitle(WebInspector.UIString("User agent type"));
         toolbar.appendToolbarItem(this._uaItem);
 
         this._deviceScaleItem = new WebInspector.ToolbarText();
         this._deviceScaleItem.setVisible(false);
         this._deviceScaleItem.setTitle(WebInspector.UIString("Device pixel ratio"));
         toolbar.appendToolbarItem(this._deviceScaleItem);
 
         var moreOptionsButton = new WebInspector.ToolbarMenuButton(this._appendOptionsMenuItems.bind(this));
         moreOptionsButton.setTitle(WebInspector.UIString("More options"));
         toolbar.appendToolbarItem(moreOptionsButton);
+
+        toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
     },
 
 
     /**
      * @param {!Element} input
      * @param {function(number)} apply
      * @param {function(string):?string} validate
      * @return {function(number)}
      */
     _bindInput: function(input, apply, validate)
@@ skipping 317 matching lines @@
     /**
      * @return {!Element}
      */
     element: function()
     {
         return this._element;
     },
 
     update: function()
     {
-        var updatePersistence = false;
-
         if (this._model.type() !== this._cachedModelType) {
-            this._previousModelType = this._cachedModelType;
             this._cachedModelType = this._model.type();
             this._widthInput.disabled = this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive;
             this._heightInput.disabled = this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive;
-            updatePersistence = true;
         }
 
         var size = this._model.appliedDeviceSize();
         this._updateHeightInput(this._model.type() === WebInspector.DeviceModeModel.Type.Responsive && this._model.isFullHeight() ? 0 : size.height);
         this._updateWidthInput(size.width);
         this._heightInput.placeholder = size.height;
 
         if (this._model.scale() !== this._cachedScale) {
             this._scaleItem.setText(WebInspector.UIString("%.0f%%", this._model.scale() * 100));
             this._scaleItem.setState(this._model.scale() === 1 ? "off" : "on");
@@ skipping 23 matching lines @@
 
         if (this._model.device() !== this._cachedModelDevice) {
             var device = this._model.device();
             this._modeButton.setVisible(!!device);
             if (device) {
                 var modeCount = device ? device.modes.length : 0;
                 this._modeButton.setEnabled(modeCount >= 2);
                 this._modeButton.setTitle(modeCount === 2 ? WebInspector.UIString("Rotate") : WebInspector.UIString("Screen options"));
             }
             this._cachedModelDevice = device;
-            updatePersistence = true;
         }
 
-        if (this._model.type() === WebInspector.DeviceModeModel.Type.Device) {
-            this._lastDevice = this._model.device();
+        if (this._model.type() === WebInspector.DeviceModeModel.Type.Device)
             this._lastMode.set(/** @type {!WebInspector.EmulatedDevice} */ (this._model.device()), /** @type {!WebInspector.EmulatedDevice.Mode} */ (this._model.mode()));
-        }
 
-        if (this._model.mode() !== this._cachedModelMode) {
+        if (this._model.mode() !== this._cachedModelMode && this._model.type() !== WebInspector.DeviceModeModel.Type.None) {
             this._cachedModelMode = this._model.mode();
-            updatePersistence = true;
-        }
-
-        if (updatePersistence && this._cachedModelType !== WebInspector.DeviceModeModel.Type.None) {
             var value = this._persistenceSetting.get();
-            value.type = this._cachedModelType;
-            if (this._cachedModelDevice) {
-                value.device = this._cachedModelDevice.title;
-                value.orientation = this._cachedModelMode ? this._cachedModelMode.orientation : "";
-                value.mode = this._cachedModelMode ? this._cachedModelMode.title : "";
+            if (this._model.device()) {
+                value.device = this._model.device().title;
+                value.orientation = this._model.mode() ? this._model.mode().orientation : "";
+                value.mode = this._model.mode() ? this._model.mode().title : "";
+            } else {
+                value.device = "";
+                value.orientation = "";
+                value.mode = "";
             }
             this._persistenceSetting.set(value);
         }
     },
 
     restore: function()
     {
-        if (this._restored)
-            return;
-        this._restored = true;
-
         for (var device of this._allDevices()) {
             if (device.title === this._persistenceSetting.get().device) {
-                this._lastDevice = device;
                 for (var mode of device.modes) {
-                    if (mode.orientation === this._persistenceSetting.get().orientation && mode.title === this._persistenceSetting.get().mode)
+                    if (mode.orientation === this._persistenceSetting.get().orientation && mode.title === this._persistenceSetting.get().mode) {
                         this._lastMode.set(device, mode);
+                        this._emulateDevice(device);
+                        return;
+                    }
                 }
             }
         }
 
-        this._applyType(/** @type {!WebInspector.DeviceModeModel.Type} */ (this._persistenceSetting.get().type));
-    },
-
-    toggleDeviceMode: function()
-    {
-        this._applyType(this._model.type() === WebInspector.DeviceModeModel.Type.None ? (this._previousModelType || WebInspector.DeviceModeModel.Type.Responsive) : WebInspector.DeviceModeModel.Type.None);
-    },
-
-    /**
-     * @param {!WebInspector.DeviceModeModel.Type} type
-     */
-    _applyType: function(type)
-    {
-        if (type === WebInspector.DeviceModeModel.Type.Responsive)
-            this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
-        else if (type === WebInspector.DeviceModeModel.Type.Device)
-            this._emulateDevice(this._lastDevice || this._allDevices()[0] || WebInspector.emulatedDevicesList.standard()[0]);
-        else
-            this._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);
+        this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
     }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {boolean} horizontal
  * @param {function(number)} applyCallback
  */
 WebInspector.DeviceModeView.Ruler = function(horizontal, applyCallback)
@@ skipping 46 matching lines @@
             this._renderedScale = this._scale;
             this._renderedZoomFactor = zoomFactor;
         }
 
         var dipSize = size * zoomFactor / this._scale;
         var count = Math.ceil(dipSize / 5);
         var step = 1;
         if (this._scale < 0.8)
             step = 2;
         if (this._scale < 0.6)
-            step = 5;
-        if (this._scale < 0.5)
-            step = 20;
+            step = 4;
+        if (this._scale < 0.4)
+            step = 8;
 
         for (var i = count; i < this._count; i++) {
             if (!(i % step))
                 this._contentElement.lastChild.remove();
         }
 
         for (var i = this._count; i < count; i++) {
             if (i % step)
                 continue;
             var marker = this._contentElement.createChild("div", "device-mode-ruler-marker");
@@ skipping 93 matching lines @@
 
         if (this._showDeviceModeSetting.get()) {
             this._deviceModeView.show(this.element);
             this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();
             this._inspectedPagePlaceholder.show(this._deviceModeView.element);
         } else {
             this._deviceModeView.detach();
             this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
             this._inspectedPagePlaceholder.show(this.element);
         }
-        this._deviceModeView.toggleDeviceMode();
     },
 
     __proto__: WebInspector.VBox.prototype
 }