[DevTools] Device Mode polish.

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 21 matching lines @@
 
 WebInspector.DeviceModeView.prototype = {
     _createUI: function()
     {
         this._toolbar = new WebInspector.DeviceModeView.Toolbar(this._model, this._showMediaInspectorSetting, this._showRulersSetting);
         this.contentElement.appendChild(this._toolbar.element());
 
         this._contentClip = this.contentElement.createChild("div", "device-mode-content-clip vbox");
         this._mediaInspectorContainer = this._contentClip.createChild("div", "device-mode-media-container");
         this._contentArea = this._contentClip.createChild("div", "device-mode-content-area");
-        this._deviceBlueprints = this._contentArea.createChild("div", "fill");
-        WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, this._updateBlueprints, this);
 
         this._screenArea = this._contentArea.createChild("div", "device-mode-screen-area");
         this._screenImage = this._screenArea.createChild("img", "device-mode-screen-image hidden");
         this._screenImage.addEventListener("load", this._onScreenImageLoaded.bind(this, true), false);
         this._screenImage.addEventListener("error", this._onScreenImageLoaded.bind(this, false), false);
 
         this._cornerResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-corner-resizer");
         this._cornerResizerElement.createChild("div", "");
         this._createResizer(this._cornerResizerElement, true, true);
 
         this._widthResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-width-resizer");
         this._widthResizerElement.createChild("div", "");
         this._createResizer(this._widthResizerElement, true, false);
 
         this._heightResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-height-resizer");
         this._heightResizerElement.createChild("div", "");
         this._createResizer(this._heightResizerElement, false, true);
+        this._heightResizerElement.addEventListener("dblclick", this._model.heightSetting().set.bind(this._model.heightSetting(), 0), false);
 
         this._pageArea = this._screenArea.createChild("div", "device-mode-page-area");
         this._pageArea.createChild("content");
     },
 
     toggleDeviceMode: function()
     {
         this._toolbar.toggleDeviceMode();
     },
 
@@ skipping 15 matching lines @@
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onResizeStart: function(event)
     {
         this._slowPositionStart = null;
         /** @type {!Size} */
         this._resizeStart = this._model.screenRect().size();
-        this._model.suspendScaleChanges();
     },
 
     /**
      * @param {boolean} width
      * @param {boolean} height
      * @param {!WebInspector.Event} event
      */
     _onResizeUpdate: function(width, height, event)
     {
         if (event.data.shiftKey !== !!this._slowPositionStart)
@@ skipping 22 matching lines @@
             this._model.heightSetting().set(newHeight);
         }
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onResizeEnd: function(event)
     {
         delete this._resizeStart;
-        this._model.resumeScaleChanges();
         WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.ResizedViewInResponsiveMode);
     },
 
     /**
      * @param {number} width
      * @param {number} height
      */
     _resizeTo: function(width, height)
     {
         this._model.widthSetting().set(width);
         this._model.heightSetting().set(height);
     },
 
     _updateUI: function()
     {
         if (!this.isShowing())
             return;
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var callDoResize = false;
         var showRulers = this._showRulersSetting.get() && this._model.type() !== WebInspector.DeviceModeModel.Type.None;
         var contentAreaResized = false;
         var updateRulers = false;
 
-        if (this._cachedModelType !== this._model.type() || this._cachedModelScale !== this._model.scale()) {
-            this._updateBlueprints();
-            this._cachedModelType = this._model.type();
-            this._cachedModelScale = this._model.scale();
-        }
-
         var cssScreenRect = this._model.screenRect().scale(1 / zoomFactor);
         if (!cssScreenRect.isEqual(this._cachedCssScreenRect)) {
             this._screenArea.style.left = cssScreenRect.left + "px";
             this._screenArea.style.top = cssScreenRect.top + "px";
             this._screenArea.style.width = cssScreenRect.width + "px";
             this._screenArea.style.height = cssScreenRect.height + "px";
             this._leftRuler.element.style.left = cssScreenRect.left + "px";
             updateRulers = true;
             callDoResize = true;
             this._cachedCssScreenRect = cssScreenRect;
@@ skipping 30 matching lines @@
 
         if (showRulers !== this._cachedShowRulers) {
             this._contentArea.classList.toggle("device-mode-rulers-visible", showRulers);
             if (showRulers) {
                 this._topRuler.show(this._contentClip, this._contentArea);
                 this._leftRuler.show(this._contentArea);
             } else {
                 this._topRuler.detach();
                 this._leftRuler.detach();
             }
+            contentAreaResized = true;
             callDoResize = true;
             this._cachedShowRulers = showRulers;
         }
 
         if (this._model.scale() !== this._cachedScale) {
             updateRulers = true;
             this._cachedScale = this._model.scale();
         }
 
         this._toolbar.update();
         this._loadScreenImage(this._model.screenImage());
         this._mediaInspector.setAxisTransform(-cssScreenRect.left * zoomFactor / this._model.scale(), this._model.scale());
         if (callDoResize)
             this.doResize();
         if (updateRulers) {
             this._topRuler.render(this._cachedCssScreenRect ? this._cachedCssScreenRect.left : 0, this._model.scale());
             this._leftRuler.render(0, this._model.scale());
         }
         if (contentAreaResized)
             this._contentAreaResized();
     },
 
-    _updateBlueprints: function()
-    {
-        this._deviceBlueprints.removeChildren();
-        if (this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive)
-            return;
-        var devices = WebInspector.emulatedDevicesList.standard();
-        devices.sort((device1, device2) => device2.vertical.width * device2.vertical.height - device1.vertical.width * device1.vertical.height);
-        var scale = this._model.scale();
-        for (var device of devices) {
-            if (!device.show())
-                continue;
-            var blueprintContainer = this._deviceBlueprints.createChild("div", "device-mode-blueprint-container fill");
-            var blueprint = blueprintContainer.createChild("div", "device-mode-blueprint");
-            blueprint.style.width = device.vertical.width * scale + "px";
-            blueprint.style.height = device.vertical.height * scale + "px";
-            var clickable = blueprint.createChild("div", "device-mode-blueprint-border");
-            clickable.createChild("span").textContent = device.title;
-            clickable.addEventListener("dblclick", this._resizeTo.bind(this, device.vertical.width, device.vertical.height), false);
-            blueprint.createChild("div", "device-mode-blueprint-inside");
-        }
-    },
-
     /**
      * @param {string} srcset
      */
     _loadScreenImage: function(srcset)
     {
         if (this._screenImage.getAttribute("srcset") === srcset)
             return;
         this._screenImage.setAttribute("srcset", srcset);
         if (!srcset)
             this._screenImage.classList.toggle("hidden", true);
     },
 
     /**
      * @param {boolean} success
      */
     _onScreenImageLoaded: function(success)
     {
         this._screenImage.classList.toggle("hidden", !success);
     },
 
     _contentAreaResized: function()
     {
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var rect = this._contentArea.getBoundingClientRect();
-        this._model.setAvailableSize(new Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1)));
+        var handleWidth = this._widthResizerElement.offsetWidth;
+        var handleHeight = this._heightResizerElement.offsetHeight;
+        var availableSize = new Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
+        var preferredSize = new Size(Math.max((rect.width - 2 * handleWidth) * zoomFactor, 1), Math.max((rect.height - handleHeight) * zoomFactor, 1));
+        this._model.setAvailableSize(availableSize, preferredSize);
     },
 
     /**
      * @override
      */
     onResize: function()
     {
         if (this.isShowing())
             this._contentAreaResized();
     },
@@ skipping 28 matching lines @@
 {
     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;
     /** @type {!Array<!WebInspector.ToolbarLabel>} */
     this._appliedSizeItems = [];
+    /** @type {!Array<!WebInspector.ToolbarMenuButton>} */
+    this._scaleItems = [];
     /** @type {?Element} */
     this._visibleToolbar = null;
 
     this._element = createElementWithClass("div", "device-mode-toolbar");
 
     var leftContainer = this._element.createChild("div", "device-mode-toolbar-left");
     var leftToolbar = new WebInspector.Toolbar("", leftContainer);
     this._noneItem = new WebInspector.ToolbarToggle(WebInspector.UIString("Full"), "enter-fullscreen-toolbar-item");
     leftToolbar.appendToolbarItem(this._noneItem);
     this._noneItem.addEventListener("click", this._noneButtonClick, this);
     this._responsiveItem = new WebInspector.ToolbarToggle(WebInspector.UIString("Responsive"), "responsive-toolbar-item");
     leftToolbar.appendToolbarItem(this._responsiveItem);
     this._responsiveItem.addEventListener("click", this._responsiveButtonClick, this);
     this._deviceItem = new WebInspector.ToolbarToggle(WebInspector.UIString("Device"), "phone-toolbar-item");
     leftToolbar.appendToolbarItem(this._deviceItem);
     this._deviceItem.addEventListener("click", this._deviceButtonClick, this);
     leftToolbar.appendSeparator();
 
     var middle = this._element.createChild("div", "device-mode-toolbar-middle-container");
     this._noneToolbar = this._wrapMiddleToolbar(middle, this._createNoneToolbar());
     this._responsiveToolbar = this._wrapMiddleToolbar(middle, this._createResponsiveToolbar());
     this._deviceToolbar = this._wrapMiddleToolbar(middle, this._createDeviceToolbar());
 
     var rightContainer = this._element.createChild("div", "device-mode-toolbar-right");
     rightContainer.createChild("div", "device-mode-toolbar-spacer");
     var rightToolbar = new WebInspector.Toolbar("", rightContainer);
     rightToolbar.makeWrappable(true);
-    this._scaleItem = new WebInspector.ToolbarMenuButton(this._appendScaleMenuItems.bind(this));
-    this._scaleItem.setTitle(WebInspector.UIString("Click to change zoom"));
-    this._scaleItem.setGlyph("");
-    this._scaleItem.setBold(false);
-    rightToolbar.appendToolbarItem(this._scaleItem);
     rightToolbar.appendSeparator();
     var moreOptionsButton = new WebInspector.ToolbarMenuButton(this._appendMenuItems.bind(this));
     moreOptionsButton.setTitle(WebInspector.UIString("More options"));
     rightToolbar.appendToolbarItem(moreOptionsButton);
 
     this._persistenceSetting = WebInspector.settings.createSetting("emulation.deviceModeViewPersistence", {type: WebInspector.DeviceModeModel.Type.None, device: "", orientation: "", mode: ""});
     this._restored = false;
 }
 
 WebInspector.DeviceModeView.Toolbar.prototype = {
@@ skipping 35 matching lines @@
         widthInput.title = WebInspector.UIString("Width");
         WebInspector.SettingsUI.bindSettingInputField(widthInput, this._model.widthSetting(), true, WebInspector.DeviceModeModel.deviceSizeValidator, true);
         toolbar.appendToolbarItem(this._wrapToolbarItem(widthInput));
 
         var xElement = createElementWithClass("div", "device-mode-x");
         xElement.textContent = "\u00D7";
         toolbar.appendToolbarItem(this._wrapToolbarItem(xElement));
 
         var heightInput = createElementWithClass("input", "device-mode-size-input");
         heightInput.maxLength = 5;
-        heightInput.title = WebInspector.UIString("Height");
-        WebInspector.SettingsUI.bindSettingInputField(heightInput, this._model.heightSetting(), true, WebInspector.DeviceModeModel.deviceSizeValidator, true);
+        heightInput.title = WebInspector.UIString("Height (leave empty to fit)");
+        WebInspector.SettingsUI.bindSettingInputField(heightInput, this._model.heightSetting(), true, validateHeight, true, true);
         toolbar.appendToolbarItem(this._wrapToolbarItem(heightInput));
+        this._heightInput = heightInput;
 
+        toolbar.appendSeparator();
+        this._appendScaleItem(toolbar);
         return toolbar;
+
+        /**
+         * @param {string} value
+         * @return {string}
+         */
+        function validateHeight(value)
+        {
+            return !value ? "" : WebInspector.DeviceModeModel.deviceSizeValidator(value);
+        }
     },
 
     /**
      * @return {!WebInspector.Toolbar}
      */
     _createDeviceToolbar: function()
     {
         var toolbar = new WebInspector.Toolbar("");
 
         this._deviceSelect = this._createDeviceSelect();
         toolbar.appendToolbarItem(this._wrapToolbarItem(this._deviceSelect));
 
         this._modeButton = new WebInspector.ToolbarButton("", "rotate-screen-toolbar-item");
         this._modeButton.addEventListener("click", this._modeMenuClicked, this);
         toolbar.appendToolbarItem(this._modeButton);
 
         toolbar.appendSeparator();
         this._appendAppliedSizeItems(toolbar);
+        toolbar.appendSeparator();
+        this._appendScaleItem(toolbar);
 
         return toolbar;
     },
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _appendAppliedSizeItems: function(toolbar)
     {
         var item = new WebInspector.ToolbarLabel();
         this._appliedSizeItems.push(item);
         toolbar.appendToolbarItem(item);
     },
 
     /**
+     * @param {!WebInspector.Toolbar} toolbar
+     */
+    _appendScaleItem: function(toolbar)
+    {
+        var scaleItem = new WebInspector.ToolbarMenuButton(this._appendScaleMenuItems.bind(this));
+        scaleItem.setTitle(WebInspector.UIString("Click to change zoom"));
+        scaleItem.setGlyph("");
+        scaleItem.setBold(false);
+        scaleItem.addDropDownArrow();
+        toolbar.appendToolbarItem(scaleItem);
+        this._scaleItems.push(scaleItem);
+    },
+
+    /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _appendScaleMenuItems: function(contextMenu)
     {
         var scaleSetting = this._model.scaleSetting();
-        appendScaleItem(WebInspector.UIString("Fit"), 0);
-        contextMenu.appendSeparator();
         appendScaleItem(WebInspector.UIString("25%"), 0.25);
         appendScaleItem(WebInspector.UIString("50%"), 0.5);
         appendScaleItem(WebInspector.UIString("100%"), 1);
         appendScaleItem(WebInspector.UIString("150%"), 1.5);
         appendScaleItem(WebInspector.UIString("200%"), 2);
+        contextMenu.appendSeparator();
+        contextMenu.appendItem(WebInspector.UIString("Fit (%.0f%%)", this._model.fitScale() * 100), scaleSetting.set.bind(scaleSetting, this._model.fitScale()), false);
 
         /**
          * @param {string} title
          * @param {number} value
          */
         function appendScaleItem(title, value)
         {
             contextMenu.appendCheckboxItem(title, scaleSetting.set.bind(scaleSetting, value), scaleSetting.get() === value, false);
         }
     },
 
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _appendMenuItems: function(contextMenu)
     {
         var uaDisabled = this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive;
         var uaSetting = this._model.uaSetting();
         var uaSubmenu = contextMenu.appendSubMenuItem(WebInspector.UIString("User agent type"), false);
+        var uaValue = this._model.uaSetting().get();
+        if (this._model.type() === WebInspector.DeviceModeModel.Type.None)
+            uaValue = WebInspector.DeviceModeModel.UA.Desktop;
+        if (this._model.type() === WebInspector.DeviceModeModel.Type.Device)
+            uaValue = this._model.device().mobile() ? WebInspector.DeviceModeModel.UA.Mobile : this._model.device().touch() ? WebInspector.DeviceModeModel.UA.DesktopTouch : WebInspector.DeviceModeModel.UA.Desktop;
         appendUAItem(WebInspector.UIString("Mobile"), WebInspector.DeviceModeModel.UA.Mobile);
         appendUAItem(WebInspector.UIString("Desktop"), WebInspector.DeviceModeModel.UA.Desktop);
         appendUAItem(WebInspector.UIString("Desktop with touch"), WebInspector.DeviceModeModel.UA.DesktopTouch);
 
         /**
          * @param {string} title
          * @param {!WebInspector.DeviceModeModel.UA} value
          */
         function appendUAItem(title, value)
         {
-            uaSubmenu.appendCheckboxItem(title, uaSetting.set.bind(uaSetting, value), uaSetting.get() === value, uaDisabled);
+            uaSubmenu.appendCheckboxItem(title, uaSetting.set.bind(uaSetting, value), uaValue === value, uaDisabled);
         }
 
         var deviceScaleFactorDisabled = this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive;
         var deviceScaleFactorSubmenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Device pixel ratio"), false);
         var deviceScaleFactorSetting = this._model.deviceScaleFactorSetting();
+        var deviceScaleFactorValue = deviceScaleFactorDisabled ? 0 : deviceScaleFactorSetting.get();
         appendDeviceScaleFactorItem(WebInspector.UIString("Default: %f", this._model.defaultDeviceScaleFactor()), 0);
         deviceScaleFactorSubmenu.appendSeparator();
         appendDeviceScaleFactorItem(WebInspector.UIString("1"), 1);
         appendDeviceScaleFactorItem(WebInspector.UIString("2"), 2);
         appendDeviceScaleFactorItem(WebInspector.UIString("3"), 3);
 
         /**
          * @param {string} title
          * @param {number} value
          */
         function appendDeviceScaleFactorItem(title, value)
         {
-            deviceScaleFactorSubmenu.appendCheckboxItem(title, deviceScaleFactorSetting.set.bind(deviceScaleFactorSetting, value), deviceScaleFactorSetting.get() === value, deviceScaleFactorDisabled);
+            deviceScaleFactorSubmenu.appendCheckboxItem(title, deviceScaleFactorSetting.set.bind(deviceScaleFactorSetting, value), deviceScaleFactorValue === value, deviceScaleFactorDisabled);
         }
 
         contextMenu.appendItem(WebInspector.UIString("Reset to defaults"), this._model.reset.bind(this._model), this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive);
         contextMenu.appendSeparator();
 
         contextMenu.appendCheckboxItem(WebInspector.UIString("Show media queries"), this._toggleMediaInspector.bind(this), this._showMediaInspectorSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         contextMenu.appendCheckboxItem(WebInspector.UIString("Show rulers"), this._toggleRulers.bind(this), this._showRulersSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         contextMenu.appendItem(WebInspector.UIString("Configure network\u2026"), this._openNetworkConfig.bind(this), false);
     },
 
@@ skipping 215 matching lines @@
     },
 
     update: function()
     {
         var updatePersistence = false;
 
         if (this._model.type() !== this._cachedModelType) {
             this._noneItem.setToggled(this._model.type() === WebInspector.DeviceModeModel.Type.None);
             this._responsiveItem.setToggled(this._model.type() === WebInspector.DeviceModeModel.Type.Responsive);
             this._deviceItem.setToggled(this._model.type() === WebInspector.DeviceModeModel.Type.Device);
-            this._scaleItem.setVisible(this._model.type() !== WebInspector.DeviceModeModel.Type.None);
 
             var toolbar = null;
             if (this._model.type() === WebInspector.DeviceModeModel.Type.None)
                 toolbar = this._noneToolbar;
             else if (this._model.type() === WebInspector.DeviceModeModel.Type.Responsive)
                 toolbar = this._responsiveToolbar;
             else if (this._model.type() === WebInspector.DeviceModeModel.Type.Device)
                 toolbar = this._deviceToolbar;
 
             if (this._visibleToolbar !== toolbar) {
                 if (this._visibleToolbar)
                     this._visibleToolbar.classList.add("hidden");
                 if (toolbar) {
                     toolbar.classList.remove("hidden");
                     toolbar.animate([{opacity: "0"}, {opacity: "1"}], {duration: 100});
                 }
                 this._visibleToolbar = toolbar;
             }
 
             this._previousModelType = this._cachedModelType;
             this._cachedModelType = this._model.type();
             updatePersistence = true;
         }
 
-        if (this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive) {
-            var size = this._model.appliedDeviceSize();
-            if (!size.isEqual(this._cachedSize)) {
-                for (var item of this._appliedSizeItems)
-                    item.setText(WebInspector.UIString("%d \u00D7 %d", size.width, size.height));
-                this._cachedSize = size;
-            }
+        var size = this._model.appliedDeviceSize();
+        if (!size.isEqual(this._cachedSize)) {
+            for (var item of this._appliedSizeItems)
+                item.setText(WebInspector.UIString("%d \u00D7 %d", size.width, size.height));
+            this._heightInput.placeholder = size.height;
+            this._cachedSize = size;
         }
 
         if (this._model.scale() !== this._cachedScale) {
-            this._scaleItem.setText(WebInspector.UIString("Zoom: %.0f%%", this._model.scale() * 100));
-            this._scaleItem.setDimmed(this._model.scale() === 1);
+            for (var item of this._scaleItems)
+                item.setText(WebInspector.UIString("%.0f%%", this._model.scale() * 100));
             this._cachedScale = this._model.scale();
         }
 
         if (this._model.device() !== this._cachedModelDevice) {
             var device = this._model.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"));
@@ skipping 247 matching lines @@
         } else {
             this._deviceModeView.detach();
             this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
             this._inspectedPagePlaceholder.show(this.element);
             this._deviceModeView._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);
         }
     },
 
     __proto__: WebInspector.VBox.prototype
 }