| Index: third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
|
| index da378087eae4001530e8ecb6998b29cec3c2d809..7954e046c8f607974b9c8340ec603559c19e5240 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
|
| +++ b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
|
| @@ -33,7 +33,7 @@ WebInspector.DeviceModeView = function()
|
| 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");
|
| @@ -343,569 +343,6 @@ WebInspector.DeviceModeView.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
|
| @@ -1012,97 +449,3 @@ WebInspector.DeviceModeView.Ruler.prototype = {
|
|
|
| __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
|
| -}
|
|
|