Index: third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js b/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js |
index 1d17d78eb17fb7fce4041f74babff63a8942a3f2..7e05f955031297d7b8d7ea0cca28ee23edfb8a3d 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js |
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js |
@@ -1,258 +1,255 @@ |
// 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} |
* @implements {WebInspector.ListWidget.Delegate} |
+ * @unrestricted |
*/ |
-WebInspector.DevicesSettingsTab = function() |
-{ |
- WebInspector.VBox.call(this); |
- this.element.classList.add("settings-tab-container"); |
- this.element.classList.add("devices-settings-tab"); |
- this.registerRequiredCSS("emulation/devicesSettingsTab.css"); |
- |
- var header = this.element.createChild("header"); |
- header.createChild("h3").createTextChild(WebInspector.UIString("Emulated Devices")); |
- this.containerElement = this.element.createChild("div", "help-container-wrapper").createChild("div", "settings-tab help-content help-container"); |
- |
- var buttonsRow = this.containerElement.createChild("div", "devices-button-row"); |
- this._addCustomButton = createTextButton(WebInspector.UIString("Add custom device..."), this._addCustomDevice.bind(this)); |
+WebInspector.DevicesSettingsTab = class extends WebInspector.VBox { |
+ constructor() { |
+ super(); |
+ this.element.classList.add('settings-tab-container'); |
+ this.element.classList.add('devices-settings-tab'); |
+ this.registerRequiredCSS('emulation/devicesSettingsTab.css'); |
+ |
+ var header = this.element.createChild('header'); |
+ header.createChild('h3').createTextChild(WebInspector.UIString('Emulated Devices')); |
+ this.containerElement = this.element.createChild('div', 'help-container-wrapper') |
+ .createChild('div', 'settings-tab help-content help-container'); |
+ |
+ var buttonsRow = this.containerElement.createChild('div', 'devices-button-row'); |
+ this._addCustomButton = |
+ createTextButton(WebInspector.UIString('Add custom device...'), this._addCustomDevice.bind(this)); |
buttonsRow.appendChild(this._addCustomButton); |
this._list = new WebInspector.ListWidget(this); |
- this._list.registerRequiredCSS("emulation/devicesSettingsTab.css"); |
- this._list.element.classList.add("devices-list"); |
+ this._list.registerRequiredCSS('emulation/devicesSettingsTab.css'); |
+ this._list.element.classList.add('devices-list'); |
this._list.show(this.containerElement); |
this._muteUpdate = false; |
this._emulatedDevicesList = WebInspector.EmulatedDevicesList.instance(); |
- this._emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.CustomDevicesUpdated, this._devicesUpdated, this); |
- this._emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, this._devicesUpdated, this); |
+ this._emulatedDevicesList.addEventListener( |
+ WebInspector.EmulatedDevicesList.Events.CustomDevicesUpdated, this._devicesUpdated, this); |
+ this._emulatedDevicesList.addEventListener( |
+ WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, this._devicesUpdated, this); |
this.setDefaultFocusedElement(this._addCustomButton); |
-}; |
- |
-WebInspector.DevicesSettingsTab.prototype = { |
- wasShown: function() |
- { |
- WebInspector.VBox.prototype.wasShown.call(this); |
- this._devicesUpdated(); |
- }, |
- |
- _devicesUpdated: function() |
- { |
- if (this._muteUpdate) |
- return; |
- |
- this._list.clear(); |
- |
- var devices = this._emulatedDevicesList.custom().slice(); |
- for (var i = 0; i < devices.length; ++i) |
- this._list.appendItem(devices[i], true); |
- |
- this._list.appendSeparator(); |
- |
- devices = this._emulatedDevicesList.standard().slice(); |
- devices.sort(WebInspector.EmulatedDevice.deviceComparator); |
- for (var i = 0; i < devices.length; ++i) |
- this._list.appendItem(devices[i], false); |
- }, |
- |
- /** |
- * @param {boolean} custom |
- */ |
- _muteAndSaveDeviceList: function(custom) |
- { |
- this._muteUpdate = true; |
- if (custom) |
- this._emulatedDevicesList.saveCustomDevices(); |
- else |
- this._emulatedDevicesList.saveStandardDevices(); |
- this._muteUpdate = false; |
- }, |
- |
- _addCustomDevice: function() |
- { |
- var device = new WebInspector.EmulatedDevice(); |
- device.deviceScaleFactor = 0; |
- device.horizontal.width = 700; |
- device.horizontal.height = 400; |
- device.vertical.width = 400; |
- device.vertical.height = 700; |
- this._list.addNewItem(this._emulatedDevicesList.custom().length, device); |
- }, |
- |
- /** |
- * @param {number} value |
- * @return {string} |
- */ |
- _toNumericInputValue: function(value) |
- { |
- return value ? String(value) : ""; |
- }, |
+ } |
+ |
+ /** |
+ * @override |
+ */ |
+ wasShown() { |
+ super.wasShown(); |
+ this._devicesUpdated(); |
+ } |
+ |
+ _devicesUpdated() { |
+ if (this._muteUpdate) |
+ return; |
+ |
+ this._list.clear(); |
+ |
+ var devices = this._emulatedDevicesList.custom().slice(); |
+ for (var i = 0; i < devices.length; ++i) |
+ this._list.appendItem(devices[i], true); |
+ |
+ this._list.appendSeparator(); |
+ |
+ devices = this._emulatedDevicesList.standard().slice(); |
+ devices.sort(WebInspector.EmulatedDevice.deviceComparator); |
+ for (var i = 0; i < devices.length; ++i) |
+ this._list.appendItem(devices[i], false); |
+ } |
+ |
+ /** |
+ * @param {boolean} custom |
+ */ |
+ _muteAndSaveDeviceList(custom) { |
+ this._muteUpdate = true; |
+ if (custom) |
+ this._emulatedDevicesList.saveCustomDevices(); |
+ else |
+ this._emulatedDevicesList.saveStandardDevices(); |
+ this._muteUpdate = false; |
+ } |
+ |
+ _addCustomDevice() { |
+ var device = new WebInspector.EmulatedDevice(); |
+ device.deviceScaleFactor = 0; |
+ device.horizontal.width = 700; |
+ device.horizontal.height = 400; |
+ device.vertical.width = 400; |
+ device.vertical.height = 700; |
+ this._list.addNewItem(this._emulatedDevicesList.custom().length, device); |
+ } |
+ |
+ /** |
+ * @param {number} value |
+ * @return {string} |
+ */ |
+ _toNumericInputValue(value) { |
+ return value ? String(value) : ''; |
+ } |
+ |
+ /** |
+ * @override |
+ * @param {*} item |
+ * @param {boolean} editable |
+ * @return {!Element} |
+ */ |
+ renderItem(item, editable) { |
+ var device = /** @type {!WebInspector.EmulatedDevice} */ (item); |
+ var element = createElementWithClass('div', 'devices-list-item'); |
+ var checkbox = element.createChild('input', 'devices-list-checkbox'); |
+ checkbox.type = 'checkbox'; |
+ checkbox.checked = device.show(); |
+ element.createChild('div', 'devices-list-title').textContent = device.title; |
+ element.addEventListener('click', onItemClicked.bind(this), false); |
+ return element; |
/** |
- * @override |
- * @param {*} item |
- * @param {boolean} editable |
- * @return {!Element} |
+ * @param {!Event} event |
+ * @this {WebInspector.DevicesSettingsTab} |
*/ |
- renderItem: function(item, editable) |
- { |
- var device = /** @type {!WebInspector.EmulatedDevice} */ (item); |
- var element = createElementWithClass("div", "devices-list-item"); |
- var checkbox = element.createChild("input", "devices-list-checkbox"); |
- checkbox.type = "checkbox"; |
- checkbox.checked = device.show(); |
- element.createChild("div", "devices-list-title").textContent = device.title; |
- element.addEventListener("click", onItemClicked.bind(this), false); |
- return element; |
- |
- /** |
- * @param {!Event} event |
- * @this {WebInspector.DevicesSettingsTab} |
- */ |
- function onItemClicked(event) |
- { |
- var show = !checkbox.checked; |
- device.setShow(show); |
- this._muteAndSaveDeviceList(editable); |
- checkbox.checked = show; |
- event.consume(); |
- } |
- }, |
+ function onItemClicked(event) { |
+ var show = !checkbox.checked; |
+ device.setShow(show); |
+ this._muteAndSaveDeviceList(editable); |
+ checkbox.checked = show; |
+ event.consume(); |
+ } |
+ } |
+ |
+ /** |
+ * @override |
+ * @param {*} item |
+ * @param {number} index |
+ */ |
+ removeItemRequested(item, index) { |
+ this._emulatedDevicesList.removeCustomDevice(/** @type {!WebInspector.EmulatedDevice} */ (item)); |
+ } |
+ |
+ /** |
+ * @override |
+ * @param {*} item |
+ * @param {!WebInspector.ListWidget.Editor} editor |
+ * @param {boolean} isNew |
+ */ |
+ commitEdit(item, editor, isNew) { |
+ var device = /** @type {!WebInspector.EmulatedDevice} */ (item); |
+ device.title = editor.control('title').value.trim(); |
+ device.vertical.width = editor.control('width').value ? parseInt(editor.control('width').value, 10) : 0; |
+ device.vertical.height = editor.control('height').value ? parseInt(editor.control('height').value, 10) : 0; |
+ device.horizontal.width = device.vertical.height; |
+ device.horizontal.height = device.vertical.width; |
+ device.deviceScaleFactor = editor.control('scale').value ? parseFloat(editor.control('scale').value) : 0; |
+ device.userAgent = editor.control('user-agent').value; |
+ device.modes = []; |
+ device.modes.push( |
+ {title: '', orientation: WebInspector.EmulatedDevice.Vertical, insets: new Insets(0, 0, 0, 0), image: null}); |
+ device.modes.push( |
+ {title: '', orientation: WebInspector.EmulatedDevice.Horizontal, insets: new Insets(0, 0, 0, 0), image: null}); |
+ device.capabilities = []; |
+ var uaType = editor.control('ua-type').value; |
+ if (uaType === WebInspector.DeviceModeModel.UA.Mobile || uaType === WebInspector.DeviceModeModel.UA.MobileNoTouch) |
+ device.capabilities.push(WebInspector.EmulatedDevice.Capability.Mobile); |
+ if (uaType === WebInspector.DeviceModeModel.UA.Mobile || uaType === WebInspector.DeviceModeModel.UA.DesktopTouch) |
+ device.capabilities.push(WebInspector.EmulatedDevice.Capability.Touch); |
+ if (isNew) |
+ this._emulatedDevicesList.addCustomDevice(device); |
+ else |
+ this._emulatedDevicesList.saveCustomDevices(); |
+ this._addCustomButton.scrollIntoViewIfNeeded(); |
+ this._addCustomButton.focus(); |
+ } |
+ |
+ /** |
+ * @override |
+ * @param {*} item |
+ * @return {!WebInspector.ListWidget.Editor} |
+ */ |
+ beginEdit(item) { |
+ var device = /** @type {!WebInspector.EmulatedDevice} */ (item); |
+ var editor = this._createEditor(); |
+ editor.control('title').value = device.title; |
+ editor.control('width').value = this._toNumericInputValue(device.vertical.width); |
+ editor.control('height').value = this._toNumericInputValue(device.vertical.height); |
+ editor.control('scale').value = this._toNumericInputValue(device.deviceScaleFactor); |
+ editor.control('user-agent').value = device.userAgent; |
+ var uaType; |
+ if (device.mobile()) |
+ uaType = device.touch() ? WebInspector.DeviceModeModel.UA.Mobile : WebInspector.DeviceModeModel.UA.MobileNoTouch; |
+ else |
+ uaType = device.touch() ? WebInspector.DeviceModeModel.UA.DesktopTouch : WebInspector.DeviceModeModel.UA.Desktop; |
+ editor.control('ua-type').value = uaType; |
+ return editor; |
+ } |
+ |
+ /** |
+ * @return {!WebInspector.ListWidget.Editor} |
+ */ |
+ _createEditor() { |
+ if (this._editor) |
+ return this._editor; |
+ |
+ var editor = new WebInspector.ListWidget.Editor(); |
+ this._editor = editor; |
+ var content = editor.contentElement(); |
+ |
+ var fields = content.createChild('div', 'devices-edit-fields'); |
+ fields.createChild('div', 'hbox') |
+ .appendChild(editor.createInput('title', 'text', WebInspector.UIString('Device name'), titleValidator)); |
+ var screen = fields.createChild('div', 'hbox'); |
+ screen.appendChild(editor.createInput('width', 'text', WebInspector.UIString('Width'), sizeValidator)); |
+ screen.appendChild(editor.createInput('height', 'text', WebInspector.UIString('height'), sizeValidator)); |
+ var dpr = editor.createInput('scale', 'text', WebInspector.UIString('Device pixel ratio'), scaleValidator); |
+ dpr.classList.add('device-edit-fixed'); |
+ screen.appendChild(dpr); |
+ var ua = fields.createChild('div', 'hbox'); |
+ ua.appendChild(editor.createInput('user-agent', 'text', WebInspector.UIString('User agent string'), () => true)); |
+ var uaType = editor.createSelect( |
+ 'ua-type', |
+ [ |
+ WebInspector.DeviceModeModel.UA.Mobile, WebInspector.DeviceModeModel.UA.MobileNoTouch, |
+ WebInspector.DeviceModeModel.UA.Desktop, WebInspector.DeviceModeModel.UA.DesktopTouch |
+ ], |
+ () => true); |
+ uaType.classList.add('device-edit-fixed'); |
+ ua.appendChild(uaType); |
+ |
+ return editor; |
/** |
- * @override |
* @param {*} item |
* @param {number} index |
+ * @param {!HTMLInputElement|!HTMLSelectElement} input |
+ * @return {boolean} |
*/ |
- removeItemRequested: function(item, index) |
- { |
- this._emulatedDevicesList.removeCustomDevice(/** @type {!WebInspector.EmulatedDevice} */ (item)); |
- }, |
+ function titleValidator(item, index, input) { |
+ var value = input.value.trim(); |
+ return value.length > 0 && value.length < 50; |
+ } |
/** |
- * @override |
* @param {*} item |
- * @param {!WebInspector.ListWidget.Editor} editor |
- * @param {boolean} isNew |
+ * @param {number} index |
+ * @param {!HTMLInputElement|!HTMLSelectElement} input |
+ * @return {boolean} |
*/ |
- commitEdit: function(item, editor, isNew) |
- { |
- var device = /** @type {!WebInspector.EmulatedDevice} */ (item); |
- device.title = editor.control("title").value.trim(); |
- device.vertical.width = editor.control("width").value ? parseInt(editor.control("width").value, 10) : 0; |
- device.vertical.height = editor.control("height").value ? parseInt(editor.control("height").value, 10) : 0; |
- device.horizontal.width = device.vertical.height; |
- device.horizontal.height = device.vertical.width; |
- device.deviceScaleFactor = editor.control("scale").value ? parseFloat(editor.control("scale").value) : 0; |
- device.userAgent = editor.control("user-agent").value; |
- device.modes = []; |
- device.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, insets: new Insets(0, 0, 0, 0), image: null}); |
- device.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Horizontal, insets: new Insets(0, 0, 0, 0), image: null}); |
- device.capabilities = []; |
- var uaType = editor.control("ua-type").value; |
- if (uaType === WebInspector.DeviceModeModel.UA.Mobile || uaType === WebInspector.DeviceModeModel.UA.MobileNoTouch) |
- device.capabilities.push(WebInspector.EmulatedDevice.Capability.Mobile); |
- if (uaType === WebInspector.DeviceModeModel.UA.Mobile || uaType === WebInspector.DeviceModeModel.UA.DesktopTouch) |
- device.capabilities.push(WebInspector.EmulatedDevice.Capability.Touch); |
- if (isNew) |
- this._emulatedDevicesList.addCustomDevice(device); |
- else |
- this._emulatedDevicesList.saveCustomDevices(); |
- this._addCustomButton.scrollIntoViewIfNeeded(); |
- this._addCustomButton.focus(); |
- }, |
+ function sizeValidator(item, index, input) { |
+ return WebInspector.DeviceModeModel.deviceSizeValidator(input.value); |
+ } |
/** |
- * @override |
* @param {*} item |
- * @return {!WebInspector.ListWidget.Editor} |
- */ |
- beginEdit: function(item) |
- { |
- var device = /** @type {!WebInspector.EmulatedDevice} */ (item); |
- var editor = this._createEditor(); |
- editor.control("title").value = device.title; |
- editor.control("width").value = this._toNumericInputValue(device.vertical.width); |
- editor.control("height").value = this._toNumericInputValue(device.vertical.height); |
- editor.control("scale").value = this._toNumericInputValue(device.deviceScaleFactor); |
- editor.control("user-agent").value = device.userAgent; |
- var uaType; |
- if (device.mobile()) |
- uaType = device.touch() ? WebInspector.DeviceModeModel.UA.Mobile : WebInspector.DeviceModeModel.UA.MobileNoTouch; |
- else |
- uaType = device.touch() ? WebInspector.DeviceModeModel.UA.DesktopTouch : WebInspector.DeviceModeModel.UA.Desktop; |
- editor.control("ua-type").value = uaType; |
- return editor; |
- }, |
- |
- /** |
- * @return {!WebInspector.ListWidget.Editor} |
+ * @param {number} index |
+ * @param {!HTMLInputElement|!HTMLSelectElement} input |
+ * @return {boolean} |
*/ |
- _createEditor: function() |
- { |
- if (this._editor) |
- return this._editor; |
- |
- var editor = new WebInspector.ListWidget.Editor(); |
- this._editor = editor; |
- var content = editor.contentElement(); |
- |
- var fields = content.createChild("div", "devices-edit-fields"); |
- fields.createChild("div", "hbox").appendChild(editor.createInput("title", "text", WebInspector.UIString("Device name"), titleValidator)); |
- var screen = fields.createChild("div", "hbox"); |
- screen.appendChild(editor.createInput("width", "text", WebInspector.UIString("Width"), sizeValidator)); |
- screen.appendChild(editor.createInput("height", "text", WebInspector.UIString("height"), sizeValidator)); |
- var dpr = editor.createInput("scale", "text", WebInspector.UIString("Device pixel ratio"), scaleValidator); |
- dpr.classList.add("device-edit-fixed"); |
- screen.appendChild(dpr); |
- var ua = fields.createChild("div", "hbox"); |
- ua.appendChild(editor.createInput("user-agent", "text", WebInspector.UIString("User agent string"), () => true)); |
- var uaType = editor.createSelect("ua-type", [WebInspector.DeviceModeModel.UA.Mobile, WebInspector.DeviceModeModel.UA.MobileNoTouch, WebInspector.DeviceModeModel.UA.Desktop, WebInspector.DeviceModeModel.UA.DesktopTouch], () => true); |
- uaType.classList.add("device-edit-fixed"); |
- ua.appendChild(uaType); |
- |
- return editor; |
- |
- /** |
- * @param {*} item |
- * @param {number} index |
- * @param {!HTMLInputElement|!HTMLSelectElement} input |
- * @return {boolean} |
- */ |
- function titleValidator(item, index, input) |
- { |
- var value = input.value.trim(); |
- return value.length > 0 && value.length < 50; |
- } |
- |
- /** |
- * @param {*} item |
- * @param {number} index |
- * @param {!HTMLInputElement|!HTMLSelectElement} input |
- * @return {boolean} |
- */ |
- function sizeValidator(item, index, input) |
- { |
- return WebInspector.DeviceModeModel.deviceSizeValidator(input.value); |
- } |
- |
- /** |
- * @param {*} item |
- * @param {number} index |
- * @param {!HTMLInputElement|!HTMLSelectElement} input |
- * @return {boolean} |
- */ |
- function scaleValidator(item, index, input) |
- { |
- return WebInspector.DeviceModeModel.deviceScaleFactorValidator(input.value); |
- } |
- }, |
- |
- __proto__: WebInspector.VBox.prototype |
+ function scaleValidator(item, index, input) { |
+ return WebInspector.DeviceModeModel.deviceScaleFactorValidator(input.value); |
+ } |
+ } |
}; |