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

Unified Diff: third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month 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
Index: third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js b/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
index 0482833d043c8ffa9a819b6980f9243732d4a187..c77cd36c609b5b1bcafc8a2697efbf6c4c29fb7c 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
@@ -1,19 +1,19 @@
// 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}
- * @param {!WebInspector.ListWidget.Delegate} delegate
+ * @unrestricted
*/
-WebInspector.ListWidget = function(delegate)
-{
- WebInspector.VBox.call(this, true);
- this.registerRequiredCSS("ui/listWidget.css");
+WebInspector.ListWidget = class extends WebInspector.VBox {
+ /**
+ * @param {!WebInspector.ListWidget.Delegate} delegate
+ */
+ constructor(delegate) {
+ super(true);
+ this.registerRequiredCSS('ui/listWidget.css');
this._delegate = delegate;
- this._list = this.contentElement.createChild("div", "list");
+ this._list = this.contentElement.createChild('div', 'list');
/** @type {?WebInspector.ListWidget.Editor} */
this._editor = null;
@@ -26,258 +26,245 @@ WebInspector.ListWidget = function(delegate)
this._emptyPlaceholder = null;
this.clear();
-};
-
-/**
- * @interface
- */
-WebInspector.ListWidget.Delegate = function()
-{
-};
-
-WebInspector.ListWidget.Delegate.prototype = {
- /**
- * @param {*} item
- * @param {boolean} editable
- * @return {!Element}
- */
- renderItem: function(item, editable) { },
+ }
+
+ clear() {
+ this._items = [];
+ this._editable = [];
+ this._elements = [];
+ this._lastSeparator = false;
+ this._list.removeChildren();
+ this._updatePlaceholder();
+ this._stopEditing();
+ }
+
+ /**
+ * @param {*} item
+ * @param {boolean} editable
+ */
+ appendItem(item, editable) {
+ if (this._lastSeparator && this._items.length)
+ this._list.appendChild(createElementWithClass('div', 'list-separator'));
+ this._lastSeparator = false;
+
+ this._items.push(item);
+ this._editable.push(editable);
+
+ var element = this._list.createChild('div', 'list-item');
+ element.appendChild(this._delegate.renderItem(item, editable));
+ if (editable) {
+ element.classList.add('editable');
+ element.appendChild(this._createControls(item, element));
+ }
+ this._elements.push(element);
+ this._updatePlaceholder();
+ }
+
+ appendSeparator() {
+ this._lastSeparator = true;
+ }
+
+ /**
+ * @param {number} index
+ */
+ removeItem(index) {
+ if (this._editItem === this._items[index])
+ this._stopEditing();
+
+ var element = this._elements[index];
+
+ var previous = element.previousElementSibling;
+ var previousIsSeparator = previous && previous.classList.contains('list-separator');
+
+ var next = element.nextElementSibling;
+ var nextIsSeparator = next && next.classList.contains('list-separator');
+
+ if (previousIsSeparator && (nextIsSeparator || !next))
+ previous.remove();
+ if (nextIsSeparator && !previous)
+ next.remove();
+ element.remove();
+
+ this._elements.splice(index, 1);
+ this._items.splice(index, 1);
+ this._editable.splice(index, 1);
+ this._updatePlaceholder();
+ }
+
+ /**
+ * @param {number} index
+ * @param {*} item
+ */
+ addNewItem(index, item) {
+ this._startEditing(item, null, this._elements[index] || null);
+ }
+
+ /**
+ * @param {?Element} element
+ */
+ setEmptyPlaceholder(element) {
+ this._emptyPlaceholder = element;
+ this._updatePlaceholder();
+ }
+
+ /**
+ * @param {*} item
+ * @param {!Element} element
+ * @return {!Element}
+ */
+ _createControls(item, element) {
+ var controls = createElementWithClass('div', 'controls-container fill');
+ var gradient = controls.createChild('div', 'controls-gradient');
+ var buttons = controls.createChild('div', 'controls-buttons');
+
+ var editButton = buttons.createChild('div', 'edit-button');
+ editButton.title = WebInspector.UIString('Edit');
+ editButton.addEventListener('click', onEditClicked.bind(this), false);
+
+ var removeButton = buttons.createChild('div', 'remove-button');
+ removeButton.title = WebInspector.UIString('Remove');
+ removeButton.addEventListener('click', onRemoveClicked.bind(this), false);
+
+ return controls;
/**
- * @param {*} item
- * @param {number} index
+ * @param {!Event} event
+ * @this {WebInspector.ListWidget}
*/
- removeItemRequested: function(item, index) { },
+ function onEditClicked(event) {
+ event.consume();
+ var index = this._elements.indexOf(element);
+ var insertionPoint = this._elements[index + 1] || null;
+ this._startEditing(item, element, insertionPoint);
+ }
/**
- * @param {*} item
- * @return {!WebInspector.ListWidget.Editor}
+ * @param {!Event} event
+ * @this {WebInspector.ListWidget}
*/
- beginEdit: function(item) { },
+ function onRemoveClicked(event) {
+ event.consume();
+ var index = this._elements.indexOf(element);
+ this._delegate.removeItemRequested(this._items[index], index);
+ }
+ }
+
+ /**
+ * @override
+ */
+ wasShown() {
+ super.wasShown();
+ this._stopEditing();
+ }
+
+ _updatePlaceholder() {
+ if (!this._emptyPlaceholder)
+ return;
+
+ if (!this._elements.length && !this._editor)
+ this._list.appendChild(this._emptyPlaceholder);
+ else
+ this._emptyPlaceholder.remove();
+ }
+
+ /**
+ * @param {*} item
+ * @param {?Element} element
+ * @param {?Element} insertionPoint
+ */
+ _startEditing(item, element, insertionPoint) {
+ if (element && this._editElement === element)
+ return;
+
+ this._stopEditing();
+
+ this._list.classList.add('list-editing');
+ this._editItem = item;
+ this._editElement = element;
+ if (element)
+ element.classList.add('hidden');
+
+ var index = element ? this._elements.indexOf(element) : -1;
+ this._editor = this._delegate.beginEdit(item);
+ this._updatePlaceholder();
+ this._list.insertBefore(this._editor.element, insertionPoint);
+ this._editor.beginEdit(
+ item, index, element ? WebInspector.UIString('Save') : WebInspector.UIString('Add'),
+ this._commitEditing.bind(this), this._stopEditing.bind(this));
+ }
+
+ _commitEditing() {
+ var editItem = this._editItem;
+ var isNew = !this._editElement;
+ var editor = /** @type {!WebInspector.ListWidget.Editor} */ (this._editor);
+ this._stopEditing();
+ this._delegate.commitEdit(editItem, editor, isNew);
+ }
+
+ _stopEditing() {
+ this._list.classList.remove('list-editing');
+ if (this._editElement)
+ this._editElement.classList.remove('hidden');
+ if (this._editor && this._editor.element.parentElement)
+ this._editor.element.remove();
- /**
- * @param {*} item
- * @param {!WebInspector.ListWidget.Editor} editor
- * @param {boolean} isNew
- */
- commitEdit: function(item, editor, isNew) { }
+ this._editor = null;
+ this._editItem = null;
+ this._editElement = null;
+ this._updatePlaceholder();
+ }
};
-WebInspector.ListWidget.prototype = {
- clear: function()
- {
- this._items = [];
- this._editable = [];
- this._elements = [];
- this._lastSeparator = false;
- this._list.removeChildren();
- this._updatePlaceholder();
- this._stopEditing();
- },
-
- /**
- * @param {*} item
- * @param {boolean} editable
- */
- appendItem: function(item, editable)
- {
- if (this._lastSeparator && this._items.length)
- this._list.appendChild(createElementWithClass("div", "list-separator"));
- this._lastSeparator = false;
-
- this._items.push(item);
- this._editable.push(editable);
-
- var element = this._list.createChild("div", "list-item");
- element.appendChild(this._delegate.renderItem(item, editable));
- if (editable) {
- element.classList.add("editable");
- element.appendChild(this._createControls(item, element));
- }
- this._elements.push(element);
- this._updatePlaceholder();
- },
-
- appendSeparator: function()
- {
- this._lastSeparator = true;
- },
-
- /**
- * @param {number} index
- */
- removeItem: function(index)
- {
- if (this._editItem === this._items[index])
- this._stopEditing();
-
- var element = this._elements[index];
-
- var previous = element.previousElementSibling;
- var previousIsSeparator = previous && previous.classList.contains("list-separator");
-
- var next = element.nextElementSibling;
- var nextIsSeparator = next && next.classList.contains("list-separator");
-
- if (previousIsSeparator && (nextIsSeparator || !next))
- previous.remove();
- if (nextIsSeparator && !previous)
- next.remove();
- element.remove();
-
- this._elements.splice(index, 1);
- this._items.splice(index, 1);
- this._editable.splice(index, 1);
- this._updatePlaceholder();
- },
-
- /**
- * @param {number} index
- * @param {*} item
- */
- addNewItem: function(index, item)
- {
- this._startEditing(item, null, this._elements[index] || null);
- },
-
- /**
- * @param {?Element} element
- */
- setEmptyPlaceholder: function(element)
- {
- this._emptyPlaceholder = element;
- this._updatePlaceholder();
- },
-
- /**
- * @param {*} item
- * @param {!Element} element
- * @return {!Element}
- */
- _createControls: function(item, element)
- {
- var controls = createElementWithClass("div", "controls-container fill");
- var gradient = controls.createChild("div", "controls-gradient");
- var buttons = controls.createChild("div", "controls-buttons");
-
- var editButton = buttons.createChild("div", "edit-button");
- editButton.title = WebInspector.UIString("Edit");
- editButton.addEventListener("click", onEditClicked.bind(this), false);
-
- var removeButton = buttons.createChild("div", "remove-button");
- removeButton.title = WebInspector.UIString("Remove");
- removeButton.addEventListener("click", onRemoveClicked.bind(this), false);
-
- return controls;
-
- /**
- * @param {!Event} event
- * @this {WebInspector.ListWidget}
- */
- function onEditClicked(event)
- {
- event.consume();
- var index = this._elements.indexOf(element);
- var insertionPoint = this._elements[index + 1] || null;
- this._startEditing(item, element, insertionPoint);
- }
-
- /**
- * @param {!Event} event
- * @this {WebInspector.ListWidget}
- */
- function onRemoveClicked(event)
- {
- event.consume();
- var index = this._elements.indexOf(element);
- this._delegate.removeItemRequested(this._items[index], index);
- }
- },
-
- wasShown: function()
- {
- WebInspector.VBox.prototype.wasShown.call(this);
- this._stopEditing();
- },
-
- _updatePlaceholder: function()
- {
- if (!this._emptyPlaceholder)
- return;
-
- if (!this._elements.length && !this._editor)
- this._list.appendChild(this._emptyPlaceholder);
- else
- this._emptyPlaceholder.remove();
- },
+/**
+ * @interface
+ */
+WebInspector.ListWidget.Delegate = function() {};
- /**
- * @param {*} item
- * @param {?Element} element
- * @param {?Element} insertionPoint
- */
- _startEditing: function(item, element, insertionPoint)
- {
- if (element && this._editElement === element)
- return;
-
- this._stopEditing();
-
- this._list.classList.add("list-editing");
- this._editItem = item;
- this._editElement = element;
- if (element)
- element.classList.add("hidden");
-
- var index = element ? this._elements.indexOf(element) : -1;
- this._editor = this._delegate.beginEdit(item);
- this._updatePlaceholder();
- this._list.insertBefore(this._editor.element, insertionPoint);
- this._editor.beginEdit(item, index, element ? WebInspector.UIString("Save") : WebInspector.UIString("Add"), this._commitEditing.bind(this), this._stopEditing.bind(this));
- },
-
- _commitEditing: function()
- {
- var editItem = this._editItem;
- var isNew = !this._editElement;
- var editor = /** @type {!WebInspector.ListWidget.Editor} */ (this._editor);
- this._stopEditing();
- this._delegate.commitEdit(editItem, editor, isNew);
- },
-
- _stopEditing: function()
- {
- this._list.classList.remove("list-editing");
- if (this._editElement)
- this._editElement.classList.remove("hidden");
- if (this._editor && this._editor.element.parentElement)
- this._editor.element.remove();
-
- this._editor = null;
- this._editItem = null;
- this._editElement = null;
- this._updatePlaceholder();
- },
-
- __proto__: WebInspector.VBox.prototype
+WebInspector.ListWidget.Delegate.prototype = {
+ /**
+ * @param {*} item
+ * @param {boolean} editable
+ * @return {!Element}
+ */
+ renderItem: function(item, editable) {},
+
+ /**
+ * @param {*} item
+ * @param {number} index
+ */
+ removeItemRequested: function(item, index) {},
+
+ /**
+ * @param {*} item
+ * @return {!WebInspector.ListWidget.Editor}
+ */
+ beginEdit: function(item) {},
+
+ /**
+ * @param {*} item
+ * @param {!WebInspector.ListWidget.Editor} editor
+ * @param {boolean} isNew
+ */
+ commitEdit: function(item, editor, isNew) {}
};
/**
- * @constructor
+ * @unrestricted
*/
-WebInspector.ListWidget.Editor = function()
-{
- this.element = createElementWithClass("div", "editor-container");
- this.element.addEventListener("keydown", onKeyDown.bind(null, isEscKey, this._cancelClicked.bind(this)), false);
- this.element.addEventListener("keydown", onKeyDown.bind(null, isEnterKey, this._commitClicked.bind(this)), false);
+WebInspector.ListWidget.Editor = class {
+ constructor() {
+ this.element = createElementWithClass('div', 'editor-container');
+ this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this._cancelClicked.bind(this)), false);
+ this.element.addEventListener('keydown', onKeyDown.bind(null, isEnterKey, this._commitClicked.bind(this)), false);
- this._contentElement = this.element.createChild("div", "editor-content");
+ this._contentElement = this.element.createChild('div', 'editor-content');
- var buttonsRow = this.element.createChild("div", "editor-buttons");
- this._commitButton = createTextButton("", this._commitClicked.bind(this));
+ var buttonsRow = this.element.createChild('div', 'editor-buttons');
+ this._commitButton = createTextButton('', this._commitClicked.bind(this));
buttonsRow.appendChild(this._commitButton);
- this._cancelButton = createTextButton(WebInspector.UIString("Cancel"), this._cancelClicked.bind(this));
- this._cancelButton.addEventListener("keydown", onKeyDown.bind(null, isEnterKey, this._cancelClicked.bind(this)), false);
+ this._cancelButton = createTextButton(WebInspector.UIString('Cancel'), this._cancelClicked.bind(this));
+ this._cancelButton.addEventListener(
+ 'keydown', onKeyDown.bind(null, isEnterKey, this._cancelClicked.bind(this)), false);
buttonsRow.appendChild(this._cancelButton);
/**
@@ -285,12 +272,11 @@ WebInspector.ListWidget.Editor = function()
* @param {function()} callback
* @param {!Event} event
*/
- function onKeyDown(predicate, callback, event)
- {
- if (predicate(event)) {
- event.consume(true);
- callback();
- }
+ function onKeyDown(predicate, callback, event) {
+ if (predicate(event)) {
+ event.consume(true);
+ callback();
+ }
}
/** @type {!Array<!HTMLInputElement|!HTMLSelectElement>} */
@@ -308,124 +294,115 @@ WebInspector.ListWidget.Editor = function()
this._item = null;
/** @type {number} */
this._index = -1;
-};
-
-WebInspector.ListWidget.Editor.prototype = {
- /**
- * @return {!Element}
- */
- contentElement: function()
- {
- return this._contentElement;
- },
-
- /**
- * @param {string} name
- * @param {string} type
- * @param {string} title
- * @param {function(*, number, (!HTMLInputElement|!HTMLSelectElement)):boolean} validator
- * @return {!HTMLInputElement}
- */
- createInput: function(name, type, title, validator)
- {
- var input = /** @type {!HTMLInputElement} */ (createElement("input"));
- input.type = type;
- input.placeholder = title;
- input.addEventListener("input", this._validateControls.bind(this, false), false);
- input.addEventListener("blur", this._validateControls.bind(this, false), false);
- this._controlByName.set(name, input);
- this._controls.push(input);
- this._validators.push(validator);
- return input;
- },
-
- /**
- * @param {string} name
- * @param {!Array<string>} options
- * @param {function(*, number, (!HTMLInputElement|!HTMLSelectElement)):boolean} validator
- * @return {!HTMLSelectElement}
- */
- createSelect: function(name, options, validator)
- {
- var select = /** @type {!HTMLSelectElement} */ (createElementWithClass("select", "chrome-select"));
- for (var index = 0; index < options.length; ++index) {
- var option = select.createChild("option");
- option.value = options[index];
- option.textContent = options[index];
- }
- select.addEventListener("input", this._validateControls.bind(this, false), false);
- select.addEventListener("blur", this._validateControls.bind(this, false), false);
- this._controlByName.set(name, select);
- this._controls.push(select);
- this._validators.push(validator);
- return select;
- },
-
- /**
- * @param {string} name
- * @return {!HTMLInputElement|!HTMLSelectElement}
- */
- control: function(name)
- {
- return /** @type {!HTMLInputElement|!HTMLSelectElement} */ (this._controlByName.get(name));
- },
-
- /**
- * @param {boolean} forceValid
- */
- _validateControls: function(forceValid)
- {
- var allValid = true;
- for (var index = 0; index < this._controls.length; ++index) {
- var input = this._controls[index];
- var valid = this._validators[index].call(null, this._item, this._index, input);
- input.classList.toggle("error-input", !valid && !forceValid);
- allValid &= valid;
- }
- this._commitButton.disabled = !allValid;
- },
-
- /**
- * @param {*} item
- * @param {number} index
- * @param {string} commitButtonTitle
- * @param {function()} commit
- * @param {function()} cancel
- */
- beginEdit: function(item, index, commitButtonTitle, commit, cancel)
- {
- this._commit = commit;
- this._cancel = cancel;
- this._item = item;
- this._index = index;
-
- this._commitButton.textContent = commitButtonTitle;
- this.element.scrollIntoViewIfNeeded(false);
- if (this._controls.length)
- this._controls[0].focus();
- this._validateControls(true);
- },
-
- _commitClicked: function()
- {
- if (this._commitButton.disabled)
- return;
-
- var commit = this._commit;
- this._commit = null;
- this._cancel = null;
- this._item = null;
- this._index = -1;
- commit();
- },
-
- _cancelClicked: function()
- {
- var cancel = this._cancel;
- this._commit = null;
- this._cancel = null;
- this._item = null;
- this._index = -1;
- cancel();
+ }
+
+ /**
+ * @return {!Element}
+ */
+ contentElement() {
+ return this._contentElement;
+ }
+
+ /**
+ * @param {string} name
+ * @param {string} type
+ * @param {string} title
+ * @param {function(*, number, (!HTMLInputElement|!HTMLSelectElement)):boolean} validator
+ * @return {!HTMLInputElement}
+ */
+ createInput(name, type, title, validator) {
+ var input = /** @type {!HTMLInputElement} */ (createElement('input'));
+ input.type = type;
+ input.placeholder = title;
+ input.addEventListener('input', this._validateControls.bind(this, false), false);
+ input.addEventListener('blur', this._validateControls.bind(this, false), false);
+ this._controlByName.set(name, input);
+ this._controls.push(input);
+ this._validators.push(validator);
+ return input;
+ }
+
+ /**
+ * @param {string} name
+ * @param {!Array<string>} options
+ * @param {function(*, number, (!HTMLInputElement|!HTMLSelectElement)):boolean} validator
+ * @return {!HTMLSelectElement}
+ */
+ createSelect(name, options, validator) {
+ var select = /** @type {!HTMLSelectElement} */ (createElementWithClass('select', 'chrome-select'));
+ for (var index = 0; index < options.length; ++index) {
+ var option = select.createChild('option');
+ option.value = options[index];
+ option.textContent = options[index];
+ }
+ select.addEventListener('input', this._validateControls.bind(this, false), false);
+ select.addEventListener('blur', this._validateControls.bind(this, false), false);
+ this._controlByName.set(name, select);
+ this._controls.push(select);
+ this._validators.push(validator);
+ return select;
+ }
+
+ /**
+ * @param {string} name
+ * @return {!HTMLInputElement|!HTMLSelectElement}
+ */
+ control(name) {
+ return /** @type {!HTMLInputElement|!HTMLSelectElement} */ (this._controlByName.get(name));
+ }
+
+ /**
+ * @param {boolean} forceValid
+ */
+ _validateControls(forceValid) {
+ var allValid = true;
+ for (var index = 0; index < this._controls.length; ++index) {
+ var input = this._controls[index];
+ var valid = this._validators[index].call(null, this._item, this._index, input);
+ input.classList.toggle('error-input', !valid && !forceValid);
+ allValid &= valid;
}
+ this._commitButton.disabled = !allValid;
+ }
+
+ /**
+ * @param {*} item
+ * @param {number} index
+ * @param {string} commitButtonTitle
+ * @param {function()} commit
+ * @param {function()} cancel
+ */
+ beginEdit(item, index, commitButtonTitle, commit, cancel) {
+ this._commit = commit;
+ this._cancel = cancel;
+ this._item = item;
+ this._index = index;
+
+ this._commitButton.textContent = commitButtonTitle;
+ this.element.scrollIntoViewIfNeeded(false);
+ if (this._controls.length)
+ this._controls[0].focus();
+ this._validateControls(true);
+ }
+
+ _commitClicked() {
+ if (this._commitButton.disabled)
+ return;
+
+ var commit = this._commit;
+ this._commit = null;
+ this._cancel = null;
+ this._item = null;
+ this._index = -1;
+ commit();
+ }
+
+ _cancelClicked() {
+ var cancel = this._cancel;
+ this._commit = null;
+ this._cancel = null;
+ this._item = null;
+ this._index = -1;
+ cancel();
+ }
};

Powered by Google App Engine
This is Rietveld 408576698