blob: 27eef6b3e01f95c2913884f032adb454a76bbbe4 [file] [log] [blame]
Blink Reformat4c46d092018-04-07 15:32:371// 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 Lippe97611c92020-02-12 16:56:584
5import * as Common from '../common/common.js';
Simon Zündda7058f2020-02-28 13:57:286import * as Platform from '../platform/platform.js';
Tim van der Lippe97611c92020-02-12 16:56:587import * as SDK from '../sdk/sdk.js';
8import * as UI from '../ui/ui.js';
9
Tim van der Lippeaabc8302019-12-10 15:34:4510import {ElementsPanel} from './ElementsPanel.js';
11
Blink Reformat4c46d092018-04-07 15:32:3712/**
13 * @unrestricted
14 */
Tim van der Lippe97611c92020-02-12 16:56:5815export class ClassesPaneWidget extends UI.Widget.Widget {
Blink Reformat4c46d092018-04-07 15:32:3716 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 Lippe13f71fb2019-11-29 11:17:3925 this._prompt = new ClassNamePrompt(this._nodeClasses.bind(this));
Blink Reformat4c46d092018-04-07 15:32:3726 this._prompt.setAutocompletionTimeout(0);
27 this._prompt.renderAsBlock();
28
29 const proxyElement = this._prompt.attach(this._input);
Tim van der Lippe97611c92020-02-12 16:56:5830 this._prompt.setPlaceholder(Common.UIString.UIString('Add new class'));
Blink Reformat4c46d092018-04-07 15:32:3731 this._prompt.addEventListener(UI.TextPrompt.Events.TextChanged, this._onTextChanged, this);
32 proxyElement.addEventListener('keydown', this._onKeyDown.bind(this), false);
33
Paul Lewisdaac1062020-03-05 14:37:1034 SDK.SDKModel.TargetManager.instance().addModelListener(
Tim van der Lippe97611c92020-02-12 16:56:5835 SDK.DOMModel.DOMModel, SDK.DOMModel.Events.DOMMutated, this._onDOMMutated, this);
36 /** @type {!Set<!SDK.DOMModel.DOMNode>} */
Blink Reformat4c46d092018-04-07 15:32:3737 this._mutatingNodes = new Set();
Tim van der Lippe97611c92020-02-12 16:56:5838 /** @type {!Map<!SDK.DOMModel.DOMNode, string>} */
Blink Reformat4c46d092018-04-07 15:32:3739 this._pendingNodeClasses = new Map();
Tim van der Lippe97611c92020-02-12 16:56:5840 this._updateNodeThrottler = new Common.Throttler.Throttler(0);
41 /** @type {?SDK.DOMModel.DOMNode} */
Blink Reformat4c46d092018-04-07 15:32:3742 this._previousTarget = null;
Tim van der Lippe97611c92020-02-12 16:56:5843 self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this._onSelectedNodeChanged, this);
Blink Reformat4c46d092018-04-07 15:32:3744 }
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 Lippe1d6e57a2019-09-30 11:55:3460 if (!isEnterKey(event) && !isEscKey(event)) {
Blink Reformat4c46d092018-04-07 15:32:3761 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:3462 }
Blink Reformat4c46d092018-04-07 15:32:3763
64 if (isEnterKey(event)) {
65 event.consume();
Tim van der Lippe1d6e57a2019-09-30 11:55:3466 if (this._prompt.acceptAutoComplete()) {
Blink Reformat4c46d092018-04-07 15:32:3767 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:3468 }
Blink Reformat4c46d092018-04-07 15:32:3769 }
70
71 let text = event.target.textContent;
72 if (isEscKey(event)) {
Simon Zündda7058f2020-02-28 13:57:2873 if (!Platform.StringUtilities.isWhitespace(text)) {
Blink Reformat4c46d092018-04-07 15:32:3774 event.consume(true);
Tim van der Lippe1d6e57a2019-09-30 11:55:3475 }
Blink Reformat4c46d092018-04-07 15:32:3776 text = '';
77 }
78
79 this._prompt.clearAutocomplete();
80 event.target.textContent = '';
81
Tim van der Lippe97611c92020-02-12 16:56:5882 const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
Tim van der Lippe1d6e57a2019-09-30 11:55:3483 if (!node) {
Blink Reformat4c46d092018-04-07 15:32:3784 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:3485 }
Blink Reformat4c46d092018-04-07 15:32:3786
87 const classNames = this._splitTextIntoClasses(text);
Michael Liaocafccfd2020-04-02 17:11:5988 if (!classNames.length) {
89 return;
90 }
91
Tim van der Lippe1d6e57a2019-09-30 11:55:3492 for (const className of classNames) {
Blink Reformat4c46d092018-04-07 15:32:3793 this._toggleClass(node, className, true);
Tim van der Lippe1d6e57a2019-09-30 11:55:3494 }
Michael Liaocafccfd2020-04-02 17:11:5995
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 Reformat4c46d092018-04-07 15:32:37102 this._installNodeClasses(node);
103 this._update();
104 }
105
106 _onTextChanged() {
Tim van der Lippe97611c92020-02-12 16:56:58107 const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
Tim van der Lippe1d6e57a2019-09-30 11:55:34108 if (!node) {
Blink Reformat4c46d092018-04-07 15:32:37109 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34110 }
Blink Reformat4c46d092018-04-07 15:32:37111 this._installNodeClasses(node);
112 }
113
114 /**
Tim van der Lippec02a97c2020-02-14 14:39:27115 * @param {!Common.EventTarget.EventTargetEvent} event
Blink Reformat4c46d092018-04-07 15:32:37116 */
117 _onDOMMutated(event) {
Tim van der Lippe97611c92020-02-12 16:56:58118 const node = /** @type {!SDK.DOMModel.DOMNode} */ (event.data);
Tim van der Lippe1d6e57a2019-09-30 11:55:34119 if (this._mutatingNodes.has(node)) {
Blink Reformat4c46d092018-04-07 15:32:37120 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34121 }
Tim van der Lippe13f71fb2019-11-29 11:17:39122 delete node[ClassesPaneWidget._classesSymbol];
Blink Reformat4c46d092018-04-07 15:32:37123 this._update();
124 }
125
126 /**
Tim van der Lippec02a97c2020-02-14 14:39:27127 * @param {!Common.EventTarget.EventTargetEvent} event
Blink Reformat4c46d092018-04-07 15:32:37128 */
129 _onSelectedNodeChanged(event) {
130 if (this._previousTarget && this._prompt.text()) {
131 this._input.textContent = '';
132 this._installNodeClasses(this._previousTarget);
133 }
Tim van der Lippe97611c92020-02-12 16:56:58134 this._previousTarget = /** @type {?SDK.DOMModel.DOMNode} */ (event.data);
Blink Reformat4c46d092018-04-07 15:32:37135 this._update();
136 }
137
138 /**
139 * @override
140 */
141 wasShown() {
142 this._update();
143 }
144
145 _update() {
Tim van der Lippe1d6e57a2019-09-30 11:55:34146 if (!this.isShowing()) {
Blink Reformat4c46d092018-04-07 15:32:37147 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34148 }
Blink Reformat4c46d092018-04-07 15:32:37149
Tim van der Lippe97611c92020-02-12 16:56:58150 let node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
Tim van der Lippe1d6e57a2019-09-30 11:55:34151 if (node) {
Blink Reformat4c46d092018-04-07 15:32:37152 node = node.enclosingElementOrSelf();
Tim van der Lippe1d6e57a2019-09-30 11:55:34153 }
Blink Reformat4c46d092018-04-07 15:32:37154
155 this._classesContainer.removeChildren();
156 this._input.disabled = !node;
157
Tim van der Lippe1d6e57a2019-09-30 11:55:34158 if (!node) {
Blink Reformat4c46d092018-04-07 15:32:37159 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34160 }
Blink Reformat4c46d092018-04-07 15:32:37161
162 const classes = this._nodeClasses(node);
Simon Zündf27be3d2020-02-11 14:46:27163 const keys = [...classes.keys()];
Blink Reformat4c46d092018-04-07 15:32:37164 keys.sort(String.caseInsensetiveComparator);
165 for (let i = 0; i < keys.length; ++i) {
166 const className = keys[i];
Tim van der Lippe97611c92020-02-12 16:56:58167 const label = UI.UIUtils.CheckboxLabel.create(className, classes.get(className));
Blink Reformat4c46d092018-04-07 15:32:37168 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 Lippe97611c92020-02-12 16:56:58179 const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
Tim van der Lippe1d6e57a2019-09-30 11:55:34180 if (!node) {
Blink Reformat4c46d092018-04-07 15:32:37181 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34182 }
Blink Reformat4c46d092018-04-07 15:32:37183 const enabled = event.target.checked;
184 this._toggleClass(node, className, enabled);
185 this._installNodeClasses(node);
186 }
187
188 /**
Tim van der Lippe97611c92020-02-12 16:56:58189 * @param {!SDK.DOMModel.DOMNode} node
Blink Reformat4c46d092018-04-07 15:32:37190 * @return {!Map<string, boolean>}
191 */
192 _nodeClasses(node) {
Tim van der Lippe13f71fb2019-11-29 11:17:39193 let result = node[ClassesPaneWidget._classesSymbol];
Blink Reformat4c46d092018-04-07 15:32:37194 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 Lippe1d6e57a2019-09-30 11:55:34200 if (!className.length) {
Blink Reformat4c46d092018-04-07 15:32:37201 continue;
Tim van der Lippe1d6e57a2019-09-30 11:55:34202 }
Blink Reformat4c46d092018-04-07 15:32:37203 result.set(className, true);
204 }
Tim van der Lippe13f71fb2019-11-29 11:17:39205 node[ClassesPaneWidget._classesSymbol] = result;
Blink Reformat4c46d092018-04-07 15:32:37206 }
207 return result;
208 }
209
210 /**
Tim van der Lippe97611c92020-02-12 16:56:58211 * @param {!SDK.DOMModel.DOMNode} node
Blink Reformat4c46d092018-04-07 15:32:37212 * @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 Lippe97611c92020-02-12 16:56:58221 * @param {!SDK.DOMModel.DOMNode} node
Blink Reformat4c46d092018-04-07 15:32:37222 */
223 _installNodeClasses(node) {
224 const classes = this._nodeClasses(node);
225 const activeClasses = new Set();
226 for (const className of classes.keys()) {
Tim van der Lippe1d6e57a2019-09-30 11:55:34227 if (classes.get(className)) {
Blink Reformat4c46d092018-04-07 15:32:37228 activeClasses.add(className);
Tim van der Lippe1d6e57a2019-09-30 11:55:34229 }
Blink Reformat4c46d092018-04-07 15:32:37230 }
231
232 const additionalClasses = this._splitTextIntoClasses(this._prompt.textWithCurrentSuggestion());
Tim van der Lippe1d6e57a2019-09-30 11:55:34233 for (const className of additionalClasses) {
Blink Reformat4c46d092018-04-07 15:32:37234 activeClasses.add(className);
Tim van der Lippe1d6e57a2019-09-30 11:55:34235 }
Blink Reformat4c46d092018-04-07 15:32:37236
Simon Zünda0d40622020-02-12 13:16:42237 const newClasses = [...activeClasses.values()].sort();
Blink Reformat4c46d092018-04-07 15:32:37238
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 Lippe97611c92020-02-12 16:56:58258 * @param {!SDK.DOMModel.DOMNode} node
Tim van der Lippe13f71fb2019-11-29 11:17:39259 * @this {ClassesPaneWidget}
Blink Reformat4c46d092018-04-07 15:32:37260 */
261 function onClassValueUpdated(node) {
262 this._mutatingNodes.delete(node);
263 }
264 }
Tim van der Lippe13f71fb2019-11-29 11:17:39265}
Blink Reformat4c46d092018-04-07 15:32:37266
Tim van der Lippe13f71fb2019-11-29 11:17:39267ClassesPaneWidget._classesSymbol = Symbol('ClassesPaneWidget._classesSymbol');
Blink Reformat4c46d092018-04-07 15:32:37268
269/**
Tim van der Lippe97611c92020-02-12 16:56:58270 * @implements {UI.Toolbar.Provider}
Blink Reformat4c46d092018-04-07 15:32:37271 * @unrestricted
272 */
Tim van der Lippe13f71fb2019-11-29 11:17:39273export class ButtonProvider {
Blink Reformat4c46d092018-04-07 15:32:37274 constructor() {
Tim van der Lippe97611c92020-02-12 16:56:58275 this._button = new UI.Toolbar.ToolbarToggle(Common.UIString.UIString('Element Classes'), '');
Blink Reformat4c46d092018-04-07 15:32:37276 this._button.setText('.cls');
277 this._button.element.classList.add('monospace');
Tim van der Lippe97611c92020-02-12 16:56:58278 this._button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this._clicked, this);
Tim van der Lippe13f71fb2019-11-29 11:17:39279 this._view = new ClassesPaneWidget();
Blink Reformat4c46d092018-04-07 15:32:37280 }
281
282 _clicked() {
Tim van der Lippeaabc8302019-12-10 15:34:45283 ElementsPanel.instance().showToolbarPane(!this._view.isShowing() ? this._view : null, this._button);
Blink Reformat4c46d092018-04-07 15:32:37284 }
285
286 /**
287 * @override
Tim van der Lippe97611c92020-02-12 16:56:58288 * @return {!UI.Toolbar.ToolbarItem}
Blink Reformat4c46d092018-04-07 15:32:37289 */
290 item() {
291 return this._button;
292 }
Tim van der Lippe13f71fb2019-11-29 11:17:39293}
Blink Reformat4c46d092018-04-07 15:32:37294
295/**
296 * @unrestricted
297 */
Tim van der Lippe97611c92020-02-12 16:56:58298export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
Blink Reformat4c46d092018-04-07 15:32:37299 /**
Tim van der Lippe97611c92020-02-12 16:56:58300 * @param {function(!SDK.DOMModel.DOMNode):!Map<string, boolean>} nodeClasses
Blink Reformat4c46d092018-04-07 15:32:37301 */
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 Lippe97611c92020-02-12 16:56:58312 * @param {!SDK.DOMModel.DOMNode} selectedNode
Blink Reformat4c46d092018-04-07 15:32:37313 * @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 Lippe1d6e57a2019-09-30 11:55:34323 if (stylesheet.frameId !== this._selectedFrameId) {
Blink Reformat4c46d092018-04-07 15:32:37324 continue;
Tim van der Lippe1d6e57a2019-09-30 11:55:34325 }
Blink Reformat4c46d092018-04-07 15:32:37326 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ünda0d40622020-02-12 13:16:42334 return Promise.all(promises).then(() => [...completions]);
Blink Reformat4c46d092018-04-07 15:32:37335 }
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 Lippe1d6e57a2019-09-30 11:55:34344 if (!prefix || force) {
Blink Reformat4c46d092018-04-07 15:32:37345 this._classNamesPromise = null;
Tim van der Lippe1d6e57a2019-09-30 11:55:34346 }
Blink Reformat4c46d092018-04-07 15:32:37347
Tim van der Lippe97611c92020-02-12 16:56:58348 const selectedNode = self.UI.context.flavor(SDK.DOMModel.DOMNode);
Tim van der Lippe1d6e57a2019-09-30 11:55:34349 if (!selectedNode || (!prefix && !force && !expression.trim())) {
Blink Reformat4c46d092018-04-07 15:32:37350 return Promise.resolve([]);
Tim van der Lippe1d6e57a2019-09-30 11:55:34351 }
Blink Reformat4c46d092018-04-07 15:32:37352
Tim van der Lippe1d6e57a2019-09-30 11:55:34353 if (!this._classNamesPromise || this._selectedFrameId !== selectedNode.frameId()) {
Blink Reformat4c46d092018-04-07 15:32:37354 this._classNamesPromise = this._getClassNames(selectedNode);
Tim van der Lippe1d6e57a2019-09-30 11:55:34355 }
Blink Reformat4c46d092018-04-07 15:32:37356
357 return this._classNamesPromise.then(completions => {
Tim van der Lippe97611c92020-02-12 16:56:58358 const classesMap = this._nodeClasses(/** @type {!SDK.DOMModel.DOMNode} */ (selectedNode));
Blink Reformat4c46d092018-04-07 15:32:37359 completions = completions.filter(value => !classesMap.get(value));
360
Tim van der Lippe1d6e57a2019-09-30 11:55:34361 if (prefix[0] === '.') {
Blink Reformat4c46d092018-04-07 15:32:37362 completions = completions.map(value => '.' + value);
Tim van der Lippe1d6e57a2019-09-30 11:55:34363 }
Blink Reformat4c46d092018-04-07 15:32:37364 return completions.filter(value => value.startsWith(prefix)).sort().map(completion => ({text: completion}));
365 });
366 }
Tim van der Lippe13f71fb2019-11-29 11:17:39367}