Revert "Remove custom_element_definitions_location lint rule."

This reverts commit dc5df3f.

Reason for revert: Actually this is fully inline with the UI eng vision. Not sure what I was thinking.

Original change's description:
> Remove custom_element_definitions_location lint rule.
>
> It is hard to justify this requiement in the light of UI engineering
> approach we are taking.
>
> Bug: 301364727
> Change-Id: I9f8f42255aab5dd41858e5840e048e47719f8520
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5899035
> Reviewed-by: Benedikt Meurer <[email protected]>
> Commit-Queue: Benedikt Meurer <[email protected]>
> Auto-Submit: Danil Somsikov <[email protected]>

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

Author: Lightning00Blade

eslint.config.mjs

@@ -568,6 +568,12 @@ export default [
       'rulesdir/jslog-context-list': 'error',
       'rulesdir/es-modules-import': 'error',
       'rulesdir/html-tagged-template': 'error',
+      'rulesdir/enforce-custom-element-definitions-location': [
+        'error',
+        {
+          rootFrontendDirectory: join(import.meta.dirname, 'front_end'),
+        },
+      ],
     },
   },
   {
@@ -620,6 +626,7 @@ export default [
       'rulesdir/prefer-assert-length-of': 'error',
       'rulesdir/prefer-url-string': 'error',
       'rulesdir/trace-engine-test-timeouts': 'error',
+      'rulesdir/enforce-custom-element-definitions-location': 'off',
     },
 
     settings: {

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

@@ -108,7 +108,6 @@ const colorPallettes: ColorPalette[] = [
   },
 ];
 
-/* rulesdir/no-underscored-properties, rulesdir/no-a-tags-in-lit */
 export class BrickBreaker extends HTMLElement {
   #canvas: HTMLCanvasElement;
   #ctx: CanvasRenderingContext2D;

scripts/eslint_rules/lib/enforce-custom-element-definitions-location.js

@@ -0,0 +1,98 @@
+// Copyright 2021 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.
+'use strict';
+
+const path = require('path');
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+
+    docs: {
+      description:
+        'ensure that custom element definitions are in the correct folders.',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    messages: {
+      definitionInWrongFolder:
+        'A custom element definition was found in a folder that ' +
+        'should not contain element definitions. If you want to define a custom element, ' +
+        'either place it in `ui/components/` or in a `components` sub-folder of a panel. ' +
+        'E.g. `panels/elements/components/`.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          rootFrontendDirectory: {
+            type: 'string',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create: function (context) {
+    const filename = context.filename ?? context.getFilename();
+    const classDefiningFileName = path.resolve(filename);
+
+    let frontEndDirectory = '';
+    if (context.options?.[0]?.rootFrontendDirectory) {
+      frontEndDirectory = context.options[0].rootFrontendDirectory;
+    }
+    if (!frontEndDirectory) {
+      throw new Error(
+        'rootFrontEndDirectory must be provided to custom_elements_definitions_location.',
+      );
+    }
+
+    const PANELS_DIRECTORY = path.join(frontEndDirectory, 'panels');
+
+    const ALLOWED_CUSTOM_ELEMENT_LOCATIONS = new Set([
+      path.join(frontEndDirectory, 'ui', 'components'),
+
+      // These should be moved to `ui/components` at some point
+      path.join(frontEndDirectory, 'ui', 'legacy'),
+      // path.join(frontEndDirectory, 'ui', 'legacy', 'components', 'inline_editor'),
+      // path.join(frontEndDirectory, 'ui', 'legacy', 'components', 'perf_ui', 'PieChart.ts'),
+      // path.join(frontEndDirectory, 'ui', 'legacy', 'XElement.ts'),
+    ]);
+
+    return {
+      ClassDeclaration(node) {
+        if (node.superClass?.name !== 'HTMLElement') {
+          return;
+        }
+
+        for (const allowedLocation of ALLOWED_CUSTOM_ELEMENT_LOCATIONS) {
+          if (classDefiningFileName.startsWith(allowedLocation)) {
+            return;
+          }
+        }
+
+        if (classDefiningFileName.startsWith(PANELS_DIRECTORY)) {
+          const filePathWithPanelName = classDefiningFileName.substring(
+            PANELS_DIRECTORY.length + 1,
+          );
+          const filePathWithoutPanelName = filePathWithPanelName.substring(
+            filePathWithPanelName.indexOf(path.sep) + 1,
+          );
+
+          if (filePathWithoutPanelName.includes(`components${path.sep}`)) {
+            return;
+          }
+        }
+
+        context.report({
+          node,
+          messageId: 'definitionInWrongFolder',
+        });
+      },
+    };
+  },
+};

scripts/eslint_rules/tests/enforce-custom-element-definitions-location.test.js

@@ -0,0 +1,124 @@
+// Copyright 2021 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.
+'use strict';
+
+const path = require('path');
+
+const rule = require('../lib/enforce-custom-element-definitions-location.js');
+
+const {ruleTester} = require('./utils/utils.js');
+
+ruleTester.run('enforce-custom-element-definitions-location', rule, {
+  valid: [
+    {
+      code: 'class Foo extends HTMLElement {}',
+      filename: 'front_end/ui/components/foo/Foo.ts',
+      options: [
+        {
+          rootFrontendDirectory: path.join(
+              __dirname,
+              '..',
+              '..',
+              '..',
+              'front_end',
+              ),
+        },
+      ],
+    },
+    {
+      code: 'class Foo extends HTMLElement {}',
+      filename: 'front_end/panels/issues/components/Foo.ts',
+      options: [
+        {
+          rootFrontendDirectory: path.join(
+              __dirname,
+              '..',
+              '..',
+              '..',
+              'front_end',
+              ),
+        },
+      ],
+    },
+    {
+      code: 'class Foo extends HTMLElement {}',
+      filename: 'front_end/panels/issues/components/nested/folder/Foo.ts',
+      options: [
+        {
+          rootFrontendDirectory: path.join(
+              __dirname,
+              '..',
+              '..',
+              '..',
+              'front_end',
+              ),
+        },
+      ],
+    },
+    {
+      code: 'class Foo extends HTMLElement {}',
+      filename: 'front_end/panels/performance/library/components/metrics/Metric.ts',
+      options: [
+        {
+          rootFrontendDirectory: path.join(
+              __dirname,
+              '..',
+              '..',
+              '..',
+              'front_end',
+              ),
+        },
+      ],
+    },
+    {
+      code: 'class Foo extends OtherClass {}',
+      filename: 'front_end/models/some/Model.ts',
+      options: [
+        {
+          rootFrontendDirectory: path.join(
+              __dirname,
+              '..',
+              '..',
+              '..',
+              'front_end',
+              ),
+        },
+      ],
+    },
+  ],
+  invalid: [
+    {
+      code: 'class Foo extends HTMLElement {}',
+      filename: 'front_end/panels/issues/IssuesPanel.ts',
+      errors: [{messageId: 'definitionInWrongFolder'}],
+      options: [
+        {
+          rootFrontendDirectory: path.join(
+              __dirname,
+              '..',
+              '..',
+              '..',
+              'front_end',
+              ),
+        },
+      ],
+    },
+    {
+      code: 'class Foo extends HTMLElement {}',
+      filename: 'front_end/models/bindings/Bindings.ts',
+      errors: [{messageId: 'definitionInWrongFolder'}],
+      options: [
+        {
+          rootFrontendDirectory: path.join(
+              __dirname,
+              '..',
+              '..',
+              '..',
+              'front_end',
+              ),
+        },
+      ],
+    },
+  ],
+});