[DevTools] More 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()
 {
     WebInspector.VBox.call(this, true);
     this.setMinimumSize(150, 150);
     this.element.classList.add("device-mode-view");
     this.registerRequiredCSS("emulation/deviceModeView.css");
     WebInspector.Tooltip.addNativeOverrideContainer(this.contentElement);
 
     this._model = new WebInspector.DeviceModeModel(this._updateUI.bind(this));
     this._mediaInspector = new WebInspector.MediaQueryInspector(this._model.widthSetting());
     // TODO(dgozman): remove CountUpdated event.
     this._showMediaInspectorSetting = WebInspector.settings.createSetting("showMediaQueryInspector", false);
     this._showMediaInspectorSetting.addChangeListener(this._updateUI, this);
     this._showRulersSetting = WebInspector.settings.createSetting("emulation.showRulers", false);
     this._showRulersSetting.addChangeListener(this._updateUI, this);
 
     this._topRuler = new WebInspector.DeviceModeView.Ruler(true, this._model.widthSetting().set.bind(this._model.widthSetting()));
     this._topRuler.element.classList.add("device-mode-ruler-top");
     this._leftRuler = new WebInspector.DeviceModeView.Ruler(false, this._model.heightSetting().set.bind(this._model.heightSetting()));
     this._leftRuler.element.classList.add("device-mode-ruler-left");
     this._createUI();
-    WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._updateUI, this);
+    WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._zoomChanged, this);
 };
 
 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._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._heightResizerElement.title = WebInspector.UIString("Double-click for full height");
 
         this._pageArea = this._screenArea.createChild("div", "device-mode-page-area");
         this._pageArea.createChild("content");
     },
 
     toggleDeviceMode: function()
     {
         this._toolbar.toggleDeviceMode();
     },
 
@@ skipping 178 matching lines @@
      */
     _onScreenImageLoaded: function(success)
     {
         this._screenImage.classList.toggle("hidden", !success);
     },
 
     _contentAreaResized: function()
     {
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var rect = this._contentArea.getBoundingClientRect();
-        var handleWidth = this._widthResizerElement.offsetWidth;
-        var handleHeight = this._heightResizerElement.offsetHeight;
+        this._handleWidth = this._handleWidth || this._widthResizerElement.offsetWidth;
+        this._handleHeight = this._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));
+        var preferredSize = new Size(Math.max((rect.width - 2 * this._handleWidth) * zoomFactor, 1), Math.max((rect.height - this._handleHeight) * zoomFactor, 1));
         this._model.setAvailableSize(availableSize, preferredSize);
     },
 
+    _zoomChanged: function()
+    {
+        delete this._handleWidth;
+        delete this._handleHeight;
+        if (this.isShowing())
+            this._contentAreaResized();
+    },
+
     /**
      * @override
      */
     onResize: function()
     {
         if (this.isShowing())
             this._contentAreaResized();
     },
 
     /**
@@ skipping 55 matching lines @@
 
     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._uaItem = new WebInspector.ToolbarLabel();
+    this._uaItem.setVisible(false);
+    this._uaItem.setTitle(WebInspector.UIString("User agent type"));
+    rightToolbar.appendToolbarItem(this._uaItem);
+    this._deviceScaleItem = new WebInspector.ToolbarLabel();
+    this._deviceScaleItem.setVisible(false);
+    this._deviceScaleItem.setTitle(WebInspector.UIString("Device pixel ratio"));
+    rightToolbar.appendToolbarItem(this._deviceScaleItem);
     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 (leave empty to fit)");
+        heightInput.title = WebInspector.UIString("Height (leave empty for full)");
         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
@@ skipping 39 matching lines @@
 
     /**
      * @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.setDimmed(true);
         scaleItem.addDropDownArrow();
         toolbar.appendToolbarItem(scaleItem);
         this._scaleItems.push(scaleItem);
     },
 
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _appendScaleMenuItems: function(contextMenu)
     {
         var scaleSetting = this._model.scaleSetting();
         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);
+        contextMenu.appendItem(WebInspector.UIString("Fit to window (%.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("Mobile (default)"), 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), uaValue === value, uaDisabled);
@@ skipping 282 matching lines @@
             this._heightInput.placeholder = size.height;
             this._cachedSize = size;
         }
 
         if (this._model.scale() !== this._cachedScale) {
             for (var item of this._scaleItems)
                 item.setText(WebInspector.UIString("%.0f%%", this._model.scale() * 100));
             this._cachedScale = this._model.scale();
         }
 
+        var offscreen = this._model.screenRect().width > this._model.visiblePageRect().width || this._model.screenRect().height > this._model.visiblePageRect().height;
+        if (offscreen !== this._cachedOffscreen) {
+            for (var item of this._scaleItems)
+                item.setDimmed(!offscreen);
+            this._cachedOffscreen = offscreen;
+        }
+
+        var deviceScale = this._model.deviceScaleFactorSetting().get();
+        if (deviceScale !== this._cachedDeviceScale) {
+            this._deviceScaleItem.setVisible(!!deviceScale);
+            this._deviceScaleItem.setText(WebInspector.UIString("DPR: %.1f", deviceScale));
+            this._cachedDeviceScale = deviceScale;
+        }
+
+        var uaType = this._model.type() === WebInspector.DeviceModeModel.Type.Responsive ? this._model.uaSetting().get() : WebInspector.DeviceModeModel.UA.Mobile;
+        if (uaType !== this._cachedUaType) {
+            this._uaItem.setVisible(uaType !== WebInspector.DeviceModeModel.UA.Mobile);
+            this._uaItem.setText(uaType === WebInspector.DeviceModeModel.UA.Desktop ? WebInspector.UIString("Desktop") : WebInspector.UIString("Touch"));
+            this._cachedUaType = uaType;
+        }
+
         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"));
             }
             this._updateDeviceSelectedIndex();
 
@@ skipping 244 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
 }