[eslint] Enforce custom elements naming

Enforce a custom elements prefix `devtool-` to signify that the we are the creators of the implementation.

Bug: none
Change-Id: Ie4c4dedbd2fe6c63b1002e4bfcac3deb59a1e2a4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7095724
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

eslint.config.mjs

@@ -121,6 +121,7 @@ export class SizeInputElement extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('device-mode-emulation-size-input', SizeInputElement);
 
 declare global {

front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -93,6 +93,7 @@ export class IconButton extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('icon-button', IconButton);
 
 declare global {

front_end/ui/components/icon_button/IconButton.ts

@@ -176,6 +176,7 @@ export class SettingCheckbox extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('setting-checkbox', SettingCheckbox);
 
 declare global {

front_end/ui/components/settings/SettingCheckbox.ts

@@ -1480,6 +1480,7 @@ export class DevToolsIconLabel extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('dt-icon-label', DevToolsIconLabel);
 
 export class DevToolsSmallBubble extends HTMLElement {
@@ -1498,6 +1499,7 @@ export class DevToolsSmallBubble extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('dt-small-bubble', DevToolsSmallBubble);
 
 export class DevToolsCloseButton extends HTMLElement {
@@ -1536,6 +1538,7 @@ export class DevToolsCloseButton extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('dt-close-button', DevToolsCloseButton);
 
 export function bindInput(

front_end/ui/legacy/UIUtils.ts

@@ -153,4 +153,5 @@ export class ContextMenuProvider implements Provider<Node> {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('x-link', XLink);

front_end/ui/legacy/XLink.ts

@@ -38,6 +38,7 @@ export class CSSShadowSwatch extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('css-shadow-swatch', CSSShadowSwatch);
 
 declare global {

front_end/ui/legacy/components/inline_editor/Swatches.ts

@@ -602,4 +602,5 @@ declare global {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('brick-breaker', BrickBreaker);

front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -0,0 +1,76 @@
+// 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 type {TSESTree} from '@typescript-eslint/types';
+
+import {createRule} from './utils/ruleCreator.ts';
+
+function getTextValue(node: TSESTree.Node): string|undefined {
+  if (node.type === 'Literal') {
+    return node.value?.toString();
+  }
+  if (node.type === 'TemplateLiteral') {
+    if (node.quasis.length === 0) {
+      return;
+    }
+    return node.quasis[0].value.cooked;
+  }
+  return;
+}
+
+export default createRule({
+  name: 'enforce-custom-element-prefix',
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce that all customElements.define() calls use a "devtools-" prefix for the tag name.',
+      category: 'Possible Errors',
+    },
+    messages: {
+      onlyStatic: 'Custom element tag name should be called with static string.',
+      missingPrefix: 'Custom element tag name \'{{tagName}}\' must be prefixed with \'devtools-\'.',
+    },
+    schema: [],
+  },
+  defaultOptions: [],
+  create: function(context) {
+    return {
+      CallExpression(node: TSESTree.CallExpression) {
+        const callee = node.callee;
+
+        // customElements.define(<string>, <class>);
+        if (callee.type !== 'MemberExpression' || callee.object.type !== 'Identifier' ||
+            callee.object.name !== 'customElements' || callee.property.type !== 'Identifier' ||
+            callee.property.name !== 'define') {
+          return;
+        }
+
+        const firstArg = node.arguments[0];
+        if (!firstArg) {
+          return;
+        }
+
+        const tagName = getTextValue(firstArg);
+
+        if (typeof tagName !== 'string') {
+          context.report({
+            node: firstArg,
+            messageId: 'onlyStatic',
+          });
+          return;
+        }
+
+        if (!tagName.startsWith('devtools-')) {
+          context.report({
+            node: firstArg,
+            messageId: 'missingPrefix',
+            data: {
+              tagName,
+            },
+          });
+        }
+      },
+    };
+  },
+});

scripts/eslint_rules/lib/enforce-custom-element-prefix.ts

@@ -0,0 +1,62 @@
+// 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/enforce-custom-element-prefix.ts';
+
+import {RuleTester} from './utils/RuleTester.ts';
+
+new RuleTester().run('enforce-custom-element-prefix', rule, {
+  valid: [
+    {
+      code: `customElements.define('devtools-my-element', class extends HTMLElement {})`,
+    },
+    {
+      code: 'customElements.define(`devtools-another-element`, class extends HTMLElement {})',
+    },
+    {
+      code: `MyElements.define('my-element', class extends HTMLElement {})`,
+    }
+  ],
+  invalid: [
+    {
+      code: `const myTag = 'my-element'; customElements.define(myTag, class extends HTMLElement {})`,
+      errors: [{
+        messageId: 'onlyStatic',
+      }],
+    },
+    {
+      code: `customElements.define('my-element', class extends HTMLElement {})`,
+      errors: [{
+        messageId: 'missingPrefix',
+        data: {tagName: 'my-element'},
+      }],
+    },
+    {
+      code: 'customElements.define(`bad-element`, class extends HTMLElement {})',
+      errors: [
+        {messageId: 'missingPrefix', data: {tagName: 'bad-element'}},
+      ],
+    },
+    {
+      code: `customElements.define('', class extends HTMLElement {})`,
+      errors: [{messageId: 'missingPrefix', data: {tagName: ''}}],
+    },
+    {
+      code: `customElements.define('chrome-my-element', class extends HTMLElement {})`,
+      errors: [
+        {messageId: 'missingPrefix', data: {tagName: 'chrome-my-element'}},
+      ],
+    },
+    {
+      code: `customElements.define('DEVTOOLS-my-element', class extends HTMLElement {})`,
+      errors: [
+        {messageId: 'missingPrefix', data: {tagName: 'DEVTOOLS-my-element'}},
+      ],
+    },
+    {
+      code: `customElements.define('devtoolselement', class extends HTMLElement {})`,
+      errors: [{messageId: 'missingPrefix', data: {tagName: 'devtoolselement'}}],
+    },
+  ],
+});