[UIEngineering] Update inject-checkbox-styles for widgetScoped calls

We'll wrap styles inside `widgetScoped` calls in `<style>` tags. We'll
need to account for them in the `inject-checkbox-styles` rule.

Bug: 431945418
Change-Id: I0c625cc5300c0d05c43d28a5ce5b407455a582ee
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6765324
Auto-Submit: Ergün Erdoğmuş <ergunsh@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>
Reviewed-by: Nikolay Vitkov <nvitkov@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

Author: ergunsh

scripts/eslint_rules/lib/inject-checkbox-styles.ts

@@ -6,6 +6,7 @@ import path from 'path';
 
 import {isLitHtmlTemplateCall} from './utils/lit.ts';
 import {createRule} from './utils/ruleCreator.ts';
+import {isWidgetScopedCall} from './utils/stylingHelpers.ts';
 
 type AssignmentExpression = TSESTree.AssignmentExpression;
 type TemplateElement = TSESTree.TemplateElement;
@@ -161,8 +162,19 @@ export default createRule<[], MessageIds>({
     };
 
     function isCheckboxStylesReference(elem: Node|null): boolean {
-      // Ensure elem is not null and is a MemberExpression before accessing properties
-      if (!elem || elem.type !== 'MemberExpression') {
+      // Ensure elem is not null.
+      if (!elem) {
+        return false;
+      }
+
+      // If this is a `widgetScoped(styles)` call, extract
+      // `elem` to be the `styles` directly
+      if (elem.type === 'CallExpression' && isWidgetScopedCall(elem)) {
+        elem = elem.arguments[0];
+      }
+
+      // Ensure this node is a MemberExpression before accessing properties
+      if (elem.type !== 'MemberExpression') {
         return false;
       }
 

scripts/eslint_rules/lib/no-unscoped-styles-in-views.ts

@@ -8,35 +8,16 @@ import type {TSESTree} from '@typescript-eslint/utils';
 
 import {isLitHtmlRenderCall, isLitHtmlTemplateCall, isViewFunction} from './utils/lit.ts';
 import {createRule} from './utils/ruleCreator.ts';
+import {isWidgetScopedCall} from './utils/stylingHelpers.ts';
 
 type CallExpression = TSESTree.CallExpression;
-type Expression = TSESTree.Expression;
 
 function containsMeaningfulCss(text: string): boolean {
   const noComments = text.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, '');
   const noWhitespace = noComments.trim();
   return noWhitespace.length > 0;
 }
 
-/**
- * Checks if an expression node is a call to `UI.Widget.widgetScoped(...)`.
- * @param expression The expression AST node to check.
- * @returns True if the expression is the specific widgetScoped call.
- */
-function isWidgetScopedCall(expression: Expression): boolean {
-  if (expression.type !== 'CallExpression') {
-    return false;
-  }
-  const callee = expression.callee;
-  // Checks for the direct `widgetScoped` call.
-  const isDirectCall = callee.type === 'Identifier' && callee.name === 'widgetScoped';
-  // Checks for the full `UI.Widget.widgetScoped` member expression chain.
-  const isCallThroughUIWidget = callee.type === 'MemberExpression' && callee.property.type === 'Identifier' &&
-      callee.property.name === 'widgetScoped' && callee.object.type === 'MemberExpression' &&
-      callee.object.property.type === 'Identifier' && callee.object.property.name === 'Widget';
-  return isDirectCall || isCallThroughUIWidget;
-}
-
 export default createRule({
   name: 'no-unscoped-styles-in-views',
   meta: {

scripts/eslint_rules/lib/utils/stylingHelpers.ts

@@ -0,0 +1,24 @@
+// 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.
+
+import type {TSESTree} from '@typescript-eslint/utils';
+
+/**
+ * Checks if an expression node is a call to `UI.Widget.widgetScoped(...)`.
+ * @param expression The expression AST node to check.
+ * @returns True if the expression is the specific widgetScoped call.
+ */
+export function isWidgetScopedCall(expression: TSESTree.Expression): boolean {
+  if (expression.type !== 'CallExpression') {
+    return false;
+  }
+  const callee = expression.callee;
+  // Checks for the direct `widgetScoped` call.
+  const isDirectCall = callee.type === 'Identifier' && callee.name === 'widgetScoped';
+  // Checks for the full `UI.Widget.widgetScoped` member expression chain.
+  const isCallThroughUIWidget = callee.type === 'MemberExpression' && callee.property.type === 'Identifier' &&
+      callee.property.name === 'widgetScoped' && callee.object.type === 'MemberExpression' &&
+      callee.object.property.type === 'Identifier' && callee.object.property.name === 'Widget';
+  return isDirectCall || isCallThroughUIWidget;
+}

scripts/eslint_rules/tests/inject-checkbox-styles.test.ts

@@ -71,6 +71,29 @@ export class SettingCheckbox extends HTMLElement {
         </label>
       </p>\`, this.#shadow, {host: this});
   }
+}`,
+      filename: 'front_end/ui/components/settings/SettingsCheckbox.ts',
+    },
+    {
+      code: `import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as Lit from '../../lit/lit.js';
+import * as Input from '../input/input.js';
+
+
+export class SettingCheckbox extends HTMLElement {
+  static readonly litTagName = Lit.literal\`setting-checkbox\`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+
+  #render(): void {
+    Lit.render(
+        Lit.html\`
+      <style>\${UI.Widget.widgetScoped(Input.checkboxStyles)}</style>
+      <p>
+        <label>
+          <input type="checkbox" />
+        </label>
+      </p>\`, this.#shadow, {host: this});
+  }
 }`,
       filename: 'front_end/ui/components/settings/SettingsCheckbox.ts',
     },