[DevToolsUIKit] Deprecate SelectMenu() and <devtools-select-menu>

Bug: 14335836
Change-Id: I851a8d3ff361d742c8cb048982650835826fa0d0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6578342
Reviewed-by: Liviu Rau <liviurau@chromium.org>
Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org>
Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>

Author: Kateryna Prokopenko

docs/styleguide/ux/components.md

@@ -137,7 +137,7 @@ button.addEventListener('click', event => onClick(event));
   * [Icon
     buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
 
-## Combo Boxes
+## Combo Boxes and Single Select menus
 
 ![Combo Box component](images/combo-box-variations.png)
 
@@ -167,6 +167,7 @@ Usage with lit-html:
 ```js
 html`<select aria-label="Choose your champion"
              @onchange=${onChange}>
+  <option hidden value="Choose your champion"></option>
   <option jslog=${VisualLogging.item('hamster').track({click: true})}
           value="Hamster">Hamster</option>
   <option jslog=${VisualLogging.item('mouse').track({click: true})}

eslint.config.mjs

@@ -612,6 +612,7 @@ export default defineConfig([
       'rulesdir/no-bound-component-methods': 'error',
       'rulesdir/no-adopted-style-sheets': 'error',
       'rulesdir/no-customized-builtin-elements': 'error',
+      'rulesdir/no-deprecated-component-usages': 'error',
       'rulesdir/no-self-closing-custom-element-tagnames': 'error',
       'rulesdir/no-a-tags-in-lit': 'error',
       'rulesdir/check-css-import': 'error',

front_end/panels/recorder/components/RecordingView.ts

@@ -844,6 +844,7 @@ export class RecordingView extends HTMLElement {
     const currentConverter = this.#getCurrentConverter();
     const converterFormatName = currentConverter?.getFormatName();
     // clang-format off
+    /* eslint-disable rulesdir/no-deprecated-component-usages */
     return html`
         <devtools-split-view
           direction="auto"
@@ -907,6 +908,7 @@ export class RecordingView extends HTMLElement {
           </div>
         </devtools-split-view>
       `;
+    /* eslint-enable rulesdir/no-deprecated-component-usages */
     // clang-format on
   }
 

front_end/panels/timeline/components/CPUThrottlingSelector.ts

@@ -163,6 +163,7 @@ export class CPUThrottlingSelector extends HTMLElement {
     const calibrationLabel = hasCalibratedOnce ? i18nString(UIStrings.recalibrate) : i18nString(UIStrings.calibrate);
 
     // clang-format off
+    /* eslint-disable rulesdir/no-deprecated-component-usages */
     const output = html`
       <style>${cpuThrottlingSelectorStyles}</style>
       <devtools-select-menu
@@ -206,6 +207,7 @@ export class CPUThrottlingSelector extends HTMLElement {
       </devtools-select-menu>
       ${recommendedInfoEl}
     `;
+    /* eslint-enable rulesdir/no-deprecated-component-usages */
     // clang-format on
     Lit.render(output, this.#shadow, {host: this});
   };

front_end/panels/timeline/components/LiveMetricsView.ts

@@ -687,6 +687,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // If there is no data at all we should force users to switch pages or reconfigure CrUX.
     const shouldDisable = !this.#cruxManager.pageResult?.['url-ALL'] && !this.#cruxManager.pageResult?.['origin-ALL'];
 
+    /* eslint-disable rulesdir/no-deprecated-component-usages */
     return html`
       <devtools-select-menu
         id="page-scope-select"
@@ -714,6 +715,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </devtools-menu-item>
       </devtools-select-menu>
     `;
+    /* eslint-enable rulesdir/no-deprecated-component-usages */
   }
 
   #getDeviceScopeDisplayName(deviceScope: CrUXManager.DeviceScope): string {
@@ -768,6 +770,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     const currentDeviceLabel = this.#getLabelForDeviceOption(this.#cruxManager.fieldDeviceOption);
 
     // clang-format off
+    /* eslint-disable rulesdir/no-deprecated-component-usages */
     return html`
       <devtools-select-menu
         id="device-scope-select"
@@ -793,6 +796,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         })}
       </devtools-select-menu>
     `;
+    /* eslint-enable rulesdir/no-deprecated-component-usages */
     // clang-format on
   }
 

front_end/panels/timeline/components/NetworkThrottlingSelector.ts

@@ -181,6 +181,7 @@ export class NetworkThrottlingSelector extends HTMLElement {
     }
 
     // clang-format off
+    /* eslint-disable rulesdir/no-deprecated-component-usages */
     const output = html`
       <style>${networkThrottlingSelectorStyles}</style>
       <devtools-select-menu
@@ -231,6 +232,7 @@ export class NetworkThrottlingSelector extends HTMLElement {
       </devtools-select-menu>
       ${recommendedInfoEl}
     `;
+    /* eslint-enable rulesdir/no-deprecated-component-usages */
     // clang-format on
     Lit.render(output, this.#shadow, {host: this});
   };

front_end/ui/components/menus/SelectMenu.ts

@@ -78,6 +78,9 @@ type TitleCallback = () => Lit.TemplateResult;
 
 const deployMenuArrow = new URL('../../../Images/triangle-down.svg', import.meta.url).toString();
 
+/**
+ * @deprecated use `<select>` instead.
+ */
 export class SelectMenu extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #button: SelectMenuButton|null = null;
@@ -207,6 +210,7 @@ export class SelectMenu extends HTMLElement {
     const buttonLabel = this.#getButtonText();
     if (!this.sideButton) {
       // clang-format off
+      /* eslint-disable rulesdir/no-deprecated-component-usages */
       return html`
           <devtools-select-menu-button
             @selectmenubuttontrigger=${this.#showMenu}
@@ -217,10 +221,12 @@ export class SelectMenu extends HTMLElement {
               ${buttonLabel}
             </devtools-select-menu-button>
         `;
+      /* eslint-enable rulesdir/no-deprecated-component-usages */
       // clang-format on
     }
 
     // clang-format off
+    /* eslint-disable rulesdir/no-deprecated-component-usages */
     return html`
       <button id="side-button" @click=${this.#sideButtonClicked} ?disabled=${this.disabled}>
         ${buttonLabel}
@@ -235,6 +241,7 @@ export class SelectMenu extends HTMLElement {
         .disabled=${this.disabled}>
       </devtools-select-menu-button>
     `;
+    /* eslint-enable rulesdir/no-deprecated-component-usages */
     // clang-format on
   }
 

scripts/eslint_rules/lib/no-deprecated-component-usages.ts

@@ -0,0 +1,46 @@
+// 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';
+
+import {createRule} from './utils/ruleCreator.ts';
+
+export default createRule({
+  name: 'no-deprecated-component-usages',
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow usage of deprecated component implementations.',
+      category: 'Possible Errors',
+    },
+    messages: {
+      noDevToolsSelectMenu:
+          'Usage of this component implementation is deprecated. Please refer to the UX style guide (docs/styleguide/ux/components.md) for recomended implementation.',
+    },
+    schema: [],  // no options
+  },
+  defaultOptions: [],
+  create(context) {
+    const forbiddenString = '<devtools-select-menu';
+
+    return {
+      Literal(node: TSESTree.Literal) {
+        if (typeof node.value === 'string' && node.value.includes(forbiddenString)) {
+          context.report({
+            node,
+            messageId: 'noDevToolsSelectMenu',
+          });
+        }
+      },
+      TemplateElement(node: TSESTree.TemplateElement) {
+        if (node.value.raw.includes(forbiddenString)) {
+          context.report({
+            node,
+            messageId: 'noDevToolsSelectMenu',
+          });
+        }
+      },
+    };
+  },
+});

scripts/eslint_rules/tests/no-deprecated-component-usages.test.ts

@@ -0,0 +1,46 @@
+// 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 rule from '../lib/no-deprecated-component-usages.ts';
+
+import {RuleTester} from './utils/RuleTester.ts';
+
+new RuleTester().run('no-deprecated-component-usages', rule, {
+  valid: [
+    {
+      code: `
+        const menu = document.querySelector('devtools-select-menu');
+      `,
+      filename: 'test/e2e/folder/file.ts',
+    },
+    {
+      code: `
+        document.querySelector('devtools-select-menu')?.click();
+      `,
+      filename: 'test/e2e/folder/file.ts',
+    },
+  ],
+
+  invalid: [
+    {
+      code: `
+        const output = html\`
+      <style></style>
+      <devtools-select-menu
+        @selectmenuselected${() => {}}
+        .buttonTitle=${'Click me'}
+        .title=${'Button to click'}>
+          <devtools-menu-item>${'Item'}</devtools-menu-item>
+      </devtools-select-menu>
+      \`;
+      `,
+      filename: 'test/e2e/folder/file.ts',
+      errors: [
+        {
+          messageId: 'noDevToolsSelectMenu',
+        },
+      ],
+    },
+
+  ],
+});