Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 1 | // Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| 2 | // Use of this source code is governed by a BSD-style license that can be |
| 3 | // found in the LICENSE file. |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 4 | |
| 5 | import * as Common from '../common/common.js'; |
Simon Zünd | da7058f | 2020-02-28 13:57:28 | [diff] [blame] | 6 | import * as Platform from '../platform/platform.js'; |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 7 | import * as SDK from '../sdk/sdk.js'; |
| 8 | import * as UI from '../ui/ui.js'; |
| 9 | |
Tim van der Lippe | aabc830 | 2019-12-10 15:34:45 | [diff] [blame] | 10 | import {ElementsPanel} from './ElementsPanel.js'; |
| 11 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 12 | /** |
| 13 | * @unrestricted |
| 14 | */ |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 15 | export class ClassesPaneWidget extends UI.Widget.Widget { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 16 | constructor() { |
| 17 | super(true); |
| 18 | this.registerRequiredCSS('elements/classesPaneWidget.css'); |
| 19 | this.contentElement.className = 'styles-element-classes-pane'; |
| 20 | const container = this.contentElement.createChild('div', 'title-container'); |
| 21 | this._input = container.createChild('div', 'new-class-input monospace'); |
| 22 | this.setDefaultFocusedElement(this._input); |
| 23 | this._classesContainer = this.contentElement.createChild('div', 'source-code'); |
| 24 | this._classesContainer.classList.add('styles-element-classes-container'); |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 25 | this._prompt = new ClassNamePrompt(this._nodeClasses.bind(this)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 26 | this._prompt.setAutocompletionTimeout(0); |
| 27 | this._prompt.renderAsBlock(); |
| 28 | |
| 29 | const proxyElement = this._prompt.attach(this._input); |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 30 | this._prompt.setPlaceholder(Common.UIString.UIString('Add new class')); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 31 | this._prompt.addEventListener(UI.TextPrompt.Events.TextChanged, this._onTextChanged, this); |
| 32 | proxyElement.addEventListener('keydown', this._onKeyDown.bind(this), false); |
| 33 | |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 34 | SDK.SDKModel.TargetManager.instance().addModelListener( |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 35 | SDK.DOMModel.DOMModel, SDK.DOMModel.Events.DOMMutated, this._onDOMMutated, this); |
| 36 | /** @type {!Set<!SDK.DOMModel.DOMNode>} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 37 | this._mutatingNodes = new Set(); |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 38 | /** @type {!Map<!SDK.DOMModel.DOMNode, string>} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 39 | this._pendingNodeClasses = new Map(); |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 40 | this._updateNodeThrottler = new Common.Throttler.Throttler(0); |
| 41 | /** @type {?SDK.DOMModel.DOMNode} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 42 | this._previousTarget = null; |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 43 | self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this._onSelectedNodeChanged, this); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 44 | } |
| 45 | |
| 46 | /** |
| 47 | * @param {string} text |
| 48 | * @return {!Array.<string>} |
| 49 | */ |
| 50 | _splitTextIntoClasses(text) { |
| 51 | return text.split(/[.,\s]/) |
| 52 | .map(className => className.trim()) |
| 53 | .filter(className => className.length); |
| 54 | } |
| 55 | |
| 56 | /** |
| 57 | * @param {!Event} event |
| 58 | */ |
| 59 | _onKeyDown(event) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 60 | if (!isEnterKey(event) && !isEscKey(event)) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 61 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 62 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 63 | |
| 64 | if (isEnterKey(event)) { |
| 65 | event.consume(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 66 | if (this._prompt.acceptAutoComplete()) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 67 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 68 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 69 | } |
| 70 | |
| 71 | let text = event.target.textContent; |
| 72 | if (isEscKey(event)) { |
Simon Zünd | da7058f | 2020-02-28 13:57:28 | [diff] [blame] | 73 | if (!Platform.StringUtilities.isWhitespace(text)) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 74 | event.consume(true); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 75 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 76 | text = ''; |
| 77 | } |
| 78 | |
| 79 | this._prompt.clearAutocomplete(); |
| 80 | event.target.textContent = ''; |
| 81 | |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 82 | const node = self.UI.context.flavor(SDK.DOMModel.DOMNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 83 | if (!node) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 84 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 85 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 86 | |
| 87 | const classNames = this._splitTextIntoClasses(text); |
Michael Liao | cafccfd | 2020-04-02 17:11:59 | [diff] [blame^] | 88 | if (!classNames.length) { |
| 89 | return; |
| 90 | } |
| 91 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 92 | for (const className of classNames) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 93 | this._toggleClass(node, className, true); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 94 | } |
Michael Liao | cafccfd | 2020-04-02 17:11:59 | [diff] [blame^] | 95 | |
| 96 | // annoucementString is used for screen reader to announce that the class(es) has been added successfully. |
| 97 | const joinClassString = classNames.join(' '); |
| 98 | const announcementString = |
| 99 | classNames.length > 1 ? ls`Classes ${joinClassString} added.` : ls`Class ${joinClassString} added.`; |
| 100 | UI.ARIAUtils.alert(announcementString, this.contentElement); |
| 101 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 102 | this._installNodeClasses(node); |
| 103 | this._update(); |
| 104 | } |
| 105 | |
| 106 | _onTextChanged() { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 107 | const node = self.UI.context.flavor(SDK.DOMModel.DOMNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 108 | if (!node) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 109 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 110 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 111 | this._installNodeClasses(node); |
| 112 | } |
| 113 | |
| 114 | /** |
Tim van der Lippe | c02a97c | 2020-02-14 14:39:27 | [diff] [blame] | 115 | * @param {!Common.EventTarget.EventTargetEvent} event |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 116 | */ |
| 117 | _onDOMMutated(event) { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 118 | const node = /** @type {!SDK.DOMModel.DOMNode} */ (event.data); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 119 | if (this._mutatingNodes.has(node)) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 120 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 121 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 122 | delete node[ClassesPaneWidget._classesSymbol]; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 123 | this._update(); |
| 124 | } |
| 125 | |
| 126 | /** |
Tim van der Lippe | c02a97c | 2020-02-14 14:39:27 | [diff] [blame] | 127 | * @param {!Common.EventTarget.EventTargetEvent} event |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 128 | */ |
| 129 | _onSelectedNodeChanged(event) { |
| 130 | if (this._previousTarget && this._prompt.text()) { |
| 131 | this._input.textContent = ''; |
| 132 | this._installNodeClasses(this._previousTarget); |
| 133 | } |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 134 | this._previousTarget = /** @type {?SDK.DOMModel.DOMNode} */ (event.data); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 135 | this._update(); |
| 136 | } |
| 137 | |
| 138 | /** |
| 139 | * @override |
| 140 | */ |
| 141 | wasShown() { |
| 142 | this._update(); |
| 143 | } |
| 144 | |
| 145 | _update() { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 146 | if (!this.isShowing()) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 147 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 148 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 149 | |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 150 | let node = self.UI.context.flavor(SDK.DOMModel.DOMNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 151 | if (node) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 152 | node = node.enclosingElementOrSelf(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 153 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 154 | |
| 155 | this._classesContainer.removeChildren(); |
| 156 | this._input.disabled = !node; |
| 157 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 158 | if (!node) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 159 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 160 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 161 | |
| 162 | const classes = this._nodeClasses(node); |
Simon Zünd | f27be3d | 2020-02-11 14:46:27 | [diff] [blame] | 163 | const keys = [...classes.keys()]; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 164 | keys.sort(String.caseInsensetiveComparator); |
| 165 | for (let i = 0; i < keys.length; ++i) { |
| 166 | const className = keys[i]; |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 167 | const label = UI.UIUtils.CheckboxLabel.create(className, classes.get(className)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 168 | label.classList.add('monospace'); |
| 169 | label.checkboxElement.addEventListener('click', this._onClick.bind(this, className), false); |
| 170 | this._classesContainer.appendChild(label); |
| 171 | } |
| 172 | } |
| 173 | |
| 174 | /** |
| 175 | * @param {string} className |
| 176 | * @param {!Event} event |
| 177 | */ |
| 178 | _onClick(className, event) { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 179 | const node = self.UI.context.flavor(SDK.DOMModel.DOMNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 180 | if (!node) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 181 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 182 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 183 | const enabled = event.target.checked; |
| 184 | this._toggleClass(node, className, enabled); |
| 185 | this._installNodeClasses(node); |
| 186 | } |
| 187 | |
| 188 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 189 | * @param {!SDK.DOMModel.DOMNode} node |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 190 | * @return {!Map<string, boolean>} |
| 191 | */ |
| 192 | _nodeClasses(node) { |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 193 | let result = node[ClassesPaneWidget._classesSymbol]; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 194 | if (!result) { |
| 195 | const classAttribute = node.getAttribute('class') || ''; |
| 196 | const classes = classAttribute.split(/\s/); |
| 197 | result = new Map(); |
| 198 | for (let i = 0; i < classes.length; ++i) { |
| 199 | const className = classes[i].trim(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 200 | if (!className.length) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 201 | continue; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 202 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 203 | result.set(className, true); |
| 204 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 205 | node[ClassesPaneWidget._classesSymbol] = result; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 206 | } |
| 207 | return result; |
| 208 | } |
| 209 | |
| 210 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 211 | * @param {!SDK.DOMModel.DOMNode} node |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 212 | * @param {string} className |
| 213 | * @param {boolean} enabled |
| 214 | */ |
| 215 | _toggleClass(node, className, enabled) { |
| 216 | const classes = this._nodeClasses(node); |
| 217 | classes.set(className, enabled); |
| 218 | } |
| 219 | |
| 220 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 221 | * @param {!SDK.DOMModel.DOMNode} node |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 222 | */ |
| 223 | _installNodeClasses(node) { |
| 224 | const classes = this._nodeClasses(node); |
| 225 | const activeClasses = new Set(); |
| 226 | for (const className of classes.keys()) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 227 | if (classes.get(className)) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 228 | activeClasses.add(className); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 229 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 230 | } |
| 231 | |
| 232 | const additionalClasses = this._splitTextIntoClasses(this._prompt.textWithCurrentSuggestion()); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 233 | for (const className of additionalClasses) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 234 | activeClasses.add(className); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 235 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 236 | |
Simon Zünd | a0d4062 | 2020-02-12 13:16:42 | [diff] [blame] | 237 | const newClasses = [...activeClasses.values()].sort(); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 238 | |
| 239 | this._pendingNodeClasses.set(node, newClasses.join(' ')); |
| 240 | this._updateNodeThrottler.schedule(this._flushPendingClasses.bind(this)); |
| 241 | } |
| 242 | |
| 243 | /** |
| 244 | * @return {!Promise} |
| 245 | */ |
| 246 | _flushPendingClasses() { |
| 247 | const promises = []; |
| 248 | for (const node of this._pendingNodeClasses.keys()) { |
| 249 | this._mutatingNodes.add(node); |
| 250 | const promise = node.setAttributeValuePromise('class', this._pendingNodeClasses.get(node)) |
| 251 | .then(onClassValueUpdated.bind(this, node)); |
| 252 | promises.push(promise); |
| 253 | } |
| 254 | this._pendingNodeClasses.clear(); |
| 255 | return Promise.all(promises); |
| 256 | |
| 257 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 258 | * @param {!SDK.DOMModel.DOMNode} node |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 259 | * @this {ClassesPaneWidget} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 260 | */ |
| 261 | function onClassValueUpdated(node) { |
| 262 | this._mutatingNodes.delete(node); |
| 263 | } |
| 264 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 265 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 266 | |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 267 | ClassesPaneWidget._classesSymbol = Symbol('ClassesPaneWidget._classesSymbol'); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 268 | |
| 269 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 270 | * @implements {UI.Toolbar.Provider} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 271 | * @unrestricted |
| 272 | */ |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 273 | export class ButtonProvider { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 274 | constructor() { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 275 | this._button = new UI.Toolbar.ToolbarToggle(Common.UIString.UIString('Element Classes'), ''); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 276 | this._button.setText('.cls'); |
| 277 | this._button.element.classList.add('monospace'); |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 278 | this._button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this._clicked, this); |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 279 | this._view = new ClassesPaneWidget(); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 280 | } |
| 281 | |
| 282 | _clicked() { |
Tim van der Lippe | aabc830 | 2019-12-10 15:34:45 | [diff] [blame] | 283 | ElementsPanel.instance().showToolbarPane(!this._view.isShowing() ? this._view : null, this._button); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 284 | } |
| 285 | |
| 286 | /** |
| 287 | * @override |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 288 | * @return {!UI.Toolbar.ToolbarItem} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 289 | */ |
| 290 | item() { |
| 291 | return this._button; |
| 292 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 293 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 294 | |
| 295 | /** |
| 296 | * @unrestricted |
| 297 | */ |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 298 | export class ClassNamePrompt extends UI.TextPrompt.TextPrompt { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 299 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 300 | * @param {function(!SDK.DOMModel.DOMNode):!Map<string, boolean>} nodeClasses |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 301 | */ |
| 302 | constructor(nodeClasses) { |
| 303 | super(); |
| 304 | this._nodeClasses = nodeClasses; |
| 305 | this.initialize(this._buildClassNameCompletions.bind(this), ' '); |
| 306 | this.disableDefaultSuggestionForEmptyInput(); |
| 307 | this._selectedFrameId = ''; |
| 308 | this._classNamesPromise = null; |
| 309 | } |
| 310 | |
| 311 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 312 | * @param {!SDK.DOMModel.DOMNode} selectedNode |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 313 | * @return {!Promise.<!Array.<string>>} |
| 314 | */ |
| 315 | _getClassNames(selectedNode) { |
| 316 | const promises = []; |
| 317 | const completions = new Set(); |
| 318 | this._selectedFrameId = selectedNode.frameId(); |
| 319 | |
| 320 | const cssModel = selectedNode.domModel().cssModel(); |
| 321 | const allStyleSheets = cssModel.allStyleSheets(); |
| 322 | for (const stylesheet of allStyleSheets) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 323 | if (stylesheet.frameId !== this._selectedFrameId) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 324 | continue; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 325 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 326 | const cssPromise = cssModel.classNamesPromise(stylesheet.id).then(classes => completions.addAll(classes)); |
| 327 | promises.push(cssPromise); |
| 328 | } |
| 329 | |
| 330 | const domPromise = selectedNode.domModel() |
| 331 | .classNamesPromise(selectedNode.ownerDocument.id) |
| 332 | .then(classes => completions.addAll(classes)); |
| 333 | promises.push(domPromise); |
Simon Zünd | a0d4062 | 2020-02-12 13:16:42 | [diff] [blame] | 334 | return Promise.all(promises).then(() => [...completions]); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 335 | } |
| 336 | |
| 337 | /** |
| 338 | * @param {string} expression |
| 339 | * @param {string} prefix |
| 340 | * @param {boolean=} force |
| 341 | * @return {!Promise<!UI.SuggestBox.Suggestions>} |
| 342 | */ |
| 343 | _buildClassNameCompletions(expression, prefix, force) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 344 | if (!prefix || force) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 345 | this._classNamesPromise = null; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 346 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 347 | |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 348 | const selectedNode = self.UI.context.flavor(SDK.DOMModel.DOMNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 349 | if (!selectedNode || (!prefix && !force && !expression.trim())) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 350 | return Promise.resolve([]); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 351 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 352 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 353 | if (!this._classNamesPromise || this._selectedFrameId !== selectedNode.frameId()) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 354 | this._classNamesPromise = this._getClassNames(selectedNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 355 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 356 | |
| 357 | return this._classNamesPromise.then(completions => { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 358 | const classesMap = this._nodeClasses(/** @type {!SDK.DOMModel.DOMNode} */ (selectedNode)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 359 | completions = completions.filter(value => !classesMap.get(value)); |
| 360 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 361 | if (prefix[0] === '.') { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 362 | completions = completions.map(value => '.' + value); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 363 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 364 | return completions.filter(value => value.startsWith(prefix)).sort().map(completion => ({text: completion})); |
| 365 | }); |
| 366 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 367 | } |