From 3c6b2847e1a3dea9cd16ff2626c559e76d8033d3 Mon Sep 17 00:00:00 2001 From: Claudio DeSouza Date: Mon, 13 Apr 2026 14:28:09 +0100 Subject: [PATCH] [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 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 Reviewed-by: Demetrios Papadopoulos Cr-Commit-Position: refs/heads/main@{#1612640} --- .../brave_content_page/containers_icon.html.ts | 2 +- .../brave_content_page/containers_icon.ts | 2 +- .../model_selector.html.ts | 2 +- .../brave_leo_assistant_page/model_selector.ts | 2 +- .../tab_search/brave_tab_search_app.html.ts | 2 +- .../resources/tab_search/brave_tab_search_app.ts | 2 +- .../resources/brave_account_email_input.html.ts | 6 +++--- .../resources/brave_account_email_input.ts | 16 ++++++++-------- .../brave_account_password_icons.html.ts | 2 +- .../resources/brave_account_password_icons.ts | 2 +- .../brave_account_password_input.html.ts | 8 ++++---- .../resources/brave_account_password_input.ts | 14 +++++++------- 12 files changed, 30 insertions(+), 30 deletions(-) diff --git a/browser/resources/settings/brave_content_page/containers_icon.html.ts b/browser/resources/settings/brave_content_page/containers_icon.html.ts index f7f86f89c19..3b7dd59abd1 100644 --- a/browser/resources/settings/brave_content_page/containers_icon.html.ts +++ b/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_}" > - + ` } diff --git a/browser/resources/settings/brave_content_page/containers_icon.ts b/browser/resources/settings/brave_content_page/containers_icon.ts index 6be1a6b668b..71d6adae5bd 100644 --- a/browser/resources/settings/brave_content_page/containers_icon.ts +++ b/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) diff --git a/browser/resources/settings/brave_leo_assistant_page/model_selector.html.ts b/browser/resources/settings/brave_leo_assistant_page/model_selector.html.ts index e001a25ab41..a3900d71369 100644 --- a/browser/resources/settings/brave_leo_assistant_page/model_selector.html.ts +++ b/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_}" > -
${this.selectedDisplayName}
+
${this.getSelectedDisplayName()}
$i18n{braveLeoModelSectionTitle}
diff --git a/browser/resources/settings/brave_leo_assistant_page/model_selector.ts b/browser/resources/settings/brave_leo_assistant_page/model_selector.ts index ef1e2454950..da42c151491 100644 --- a/browser/resources/settings/brave_leo_assistant_page/model_selector.ts +++ b/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 ?? '' diff --git a/browser/resources/tab_search/brave_tab_search_app.html.ts b/browser/resources/tab_search/brave_tab_search_app.html.ts index f4630d2a762..f99371d05bd 100644 --- a/browser/resources/tab_search/brave_tab_search_app.html.ts +++ b/browser/resources/tab_search/brave_tab_search_app.html.ts @@ -12,7 +12,7 @@ export function getHtml(this: BraveTabSearchAppElement) { ? html` ` : html` diff --git a/browser/resources/tab_search/brave_tab_search_app.ts b/browser/resources/tab_search/brave_tab_search_app.ts index 8ce74f60030..ec0c82f7c8a 100644 --- a/browser/resources/tab_search/brave_tab_search_app.ts +++ b/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'), diff --git a/components/brave_account/resources/brave_account_email_input.html.ts b/components/brave_account/resources/brave_account_email_input.html.ts index 7f60f7b9ac4..bd9ae062c8c 100644 --- a/components/brave_account/resources/brave_account_email_input.html.ts +++ b/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}
${freezeWhen( - !this.shouldShowDropdown, - this.blockBraveAlias && this.isBraveAlias + !this.shouldShowDropdown(), + this.blockBraveAlias && this.isBraveAlias() ? html`
diff --git a/components/brave_account/resources/brave_account_email_input.ts b/components/brave_account/resources/brave_account_email_input.ts index 267e9c837ed..370155fac02 100644 --- a/components/brave_account/resources/brave_account_email_input.ts +++ b/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()) } } diff --git a/components/brave_account/resources/brave_account_password_icons.html.ts b/components/brave_account/resources/brave_account_password_icons.html.ts index 358cec6d727..20d47dbfe3c 100644 --- a/components/brave_account/resources/brave_account_password_icons.html.ts +++ b/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` - ${this.showCapsLock + ${this.showCapsLock() ? html`
$i18n{BRAVE_ACCOUNT_CAPS_LOCK_ON}
diff --git a/components/brave_account/resources/brave_account_password_icons.ts b/components/brave_account/resources/brave_account_password_icons.ts index 97609d075da..54829e5d330 100644 --- a/components/brave_account/resources/brave_account_password_icons.ts +++ b/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 } diff --git a/components/brave_account/resources/brave_account_password_input.html.ts b/components/brave_account/resources/brave_account_password_input.html.ts index 67b5fea1811..d3ad0fb1fc7 100644 --- a/components/brave_account/resources/brave_account_password_input.html.ts +++ b/components/brave_account/resources/brave_account_password_input.html.ts @@ -26,7 +26,7 @@ export function getHtml(this: BraveAccountPasswordInputElement) { @toggle-visibility=${this.onToggleVisibility} >
-
+
${this.label}
@@ -38,7 +38,7 @@ export function getHtml(this: BraveAccountPasswordInputElement) { >