[cr149] ESLint fixes for reactive properties

All the fixes in this change are cases where we are converting a
property to a function as more appropriate.

Chromium changes:
https://chromium.googlesource.com/chromium/src/+/9d25d0387044e57a67892521a2863a87c31b9cc9

commit 9d25d0387044e57a67892521a2863a87c31b9cc9
Author: rbpotter <rbpotter@chromium.org>
Date:   Thu Apr 9 23:38:18 2026 -0700

    WebUI: Validate that properties referenced in Lit template are reactive

    Adding an automated check to ensure that if a class property
    "this.someProp" is referenced in the HTML template, it is also properly
    declared as a reactive property so that Lit will re-render the element
    correctly when it changes.

    Bug: 500066216
    Change-Id: Ieb9989fc672d03cb2b20f2bd43301a688b42f270
    Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7731479
    Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
    Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
    Cr-Commit-Position: refs/heads/main@{#1612640}

browser/resources/settings/brave_content_page/containers_icon.html.ts

@@ -14,7 +14,7 @@ export function getHtml(this: SettingsBraveContentContainersIconElement) {
       style="background-color: ${this.backgroundColor}"
       @click="${this.handleIconClick_}"
     >
-      <leo-icon name="${this.leoIcon}"></leo-icon>
+      <leo-icon name="${this.getLeo()}"></leo-icon>
     </div>
   `
 }

browser/resources/settings/brave_content_page/containers_icon.ts

@@ -48,7 +48,7 @@ export class SettingsBraveContentContainersIconElement extends CrLitElement {
   }
 
   accessor icon: Icon
-  get leoIcon() {
+  protected getLeo() {
     const icon = iconsMap.get(this.icon)
     if (!icon) {
       console.warn(`No Leo icon found for icon: ${this.icon} from `, iconsMap)

browser/resources/settings/brave_leo_assistant_page/model_selector.html.ts

@@ -15,7 +15,7 @@ export function getHtml(this: LeoModelSelectorElement) {
       value="${this.selectedKey}"
       @change="${this.onSelectionChange_}"
     >
-      <div slot="value">${this.selectedDisplayName}</div>
+      <div slot="value">${this.getSelectedDisplayName()}</div>
       <div class="menu-section-title">
         <span>$i18n{braveLeoModelSectionTitle}</span>
       </div>

browser/resources/settings/brave_leo_assistant_page/model_selector.ts

@@ -40,7 +40,7 @@ export class LeoModelSelectorElement extends CrLitElement {
   accessor models: ModelWithSubtitle[] = []
   accessor isPremiumUser: boolean = false
 
-  get selectedDisplayName(): string {
+  protected getSelectedDisplayName(): string {
     return this.models?.find(
       (entry) => entry.model.key === this.selectedKey
     )?.model.displayName ?? ''

browser/resources/tab_search/brave_tab_search_app.html.ts

@@ -12,7 +12,7 @@ export function getHtml(this: BraveTabSearchAppElement) {
     ? html` <tab-search-page available-height="${this.availableHeight}">
       </tab-search-page>`
     : html` <cr-tabs
-          .tabNames="${this.tabNames_}"
+          .tabNames="${this.tabNames_()}"
           .selected="${this.selectedTabIndex_}"
           @selected-changed="${this.onTabSelectedChanged_}"
         >

browser/resources/tab_search/brave_tab_search_app.ts

@@ -51,7 +51,7 @@ export class BraveTabSearchAppElement extends CrLitElement {
     }
   }
 
-  protected get tabNames_(): string[] {
+  protected tabNames_(): string[] {
     return [
       loadTimeData.getString('tabSearchTabName'),
       loadTimeData.getString('tabOrganizationTabName'),

components/brave_account/resources/brave_account_email_input.html.ts

@@ -26,7 +26,7 @@ export function getHtml(this: BraveAccountEmailInputElement) {
         $i18n{BRAVE_ACCOUNT_EMAIL_INPUT_LABEL}
       </div>
       <div
-        class="dropdown ${this.shouldShowDropdown ? 'visible' : ''}"
+        class="dropdown ${this.shouldShowDropdown() ? 'visible' : ''}"
         slot="errors"
       >
         <!-- Note: .dropdown-content is included in each branch (rather than
@@ -38,8 +38,8 @@ export function getHtml(this: BraveAccountEmailInputElement) {
              freezeWhen directive freezes the previous content while the dropdown
              is collapsing, preventing flashes during animation. -->
         ${freezeWhen(
-          !this.shouldShowDropdown,
-          this.blockBraveAlias && this.isBraveAlias
+          !this.shouldShowDropdown(),
+          this.blockBraveAlias && this.isBraveAlias()
             ? html`
                 <div class="dropdown-content">
                   <leo-icon name="warning-triangle-filled"></leo-icon>

components/brave_account/resources/brave_account_email_input.ts

@@ -54,7 +54,7 @@ export class BraveAccountEmailInputElement extends CrLitElement {
       : ''
     this.fire('email-input', {
       email: this.email,
-      isValid: this.isValid,
+      isValid: this.isValid(),
     } satisfies EmailInputEventDetail)
   }
 
@@ -63,14 +63,14 @@ export class BraveAccountEmailInputElement extends CrLitElement {
   private accessor isFormatValid = false
   protected accessor suggestion = ''
 
-  protected get isBraveAlias(): boolean {
+  protected isBraveAlias(): boolean {
     return this.isFormatValid && /@bravealias\.com$/i.test(this.email)
   }
 
-  protected get severity(): 'error' | 'warning' | '' {
+  protected severity(): 'error' | 'warning' | '' {
     if (
       (this.email.length !== 0 && !this.isFormatValid)
-      || (this.blockBraveAlias && this.isBraveAlias)
+      || (this.blockBraveAlias && this.isBraveAlias())
     ) {
       return 'error'
     }
@@ -80,12 +80,12 @@ export class BraveAccountEmailInputElement extends CrLitElement {
     return ''
   }
 
-  protected get shouldShowDropdown(): boolean {
-    return (this.blockBraveAlias && this.isBraveAlias) || !!this.suggestion
+  protected shouldShowDropdown(): boolean {
+    return (this.blockBraveAlias && this.isBraveAlias()) || !!this.suggestion
   }
 
-  private get isValid(): boolean {
-    return this.isFormatValid && (!this.blockBraveAlias || !this.isBraveAlias)
+  private isValid(): boolean {
+    return this.isFormatValid && (!this.blockBraveAlias || !this.isBraveAlias())
   }
 }
 

components/brave_account/resources/brave_account_password_icons.html.ts

@@ -9,7 +9,7 @@ import { BraveAccountPasswordIconsElement } from './brave_account_password_icons
 
 export function getHtml(this: BraveAccountPasswordIconsElement) {
   return html`<!--_html_template_start_-->
-    ${this.showCapsLock
+    ${this.showCapsLock()
       ? html`<leo-tooltip>
           <div slot="content">$i18n{BRAVE_ACCOUNT_CAPS_LOCK_ON}</div>
           <leo-icon name="caps-lock"></leo-icon>

components/brave_account/resources/brave_account_password_icons.ts

@@ -42,7 +42,7 @@ export class BraveAccountPasswordIconsElement extends CrLitElement {
     }
   }
 
-  protected get showCapsLock(): boolean {
+  protected showCapsLock(): boolean {
     return this.isCapsLockOn && this.isInputFocused && !this.isPasswordVisible
   }
 

components/brave_account/resources/brave_account_password_input.html.ts

@@ -26,7 +26,7 @@ export function getHtml(this: BraveAccountPasswordInputElement) {
       @toggle-visibility=${this.onToggleVisibility}
     >
       <div class="label-container">
-        <div class="label ${this.shouldStyleAsError ? 'error' : ''}">
+        <div class="label ${this.shouldStyleAsError() ? 'error' : ''}">
           ${this.label}
         </div>
         <slot name="label-extra"></slot>
@@ -38,7 +38,7 @@ export function getHtml(this: BraveAccountPasswordInputElement) {
       >
       </brave-account-password-icons>
       <div
-        class="dropdown ${this.shouldShowDropdown ? 'visible' : ''}"
+        class="dropdown ${this.shouldShowDropdown() ? 'visible' : ''}"
         slot="errors"
       >
         <!-- Note: .dropdown-content is included in each branch (rather than
@@ -52,7 +52,7 @@ export function getHtml(this: BraveAccountPasswordInputElement) {
         ${freezeWhen(
           this.password.length === 0,
           this.config.mode === 'confirmation'
-            ? this.password === this.confirmPassword
+            ? this.password === this.confirmPassword()
               ? html`
                   <div class="dropdown-content">
                     <leo-icon name="check-circle-filled"></leo-icon>
@@ -69,7 +69,7 @@ export function getHtml(this: BraveAccountPasswordInputElement) {
                     </div>
                   </div>
                 `
-            : this.config.mode === 'strength' && this.isValid
+            : this.config.mode === 'strength' && this.isValid()
               ? html`<div class="dropdown-content">
                   <brave-account-password-strength-meter
                     password=${this.password}

components/brave_account/resources/brave_account_password_input.ts

@@ -61,7 +61,7 @@ export class BraveAccountPasswordInputElement extends CrLitElement {
     this.password = detail.value
     this.fire('password-input', {
       password: this.password,
-      isValid: this.isValid,
+      isValid: this.isValid(),
     } satisfies PasswordInputEventDetail)
   }
 
@@ -81,20 +81,20 @@ export class BraveAccountPasswordInputElement extends CrLitElement {
     }
   }
 
-  protected get confirmPassword() {
+  protected confirmPassword() {
     return this.config.mode === 'confirmation'
       ? this.config.confirmPassword
       : ''
   }
 
-  protected get shouldStyleAsError() {
+  protected shouldStyleAsError() {
     if (this.password.length === 0) {
       return false
     }
 
     switch (this.config.mode) {
       case 'confirmation':
-        return this.password !== this.confirmPassword
+        return this.password !== this.confirmPassword()
       case 'regular':
         return this.password !== this.password.trim()
       case 'strength':
@@ -102,14 +102,14 @@ export class BraveAccountPasswordInputElement extends CrLitElement {
     }
   }
 
-  protected get shouldShowDropdown() {
+  protected shouldShowDropdown() {
     return (
       this.password.length !== 0
-      && (this.config.mode !== 'regular' || !this.isValid)
+      && (this.config.mode !== 'regular' || !this.isValid())
     )
   }
 
-  protected get isValid() {
+  protected isValid() {
     return this.password.length !== 0 && this.password === this.password.trim()
   }