[DevTools] Device Mode toolbar updates.

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.appliedDeviceSize().width, this._model.setWidth.bind(this._model));
     // 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.setWidth.bind(this._model));
+    this._topRuler = new WebInspector.DeviceModeView.Ruler(true, this._model.setWidthAndScaleToFit.bind(this._model));
     this._topRuler.element.classList.add("device-mode-ruler-top");
-    this._leftRuler = new WebInspector.DeviceModeView.Ruler(false, this._model.setHeight.bind(this._model));
+    this._leftRuler = new WebInspector.DeviceModeView.Ruler(false, this._model.setHeightAndScaleToFit.bind(this._model));
     this._leftRuler.element.classList.add("device-mode-ruler-left");
     this._createUI();
     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());
@@ skipping 180 matching lines @@
             if (mediaInspectorVisible)
                 this._mediaInspector.show(this._mediaInspectorContainer);
             else
                 this._mediaInspector.detach();
             contentAreaResized = true;
             callDoResize = true;
             this._cachedMediaInspectorVisible = mediaInspectorVisible;
         }
 
         if (showRulers !== this._cachedShowRulers) {
-            this._contentArea.classList.toggle("device-mode-rulers-visible", showRulers);
+            this._contentClip.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;
+            callDoResize = true;
             for (var block of this._presetBlocks)
                 block.style.width = block.__width * this._model.scale() + "px";
             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();
-
-        if (this._model.type() !== this._cachedModelType) {
-            this._cachedModelType = this._model.type();
-            this._contentArea.classList.toggle("device-mode-type-none", this._cachedModelType === WebInspector.DeviceModeModel.Type.None);
-            this._contentArea.classList.toggle("device-mode-type-responsive", this._cachedModelType === WebInspector.DeviceModeModel.Type.Responsive);
-            this._contentArea.classList.toggle("device-mode-type-device", this._cachedModelType === WebInspector.DeviceModeModel.Type.Device);
-            this._responsivePresetsContainer.classList.toggle("hidden", this._cachedModelType === WebInspector.DeviceModeModel.Type.None);
-        }
     },
 
     /**
      * @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._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 * this._handleWidth) * zoomFactor, 1), Math.max((rect.height - this._handleHeight) * zoomFactor, 1));
         this._model.setAvailableSize(availableSize, preferredSize);
     },
 
+    _measureHandles: function()
+    {
+        var hidden = this._widthResizerElement.classList.contains("hidden");
+        this._widthResizerElement.classList.toggle("hidden", false);
+        this._heightResizerElement.classList.toggle("hidden", false);
+        this._handleWidth = this._widthResizerElement.offsetWidth;
+        this._handleHeight = this._heightResizerElement.offsetHeight;
+        this._widthResizerElement.classList.toggle("hidden", hidden);
+        this._heightResizerElement.classList.toggle("hidden", hidden);
+    },
+
     _zoomChanged: function()
     {
         delete this._handleWidth;
         delete this._handleHeight;
-        if (this.isShowing())
+        if (this.isShowing()) {
+            this._measureHandles();
             this._contentAreaResized();
+        }
     },
 
     /**
      * @override
      */
     onResize: function()
     {
         if (this.isShowing())
             this._contentAreaResized();
     },
 
     /**
      * @override
      */
     wasShown: function()
     {
+        this._measureHandles();
         this._mediaInspector.setEnabled(true);
         this._toolbar.restore();
     },
 
     /**
      * @override
      */
     willHide: function()
     {
         this._mediaInspector.setEnabled(false);
@@ skipping 10 matching lines @@
  */
 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;
-    /** @type {!Array<!WebInspector.ToolbarButton>} */
-    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 leftContainer = this._element.createChild("div", "device-mode-toolbar-spacer");
+    leftContainer.createChild("div", "device-mode-toolbar-spacer");
     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();
+    leftToolbar.makeWrappable();
+    this._fillLeftToolbar(leftToolbar);
 
-    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 mainToolbar = new WebInspector.Toolbar("", this._element);
+    mainToolbar.makeWrappable();
+    this._fillMainToolbar(mainToolbar);
 
-    var rightContainer = this._element.createChild("div", "device-mode-toolbar-right");
+    var rightContainer = this._element.createChild("div", "device-mode-toolbar-spacer");
+    var rightToolbar = new WebInspector.Toolbar("", rightContainer);
+    this._fillRightToolbar(rightToolbar);
+    var modeToolbar = new WebInspector.Toolbar("", rightContainer);
+    this._fillModeToolbar(modeToolbar);
     rightContainer.createChild("div", "device-mode-toolbar-spacer");
-    var rightToolbar = new WebInspector.Toolbar("", rightContainer);
-    rightToolbar.makeWrappable(true);
-    this._uaItem = new WebInspector.ToolbarText();
-    this._uaItem.setVisible(false);
-    this._uaItem.setTitle(WebInspector.UIString("User agent type"));
-    rightToolbar.appendToolbarItem(this._uaItem);
-    this._deviceScaleItem = new WebInspector.ToolbarText();
-    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);
+    var optionsToolbar = new WebInspector.Toolbar("", rightContainer);
+    optionsToolbar.makeWrappable(true);
+    this._fillOptionsToolbar(optionsToolbar);
 
-    this._persistenceSetting = WebInspector.settings.createSetting("emulation.deviceModeViewPersistence", {type: WebInspector.DeviceModeModel.Type.None, device: "", orientation: "", mode: ""});
+    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;
 }
 
 WebInspector.DeviceModeView.Toolbar.prototype = {
     /**
-     * @param {!Element} parent
      * @param {!WebInspector.Toolbar} toolbar
-     * @return {!Element}
      */
-    _wrapMiddleToolbar: function(parent, toolbar)
+    _fillLeftToolbar: function(toolbar)
     {
-        toolbar.makeWrappable();
-        var container = parent.createChild("div", "device-mode-toolbar-middle fill");
-        container.createChild("div", "device-mode-toolbar-spacer");
-        container.appendChild(toolbar.element);
-        container.createChild("div", "device-mode-toolbar-spacer");
-        container.classList.add("hidden");
-        return container;
+        this._deviceSelectItem = new WebInspector.ToolbarMenuButton(this._appendDeviceMenuItems.bind(this));
+        this._deviceSelectItem.setGlyph("");
+        this._deviceSelectItem.turnIntoSelect(95);
+        toolbar.appendToolbarItem(this._deviceSelectItem);
     },
 
     /**
-     * @return {!WebInspector.Toolbar}
+     * @param {!WebInspector.Toolbar} toolbar
      */
-    _createNoneToolbar: function()
+    _fillMainToolbar: function(toolbar)
     {
-        var toolbar = new WebInspector.Toolbar("");
-        this._appendAppliedSizeItems(toolbar);
-        return toolbar;
-    },
-
-    /**
-     * @return {!WebInspector.Toolbar}
-     */
-    _createResponsiveToolbar: function()
-    {
-        var toolbar = new WebInspector.Toolbar("");
-
         var widthInput = createElementWithClass("input", "device-mode-size-input");
-        widthInput.maxLength = 5;
+        widthInput.maxLength = 4;
+        widthInput.type = "text";
         widthInput.title = WebInspector.UIString("Width");
-        this._updateWidthInput = this._bindInput(widthInput, this._model.setWidth.bind(this._model), WebInspector.DeviceModeModel.deviceSizeValidator);
-        toolbar.appendToolbarItem(this._wrapToolbarItem(widthInput));
+        this._updateWidthInput = this._bindInput(widthInput, this._model.setWidthAndScaleToFit.bind(this._model), WebInspector.DeviceModeModel.deviceSizeValidator);
+        this._widthInput = widthInput;
+        this._widthItem = this._wrapToolbarItem(widthInput);
+        toolbar.appendToolbarItem(this._widthItem);
 
         var xElement = createElementWithClass("div", "device-mode-x");
         xElement.textContent = "\u00D7";
-        toolbar.appendToolbarItem(this._wrapToolbarItem(xElement));
+        this._xItem = this._wrapToolbarItem(xElement);
+        toolbar.appendToolbarItem(this._xItem);
 
         var heightInput = createElementWithClass("input", "device-mode-size-input");
-        heightInput.maxLength = 5;
+        heightInput.maxLength = 4;
+        heightInput.type = "text";
         heightInput.title = WebInspector.UIString("Height (leave empty for full)");
-        this._updateHeightInput = this._bindInput(heightInput, this._model.setHeight.bind(this._model), validateHeight);
-        toolbar.appendToolbarItem(this._wrapToolbarItem(heightInput));
+        this._updateHeightInput = this._bindInput(heightInput, this._model.setHeightAndScaleToFit.bind(this._model), validateHeight);
         this._heightInput = heightInput;
-
-        toolbar.appendSeparator();
-        this._appendScaleItem(toolbar);
-        return toolbar;
+        this._heightItem = this._wrapToolbarItem(heightInput);
+        toolbar.appendToolbarItem(this._heightItem);
 
         /**
          * @param {string} value
          * @return {string}
          */
         function validateHeight(value)
         {
             return !value ? "" : WebInspector.DeviceModeModel.deviceSizeValidator(value);
         }
     },
 
     /**
+     * @param {!WebInspector.Toolbar} toolbar
+     */
+    _fillRightToolbar: function(toolbar)
+    {
+        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)
+    {
+        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);
+    },
+
+
+    /**
      * @param {!Element} input
      * @param {function(number)} apply
      * @param {function(string):?string} validate
      * @return {function(number)}
      */
     _bindInput: function(input, apply, validate)
     {
         input.addEventListener("change", onChange, false);
         input.addEventListener("input", onInput, false);
         input.addEventListener("keydown", onKeyDown, false);
+        input.addEventListener("focus", input.select.bind(input), false);
 
         function onInput()
         {
             input.classList.toggle("error-input", !!validate(input.value));
         }
 
         function onChange()
         {
             var valid = !validate(input.value);
             input.classList.toggle("error-input", !valid);
@@ skipping 43 matching lines @@
             var valid = !validate(stringValue);
             input.classList.toggle("error-input", !valid);
             input.value = stringValue;
             input.setSelectionRange(stringValue.length, stringValue.length);
         }
 
         return setValue;
     },
 
     /**
-     * @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.ToolbarText("");
-        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("Zoom"));
-        scaleItem.setGlyph("");
-        scaleItem.addDropDownArrow();
-        toolbar.appendToolbarItem(scaleItem);
-        this._scaleItems.push(scaleItem);
-    },
-
-    /**
      * @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.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);
 
         /**
          * @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)
+    _appendOptionsMenuItems: 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 (default)"), WebInspector.DeviceModeModel.UA.Mobile);
@@ skipping 58 matching lines @@
      * @return {!WebInspector.ToolbarItem}
      */
     _wrapToolbarItem: function(element)
     {
         var container = createElement("div");
         var shadowRoot = WebInspector.createShadowRootWithCoreStyles(container, "emulation/deviceModeToolbar.css");
         shadowRoot.appendChild(element);
         return new WebInspector.ToolbarItem(container);
     },
 
-    _noneButtonClick: function()
-    {
-        this._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);
-    },
-
-    _responsiveButtonClick: function()
-    {
-        this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
-    },
-
-    _deviceButtonClick: function()
-    {
-        this._emulateDevice(this._lastDevice || this._deviceSelect.options[0].device || WebInspector.emulatedDevicesList.standard()[0]);
-    },
-
     /**
      * @param {!WebInspector.EmulatedDevice} device
      */
     _emulateDevice: function(device)
     {
         this._model.emulate(WebInspector.DeviceModeModel.Type.Device, device, this._lastMode.get(device) || device.modes[0]);
     },
 
+    _switchToResponsive: function()
+    {
+        this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
+    },
+
     /**
-     * @return {!Element}
+     * @param {!Array<!WebInspector.EmulatedDevice>} devices
+     * @return {!Array<!WebInspector.EmulatedDevice>}
      */
-    _createDeviceSelect: function()
+    _filterDevices: function(devices)
     {
-        var select = createElementWithClass("select", "device-mode-device-select");
-        WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.CustomDevicesUpdated, deviceListChanged, this);
-        WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, deviceListChanged, this);
-        populateDeviceList.call(this);
-        select.addEventListener("change", optionSelected.bind(this), false);
-        return select;
+        devices = devices.filter(function(d) { return d.show(); });
+        devices.sort(WebInspector.EmulatedDevice.deviceComparator);
+        return devices;
+    },
+
+    /**
+     * @return {!Array<!WebInspector.EmulatedDevice>}
+     */
+    _standardDevices: function()
+    {
+        return this._filterDevices(WebInspector.emulatedDevicesList.standard());
+    },
+
+    /**
+     * @return {!Array<!WebInspector.EmulatedDevice>}
+     */
+    _customDevices: function()
+    {
+        return this._filterDevices(WebInspector.emulatedDevicesList.custom());
+    },
+
+    /**
+     * @return {!Array<!WebInspector.EmulatedDevice>}
+     */
+    _allDevices: function()
+    {
+        return this._standardDevices().concat(this._customDevices());
+    },
+
+    /**
+     * @param {!WebInspector.ContextMenu} contextMenu
+     */
+    _appendDeviceMenuItems: function(contextMenu)
+    {
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Responsive"), this._switchToResponsive.bind(this), this._model.type() === WebInspector.DeviceModeModel.Type.Responsive, false);
+        appendGroup.call(this, this._standardDevices());
+        appendGroup.call(this, this._customDevices());
+        contextMenu.appendSeparator();
+        contextMenu.appendItem(WebInspector.UIString("Edit\u2026"), WebInspector.emulatedDevicesList.revealCustomSetting.bind(WebInspector.emulatedDevicesList), false);
 
         /**
-         * @this {WebInspector.DeviceModeView.Toolbar}
-         */
-        function populateDeviceList()
-        {
-            select.removeChildren();
-
-            var devicesGroup = select.createChild("optgroup");
-            devicesGroup.label = WebInspector.UIString("Devices");
-            addGroup.call(this, devicesGroup, WebInspector.emulatedDevicesList.standard());
-
-            var customGroup = select.createChild("optgroup");
-            customGroup.label = WebInspector.UIString("Custom");
-            addGroup.call(this, customGroup, WebInspector.emulatedDevicesList.custom());
-            var editCustomOption = new Option(WebInspector.UIString("Edit\u2026"), WebInspector.UIString("Edit\u2026"));
-            editCustomOption.edit = true;
-            customGroup.appendChild(editCustomOption);
-        }
-
-        /**
-         * @this {WebInspector.DeviceModeView.Toolbar}
-         */
-        function deviceListChanged()
-        {
-            populateDeviceList.call(this);
-            if (!this._updateDeviceSelectedIndex() && this._model.type() === WebInspector.DeviceModeModel.Type.Device) {
-                select.selectedIndex = 0;
-                if (!select.options[0].edit)
-                    this._emulateDevice(select.options[0].device);
-            }
-        }
-
-        /**
-         * @param {!Element} parent
          * @param {!Array<!WebInspector.EmulatedDevice>} devices
          * @this {WebInspector.DeviceModeView.Toolbar}
          */
-        function addGroup(parent, devices)
+        function appendGroup(devices)
         {
-            devices = devices.filter(function(d) { return d.show(); });
-            devices.sort(WebInspector.EmulatedDevice.deviceComparator);
+            if (!devices.length)
+                return;
+            contextMenu.appendSeparator();
             for (var device of devices)
-                addOption.call(this, parent, device);
-        }
-
-        /**
-         * @param {!Element} parent
-         * @param {!WebInspector.EmulatedDevice} device
-         * @this {WebInspector.DeviceModeView.Toolbar}
-         */
-        function addOption(parent, device)
-        {
-            var option = new Option(device.title, device.title);
-            option.device = device;
-            parent.appendChild(option);
-
-            if (device === this._model.device())
-                select.selectedIndex = Array.prototype.slice.call(select.options).indexOf(option);
-        }
-
-        /**
-         * @this {WebInspector.DeviceModeView.Toolbar}
-         */
-        function optionSelected()
-        {
-            var option = select.options[select.selectedIndex];
-            if (option.edit) {
-                WebInspector.emulatedDevicesList.revealCustomSetting();
-                this._updateDeviceSelectedIndex();
-            } else {
-                this._emulateDevice(option.device);
-            }
+                contextMenu.appendCheckboxItem(device.title, this._emulateDevice.bind(this, device), this._model.device() === device, false);
         }
     },
 
     /**
-     * @return {boolean}
+     * @this {WebInspector.DeviceModeView.Toolbar}
      */
-    _updateDeviceSelectedIndex: function()
+    _deviceListChanged: function()
     {
-        for (var i = 0; i < this._deviceSelect.options.length; ++i) {
-            if (this._deviceSelect.options[i].device === this._model.device()) {
-                this._deviceSelect.selectedIndex = i;
-                return true;
-            }
-        }
-        return false;
+        if (!this._model.device())
+            return;
+
+        var devices = this._allDevices();
+        if (devices.indexOf(this._model.device()) === -1)
+            this._emulateDevice(devices[0] || WebInspector.emulatedDevicesList.standard()[0]);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _modeMenuClicked: function(event)
     {
         var device = this._model.device();
         var model = this._model;
 
@@ skipping 51 matching lines @@
     element: function()
     {
         return this._element;
     },
 
     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);
-
-            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();
+            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.isFullHeight() ? 0 : size.height);
+        this._updateHeightInput(this._model.type() === WebInspector.DeviceModeModel.Type.Responsive && this._model.isFullHeight() ? 0 : size.height);
         this._updateWidthInput(size.width);
-        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;
-        }
+        this._heightInput.placeholder = size.height;
 
         if (this._model.scale() !== this._cachedScale) {
-            for (var item of this._scaleItems) {
-                item.setText(WebInspector.UIString("%.0f%%", this._model.scale() * 100));
-                item.setState(this._model.scale() === 1 ? "off" : "on");
-            }
+            this._scaleItem.setText(WebInspector.UIString("%.0f%%", this._model.scale() * 100));
+            this._scaleItem.setState(this._model.scale() === 1 ? "off" : "on");
             this._cachedScale = this._model.scale();
         }
 
         var deviceScale = this._model.deviceScaleFactorSetting().get();
         this._deviceScaleItem.setVisible(this._model.type() === WebInspector.DeviceModeModel.Type.Responsive && !!deviceScale);
         if (deviceScale !== this._cachedDeviceScale) {
             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;
         this._uaItem.setVisible(this._model.type() === WebInspector.DeviceModeModel.Type.Responsive && uaType !== WebInspector.DeviceModeModel.UA.Mobile);
         if (uaType !== this._cachedUaType) {
             this._uaItem.setText(uaType === WebInspector.DeviceModeModel.UA.Desktop ? WebInspector.UIString("Desktop") : WebInspector.UIString("Touch"));
             this._cachedUaType = uaType;
         }
 
+        var deviceItemTitle = WebInspector.UIString("None");
+        if (this._model.type() === WebInspector.DeviceModeModel.Type.Responsive)
+            deviceItemTitle = WebInspector.UIString("Responsive");
+        if (this._model.type() === WebInspector.DeviceModeModel.Type.Device)
+            deviceItemTitle = this._model.device().title;
+        this._deviceSelectItem.setText(deviceItemTitle);
+
         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._updateDeviceSelectedIndex();
-
             this._cachedModelDevice = device;
             updatePersistence = true;
         }
 
         if (this._model.type() === WebInspector.DeviceModeModel.Type.Device) {
             this._lastDevice = this._model.device();
             this._lastMode.set(/** @type {!WebInspector.EmulatedDevice} */ (this._model.device()), /** @type {!WebInspector.EmulatedDevice.Mode} */ (this._model.mode()));
         }
 
         if (this._model.mode() !== this._cachedModelMode) {
             this._cachedModelMode = this._model.mode();
             updatePersistence = true;
         }
 
-        if (updatePersistence) {
+        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 : "";
             }
             this._persistenceSetting.set(value);
         }
     },
 
     restore: function()
     {
         if (this._restored)
             return;
-
         this._restored = true;
 
-        for (var i = 0; i < this._deviceSelect.options.length; ++i) {
-            if (this._deviceSelect.options[i].device && this._deviceSelect.options[i].device.title === this._persistenceSetting.get().device)
-                this._lastDevice = this._deviceSelect.options[i].device;
-        }
-        if (this._lastDevice) {
-            for (var i = 0; i < this._lastDevice.modes.length; ++i) {
-                if (this._lastDevice.modes[i].orientation === this._persistenceSetting.get().orientation && this._lastDevice.modes[i].title === this._persistenceSetting.get().mode)
-                    this._lastMode.set(this._lastDevice, this._lastDevice.modes[i]);
+        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)
+                        this._lastMode.set(device, mode);
+                }
             }
-        } else {
-            this._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);
         }
 
         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._responsiveButtonClick();
+            this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
         else if (type === WebInspector.DeviceModeModel.Type.Device)
-            this._deviceButtonClick();
+            this._emulateDevice(this._lastDevice || this._allDevices()[0] || WebInspector.emulatedDevicesList.standard()[0]);
         else
-            this._noneButtonClick();
+            this._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);
     }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {boolean} horizontal
  * @param {function(number)} applyCallback
  */
 WebInspector.DeviceModeView.Ruler = function(horizontal, applyCallback)
@@ skipping 113 matching lines @@
      * @param {!WebInspector.Context} context
      * @param {string} actionId
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         if (actionId === "emulation.toggle-device-mode" && WebInspector.DeviceModeView._wrapperInstance) {
             WebInspector.DeviceModeView._wrapperInstance._toggleDeviceMode();
             return true;
         }
-        if (actionId === "emulation.toggle-device-toolbar" && WebInspector.DeviceModeView._wrapperInstance) {
-            WebInspector.DeviceModeView._wrapperInstance._toggleDeviceToolbar();
-            return true;
-        }
         return false;
     }
 }
 
 
 /**
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
  * @constructor
  */
 WebInspector.DeviceModeView.Wrapper = function(inspectedPagePlaceholder)
 {
     WebInspector.VBox.call(this);
     WebInspector.DeviceModeView._wrapperInstance = this;
     this._inspectedPagePlaceholder = inspectedPagePlaceholder;
     this._deviceModeView = new WebInspector.DeviceModeView();
-    this._showDeviceToolbarSetting = WebInspector.settings.createSetting("emulation.showDeviceToolbar", true);
-    this._showDeviceToolbarSetting.addChangeListener(this._update, this);
-    this._update();
+    this._toggleDeviceModeAction = WebInspector.actionRegistry.action("emulation.toggle-device-mode");
+    this._showDeviceModeSetting = WebInspector.settings.createSetting("emulation.showDeviceMode", false);
+    this._showDeviceModeSetting.addChangeListener(this._update.bind(this, false));
+    this._update(true);
 }
 
 /** @type {!WebInspector.DeviceModeView.Wrapper} */
 WebInspector.DeviceModeView._wrapperInstance;
 
 WebInspector.DeviceModeView.Wrapper.prototype = {
     _toggleDeviceMode: function()
     {
-        if (this._showDeviceToolbarSetting.get())
-            this._deviceModeView.toggleDeviceMode();
+        this._showDeviceModeSetting.set(!this._showDeviceModeSetting.get());
     },
 
-    _toggleDeviceToolbar: function()
+    /**
+     * @param {boolean} force
+     */
+    _update: function(force)
     {
-        this._showDeviceToolbarSetting.set(!this._showDeviceToolbarSetting.get());
-    },
+        this._toggleDeviceModeAction.setToggled(this._showDeviceModeSetting.get());
+        if (!force && this._showDeviceModeSetting.get() === this._deviceModeView.isShowing())
+            return;
 
-    _update: function()
-    {
-        if (this._showDeviceToolbarSetting.get()) {
+        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._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);
         }
+        this._deviceModeView.toggleDeviceMode();
     },
 
     __proto__: WebInspector.VBox.prototype
 }