Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1060)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js

Issue 1412463006: [DevTools] Use ListWidget to render DevicesSettingsTab. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/emulation/devicesSettingsTab.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 5ccba223dbd45b1feea649d8351d6b4d484df773..a9b5ba05bf3eacadd36b2a1c02a951565cc8fad0 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js
@@ -5,6 +5,7 @@
/**
* @constructor
* @extends {WebInspector.VBox}
+ * @implements {WebInspector.ListWidget.Delegate}
*/
WebInspector.DevicesSettingsTab = function()
{
@@ -18,19 +19,19 @@ WebInspector.DevicesSettingsTab = function()
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);
+ var addCustomButton = createTextButton(WebInspector.UIString("Add custom device..."), this._addCustomDevice.bind(this));
+ buttonsRow.appendChild(addCustomButton);
- this._devicesList = this.containerElement.createChild("div", "devices-list");
- this._customListSearator = createElementWithClass("div", "devices-custom-separator");
-
- this._editDevice = null;
- this._editDeviceListItem = null;
- this._createEditDeviceElement();
+ this._list = new WebInspector.ListWidget(this);
+ this._list.registerRequiredCSS("emulation/devicesSettingsTab.css");
+ this._list.element.classList.add("devices-list");
+ this._list.show(this.containerElement);
this._muteUpdate = false;
WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.CustomDevicesUpdated, this._devicesUpdated, this);
WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, this._devicesUpdated, this);
+
+ this.setDefaultFocusedElement(addCustomButton);
}
WebInspector.DevicesSettingsTab.prototype = {
@@ -38,7 +39,6 @@ WebInspector.DevicesSettingsTab.prototype = {
{
WebInspector.VBox.prototype.wasShown.call(this);
this._devicesUpdated();
- this._stopEditing();
},
_devicesUpdated: function()
@@ -46,25 +46,18 @@ WebInspector.DevicesSettingsTab.prototype = {
if (this._muteUpdate)
return;
- this._devicesList.removeChildren();
+ this._list.clear();
var devices = WebInspector.emulatedDevicesList.custom().slice();
- devices.sort(WebInspector.EmulatedDevice.compareByTitle);
for (var i = 0; i < devices.length; ++i)
- this._devicesList.appendChild(this._createDeviceListItem(devices[i], true));
+ this._list.appendItem(devices[i], true);
- this._devicesList.appendChild(this._customListSearator);
- this._updateSeparatorVisibility();
+ this._list.appendSeparator();
devices = WebInspector.emulatedDevicesList.standard().slice();
devices.sort(WebInspector.EmulatedDevice.compareByTitle);
for (var i = 0; i < devices.length; ++i)
- this._devicesList.appendChild(this._createDeviceListItem(devices[i], false));
- },
-
- _updateSeparatorVisibility: function()
- {
- this._customListSearator.classList.toggle("hidden", this._devicesList.firstChild === this._customListSearator);
+ this._list.appendItem(devices[i], false);
},
/**
@@ -80,29 +73,39 @@ WebInspector.DevicesSettingsTab.prototype = {
this._muteUpdate = false;
},
+ _addCustomDevice: function()
+ {
+ var device = new WebInspector.EmulatedDevice();
+ device.deviceScaleFactor = 0;
+ this._list.addNewItem(WebInspector.emulatedDevicesList.custom().length, device);
+ },
+
/**
- * @param {!WebInspector.EmulatedDevice} device
- * @param {boolean} custom
+ * @param {number} value
+ * @return {string}
+ */
+ _toNumericInputValue: function(value)
+ {
+ return value ? String(value) : "";
+ },
+
+ /**
+ * @override
+ * @param {*} item
+ * @param {boolean} editable
* @return {!Element}
*/
- _createDeviceListItem: function(device, custom)
+ renderItem: function(item, editable)
{
- var item = createElementWithClass("div", "devices-list-item");
- var checkbox = item.createChild("input", "devices-list-checkbox");
+ 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();
- item.createChild("div", "devices-list-title").textContent = device.title;
- item.addEventListener("click", onItemClicked.bind(this), false);
- item.classList.toggle("device-list-item-show", device.show());
- if (custom) {
- var editButton = item.createChild("div", "devices-list-edit");
- editButton.title = WebInspector.UIString("Edit");
- editButton.addEventListener("click", onEditClicked.bind(this), false);
-
- var removeButton = item.createChild("div", "devices-list-remove");
- removeButton.title = WebInspector.UIString("Remove");
- removeButton.addEventListener("click", onRemoveClicked, false);
- }
+ element.createChild("div", "devices-list-title").textContent = device.title;
+ element.addEventListener("click", onItemClicked.bind(this), false);
+ element.classList.toggle("device-list-item-show", device.show());
+ return element;
/**
* @param {!Event} event
@@ -112,197 +115,128 @@ WebInspector.DevicesSettingsTab.prototype = {
{
var show = !checkbox.checked;
device.setShow(show);
- this._muteAndSaveDeviceList(custom);
+ this._muteAndSaveDeviceList(editable);
checkbox.checked = show;
- item.classList.toggle("device-list-item-show", show);
- event.consume();
- }
-
- /**
- * @param {!Event} event
- * @this {WebInspector.DevicesSettingsTab}
- */
- function onEditClicked(event)
- {
+ element.classList.toggle("device-list-item-show", show);
event.consume();
- this._startEditing(device, item);
- }
-
- /**
- * @param {!Event} event
- */
- function onRemoveClicked(event)
- {
- WebInspector.emulatedDevicesList.removeCustomDevice(device);
- event.consume();
- }
-
- return item;
- },
-
- _addCustomDevice: function()
- {
- this._startEditing(new WebInspector.EmulatedDevice(), null);
- },
-
- _createEditDeviceElement: function()
- {
- this._editDeviceElement = createElementWithClass("div", "devices-edit-container");
- this._editDeviceElement.addEventListener("keydown", onKeyDown.bind(null, isEscKey, this._stopEditing.bind(this)), false);
- this._editDeviceElement.addEventListener("keydown", onKeyDown.bind(null, isEnterKey, this._editDeviceCommitClicked.bind(this)), false);
- this._editDeviceCheckbox = this._editDeviceElement.createChild("input", "devices-edit-checkbox");
- this._editDeviceCheckbox.type = "checkbox";
- var fields = this._editDeviceElement.createChild("div", "devices-edit-fields");
-
- this._editDeviceTitle = this._createInput(WebInspector.UIString("Device name"));
- fields.appendChild(this._editDeviceTitle);
-
- var screen = fields.createChild("div", "hbox");
- this._editDeviceWidth = this._createInput(WebInspector.UIString("Width"), "80px");
- screen.appendChild(this._editDeviceWidth);
- this._editDeviceHeight = this._createInput(WebInspector.UIString("Height"), "80px");
- screen.appendChild(this._editDeviceHeight);
- this._editDeviceScale = this._createInput(WebInspector.UIString("Device pixel ratio"));
- screen.appendChild(this._editDeviceScale);
-
- this._editDeviceUserAgent = this._createInput(WebInspector.UIString("User agent string"));
- fields.appendChild(this._editDeviceUserAgent);
-
- var buttonsRow = fields.createChild("div", "devices-edit-buttons");
- this._editDeviceCommitButton = createTextButton("", this._editDeviceCommitClicked.bind(this));
- buttonsRow.appendChild(this._editDeviceCommitButton);
- this._editDeviceCancelButton = createTextButton(WebInspector.UIString("Cancel"), this._stopEditing.bind(this));
- this._editDeviceCancelButton.addEventListener("keydown", onKeyDown.bind(null, isEnterKey, this._stopEditing.bind(this)), false);
- buttonsRow.appendChild(this._editDeviceCancelButton);
-
- /**
- * @param {function(!Event):boolean} predicate
- * @param {function()} callback
- * @param {!Event} event
- */
- function onKeyDown(predicate, callback, event)
- {
- if (predicate(event)) {
- event.consume(true);
- callback();
- }
}
},
/**
- * @param {string} title
- * @param {string=} width
- * @return {!Element}
+ * @override
+ * @param {*} item
+ * @param {number} index
*/
- _createInput: function(title, width)
+ removeItemRequested: function(item, index)
{
- var input = createElement("input");
- input.type = "text";
- if (width)
- input.style.width = width;
- input.placeholder = title;
- input.addEventListener("input", this._validateInputs.bind(this, false), false);
- input.addEventListener("blur", this._validateInputs.bind(this, false), false);
- return input;
+ WebInspector.emulatedDevicesList.removeCustomDevice(/** @type {!WebInspector.EmulatedDevice} */ (item));
},
/**
- * @param {boolean} forceValid
+ * @override
+ * @param {*} item
+ * @param {!WebInspector.ListWidget.Editor} editor
+ * @param {boolean} isNew
*/
- _validateInputs: function(forceValid)
+ commitEdit: function(item, editor, isNew)
{
- var trimmedTitle = this._editDeviceTitle.value.trim();
- var titleValid = trimmedTitle.length > 0 && trimmedTitle.length < 50;
- this._editDeviceTitle.classList.toggle("error-input", !titleValid && !forceValid);
-
- var widthValid = !WebInspector.OverridesSupport.deviceSizeValidator(this._editDeviceWidth.value);
- this._editDeviceWidth.classList.toggle("error-input", !widthValid && !forceValid);
-
- var heightValid = !WebInspector.OverridesSupport.deviceSizeValidator(this._editDeviceHeight.value);
- this._editDeviceHeight.classList.toggle("error-input", !heightValid && !forceValid);
-
- var scaleValid = !WebInspector.OverridesSupport.deviceScaleFactorValidator(this._editDeviceScale.value);
- this._editDeviceScale.classList.toggle("error-input", !scaleValid && !forceValid);
-
- var allValid = titleValid && widthValid && heightValid && scaleValid;
- this._editDeviceCommitButton.disabled = !allValid;
+ 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.Horizontal, insets: new Insets(0, 0, 0, 0), images: null});
+ device.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, insets: new Insets(0, 0, 0, 0), images: null});
+
+ if (isNew)
+ WebInspector.emulatedDevicesList.addCustomDevice(device);
+ else
+ WebInspector.emulatedDevicesList.saveCustomDevices();
},
/**
- * @param {number} value
- * @return {string}
+ * @override
+ * @param {*} item
+ * @return {!WebInspector.ListWidget.Editor}
*/
- _toNumericInputValue: function(value)
+ beginEdit: function(item)
{
- return value ? String(value) : "";
+ 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;
+ return editor;
},
/**
- * @param {!WebInspector.EmulatedDevice} device
- * @param {?Element} listItem
+ * @return {!WebInspector.ListWidget.Editor}
*/
- _startEditing: function(device, listItem)
+ _createEditor: function()
{
- this._stopEditing();
+ if (this._editor)
+ return this._editor;
- this._addCustomButton.disabled = true;
- this._devicesList.classList.add("devices-list-editing");
- this._editDevice = device;
- this._editDeviceListItem = listItem;
- if (listItem)
- listItem.classList.add("hidden");
+ var editor = new WebInspector.ListWidget.Editor();
+ this._editor = editor;
+ var content = editor.contentElement();
- this._editDeviceCommitButton.textContent = listItem ? WebInspector.UIString("Save") : WebInspector.UIString("Add device");
- this._editDeviceCheckbox.checked = device.show();
- this._editDeviceTitle.value = device.title;
- this._editDeviceWidth.value = listItem ? this._toNumericInputValue(device.vertical.width) : "";
- this._editDeviceHeight.value = listItem ? this._toNumericInputValue(device.vertical.height) : "";
- this._editDeviceScale.value = listItem ? this._toNumericInputValue(device.deviceScaleFactor) : "";
- this._editDeviceUserAgent.value = device.userAgent;
- this._validateInputs(true);
+ var fields = content.createChild("div", "devices-edit-fields");
+ fields.appendChild(editor.createInput("title", "text", WebInspector.UIString("Device name"), titleValidator));
+ var screen = fields.createChild("div", "hbox");
+ var width = editor.createInput("width", "text", WebInspector.UIString("Width"), sizeValidator);
+ width.classList.add("device-edit-small");
+ screen.appendChild(width);
+ var height = editor.createInput("height", "text", WebInspector.UIString("height"), sizeValidator);
+ height.classList.add("device-edit-small");
+ screen.appendChild(height);
+ screen.appendChild(editor.createInput("scale", "text", WebInspector.UIString("Device pixel ratio"), scaleValidator));
+ fields.appendChild(editor.createInput("user-agent", "text", WebInspector.UIString("User agent string"), userAgentValidator));
- if (listItem && listItem.nextElementSibling)
- this._devicesList.insertBefore(this._editDeviceElement, listItem.nextElementSibling);
- else
- this._devicesList.insertBefore(this._editDeviceElement, this._customListSearator);
- this._editDeviceCommitButton.scrollIntoView();
- this._editDeviceTitle.focus();
- },
+ return editor;
- _editDeviceCommitClicked: function()
- {
- if (this._editDeviceCommitButton.disabled)
- return;
+ /**
+ * @param {!HTMLInputElement|!HTMLSelectElement} input
+ * @return {boolean}
+ */
+ function titleValidator(input)
+ {
+ var value = input.value.trim();
+ return value.length > 0 && value.length < 50;
+ }
- this._editDevice.setShow(this._editDeviceCheckbox.checked);
- this._editDevice.title = this._editDeviceTitle.value;
- this._editDevice.vertical.width = this._editDeviceWidth.value ? parseInt(this._editDeviceWidth.value, 10) : 0;
- this._editDevice.vertical.height = this._editDeviceHeight.value ? parseInt(this._editDeviceHeight.value, 10) : 0;
- this._editDevice.horizontal.width = this._editDevice.vertical.height;
- this._editDevice.horizontal.height = this._editDevice.vertical.width;
- this._editDevice.deviceScaleFactor = this._editDeviceScale.value ? parseFloat(this._editDeviceScale.value) : 0;
- this._editDevice.userAgent = this._editDeviceUserAgent.value;
- this._editDevice.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Horizontal, insets: new Insets(0, 0, 0, 0), images: null});
- this._editDevice.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, insets: new Insets(0, 0, 0, 0), images: null});
+ /**
+ * @param {!HTMLInputElement|!HTMLSelectElement} input
+ * @return {boolean}
+ */
+ function sizeValidator(input)
+ {
+ return !WebInspector.OverridesSupport.deviceSizeValidator(input.value);
+ }
- this._stopEditing();
- if (this._editDeviceListItem)
- WebInspector.emulatedDevicesList.saveCustomDevices();
- else
- WebInspector.emulatedDevicesList.addCustomDevice(this._editDevice);
- this._editDevice = null;
- this._editDeviceListItem = null;
- },
+ /**
+ * @param {!HTMLInputElement|!HTMLSelectElement} input
+ * @return {boolean}
+ */
+ function scaleValidator(input)
+ {
+ return !WebInspector.OverridesSupport.deviceScaleFactorValidator(input.value);
+ }
- _stopEditing: function()
- {
- this._devicesList.classList.remove("devices-list-editing");
- if (this._editDeviceListItem)
- this._editDeviceListItem.classList.remove("hidden");
- if (this._editDeviceElement.parentElement)
- this._devicesList.removeChild(this._editDeviceElement);
- this._addCustomButton.disabled = false;
- this._addCustomButton.focus();
+ /**
+ * @param {!HTMLInputElement|!HTMLSelectElement} input
+ * @return {boolean}
+ */
+ function userAgentValidator(input)
+ {
+ return true;
+ }
},
__proto__: WebInspector.VBox.prototype
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/emulation/devicesSettingsTab.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698