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); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 88 | for (const className of classNames) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 89 | this._toggleClass(node, className, true); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 90 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 91 | this._installNodeClasses(node); |
| 92 | this._update(); |
| 93 | } |
| 94 | |
| 95 | _onTextChanged() { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 96 | const node = self.UI.context.flavor(SDK.DOMModel.DOMNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 97 | if (!node) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 98 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 99 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 100 | this._installNodeClasses(node); |
| 101 | } |
| 102 | |
| 103 | /** |
Tim van der Lippe | c02a97c | 2020-02-14 14:39:27 | [diff] [blame] | 104 | * @param {!Common.EventTarget.EventTargetEvent} event |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 105 | */ |
| 106 | _onDOMMutated(event) { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 107 | const node = /** @type {!SDK.DOMModel.DOMNode} */ (event.data); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 108 | if (this._mutatingNodes.has(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 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 111 | delete node[ClassesPaneWidget._classesSymbol]; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 112 | this._update(); |
| 113 | } |
| 114 | |
| 115 | /** |
Tim van der Lippe | c02a97c | 2020-02-14 14:39:27 | [diff] [blame] | 116 | * @param {!Common.EventTarget.EventTargetEvent} event |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 117 | */ |
| 118 | _onSelectedNodeChanged(event) { |
| 119 | if (this._previousTarget && this._prompt.text()) { |
| 120 | this._input.textContent = ''; |
| 121 | this._installNodeClasses(this._previousTarget); |
| 122 | } |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 123 | this._previousTarget = /** @type {?SDK.DOMModel.DOMNode} */ (event.data); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 124 | this._update(); |
| 125 | } |
| 126 | |
| 127 | /** |
| 128 | * @override |
| 129 | */ |
| 130 | wasShown() { |
| 131 | this._update(); |
| 132 | } |
| 133 | |
| 134 | _update() { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 135 | if (!this.isShowing()) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 136 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 137 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 138 | |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 139 | let node = self.UI.context.flavor(SDK.DOMModel.DOMNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 140 | if (node) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 141 | node = node.enclosingElementOrSelf(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 142 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 143 | |
| 144 | this._classesContainer.removeChildren(); |
| 145 | this._input.disabled = !node; |
| 146 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 147 | if (!node) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 148 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 149 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 150 | |
| 151 | const classes = this._nodeClasses(node); |
Simon Zünd | f27be3d | 2020-02-11 14:46:27 | [diff] [blame] | 152 | const keys = [...classes.keys()]; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 153 | keys.sort(String.caseInsensetiveComparator); |
| 154 | for (let i = 0; i < keys.length; ++i) { |
| 155 | const className = keys[i]; |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 156 | const label = UI.UIUtils.CheckboxLabel.create(className, classes.get(className)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 157 | label.classList.add('monospace'); |
| 158 | label.checkboxElement.addEventListener('click', this._onClick.bind(this, className), false); |
| 159 | this._classesContainer.appendChild(label); |
| 160 | } |
| 161 | } |
| 162 | |
| 163 | /** |
| 164 | * @param {string} className |
| 165 | * @param {!Event} event |
| 166 | */ |
| 167 | _onClick(className, event) { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 168 | const node = self.UI.context.flavor(SDK.DOMModel.DOMNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 169 | if (!node) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 170 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 171 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 172 | const enabled = event.target.checked; |
| 173 | this._toggleClass(node, className, enabled); |
| 174 | this._installNodeClasses(node); |
| 175 | } |
| 176 | |
| 177 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 178 | * @param {!SDK.DOMModel.DOMNode} node |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 179 | * @return {!Map<string, boolean>} |
| 180 | */ |
| 181 | _nodeClasses(node) { |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 182 | let result = node[ClassesPaneWidget._classesSymbol]; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 183 | if (!result) { |
| 184 | const classAttribute = node.getAttribute('class') || ''; |
| 185 | const classes = classAttribute.split(/\s/); |
| 186 | result = new Map(); |
| 187 | for (let i = 0; i < classes.length; ++i) { |
| 188 | const className = classes[i].trim(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 189 | if (!className.length) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 190 | continue; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 191 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 192 | result.set(className, true); |
| 193 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 194 | node[ClassesPaneWidget._classesSymbol] = result; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 195 | } |
| 196 | return result; |
| 197 | } |
| 198 | |
| 199 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 200 | * @param {!SDK.DOMModel.DOMNode} node |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 201 | * @param {string} className |
| 202 | * @param {boolean} enabled |
| 203 | */ |
| 204 | _toggleClass(node, className, enabled) { |
| 205 | const classes = this._nodeClasses(node); |
| 206 | classes.set(className, enabled); |
| 207 | } |
| 208 | |
| 209 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 210 | * @param {!SDK.DOMModel.DOMNode} node |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 211 | */ |
| 212 | _installNodeClasses(node) { |
| 213 | const classes = this._nodeClasses(node); |
| 214 | const activeClasses = new Set(); |
| 215 | for (const className of classes.keys()) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 216 | if (classes.get(className)) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 217 | activeClasses.add(className); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 218 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 219 | } |
| 220 | |
| 221 | const additionalClasses = this._splitTextIntoClasses(this._prompt.textWithCurrentSuggestion()); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 222 | for (const className of additionalClasses) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 223 | activeClasses.add(className); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 224 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 225 | |
Simon Zünd | a0d4062 | 2020-02-12 13:16:42 | [diff] [blame] | 226 | const newClasses = [...activeClasses.values()].sort(); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 227 | |
| 228 | this._pendingNodeClasses.set(node, newClasses.join(' ')); |
| 229 | this._updateNodeThrottler.schedule(this._flushPendingClasses.bind(this)); |
| 230 | } |
| 231 | |
| 232 | /** |
| 233 | * @return {!Promise} |
| 234 | */ |
| 235 | _flushPendingClasses() { |
| 236 | const promises = []; |
| 237 | for (const node of this._pendingNodeClasses.keys()) { |
| 238 | this._mutatingNodes.add(node); |
| 239 | const promise = node.setAttributeValuePromise('class', this._pendingNodeClasses.get(node)) |
| 240 | .then(onClassValueUpdated.bind(this, node)); |
| 241 | promises.push(promise); |
| 242 | } |
| 243 | this._pendingNodeClasses.clear(); |
| 244 | return Promise.all(promises); |
| 245 | |
| 246 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 247 | * @param {!SDK.DOMModel.DOMNode} node |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 248 | * @this {ClassesPaneWidget} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 249 | */ |
| 250 | function onClassValueUpdated(node) { |
| 251 | this._mutatingNodes.delete(node); |
| 252 | } |
| 253 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 254 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 255 | |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 256 | ClassesPaneWidget._classesSymbol = Symbol('ClassesPaneWidget._classesSymbol'); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 257 | |
| 258 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 259 | * @implements {UI.Toolbar.Provider} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 260 | * @unrestricted |
| 261 | */ |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 262 | export class ButtonProvider { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 263 | constructor() { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 264 | this._button = new UI.Toolbar.ToolbarToggle(Common.UIString.UIString('Element Classes'), ''); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 265 | this._button.setText('.cls'); |
| 266 | this._button.element.classList.add('monospace'); |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 267 | this._button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this._clicked, this); |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 268 | this._view = new ClassesPaneWidget(); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 269 | } |
| 270 | |
| 271 | _clicked() { |
Tim van der Lippe | aabc830 | 2019-12-10 15:34:45 | [diff] [blame] | 272 | ElementsPanel.instance().showToolbarPane(!this._view.isShowing() ? this._view : null, this._button); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 273 | } |
| 274 | |
| 275 | /** |
| 276 | * @override |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 277 | * @return {!UI.Toolbar.ToolbarItem} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 278 | */ |
| 279 | item() { |
| 280 | return this._button; |
| 281 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 282 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 283 | |
| 284 | /** |
| 285 | * @unrestricted |
| 286 | */ |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 287 | export class ClassNamePrompt extends UI.TextPrompt.TextPrompt { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 288 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 289 | * @param {function(!SDK.DOMModel.DOMNode):!Map<string, boolean>} nodeClasses |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 290 | */ |
| 291 | constructor(nodeClasses) { |
| 292 | super(); |
| 293 | this._nodeClasses = nodeClasses; |
| 294 | this.initialize(this._buildClassNameCompletions.bind(this), ' '); |
| 295 | this.disableDefaultSuggestionForEmptyInput(); |
| 296 | this._selectedFrameId = ''; |
| 297 | this._classNamesPromise = null; |
| 298 | } |
| 299 | |
| 300 | /** |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 301 | * @param {!SDK.DOMModel.DOMNode} selectedNode |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 302 | * @return {!Promise.<!Array.<string>>} |
| 303 | */ |
| 304 | _getClassNames(selectedNode) { |
| 305 | const promises = []; |
| 306 | const completions = new Set(); |
| 307 | this._selectedFrameId = selectedNode.frameId(); |
| 308 | |
| 309 | const cssModel = selectedNode.domModel().cssModel(); |
| 310 | const allStyleSheets = cssModel.allStyleSheets(); |
| 311 | for (const stylesheet of allStyleSheets) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 312 | if (stylesheet.frameId !== this._selectedFrameId) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 313 | continue; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 314 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 315 | const cssPromise = cssModel.classNamesPromise(stylesheet.id).then(classes => completions.addAll(classes)); |
| 316 | promises.push(cssPromise); |
| 317 | } |
| 318 | |
| 319 | const domPromise = selectedNode.domModel() |
| 320 | .classNamesPromise(selectedNode.ownerDocument.id) |
| 321 | .then(classes => completions.addAll(classes)); |
| 322 | promises.push(domPromise); |
Simon Zünd | a0d4062 | 2020-02-12 13:16:42 | [diff] [blame] | 323 | return Promise.all(promises).then(() => [...completions]); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 324 | } |
| 325 | |
| 326 | /** |
| 327 | * @param {string} expression |
| 328 | * @param {string} prefix |
| 329 | * @param {boolean=} force |
| 330 | * @return {!Promise<!UI.SuggestBox.Suggestions>} |
| 331 | */ |
| 332 | _buildClassNameCompletions(expression, prefix, force) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 333 | if (!prefix || force) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 334 | this._classNamesPromise = null; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 335 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 336 | |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 337 | const selectedNode = self.UI.context.flavor(SDK.DOMModel.DOMNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 338 | if (!selectedNode || (!prefix && !force && !expression.trim())) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 339 | return Promise.resolve([]); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 340 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 341 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 342 | if (!this._classNamesPromise || this._selectedFrameId !== selectedNode.frameId()) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 343 | this._classNamesPromise = this._getClassNames(selectedNode); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 344 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 345 | |
| 346 | return this._classNamesPromise.then(completions => { |
Tim van der Lippe | 97611c9 | 2020-02-12 16:56:58 | [diff] [blame] | 347 | const classesMap = this._nodeClasses(/** @type {!SDK.DOMModel.DOMNode} */ (selectedNode)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 348 | completions = completions.filter(value => !classesMap.get(value)); |
| 349 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 350 | if (prefix[0] === '.') { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 351 | completions = completions.map(value => '.' + value); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 352 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 353 | return completions.filter(value => value.startsWith(prefix)).sort().map(completion => ({text: completion})); |
| 354 | }); |
| 355 | } |
Tim van der Lippe | 13f71fb | 2019-11-29 11:17:39 | [diff] [blame] | 356 | } |