[DevTools] Split DeviceModeView.js into view, toolbar and wrapper.

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 15 matching lines @@
     this._topRuler.element.classList.add("device-mode-ruler-top");
     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._toolbar = new WebInspector.DeviceModeToolbar(this._model, this._showMediaInspectorSetting, this._showRulersSetting);
         this.contentElement.appendChild(this._toolbar.element());
 
         this._contentClip = this.contentElement.createChild("div", "device-mode-content-clip vbox");
         this._responsivePresetsContainer = this._contentClip.createChild("div", "device-mode-presets-container");
         this._populatePresetsContainer();
         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");
@@ skipping 289 matching lines @@
     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();
-
-    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("device-mode-toolbar-fixed-size", rightContainer);
-    rightToolbar.makeWrappable();
-    this._fillRightToolbar(rightToolbar);
-    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.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)
-    {
-        var widthInput = createElementWithClass("input", "device-mode-size-input");
-        widthInput.maxLength = 4;
-        widthInput.type = "text";
-        widthInput.title = WebInspector.UIString("Width");
-        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";
-        this._xItem = this._wrapToolbarItem(xElement);
-        toolbar.appendToolbarItem(this._xItem);
-
-        var heightInput = createElementWithClass("input", "device-mode-size-input");
-        heightInput.maxLength = 4;
-        heightInput.type = "text";
-        heightInput.title = WebInspector.UIString("Height (leave empty for full)");
-        this._updateHeightInput = this._bindInput(heightInput, this._model.setHeightAndScaleToFit.bind(this._model), validateHeight);
-        this._heightInput = heightInput;
-        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)
-    {
-        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)
-    {
-        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);
-            if (valid)
-                apply(input.value ? Number(input.value) : 0);
-        }
-
-        /**
-         * @param {!Event} event
-         */
-        function onKeyDown(event)
-        {
-            if (isEnterKey(event)) {
-                if (!validate(input.value))
-                    apply(input.value ? Number(input.value) : 0);
-                return;
-            }
-
-            var increment = event.keyIdentifier === "Up" ? 1 : event.keyIdentifier === "Down" ? -1 : 0;
-            if (!increment)
-                return;
-            if (event.shiftKey)
-                increment *= 10;
-
-            var value = input.value;
-            if (validate(value) || !value)
-                return;
-
-            value = (value ? Number(value) : 0) + increment;
-            var stringValue = value ? String(value) : "";
-            if (validate(stringValue) || !value)
-                return;
-
-            input.value = stringValue;
-            apply(input.value ? Number(input.value) : 0);
-            event.preventDefault();
-        }
-
-        /**
-         * @param {number} value
-         */
-        function setValue(value)
-        {
-            var stringValue = value ? String(value) : "";
-            if (stringValue === input.value)
-                return;
-            var valid = !validate(stringValue);
-            input.classList.toggle("error-input", !valid);
-            input.value = stringValue;
-            input.setSelectionRange(stringValue.length, stringValue.length);
-        }
-
-        return setValue;
-    },
-
-    /**
-     * @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
-     */
-    _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);
-        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);
-        }
-
-        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), 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);
-        contextMenu.appendItemsAtLocation("deviceModeMenu");
-    },
-
-    _toggleMediaInspector: function()
-    {
-        this._showMediaInspectorSetting.set(!this._showMediaInspectorSetting.get());
-    },
-
-    _toggleRulers: function()
-    {
-        this._showRulersSetting.set(!this._showRulersSetting.get());
-    },
-
-    _openNetworkConfig: function()
-    {
-        InspectorFrontendHost.bringToFront();
-        // TODO(dgozman): make it explicit.
-        WebInspector.actionRegistry.action("network.show-config").execute();
-    },
-
-    /**
-     * @param {!Element} element
-     * @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);
-    },
-
-    /**
-     * @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);
-    },
-
-    /**
-     * @param {!Array<!WebInspector.EmulatedDevice>} devices
-     * @return {!Array<!WebInspector.EmulatedDevice>}
-     */
-    _filterDevices: function(devices)
-    {
-        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);
-
-        /**
-         * @param {!Array<!WebInspector.EmulatedDevice>} devices
-         * @this {WebInspector.DeviceModeView.Toolbar}
-         */
-        function appendGroup(devices)
-        {
-            if (!devices.length)
-                return;
-            contextMenu.appendSeparator();
-            for (var device of devices)
-                contextMenu.appendCheckboxItem(device.title, this._emulateDevice.bind(this, device), this._model.device() === device, false);
-        }
-    },
-
-    /**
-     * @this {WebInspector.DeviceModeView.Toolbar}
-     */
-    _deviceListChanged: function()
-    {
-        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;
-
-        if (device.modes.length === 2 && device.modes[0].orientation !== device.modes[1].orientation) {
-            model.emulate(model.type(), model.device(), model.mode() === device.modes[0] ? device.modes[1] : device.modes[0]);
-            return;
-        }
-
-        var contextMenu = new WebInspector.ContextMenu(/** @type {!Event} */ (event.data),
-            false,
-            event.target.element.totalOffsetLeft(),
-            event.target.element.totalOffsetTop() + event.target.element.offsetHeight);
-        addOrientation(WebInspector.EmulatedDevice.Vertical, WebInspector.UIString("Portrait"));
-        addOrientation(WebInspector.EmulatedDevice.Horizontal, WebInspector.UIString("Landscape"));
-        contextMenu.show();
-
-        /**
-         * @param {string} orientation
-         * @param {string} title
-         */
-        function addOrientation(orientation, title)
-        {
-            var modes = device.modesForOrientation(orientation);
-            if (!modes.length)
-                return;
-            if (modes.length === 1) {
-                addMode(modes[0], title);
-            } else {
-                for (var index = 0; index < modes.length; index++)
-                    addMode(modes[index], title + " \u2013 " + modes[index].title);
-            }
-        }
-
-        /**
-         * @param {!WebInspector.EmulatedDevice.Mode} mode
-         * @param {string} title
-         */
-        function addMode(mode, title)
-        {
-            contextMenu.appendCheckboxItem(title, applyMode.bind(null, mode), model.mode() === mode, false);
-        }
-
-        /**
-         * @param {!WebInspector.EmulatedDevice.Mode} mode
-         */
-        function applyMode(mode)
-        {
-            model.emulate(model.type(), model.device(), mode);
-        }
-    },
-
-    /**
-     * @return {!Element}
-     */
-    element: function()
-    {
-        return this._element;
-    },
-
-    update: function()
-    {
-        if (this._model.type() !== 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;
-        }
-
-        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");
-            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._cachedModelDevice = 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 && this._model.type() !== WebInspector.DeviceModeModel.Type.None) {
-            this._cachedModelMode = this._model.mode();
-            var value = this._persistenceSetting.get();
-            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()
-    {
-        for (var device of this._allDevices()) {
-            if (device.title === this._persistenceSetting.get().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);
-                        this._emulateDevice(device);
-                        return;
-                    }
-                }
-            }
-        }
-
-        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)
 {
     WebInspector.VBox.call(this);
     this._contentElement = this.element.createChild("div", "device-mode-ruler flex-auto");
     this._horizontal = horizontal;
@@ skipping 86 matching lines @@
     /**
      * @param {number} size
      */
     _onMarkerClick: function(size)
     {
         this._applyCallback.call(null, size);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
-
-
-/**
- * @constructor
- * @implements {WebInspector.ActionDelegate}
- */
-WebInspector.DeviceModeView.ActionDelegate = function()
-{
-}
-
-WebInspector.DeviceModeView.ActionDelegate.prototype = {
-    /**
-     * @override
-     * @param {!WebInspector.Context} context
-     * @param {string} actionId
-     * @return {boolean}
-     */
-    handleAction: function(context, actionId)
-    {
-        if (WebInspector.DeviceModeView._wrapperInstance) {
-            if (actionId === "emulation.toggle-device-mode") {
-                WebInspector.DeviceModeView._wrapperInstance._toggleDeviceMode();
-                return true;
-            }
-            if (actionId === "emulation.request-app-banner") {
-                WebInspector.DeviceModeView._wrapperInstance._requestAppBanner();
-                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;
-    /** @type {?WebInspector.DeviceModeView} */
-    this._deviceModeView = null;
-    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()
-    {
-        this._showDeviceModeSetting.set(!this._showDeviceModeSetting.get());
-    },
-
-    /**
-     * @param {boolean} force
-     */
-    _update: function(force)
-    {
-        this._toggleDeviceModeAction.setToggled(this._showDeviceModeSetting.get());
-        if (!force) {
-            var showing = this._deviceModeView && this._deviceModeView.isShowing();
-            if (this._showDeviceModeSetting.get() === showing)
-                return;
-        }
-
-        if (this._showDeviceModeSetting.get()) {
-            if (!this._deviceModeView)
-                this._deviceModeView = new WebInspector.DeviceModeView();
-            this._deviceModeView.show(this.element);
-            this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();
-            this._inspectedPagePlaceholder.show(this._deviceModeView.element);
-        } else {
-            if (this._deviceModeView)
-                this._deviceModeView.detach();
-            this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
-            this._inspectedPagePlaceholder.show(this.element);
-        }
-    },
-
-    _requestAppBanner: function()
-    {
-        this._deviceModeView._model.requestAppBanner();
-    },
-
-    __proto__: WebInspector.VBox.prototype
-}