Add more toolbar-related imperative DOM API conversions

This change enhances the `no-imperative-dom-api` rule to recognize and convert more imperative DOM API calls related to toolbars. It adds support for:

*   `appendSeparator`
*   `appendSpacer`
*   `setEnabled`
*   `createOption`
*   `addOption`
*   `ToolbarSeparator` constructor
*   The `wrappable` property on `devtools-toolbar`

Bug: 407751409
Change-Id: I614860e226000a9ba4b2b4f6053b84a1177f1694
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7008196
Commit-Queue: Danil Somsikov <dsv@chromium.org>
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>

Author: danilsomsikov

scripts/eslint_rules/lib/no-imperative-dom-api/toolbar.ts

@@ -7,7 +7,14 @@
 
 import type {TSESTree} from '@typescript-eslint/utils';
 
-import {getEnclosingProperty, isIdentifier, isIdentifierChain, isMemberExpression, type RuleCreator} from './ast.ts';
+import {
+  getEnclosingProperty,
+  isIdentifier,
+  isIdentifierChain,
+  isLiteral,
+  isMemberExpression,
+  type RuleCreator
+} from './ast.ts';
 import {ClassMember} from './class-member.ts';
 import {DomFragment} from './dom-fragment.ts';
 
@@ -30,11 +37,53 @@ export const toolbar: RuleCreator = {
             return null;
         }
       },
-      methodCall(property, firstArg, _secondArg, domFragment) {
+      methodCall(property, firstArg, secondArg, domFragment, call) {
         if (isIdentifier(property, 'appendToolbarItem')) {
           domFragment.appendChild(firstArg, sourceCode);
           return true;
         }
+        if (isIdentifier(property, 'appendSeparator')) {
+          const separator = domFragment.appendChild(call, sourceCode);
+          separator.tagName = 'div';
+          separator.classList.push('toolbar-divider');
+          return true;
+        }
+        if (isIdentifier(property, 'appendSpacer')) {
+          const spacer = domFragment.appendChild(call, sourceCode);
+          spacer.tagName = 'div';
+          spacer.classList.push('toolbar-spacer');
+          return true;
+        }
+        if (isIdentifier(property, 'setEnabled')) {
+          domFragment.booleanAttributes.push({
+            key: 'disabled',
+            value: firstArg,
+          });
+          return true;
+        }
+        if (isIdentifier(property, 'createOption')) {
+          const optionFragment = domFragment.appendChild(call, sourceCode);
+          optionFragment.tagName = 'option';
+          optionFragment.textContent = firstArg;
+          if (secondArg && !isIdentifier(secondArg, 'undefined')) {
+            optionFragment.attributes.push({
+              key: 'value',
+              value: secondArg,
+            });
+          }
+          const jslogContext = call.arguments[2] ?? secondArg;
+          if (jslogContext) {
+            optionFragment.attributes.push({
+              key: 'jslog',
+              value: `\${VisualLogging.item(` + sourceCode.getText(jslogContext) + `).track({click: true})}`,
+            });
+          }
+          return true;
+        }
+        if (isIdentifier(property, 'addOption')) {
+          domFragment.appendChild(firstArg, sourceCode);
+          return true;
+        }
         return false;
       },
       NewExpression(node) {
@@ -222,6 +271,26 @@ export const toolbar: RuleCreator = {
             });
           }
         }
+        if (isIdentifier(toolbarItem, 'ToolbarSeparator')) {
+          const domFragment = DomFragment.getOrCreate(node, sourceCode);
+          domFragment.tagName = 'div';
+          const spacer = node.arguments[0];
+          if (spacer && isLiteral(spacer, true)) {
+            domFragment.classList.push('toolbar-spacer');
+          } else {
+            domFragment.classList.push('toolbar-divider');
+          }
+        }
+      },
+      propertyAssignment(property, propertyValue, domFragment) {
+        if (domFragment.tagName === 'devtools-toolbar' && isIdentifier(property, 'wrappable')) {
+          domFragment.booleanAttributes.push({
+            key: 'wrappable',
+            value: propertyValue,
+          });
+          return true;
+        }
+        return false;
       },
       CallExpression(node) {
         const isGetAction = (node: CallExpression) => isMemberExpression(

scripts/eslint_rules/tests/no-imperative-dom-api.test.ts

@@ -1293,6 +1293,67 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     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\`
+    <div>
+      <devtools-toolbar wrappable>
+        <div class="toolbar-divider"></div>
+        <select title="aria-label" aria-label="aria-label"
+            jslog=\${VisualLogging.dropDown('combo-box').track({change: true})}
+            @change=\${this.onSelect.bind(this)}>
+          <option value="1" jslog=\${VisualLogging.item('option-1').track({click: true})}>Option 1</option>
+          <option value="2">Option 2</option>
+        </select>
+        <div class="toolbar-spacer"></div>
+        <devtools-button title="Click me" .variant=\${Buttons.Button.Variant.TOOLBAR}
+            .iconName=\${'largeicon-add'}></devtools-button>
+        <devtools-button title="Other button" ?disabled=\${this.isEnabled}
+            .variant=\${Buttons.Button.Variant.TOOLBAR} .iconName=\${'largeicon-delete'}></devtools-button>
+        <div class="toolbar-divider"></div>
+        <div class="toolbar-divider"></div>
+        <div class="toolbar-spacer"></div>
+      </devtools-toolbar>
+    </div>\`,
+    target, {host: input});
+};
+
 class SomeWidget extends UI.Widget.Widget {
   constructor() {
     super();