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