no-imperative-dom-api: Handle some UI.Utils and select.add call

danilsomsikov · Devtools-frontend LUCI CQ · commit a2243fd4fc1a · 2025-04-10T01:38:01.000-07:00
Bug: 407751147 Change-Id: I649239978b139284f3b4fc32a8fe77502732e9c4 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6438857 Commit-Queue: Danil Somsikov <dsv@chromium.org> Reviewed-by: Philip Pfaffe <pfaffe@chromium.org> Auto-Submit: Danil Somsikov <dsv@chromium.org>
diff --git a/front_end/panels/common/common.ts b/front_end/panels/common/common.ts
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-lit-render-outside-of-view */
+/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
diff --git a/front_end/panels/lighthouse/LighthouseTimespanView.ts b/front_end/panels/lighthouse/LighthouseTimespanView.ts
@@ -1,6 +1,7 @@
 // Copyright 2022 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
diff --git a/scripts/eslint_rules/lib/no-imperative-dom-api.ts b/scripts/eslint_rules/lib/no-imperative-dom-api.ts
@@ -14,6 +14,7 @@ import {domApiDevtoolsExtensions} from './no-imperative-dom-api/dom-api-devtools
 import {domApi} from './no-imperative-dom-api/dom-api.ts';
 import {DomFragment} from './no-imperative-dom-api/dom-fragment.ts';
 import {toolbar} from './no-imperative-dom-api/toolbar.ts';
+import {uiUtils} from './no-imperative-dom-api/ui-utils.ts';
 import {widget} from './no-imperative-dom-api/widget.ts';
 import {createRule} from './tsUtils.ts';
 type CallExpression = TSESTree.CallExpression;
@@ -35,6 +36,8 @@ type Subrule = Partial<{
   MemberExpression: (node: MemberExpression) => void,
   // eslint-disable-next-line @typescript-eslint/naming-convention
   NewExpression: (node: NewExpression) => void,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  CallExpression: (node: CallExpression) => void,
 }>;
 
 export default createRule({
@@ -60,6 +63,7 @@ export default createRule({
       domApi.create(context),
       domApiDevtoolsExtensions.create(context),
       toolbar.create(context),
+      uiUtils.create(context),
       widget.create(context),
     ];
 
@@ -230,6 +234,13 @@ export const DEFAULT_VIEW = (input, _output, target) => {
           }
         }
       },
+      CallExpression(node) {
+        for (const rule of subrules) {
+          if ('CallExpression' in rule) {
+            rule.CallExpression?.(node);
+          }
+        }
+      },
       'Program:exit'() {
         let processedSome = false;
         do {
diff --git a/scripts/eslint_rules/lib/no-imperative-dom-api/dom-api.ts b/scripts/eslint_rules/lib/no-imperative-dom-api/dom-api.ts
@@ -73,11 +73,12 @@ export const domApi = {
         return false;
       },
       methodCall(
-          property: Identifier, firstArg: Node, secondArg: Node, domFragment: DomFragment, call: CallExpression) {
+          property: Identifier, firstArg: Node, secondArg: Node|undefined, domFragment: DomFragment,
+          call: CallExpression) {
         if (isIdentifier(property, 'setAttribute')) {
           const attribute = firstArg;
           const value = secondArg;
-          if (attribute.type === 'Literal' && value.type !== 'SpreadElement' && attribute.value) {
+          if (attribute.type === 'Literal' && value && value.type !== 'SpreadElement' && attribute.value) {
             domFragment.attributes.push({key: attribute.value.toString(), value});
             return true;
           }
@@ -86,6 +87,15 @@ export const domApi = {
           domFragment.appendChild(firstArg, sourceCode);
           return true;
         }
+        if (domFragment.tagName === 'select' && isIdentifier(property, 'add')) {
+          if (secondArg) {
+            const index = domFragment.children.indexOf(DomFragment.getOrCreate(secondArg, sourceCode));
+            domFragment.insertChildAt(secondArg, index, sourceCode);
+          } else {
+            domFragment.appendChild(firstArg, sourceCode);
+          }
+          return true;
+        }
         if (isIdentifier(property, 'append')) {
           for (const child of call.arguments) {
             domFragment.appendChild(child, sourceCode);
@@ -98,7 +108,7 @@ export const domApi = {
           }
           return true;
         }
-        if (isIdentifier(property, 'insertBefore')) {
+        if (isIdentifier(property, 'insertBefore') && secondArg) {
           const index = domFragment.children.indexOf(DomFragment.getOrCreate(secondArg, sourceCode));
           if (index !== -1) {
             for (const reference of domFragment.children[index].references) {
@@ -110,7 +120,7 @@ export const domApi = {
             return true;
           }
         }
-        if (isIdentifier(property, 'insertAdjacentElement')) {
+        if (isIdentifier(property, 'insertAdjacentElement') && secondArg) {
           if (domFragment.parent) {
             const index = domFragment.parent.children.indexOf(domFragment);
             if (isLiteral(firstArg, 'afterend')) {
diff --git a/scripts/eslint_rules/lib/no-imperative-dom-api/dom-fragment.ts b/scripts/eslint_rules/lib/no-imperative-dom-api/dom-fragment.ts
@@ -153,7 +153,8 @@ export class DomFragment {
     components.push('>');
     if (this.textContent) {
       components.push(toOutputString(this.textContent));
-    } else if (this.children?.length) {
+    }
+    if (this.children?.length) {
       for (const child of this.children || []) {
         components.push(...child.toTemplateLiteral(sourceCode, indent + 2));
       }
diff --git a/scripts/eslint_rules/lib/no-imperative-dom-api/ui-utils.ts b/scripts/eslint_rules/lib/no-imperative-dom-api/ui-utils.ts
@@ -0,0 +1,124 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+/**
+ * @fileoverview A library to identify and templatize UI.UIUtils calls.
+ */
+
+import type {TSESTree} from '@typescript-eslint/utils';
+
+import {isIdentifier, isMemberExpression} from './ast.ts';
+import {DomFragment} from './dom-fragment.ts';
+type CallExpression = TSESTree.CallExpression;
+type MemberExpression = TSESTree.MemberExpression;
+type Identifier = TSESTree.Identifier;
+type Node = TSESTree.Node;
+
+export const uiUtils = {
+  create(context) {
+    const sourceCode = context.getSourceCode();
+    return {
+      CallExpression(node: CallExpression) {
+        if (!isMemberExpression(
+                node.callee, n => isMemberExpression(n, n => isIdentifier(n, 'UI'), n => isIdentifier(n, 'UIUtils')),
+                n => n.type === 'Identifier')) {
+          return;
+        }
+        const functionName = ((node.callee as MemberExpression).property as Identifier).name;
+        if (functionName === 'createLabel') {
+          const domFragment = DomFragment.getOrCreate(node, sourceCode);
+          domFragment.tagName = 'label';
+          const title = node.arguments[0];
+          if (title) {
+            domFragment.textContent = title;
+          }
+          const className = node.arguments[1];
+          if (className) {
+            domFragment.classList.push(className);
+          }
+          const associatedControl = node.arguments[2];
+          if (associatedControl) {
+            domFragment.appendChild(associatedControl, sourceCode);
+          }
+        }
+        if (functionName === 'createTextButton') {
+          const opts = node.arguments[2];
+          if (opts && opts.type !== 'ObjectExpression') {
+            return;
+          }
+          const domFragment = DomFragment.getOrCreate(node, sourceCode);
+          domFragment.tagName = 'devtools-button';
+          const text = node.arguments[0];
+          if (text) {
+            domFragment.textContent = text;
+          }
+          const clickHandler = node.arguments[1];
+          if (clickHandler) {
+            domFragment.eventListeners.push({
+              key: 'click',
+              value: clickHandler,
+            });
+          }
+          let variant: string|Node = 'Buttons.Button.Variant.OUTLINED';
+          if (opts) {
+            for (const property of opts.properties) {
+              if (property.type !== 'Property') {
+                continue;
+              }
+              if (isIdentifier(property.key, 'className')) {
+                domFragment.classList.push(property.value);
+              }
+              if (isIdentifier(property.key, 'jslogContext')) {
+                domFragment.bindings.push({
+                  key: 'jslogContext',
+                  value: property.value,
+                });
+              }
+              if (isIdentifier(property.key, 'variant')) {
+                variant = property.value;
+              }
+              if (isIdentifier(property.key, 'title')) {
+                domFragment.attributes.push({
+                  key: 'title',
+                  value: property.value,
+                });
+              }
+              if (isIdentifier(property.key, 'icon')) {
+                domFragment.bindings.push({
+                  key: 'iconName',
+                  value: property.value,
+                });
+              }
+            }
+          }
+          domFragment.bindings.push({
+            key: 'variant',
+            value: variant,
+          });
+        }
+        if (functionName === 'createOption') {
+          const domFragment = DomFragment.getOrCreate(node, sourceCode);
+          domFragment.tagName = 'option';
+          const title = node.arguments[0];
+          if (title) {
+            domFragment.textContent = title;
+          }
+          const value = node.arguments[1];
+          if (value) {
+            domFragment.attributes.push({
+              key: 'value',
+              value,
+            });
+          }
+          const jslogContext = node.arguments[1];
+          if (jslogContext) {
+            domFragment.attributes.push({
+              key: 'jslog',
+              value: '${VisualLogging.dropDown(' + sourceCode.getText(jslogContext) + ').track({click: true})}',
+            });
+          }
+        }
+      },
+    };
+  }
+};
diff --git a/scripts/eslint_rules/tests/no-imperative-dom-api.test.ts b/scripts/eslint_rules/tests/no-imperative-dom-api.test.ts
@@ -544,6 +544,47 @@ 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 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\`
+    <div>
+      <label class="some-label">Some label:
+        <select>
+          <option value="1" jslog=\${VisualLogging.dropDown('1').track({click: true})}>Option 1</option>
+        </select>
+      </label>
+      <devtools-button class="some-class" title=\${i18nString(UIStrings.someTitle)} @click=\${onClick}
+          .jslogContext=\${'some-button'} .variant=\${Buttons.Button.Variant.PRIMARY}>Some button</devtools-button>
+    </div>\`,
+    target, {host: input});
+};
+
 class SomeWidget extends UI.Widget.Widget {
   constructor() {
     super();
