WebUI: Enforce class properties naming with ESLint checks for TS files.

Specifically enforcing the following rules from the styleguide at [1]:

 1) Class properties should be using lowerCamelCase
 2) Class properties that are 'static readonly' should be using
    CONSTANT_CASE

As part of enabling the new check fixed or suppressed any violations
revealed with
git cl presubmit --files "*.ts"

[1] https://google.github.io/styleguide/tsguide.html#identifiers

Bug: 720034
Change-Id: I4a50e986a96d3037ef36e7c6feb349a53ba5d461
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3696562
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1012589}

.eslintrc.js

@@ -90,6 +90,16 @@ module.exports = {
           leadingUnderscore: 'allow',
           trailingUnderscore: 'allow',
         },
+        {
+          selector: 'classProperty',
+          format: ['UPPER_CASE'],
+          modifiers: ['static', 'readonly'],
+        },
+        {
+          selector: 'classProperty',
+          format: ['camelCase'],
+          trailingUnderscore: 'allow',
+        },
         {
           selector: 'parameter',
           format: ['camelCase'],

chrome/browser/resources/bookmarks/dnd_manager.ts

@@ -134,11 +134,12 @@ export class DragInfo {
   }
 }
 
+const EXPAND_FOLDER_DELAY: number = 400;
+
 /**
  * Manages auto expanding of sidebar folders on hover while dragging.
  */
 class AutoExpander {
-  EXPAND_FOLDER_DELAY: number = 400;
   private lastElement_: BookmarkElement|null = null;
   private debouncer_: Debouncer;
 
@@ -165,7 +166,7 @@ class AutoExpander {
 
     // If dragging over the same node, reset the expander delay.
     if (overElement && overElement === this.lastElement_) {
-      this.debouncer_.restartTimeout(this.EXPAND_FOLDER_DELAY);
+      this.debouncer_.restartTimeout(EXPAND_FOLDER_DELAY);
       return;
     }
 

chrome/browser/resources/connectors_internals/zero_trust_connector.ts

@@ -67,12 +67,12 @@ export class ZeroTrustConnectorElement extends CustomElement {
     }
   }
 
-  private _signalsString: string = '';
+  private signalsString_: string = '';
   public set signalsString(str: string) {
     const signalsEl = (this.$('#signals') as HTMLElement);
     if (signalsEl) {
       signalsEl.innerText = str;
-      this._signalsString = str;
+      this.signalsString_ = str;
     } else {
       console.error('Could not find #signals element.');
     }
@@ -83,7 +83,7 @@ export class ZeroTrustConnectorElement extends CustomElement {
   }
 
   public get signalsString(): string {
-    return this._signalsString;
+    return this.signalsString_;
   }
 
   private readonly pageHandler: PageHandlerInterface;

chrome/browser/resources/print_preview/data/destination.ts

@@ -132,6 +132,17 @@ export type DestinationOptionalParams = {
   location?: string,
 };
 
+/**
+ * List of capability types considered color.
+ */
+const COLOR_TYPES: string[] = ['STANDARD_COLOR', 'CUSTOM_COLOR'];
+
+/**
+ * List of capability types considered monochrome.
+ */
+const MONOCHROME_TYPES: string[] = ['STANDARD_MONOCHROME', 'CUSTOM_MONOCHROME'];
+
+
 /**
  * Print destination data object.
  */
@@ -221,17 +232,6 @@ export class Destination {
 
   private type_: PrinterType;
 
-  /**
-   * List of capability types considered color.
-   */
-  private COLOR_TYPES_: string[] = ['STANDARD_COLOR', 'CUSTOM_COLOR'];
-
-  /**
-   * List of capability types considered monochrome.
-   */
-  private MONOCHROME_TYPES_: string[] =
-      ['STANDARD_MONOCHROME', 'CUSTOM_MONOCHROME'];
-
   constructor(
       id: string, origin: DestinationOrigin, displayName: string,
       params?: DestinationOptionalParams) {
@@ -511,9 +511,8 @@ export class Destination {
     let hasMonochrome = false;
     capability.option.forEach(option => {
       assert(option.type);
-      hasColor = hasColor || this.COLOR_TYPES_.includes(option.type);
-      hasMonochrome =
-          hasMonochrome || this.MONOCHROME_TYPES_.includes(option.type);
+      hasColor = hasColor || COLOR_TYPES.includes(option.type);
+      hasMonochrome = hasMonochrome || MONOCHROME_TYPES.includes(option.type);
     });
     return hasColor && hasMonochrome;
   }
@@ -523,7 +522,7 @@ export class Destination {
    * @return Selected color option.
    */
   getSelectedColorOption(isColor: boolean): ColorOption|null {
-    const typesToLookFor = isColor ? this.COLOR_TYPES_ : this.MONOCHROME_TYPES_;
+    const typesToLookFor = isColor ? COLOR_TYPES : MONOCHROME_TYPES;
     const capability = this.colorCapability_();
     if (!capability || !capability.option) {
       return null;

chrome/browser/resources/settings/search_engines_page/search_engine_edit_dialog.ts

@@ -21,6 +21,13 @@ import {loadTimeData} from '../i18n_setup.js';
 import {getTemplate} from './search_engine_edit_dialog.html.js';
 import {SearchEngine, SearchEnginesBrowserProxy, SearchEnginesBrowserProxyImpl, SearchEnginesInfo} from './search_engines_browser_proxy.js';
 
+/**
+ * The |modelIndex| to use when a new search engine is added. Must match
+ * with kNewSearchEngineIndex constant specified at
+ * chrome/browser/ui/webui/settings/search_engines_handler.cc
+ */
+const DEFAULT_MODEL_INDEX: number = -1;
+
 export interface SettingsSearchEngineEditDialogElement {
   $: {
     actionButton: CrButtonElement,
@@ -77,20 +84,8 @@ export class SettingsSearchEngineEditDialogElement extends
   private actionButtonText_: string;
   private browserProxy_: SearchEnginesBrowserProxy =
       SearchEnginesBrowserProxyImpl.getInstance();
-  DEFAULT_MODEL_INDEX: number;
   private isActiveSearchEnginesFlagEnabled_: boolean;
 
-  constructor() {
-    super();
-
-    /**
-     * The |modelIndex| to use when a new search engine is added. Must match
-     * with kNewSearchEngineIndex constant specified at
-     * chrome/browser/ui/webui/settings/search_engines_handler.cc
-     */
-    this.DEFAULT_MODEL_INDEX = -1;
-  }
-
   override ready() {
     super.ready();
 
@@ -126,7 +121,7 @@ export class SettingsSearchEngineEditDialogElement extends
 
     microTask.run(() => this.updateActionButtonState_());
     this.browserProxy_.searchEngineEditStarted(
-        this.model ? this.model.modelIndex : this.DEFAULT_MODEL_INDEX);
+        this.model ? this.model.modelIndex : DEFAULT_MODEL_INDEX);
     this.$.dialog.showModal();
   }
 

chrome/test/data/webui/chromeos/personalization_app/avatar_camera_element_test.ts

@@ -20,9 +20,12 @@ class MockWebcamUtils extends TestBrowserProxy implements WebcamUtilsInterface {
   public captureFramesResponse = [];
   public pngUint8Array = new Uint8Array(10);
 
+  /* eslint-disable @typescript-eslint/naming-convention */
   CAPTURE_SIZE = {height: 10, width: 10};
   CAPTURE_INTERVAL_MS = 10;
   CAPTURE_DURATION_MS = 20;
+  /* eslint-enable @typescript-eslint/naming-convention */
+
   kDefaultVideoConstraints = webcamUtils.kDefaultVideoConstraints;
 
   constructor() {

ui/webui/resources/cr_elements/cr_slider/cr_slider.ts

@@ -206,6 +206,8 @@ export class CrSliderElement extends CrSliderElementBase {
   private deltaKeyMap_: Map<string, number>|null = null;
   private draggingEventTracker_: EventTracker|null = null;
   private debouncer_: Debouncer;
+
+  /* eslint-disable-next-line @typescript-eslint/naming-convention */
   override _rippleContainer: Element;
 
   override ready() {

ui/webui/resources/js/cr/ui/dialogs.m.d.ts

@@ -17,9 +17,12 @@ export class BaseDialog {
       title: string, message: string, onOk?: Function|undefined,
       onCancel?: Function|undefined, onShow?: Function|undefined): void;
   hide(onHide?: Function|undefined): void;
+
+  /* eslint-disable @typescript-eslint/naming-convention */
   OK_LABEL: string;
   CANCEL_LABEL: string;
   ANIMATE_STABLE_DURATION: number;
+  /* eslint-enable @typescript-eslint/naming-convention */
 }
 
 export class AlertDialog extends BaseDialog {