| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 /** | 4 /** |
| 5 * @unrestricted | 5 * @unrestricted |
| 6 */ | 6 */ |
| 7 WebInspector.ListWidget = class extends WebInspector.VBox { | 7 UI.ListWidget = class extends UI.VBox { |
| 8 /** | 8 /** |
| 9 * @param {!WebInspector.ListWidget.Delegate} delegate | 9 * @param {!UI.ListWidget.Delegate} delegate |
| 10 */ | 10 */ |
| 11 constructor(delegate) { | 11 constructor(delegate) { |
| 12 super(true); | 12 super(true); |
| 13 this.registerRequiredCSS('ui/listWidget.css'); | 13 this.registerRequiredCSS('ui/listWidget.css'); |
| 14 this._delegate = delegate; | 14 this._delegate = delegate; |
| 15 | 15 |
| 16 this._list = this.contentElement.createChild('div', 'list'); | 16 this._list = this.contentElement.createChild('div', 'list'); |
| 17 | 17 |
| 18 /** @type {?WebInspector.ListWidget.Editor} */ | 18 /** @type {?UI.ListWidget.Editor} */ |
| 19 this._editor = null; | 19 this._editor = null; |
| 20 /** @type {*|null} */ | 20 /** @type {*|null} */ |
| 21 this._editItem = null; | 21 this._editItem = null; |
| 22 /** @type {?Element} */ | 22 /** @type {?Element} */ |
| 23 this._editElement = null; | 23 this._editElement = null; |
| 24 | 24 |
| 25 /** @type {?Element} */ | 25 /** @type {?Element} */ |
| 26 this._emptyPlaceholder = null; | 26 this._emptyPlaceholder = null; |
| 27 | 27 |
| 28 this.clear(); | 28 this.clear(); |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 111 * @param {*} item | 111 * @param {*} item |
| 112 * @param {!Element} element | 112 * @param {!Element} element |
| 113 * @return {!Element} | 113 * @return {!Element} |
| 114 */ | 114 */ |
| 115 _createControls(item, element) { | 115 _createControls(item, element) { |
| 116 var controls = createElementWithClass('div', 'controls-container fill'); | 116 var controls = createElementWithClass('div', 'controls-container fill'); |
| 117 var gradient = controls.createChild('div', 'controls-gradient'); | 117 var gradient = controls.createChild('div', 'controls-gradient'); |
| 118 var buttons = controls.createChild('div', 'controls-buttons'); | 118 var buttons = controls.createChild('div', 'controls-buttons'); |
| 119 | 119 |
| 120 var editButton = buttons.createChild('div', 'edit-button'); | 120 var editButton = buttons.createChild('div', 'edit-button'); |
| 121 editButton.title = WebInspector.UIString('Edit'); | 121 editButton.title = Common.UIString('Edit'); |
| 122 editButton.addEventListener('click', onEditClicked.bind(this), false); | 122 editButton.addEventListener('click', onEditClicked.bind(this), false); |
| 123 | 123 |
| 124 var removeButton = buttons.createChild('div', 'remove-button'); | 124 var removeButton = buttons.createChild('div', 'remove-button'); |
| 125 removeButton.title = WebInspector.UIString('Remove'); | 125 removeButton.title = Common.UIString('Remove'); |
| 126 removeButton.addEventListener('click', onRemoveClicked.bind(this), false); | 126 removeButton.addEventListener('click', onRemoveClicked.bind(this), false); |
| 127 | 127 |
| 128 return controls; | 128 return controls; |
| 129 | 129 |
| 130 /** | 130 /** |
| 131 * @param {!Event} event | 131 * @param {!Event} event |
| 132 * @this {WebInspector.ListWidget} | 132 * @this {UI.ListWidget} |
| 133 */ | 133 */ |
| 134 function onEditClicked(event) { | 134 function onEditClicked(event) { |
| 135 event.consume(); | 135 event.consume(); |
| 136 var index = this._elements.indexOf(element); | 136 var index = this._elements.indexOf(element); |
| 137 var insertionPoint = this._elements[index + 1] || null; | 137 var insertionPoint = this._elements[index + 1] || null; |
| 138 this._startEditing(item, element, insertionPoint); | 138 this._startEditing(item, element, insertionPoint); |
| 139 } | 139 } |
| 140 | 140 |
| 141 /** | 141 /** |
| 142 * @param {!Event} event | 142 * @param {!Event} event |
| 143 * @this {WebInspector.ListWidget} | 143 * @this {UI.ListWidget} |
| 144 */ | 144 */ |
| 145 function onRemoveClicked(event) { | 145 function onRemoveClicked(event) { |
| 146 event.consume(); | 146 event.consume(); |
| 147 var index = this._elements.indexOf(element); | 147 var index = this._elements.indexOf(element); |
| 148 this._delegate.removeItemRequested(this._items[index], index); | 148 this._delegate.removeItemRequested(this._items[index], index); |
| 149 } | 149 } |
| 150 } | 150 } |
| 151 | 151 |
| 152 /** | 152 /** |
| 153 * @override | 153 * @override |
| (...skipping 28 matching lines...) Expand all Loading... |
| 182 this._editItem = item; | 182 this._editItem = item; |
| 183 this._editElement = element; | 183 this._editElement = element; |
| 184 if (element) | 184 if (element) |
| 185 element.classList.add('hidden'); | 185 element.classList.add('hidden'); |
| 186 | 186 |
| 187 var index = element ? this._elements.indexOf(element) : -1; | 187 var index = element ? this._elements.indexOf(element) : -1; |
| 188 this._editor = this._delegate.beginEdit(item); | 188 this._editor = this._delegate.beginEdit(item); |
| 189 this._updatePlaceholder(); | 189 this._updatePlaceholder(); |
| 190 this._list.insertBefore(this._editor.element, insertionPoint); | 190 this._list.insertBefore(this._editor.element, insertionPoint); |
| 191 this._editor.beginEdit( | 191 this._editor.beginEdit( |
| 192 item, index, element ? WebInspector.UIString('Save') : WebInspector.UISt
ring('Add'), | 192 item, index, element ? Common.UIString('Save') : Common.UIString('Add'), |
| 193 this._commitEditing.bind(this), this._stopEditing.bind(this)); | 193 this._commitEditing.bind(this), this._stopEditing.bind(this)); |
| 194 } | 194 } |
| 195 | 195 |
| 196 _commitEditing() { | 196 _commitEditing() { |
| 197 var editItem = this._editItem; | 197 var editItem = this._editItem; |
| 198 var isNew = !this._editElement; | 198 var isNew = !this._editElement; |
| 199 var editor = /** @type {!WebInspector.ListWidget.Editor} */ (this._editor); | 199 var editor = /** @type {!UI.ListWidget.Editor} */ (this._editor); |
| 200 this._stopEditing(); | 200 this._stopEditing(); |
| 201 this._delegate.commitEdit(editItem, editor, isNew); | 201 this._delegate.commitEdit(editItem, editor, isNew); |
| 202 } | 202 } |
| 203 | 203 |
| 204 _stopEditing() { | 204 _stopEditing() { |
| 205 this._list.classList.remove('list-editing'); | 205 this._list.classList.remove('list-editing'); |
| 206 if (this._editElement) | 206 if (this._editElement) |
| 207 this._editElement.classList.remove('hidden'); | 207 this._editElement.classList.remove('hidden'); |
| 208 if (this._editor && this._editor.element.parentElement) | 208 if (this._editor && this._editor.element.parentElement) |
| 209 this._editor.element.remove(); | 209 this._editor.element.remove(); |
| 210 | 210 |
| 211 this._editor = null; | 211 this._editor = null; |
| 212 this._editItem = null; | 212 this._editItem = null; |
| 213 this._editElement = null; | 213 this._editElement = null; |
| 214 this._updatePlaceholder(); | 214 this._updatePlaceholder(); |
| 215 } | 215 } |
| 216 }; | 216 }; |
| 217 | 217 |
| 218 /** | 218 /** |
| 219 * @interface | 219 * @interface |
| 220 */ | 220 */ |
| 221 WebInspector.ListWidget.Delegate = function() {}; | 221 UI.ListWidget.Delegate = function() {}; |
| 222 | 222 |
| 223 WebInspector.ListWidget.Delegate.prototype = { | 223 UI.ListWidget.Delegate.prototype = { |
| 224 /** | 224 /** |
| 225 * @param {*} item | 225 * @param {*} item |
| 226 * @param {boolean} editable | 226 * @param {boolean} editable |
| 227 * @return {!Element} | 227 * @return {!Element} |
| 228 */ | 228 */ |
| 229 renderItem: function(item, editable) {}, | 229 renderItem: function(item, editable) {}, |
| 230 | 230 |
| 231 /** | 231 /** |
| 232 * @param {*} item | 232 * @param {*} item |
| 233 * @param {number} index | 233 * @param {number} index |
| 234 */ | 234 */ |
| 235 removeItemRequested: function(item, index) {}, | 235 removeItemRequested: function(item, index) {}, |
| 236 | 236 |
| 237 /** | 237 /** |
| 238 * @param {*} item | 238 * @param {*} item |
| 239 * @return {!WebInspector.ListWidget.Editor} | 239 * @return {!UI.ListWidget.Editor} |
| 240 */ | 240 */ |
| 241 beginEdit: function(item) {}, | 241 beginEdit: function(item) {}, |
| 242 | 242 |
| 243 /** | 243 /** |
| 244 * @param {*} item | 244 * @param {*} item |
| 245 * @param {!WebInspector.ListWidget.Editor} editor | 245 * @param {!UI.ListWidget.Editor} editor |
| 246 * @param {boolean} isNew | 246 * @param {boolean} isNew |
| 247 */ | 247 */ |
| 248 commitEdit: function(item, editor, isNew) {} | 248 commitEdit: function(item, editor, isNew) {} |
| 249 }; | 249 }; |
| 250 | 250 |
| 251 /** | 251 /** |
| 252 * @unrestricted | 252 * @unrestricted |
| 253 */ | 253 */ |
| 254 WebInspector.ListWidget.Editor = class { | 254 UI.ListWidget.Editor = class { |
| 255 constructor() { | 255 constructor() { |
| 256 this.element = createElementWithClass('div', 'editor-container'); | 256 this.element = createElementWithClass('div', 'editor-container'); |
| 257 this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this
._cancelClicked.bind(this)), false); | 257 this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this
._cancelClicked.bind(this)), false); |
| 258 this.element.addEventListener('keydown', onKeyDown.bind(null, isEnterKey, th
is._commitClicked.bind(this)), false); | 258 this.element.addEventListener('keydown', onKeyDown.bind(null, isEnterKey, th
is._commitClicked.bind(this)), false); |
| 259 | 259 |
| 260 this._contentElement = this.element.createChild('div', 'editor-content'); | 260 this._contentElement = this.element.createChild('div', 'editor-content'); |
| 261 | 261 |
| 262 var buttonsRow = this.element.createChild('div', 'editor-buttons'); | 262 var buttonsRow = this.element.createChild('div', 'editor-buttons'); |
| 263 this._commitButton = createTextButton('', this._commitClicked.bind(this)); | 263 this._commitButton = createTextButton('', this._commitClicked.bind(this)); |
| 264 buttonsRow.appendChild(this._commitButton); | 264 buttonsRow.appendChild(this._commitButton); |
| 265 this._cancelButton = createTextButton(WebInspector.UIString('Cancel'), this.
_cancelClicked.bind(this)); | 265 this._cancelButton = createTextButton(Common.UIString('Cancel'), this._cance
lClicked.bind(this)); |
| 266 this._cancelButton.addEventListener( | 266 this._cancelButton.addEventListener( |
| 267 'keydown', onKeyDown.bind(null, isEnterKey, this._cancelClicked.bind(thi
s)), false); | 267 'keydown', onKeyDown.bind(null, isEnterKey, this._cancelClicked.bind(thi
s)), false); |
| 268 buttonsRow.appendChild(this._cancelButton); | 268 buttonsRow.appendChild(this._cancelButton); |
| 269 | 269 |
| 270 /** | 270 /** |
| 271 * @param {function(!Event):boolean} predicate | 271 * @param {function(!Event):boolean} predicate |
| 272 * @param {function()} callback | 272 * @param {function()} callback |
| 273 * @param {!Event} event | 273 * @param {!Event} event |
| 274 */ | 274 */ |
| 275 function onKeyDown(predicate, callback, event) { | 275 function onKeyDown(predicate, callback, event) { |
| (...skipping 123 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 399 | 399 |
| 400 _cancelClicked() { | 400 _cancelClicked() { |
| 401 var cancel = this._cancel; | 401 var cancel = this._cancel; |
| 402 this._commit = null; | 402 this._commit = null; |
| 403 this._cancel = null; | 403 this._cancel = null; |
| 404 this._item = null; | 404 this._item = null; |
| 405 this._index = -1; | 405 this._index = -1; |
| 406 cancel(); | 406 cancel(); |
| 407 } | 407 } |
| 408 }; | 408 }; |
| OLD | NEW |