// Copyright 2025 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import rule from '../lib/no-imperative-dom-api.ts'; import {RuleTester} from './utils/RuleTester.ts'; new RuleTester().run('no-imperative-dom-api', rule, { valid: [ { filename: 'front_end/ui/components/component/file.ts', code: `class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.someElement.className = 'some-class'; } }`, }, { filename: 'front_end/ui/components/component/file.ts', code: ` const el = document.createElement('div'); el.appendChild(); `, }, { filename: 'front_end/ui/components/component/file.ts', code: ` const el = document.createElement('div'); el.setAttribute(); `, }, ], invalid: [ { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.contentElement.appendChild(document.createElement('br')); this.contentElement.appendChild(document.createElement('hr')); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: `class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.element.className = 'some-class'; } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.contentElement.appendChild(document.createElement('div')); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.contentElement.className = 'some-class'; this.contentElement.setAttribute('aria-label', 'some-label'); this.contentElement.textContent = 'some-text'; } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

some-text

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.container = this.contentElement.createChild('div', 'some-class'); this.container.classList.add('container'); this.container.addEventListener('click', this.onClick.bind(this)); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.contentElement.style.width = '100%'; this.contentElement.style.marginLeft = '10px'; } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const div = document.createElement('div'); div.className = 'some-class'; this.contentElement.appendChild(div); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

some-text

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const toolbar = this.contentElement.createChild('devtools-toolbar'); const filterInput = new UI.Toolbar.ToolbarFilter('some-placeholder', 0.5, 1, undefined, this.complete.bind(this), false, 'some-filter'); filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged.bind(this)); filterInput.element.classList.add('completions'); filterInput.element.setAttribute('aria-hidden', 'true'); toolbar.appendToolbarItem(filterInput); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const toolbar = this.contentElement.createChild('devtools-toolbar'); const filterInput = new UI.Toolbar.ToolbarInput('some-placeholder', 'accessible-placeholder', 0.5, 1); toolbar.appendToolbarItem(filterInput); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const adornerContent = document.createElement('span'); adornerContent.innerHTML = '

💫

'; const adorner = new Adorners.Adorner.Adorner(); adorner.classList.add('fix-perf-icon'); adorner.data = { name: i18nString(UIStrings.fixMe), content: adornerContent, jslogContext: 'fix-perf', }; this.contentElement.appendChild(adorner); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

💫

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const toolbar = this.contentElement.createChild('devtools-toolbar'); const editButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.editName), 'edit', undefined, 'edit-name'); editButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.onClick.bind(this)); toolbar.appendToolbarItem(editButton); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class Widget1 extends UI.Widget.Widget { constructor() { super(); } } export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class Widget2 extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}, {messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const toolbar = this.contentElement.createChild('devtools-toolbar'); const filterInput = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.editName), 'edit', undefined, 'edit-name'); toolbar.appendToolbarItem(filterInput); const anotherElement = document.createElement('div'); anotherElement.className = 'another-element'; this.process(filterInput, anotherElement); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); const filterInput = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.editName), 'edit', undefined, 'edit-name'); const anotherElement = html\`

\`; this.process(filterInput, anotherElement); } }`, errors: [{messageId: 'preferTemplateLiterals'}, {messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor(label: HTMLElement, details: HTMLElement) { super(); this.contentElement.appendChild(label); label.addEventListener('click', () => this.doSomething.bind(this)); this.contentElement.appendChild(details); details.createChild('span'); const banner = createBanner(); this.contentElement.appendChild(banner); this.footer = createFooter(); this.contentElement.appendChild(this.footer); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\${label} \${details} \${createBanner()} \${createFooter()}

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor(label: HTMLElement, details: HTMLElement) { super(); label.addEventListener('click', () => this.doSomething.bind(this)); details.createChild('span'); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const input = document.createElement('input'); input.type = 'text'; input.placeholder = 'some-placeholder'; input.value = 'some-value'; input.disabled = !this.enabled; input.checked = true this.contentElement.append(input); const anchor = document.createElement('a'); anchor.href = 'https://www.google.com'; anchor.innerText = 'some-text'; anchor.dataset.someKey = 'some-value'; anchor.role = 'some-role'; this.contentElement.insertBefore(anchor, input); const img = document.createElement('img'); img.src = 'https://www.google.com/some-image.png'; img.alt = 'some-alt'; img.draggable = true; img.height = 100; img.hidden = 'hidden'; img.href = 'https://www.google.com'; img.id = 'some-id'; img.name = 'some-name'; img.rel = 'some-rel'; img.scope = 'some-scope'; input.insertAdjacentElement('beforebegin', img); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

some-text

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const toolbar = this.contentElement.createChild('devtools-toolbar'); this.filterInput = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.editName), 'edit', undefined, 'edit-name'); toolbar.appendToolbarItem(this.filterInput); this.#banner = this.contentElement.createChild('div', 'banner'); this.#banner.textContent = 'some-text'; } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const toolbar = this.contentElement.createChild('devtools-toolbar'); this.action = UI.ActionRegistry.ActionRegistry.instance().getAction('some-action'); this.actionButton = UI.Toolbar.Toolbar.createActionButton(this.action); toolbar.appendToolbarItem(this.actionButton); toolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton('other-action')); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.action = UI.ActionRegistry.ActionRegistry.instance().getAction('some-action'); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const toolbar = this.contentElement.createChild('devtools-toolbar'); toolbar.appendToolbarItem(new UI.Toolbar.ToolbarComboBox( this.someToolbarComboBoxClicked.bind(this), 'Combox', 'the-toolbar-combox', 'some-toolbar-combox')); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const select = document.createElement('select'); select.add(UI.UIUtils.createOption('Option 1', '1', 'option-1')); this.contentElement.appendChild(UI.UIUtils.createLabel('Some label:', 'some-label', select)); this.contentElement.appendChild(UI.UIUtils.createTextButton('Some button', onClick, { className: 'some-class', jslogContext: 'some-button', variant: Buttons.Button.Variant.PRIMARY, title: i18nString(UIStrings.someTitle), iconName: 'some-icon' })); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

Some label:

Some button

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); UI.UIUtils.createTextChild(this.contentElement.createChild('div', 'some-class'), 'some-text'); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

some-text

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.button = new Buttons.Button.Button(); this.button.data = { jslogContext: 'some-button', variant: Buttons.Button.Variant.PRIMARY, title: i18nString(UIStrings.someTitle), }; UI.ARIAUtils.markAsPresentation(this.button); UI.Tooltip.Tooltip.install(this.button, i18nString(UIStrings.someTooltip)); } }`, output: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.button = html\` \`; } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const icon = createIcon('checkmark'); icon.data = {color: 'var(--icon-checkmark-green)', width: '14px', height: '14px'}; this.contentElement.appendChild(icon); const icon2 = new Icon(); icon2.name = 'cross-circle-filled'; this.contentElement.appendChild(icon2); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.contentElement.appendChild(UI.UIUtils.CheckboxLabel.create( i18nString(UIStrings.someTitle), true, i18nString(UIStrings.someTooltip), undefined, 'some-checkbox', true)); this.contentElement.appendChild(UI.UIUtils.CheckboxLabel.create()); this.contentElement.appendChild(UI.UIUtils.CheckboxLabel.createWithStringLiteral( ':hover', undefined, undefined, 'some-other-checkbox')); const toolbar = this.contentElement.createChild('devtools-toolbar'); toolbar.appendToolbarItem(new UI.Toolbar.ToolbarCheckbox( i18nString(UIStrings.someToolbarTitle), i18nString(UIStrings.someToolbarTooltip), this.someToolbarCheckboxClicked.bind(this), 'some-toolbar-checkbox')); toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox( this.someSetting, i18nString(UIStrings.someToolbarTooltip), i18nString(UIStrings.alternateToolbarTitle))); toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(this.someOtherSetting)); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\${i18nString(UIStrings.someTitle)}

:hover

\${i18nString(UIStrings.someToolbarTitle)}

\${i18nString(UIStrings.alternateToolbarTitle)}

\${this.someOtherSetting.title()}

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.contentElement.appendChild(UI.UIUtils.createIconLabel({ iconName: 'checkmark', color: 'var(--icon-checkmark-green)', width: '14px', height: '14px', title: 'some-title', })); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

some-title

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const iframe = document.createElement('iframe'); iframe.setAttribute('sandbox', ''); iframe.tabIndex = -1; this.contentElement.appendChild(iframe); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.contentElement.appendChild(UI.UIUtils.createInput('add-source-map', 'text', 'url')); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.#columns = [ { id: 'node-id', title: i18nString(UIStrings.element), sortable: true, weight: 50, align: undefined, }, { id: 'declaration', title: i18nString(UIStrings.declaration), }, { id: 'source-url', title: i18nString(UIStrings.source), sortable: false, weight: 100, align: DataGrid.DataGrid.Align.RIGHT, }, ]; this.#dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid({ displayName: i18nString(UIStrings.someTitle), columns: this.#columns, deleteCallback: undefined, refreshCallback: undefined, }); this.#dataGrid.setStriped(true); this.#dataGrid.addEventListener( DataGrid.DataGrid.Events.SORTING_CHANGED, this.#sortMediaQueryDataGrid.bind(this)); this.#dataGrid.asWidget().show(this.element); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\${i18nString(UIStrings.element)}	\${i18nString(UIStrings.declaration)}	\${i18nString(UIStrings.source)}

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class ElementNode extends DataGrid.SortableDataGrid.SortableDataGridNode { override createCell(columnId: string): HTMLElement { if (columnId === 'node-id') { const cell = this.createTD(columnId); cell.classList.add('node-id'); cell.createChild('span', 'node-id-text').textContent = this.data.id; return cell; } if (columnId === 'source-url') { const cell = this.createTD(columnId); if (this.data.range) { if (!this.#link) { cell.textContent = i18nString(UIStrings.unableToLink); } else { cell.appendChild(this.#link); } } else { cell.textContent = i18nString(UIStrings.unableToLinkToInlineStyle); } return cell; } } }`, output: ` class ElementNode extends DataGrid.SortableDataGrid.SortableDataGridNode { override createCell(columnId: string): HTMLElement { if (columnId === 'node-id') { const cell = html\` \${this.data.id} \`; return cell; } if (columnId === 'source-url') { const cell = html\` \${i18nString(UIStrings.unableToLinkToInlineStyle)} \${this.#link} \`; if (this.data.range) { if (!this.#link) { } else { } } else { } return cell; } } }`, errors: [{messageId: 'preferTemplateLiterals'}, {messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const columns = ([ { id: 'node-id', title: i18nString(UIStrings.element), weight: 50, align: undefined, }, { id: 'declaration', title: i18nString(UIStrings.declaration), }, { id: 'source-url', title: i18nString(UIStrings.source), weight: 100, align: this.editable ? DataGrid.DataGrid.Align.RIGHT : DataGrid.DataGrid.Align.LEFT, }, ] as DataGrid.DataGrid.ColumnDescriptor[]); const config = { displayName: i18nString(UIStrings.someTitle), columns, deleteCallback: this.#deleteCallback.bind(this), refreshCallback: undefined, }; this.#dataGrid = new DataGrid.ViewportDataGrid.ViewportDataGrid(config); this.#dataGrid.addEventListener( DataGrid.DataGrid.Events.SORTING_CHANGED, this.#sortMediaQueryDataGrid.bind(this)); this.#dataGrid.asWidget().show(this.element); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\${i18nString(UIStrings.element)}	\${i18nString(UIStrings.declaration)}	\${i18nString(UIStrings.source)}

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.#dataGrid = new DataGrid.DataGrid.DataGridImpl({ displayName: i18nString(UIStrings.someTitle), columns: [ { id: 'node-id', title: i18nString(UIStrings.element), weight: 50, fixedWidth: this.fixedWidth, align: undefined, dataType: this.dataType, }, { id: 'active', title: i18nString(UIStrings.active), dataType: DataGrid.DataGrid.DataType.BOOLEAN, }, { id: 'source-url', title: i18nString(UIStrings.source), weight: 100, dataType: DataGrid.DataGrid.DataType.STRING, }, ], refreshCallback: this.#refreshCallback.bind(this), }); this.#dataGrid.asWidget().show(this.element); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\${i18nString(UIStrings.element)}	\${i18nString(UIStrings.active)}	\${i18nString(UIStrings.source)}

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.#splitWidget = new UI.SplitWidget.SplitWidget(this.vertical, false, undefined, 200); this.#splitWidget.show(this.element); this.#mainContainer = new UI.SplitWidget.SplitWidget(true, true); this.#resultsContainer = new UI.Widget.EmptyWidget(); this.#elementContainer = new DetailsView(); this.#mainContainer.setMainWidget(this.#resultsContainer); this.#mainContainer.setSidebarWidget(this.#elementContainer); this.#mainContainer.setVertical(false); this.#mainContainer.setSecondIsSidebar(this.dockedLeft); this.#sideBar = new SidebarPanel(); this.#sideBar.setMinimumSize(100, 25); this.#splitWidget.setSidebarWidget(this.#sideBar); this.#splitWidget.setMainWidget(this.#mainContainer); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.button = this.contentElement.createChild('button'); UI.ARIAUtils.markAsMenuButton(this.button); const tree = this.contentElement.createChild('ul'); UI.ARIAUtils.markAsTree(tree); UI.ARIAUtils.markAsTreeitem(tree.createChild('li')); const alert = this.contentElement.createChild('span'); alert.textContent = 'Alert'; UI.ARIAUtils.markAsAlert(alert); const slider = this.contentElement.createChild('input'); UI.ARIAUtils.markAsSlider(slider, 10); UI.ARIAUtils.setDescription(this.button, 'Some button'); UI.ARIAUtils.setInvalid(slider, this.valid); const progress = this.contentElement.createChild('div'); UI.ARIAUtils.markAsProgressBar(progress); UI.ARIAUtils.setProgressBarValue(progress, 0.5, '50% done'); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

Alert

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const widget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.nothingToSeeHere), this.explanation); widget.link = 'http://www.google.com'; widget.show(this.element); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const toolbar = this.contentElement.createChild('devtools-toolbar'); toolbar.wrappable = true; toolbar.appendSeparator(); const combo = new UI.Toolbar.ToolbarComboBox(this.onSelect.bind(this), 'aria-label', undefined, 'combo-box'); combo.createOption('Option 1', '1', 'option-1'); const option2 = document.createElement('option'); option2.value = '2'; option2.textContent = 'Option 2'; combo.addOption(option2); toolbar.appendToolbarItem(combo); toolbar.appendSpacer(); const button = new UI.Toolbar.ToolbarButton('Click me', 'largeicon-add'); button.setEnabled(false); toolbar.appendToolbarItem(button); const otherButton = new UI.Toolbar.ToolbarButton('Other button', 'largeicon-delete'); otherButton.setEnabled(this.isEnabled); toolbar.appendToolbarItem(otherButton); toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSeparator()); toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSeparator(false)); toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSeparator(true)); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.reportView = new UI.ReportView.ReportView(); this.reportView.show(this.contentElement); this.section = this.reportView.appendSection('Some Section'); this.section.appendRow().appendChild(document.createTextNode('some message')); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

Some Section

some message

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.reportView = new UI.ReportView.ReportView('Some report'); this.reportView.show(this.contentElement); const section1 = this.reportView.appendSection('Some Section', 'section-class', 'section-context'); section1.appendField('Field 1', 'Value 1'); section1.appendFlexedField('Field 2').appendChild(document.createTextNode('Value 2')); section1.setTitle('New Section Title'); section1.appendRow().textContent = 'some content'; const section2 = this.reportView.appendSection('Another Section'); section2.appendSelectableRow().textContent = 'selectable content'; } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

New Section Title

Field 1

Value 1

Field 2

Value 2

some content

Another Section

selectable content

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.contentElement.appendChild( Link.create('https://google.com', 'Google', 'some-class', 'some-context', 0)); this.contentElement.appendChild( Link.create('https://chromium.org', 'Chromium', undefined, undefined, 1)); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

Google

Chromium

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); this.contentElement.appendChild(uiI18n.getFormatLocalizedString(locString, UIStrings.testString, { PH1: document.createElement('div'), PH2: 'some text', })); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\${i18nTemplate(locString, UIStrings.testString, { PH1: html\`

\`, PH2: 'some text', })}

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` class SomeWidget extends UI.Widget.Widget { constructor() { super(); const colorSwatch = new InlineEditor.ColorSwatch.ColorSwatch(); colorSwatch.color = Common.Color.parse('red'); colorSwatch.readonly = true; this.contentElement.appendChild(colorSwatch); } }`, output: ` export const DEFAULT_VIEW = (input, _output, target) => { render(html\`

\`, target, {host: input}); }; class SomeWidget extends UI.Widget.Widget { constructor() { super(); } }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` function createDiv() { return document.createElement('div'); }`, output: ` function createDiv() { return html\`

\`; }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` function createTextNode() { return document.createTextNode('my-text'); }`, output: ` function createTextNode() { return html\` my-text\`; }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` function createTextNodeWithVar(myVar) { return document.createTextNode(myVar); }`, output: ` function createTextNodeWithVar(myVar) { return html\` \${myVar}\`; }`, errors: [{messageId: 'preferTemplateLiterals'}], }, { filename: 'front_end/ui/components/component/file.ts', code: ` function createDivWithVar(myVar) { return document.createElement(myVar); }`, output: ` function createDivWithVar(myVar) { return html\` <\${myVar}>\`; }`, errors: [{messageId: 'preferTemplateLiterals'}], }, ], });