[eslint] Fix duplicate rule and new errors

Remove `extensions/cxx_debugging/third_party/` file from linting. Fix
duplicate rule that was disabling the first one. Changed the interfaces
to match camelCase as in TS style guide
https://google.github.io/styleguide/tsguide.html#camel-case Also adds
names to rules so it's easier to see what caused the error.

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

Author: Lightning00Blade

eslint.config.mjs

@@ -20,6 +20,7 @@ rulesdirPlugin.RULES_DIR = join(
  */
 export default [
   {
+    name: 'Ignore list',
     ignores: [
       'front_end/diff/diff_match_patch.jD',
       'front_end/models/javascript_metadata/NativeFunctions.js',
@@ -35,7 +36,7 @@ export default [
       // own.
       'front_end/third_party/*/package/',
       // Any JS files are also not authored by devtools-frontend, so we ignore those.
-      'front_end/third_party/**/*.js',
+      'front_end/third_party/**/*',
       // Lighthouse doesn't have a package/ folder but has other nested folders, so
       // we ignore any folders within the lighthouse directory.
       'front_end/third_party/lighthouse/*/',
@@ -46,6 +47,8 @@ export default [
       'front_end/third_party/lit/src/*.ts',
       // @puppeteer/replay is auto-generated.
       'front_end/third_party/puppeteer-replay/**/*.ts',
+      // Third party code we did not author for extensions
+      'extensions/cxx_debugging/third_party/**/*',
 
       '**/node_modules',
       'scripts/build/typescript/tests',
@@ -268,28 +271,15 @@ export default [
       parserOptions: {
         allowAutomaticSingleRunInference: true,
         project: join(
-            import.meta.dirname,
-            'config',
-            'typescript',
-            'tsconfig.eslint.json',
-            ),
+          import.meta.dirname,
+          'config',
+          'typescript',
+          'tsconfig.eslint.json',
+        ),
       },
     },
 
     rules: {
-      // Forbids interfaces starting with an I prefix.
-      '@typescript-eslint/naming-convention': [
-        'error',
-        {
-          selector: 'interface',
-          format: ['PascalCase'],
-
-          custom: {
-            regex: '^I[A-Z]',
-            match: false,
-          },
-        },
-      ],
       '@typescript-eslint/no-explicit-any': [
         'error',
         {
@@ -375,6 +365,16 @@ export default [
 
       '@typescript-eslint/naming-convention': [
         'error',
+        // Forbids interfaces starting with an I prefix.
+        {
+          selector: 'interface',
+          format: ['PascalCase'],
+
+          custom: {
+            regex: '^I[A-Z]',
+            match: false,
+          },
+        },
         {
           selector: [
             'function',
@@ -464,12 +464,12 @@ export default [
         {
           // Enforce that any import of models/trace/trace.js names the import Trace.
           modulePath: join(
-              import.meta.dirname,
-              'front_end',
-              'models',
-              'trace',
-              'trace.js',
-              ),
+            import.meta.dirname,
+            'front_end',
+            'models',
+            'trace',
+            'trace.js',
+          ),
           importName: 'Trace',
         },
       ],
@@ -621,6 +621,7 @@ export default [
     },
   },
   {
+    name: 'Use private class members rule',
     files: [
       'front_end/panels/**/components/*.ts',
       'front_end/ui/components/**/*.ts',
@@ -632,6 +633,7 @@ export default [
     },
   },
   {
+    name: 'Ignore private class members rule',
     files: [
       'front_end/panels/recorder/**/*.ts',
       'front_end/ui/components/suggestion_input/*.ts',
@@ -642,6 +644,7 @@ export default [
     },
   },
   {
+    name: 'Supported CSS properties rules',
     files: ['front_end/generated/SupportedCSSProperties.js'],
     rules: {
       'rulesdir/jslog-context-list': 'error',
@@ -676,6 +679,7 @@ export default [
     },
   },
   {
+    name: 'Traces import rule',
     files: ['front_end/models/trace/handlers/**/*.ts'],
     rules: {
       'rulesdir/no-imports-in-directory': [
@@ -689,6 +693,7 @@ export default [
     },
   },
   {
+    name: 'Recorder injected code',
     files: ['front_end/panels/recorder/injected/**/*.ts'],
     rules: {
       // The code is rolled up and tree-shaken independently from the regular entrypoints.

front_end/models/live-metrics/LiveMetrics.ts

@@ -46,9 +46,9 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #target?: SDK.Target.Target;
   #scriptIdentifier?: Protocol.Page.ScriptIdentifier;
   #lastResetContextId?: Protocol.Runtime.ExecutionContextId;
-  #lcpValue?: LCPValue;
-  #clsValue?: CLSValue;
-  #inpValue?: INPValue;
+  #lcpValue?: LcpValue;
+  #clsValue?: ClsValue;
+  #inpValue?: InpValue;
   #interactions: InteractionMap = new Map();
   #interactionsByGroupId = new Map<Spec.InteractionEntryGroupId, Interaction[]>();
   #layoutShifts: LayoutShift[] = [];
@@ -70,15 +70,15 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return liveMetricsInstance;
   }
 
-  get lcpValue(): LCPValue|undefined {
+  get lcpValue(): LcpValue|undefined {
     return this.#lcpValue;
   }
 
-  get clsValue(): CLSValue|undefined {
+  get clsValue(): ClsValue|undefined {
     return this.#clsValue;
   }
 
-  get inpValue(): INPValue|undefined {
+  get inpValue(): InpValue|undefined {
     return this.#inpValue;
   }
 
@@ -261,7 +261,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     switch (webVitalsEvent.name) {
       case 'LCP': {
         const warnings: string[] = [];
-        const lcpEvent: LCPValue = {
+        const lcpEvent: LcpValue = {
           value: webVitalsEvent.value,
           phases: webVitalsEvent.phases,
           warnings,
@@ -281,15 +281,15 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         break;
       }
       case 'CLS': {
-        const event: CLSValue = {
+        const event: ClsValue = {
           value: webVitalsEvent.value,
           clusterShiftIds: webVitalsEvent.clusterShiftIds,
         };
         this.#clsValue = event;
         break;
       }
       case 'INP': {
-        const inpEvent: INPValue = {
+        const inpEvent: InpValue = {
           value: webVitalsEvent.value,
           phases: webVitalsEvent.phases,
           interactionId: `interaction-${webVitalsEvent.entryGroupId}-${webVitalsEvent.startTime}`,
@@ -586,17 +586,17 @@ export interface NodeRef {
   link: Node;
 }
 
-export interface LCPValue extends MetricValue {
-  phases: Spec.LCPPhases;
+export interface LcpValue extends MetricValue {
+  phases: Spec.LcpPhases;
   nodeRef?: NodeRef;
 }
 
-export interface INPValue extends MetricValue {
-  phases: Spec.INPPhases;
+export interface InpValue extends MetricValue {
+  phases: Spec.InpPhases;
   interactionId: InteractionId;
 }
 
-export interface CLSValue extends MetricValue {
+export interface ClsValue extends MetricValue {
   clusterShiftIds: Spec.UniqueLayoutShiftId[];
 }
 
@@ -613,15 +613,15 @@ export interface Interaction {
   duration: number;
   startTime: number;
   nextPaintTime: number;
-  phases: Spec.INPPhases;
+  phases: Spec.InpPhases;
   longAnimationFrameTimings: Spec.PerformanceLongAnimationFrameTimingJSON[];
   nodeRef?: NodeRef;
 }
 
 export interface StatusEvent {
-  lcp?: LCPValue;
-  cls?: CLSValue;
-  inp?: INPValue;
+  lcp?: LcpValue;
+  cls?: ClsValue;
+  inp?: InpValue;
   interactions: InteractionMap;
   layoutShifts: LayoutShift[];
 }

front_end/models/live-metrics/web-vitals-injected/spec/spec.ts

@@ -19,34 +19,34 @@ export function getUniqueLayoutShiftId(entry: LayoutShift): UniqueLayoutShiftId
   return `layout-shift-${entry.value}-${entry.startTime}`;
 }
 
-export interface LCPPhases {
+export interface LcpPhases {
   timeToFirstByte: number;
   resourceLoadDelay: number;
   resourceLoadTime: number;
   elementRenderDelay: number;
 }
 
-export interface INPPhases {
+export interface InpPhases {
   inputDelay: number;
   processingDuration: number;
   presentationDelay: number;
 }
 
-export interface LCPChangeEvent extends MetricChangeEvent {
+export interface LcpChangeEvent extends MetricChangeEvent {
   name: 'LCP';
-  phases: LCPPhases;
+  phases: LcpPhases;
   nodeIndex?: number;
 }
 
-export interface CLSChangeEvent extends MetricChangeEvent {
+export interface ClsChangeEvent extends MetricChangeEvent {
   name: 'CLS';
   clusterShiftIds: UniqueLayoutShiftId[];
 }
 
-export interface INPChangeEvent extends MetricChangeEvent {
+export interface InpChangeEvent extends MetricChangeEvent {
   name: 'INP';
   interactionType: INPAttribution['interactionType'];
-  phases: INPPhases;
+  phases: InpPhases;
   startTime: number;
   entryGroupId: InteractionEntryGroupId;
 }
@@ -92,7 +92,7 @@ export interface InteractionEntryEvent {
   startTime: number;
   nextPaintTime: number;
   duration: number;
-  phases: INPPhases;
+  phases: InpPhases;
   nodeIndex?: number;
   longAnimationFrameEntries: PerformanceLongAnimationFrameTimingJSON[];
 }
@@ -109,4 +109,4 @@ export interface ResetEvent {
 }
 
 export type WebVitalsEvent =
-    LCPChangeEvent|CLSChangeEvent|INPChangeEvent|InteractionEntryEvent|LayoutShiftEvent|ResetEvent;
+    LcpChangeEvent|ClsChangeEvent|InpChangeEvent|InteractionEntryEvent|LayoutShiftEvent|ResetEvent;

front_end/models/live-metrics/web-vitals-injected/web-vitals-injected.ts

@@ -135,7 +135,7 @@ function initialize(): void {
   });
 
   onLCP(metric => {
-    const event: Spec.LCPChangeEvent = {
+    const event: Spec.LcpChangeEvent = {
       name: 'LCP',
       value: metric.value,
       phases: {
@@ -154,7 +154,7 @@ function initialize(): void {
   }, {reportAllChanges: true});
 
   onCLS(metric => {
-    const event: Spec.CLSChangeEvent = {
+    const event: Spec.ClsChangeEvent = {
       name: 'CLS',
       value: metric.value,
       clusterShiftIds: metric.entries.map(Spec.getUniqueLayoutShiftId),
@@ -163,7 +163,7 @@ function initialize(): void {
   }, {reportAllChanges: true});
 
   onINP(metric => {
-    const event: Spec.INPChangeEvent = {
+    const event: Spec.InpChangeEvent = {
       name: 'INP',
       value: metric.value,
       phases: {

front_end/panels/timeline/components/LiveMetricsView.ts

@@ -294,9 +294,9 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   #isNode: boolean = false;
 
-  #lcpValue?: LiveMetrics.LCPValue;
-  #clsValue?: LiveMetrics.CLSValue;
-  #inpValue?: LiveMetrics.INPValue;
+  #lcpValue?: LiveMetrics.LcpValue;
+  #clsValue?: LiveMetrics.ClsValue;
+  #inpValue?: LiveMetrics.InpValue;
   #interactions: LiveMetrics.InteractionMap = new Map();
   #layoutShifts: LiveMetrics.LayoutShift[] = [];