From 7045e71ebcce792e04feebb46bfbd4099584acc3 Mon Sep 17 00:00:00 2001
From: Max Karolinskiy <41635752+mkarolin@users.noreply.github.com>
Date: Tue, 25 Mar 2025 00:31:50 -0400
Subject: [PATCH] [cr135 follow up][Settings] Restores theme link behavior.
(#28268)
Clicking on Theme link will open web store
Sublabel will say "Open Web Store" when no custom theme set.
---
app/brave_settings_strings.grdp | 6 ++
.../brave_overrides/appearance_page.ts | 74 +++++++++++++++++--
.../settings/brave_overrides/config.ts | 1 +
...ave_settings_localized_strings_provider.cc | 4 +
4 files changed, 77 insertions(+), 8 deletions(-)
diff --git a/app/brave_settings_strings.grdp b/app/brave_settings_strings.grdp
index f49cd661e41..d2b036909ab 100644
--- a/app/brave_settings_strings.grdp
+++ b/app/brave_settings_strings.grdp
@@ -189,6 +189,12 @@
Always show toolbar in full screen
+
+ https://chrome.google.com/webstore?hl=[GRITLANGCODE]&category=theme
+
+
+ Open Web Store
+
Get more themes
diff --git a/browser/resources/settings/brave_overrides/appearance_page.ts b/browser/resources/settings/brave_overrides/appearance_page.ts
index 41e7c766482..8dd3c693901 100644
--- a/browser/resources/settings/brave_overrides/appearance_page.ts
+++ b/browser/resources/settings/brave_overrides/appearance_page.ts
@@ -6,12 +6,22 @@
import '../brave_appearance_page/super_referral.js'
import '../brave_appearance_page/brave_theme.js'
-import {html, RegisterPolymerTemplateModifications} from 'chrome://resources/brave/polymer_overriding.js'
+import {
+ html,
+ RegisterPolymerComponentReplacement,
+ RegisterPolymerTemplateModifications
+} from 'chrome://resources/brave/polymer_overriding.js'
+
import {getTrustedHTML} from 'chrome://resources/js/static_types.js'
import {loadTimeData} from '../i18n_setup.js'
import {Router} from '../router.js'
+import {
+ SettingsAppearancePageElement
+} from '../appearance_page/appearance_page.js'
+
+
const superReferralStringId = 'superReferralThemeName'
RegisterPolymerTemplateModifications({
@@ -20,6 +30,26 @@ RegisterPolymerTemplateModifications({
if (!theme) {
console.error(`[Settings] Couldn't find #themeRow`)
} else {
+ // Insert Brave colors dropdown before theme.
+ theme.setAttribute('class', 'settings-row hr')
+ theme.insertAdjacentHTML(
+ 'beforebegin',
+ getTrustedHTML`
+
+
+ `)
+ const openTheme = templateContent.getElementById('openTheme')
+ if (!openTheme) {
+ console.error(`[Settings] Couldn't find #openTheme`)
+ } else {
+ // Remove upstream's click handler. We add our own in
+ // BraveSettingsAppearancePageElement below.
+ openTheme.removeAttribute('on-click')
+ // Restore sub-label to say Open Web Store when no theme is set.
+ openTheme.setAttribute('sub-label',
+ '[[_adjustThemeSublabel(themeSublabel_)]]')
+ }
+ // Fix theme "Reset to default" button.
const useDefaultButtonTemplate = templateContent.querySelector(
'template[is=dom-if][if="[[prefs.extensions.theme.id.value]]"]')
if (!useDefaultButtonTemplate) {
@@ -29,13 +59,6 @@ RegisterPolymerTemplateModifications({
} else {
useDefaultButtonTemplate.setAttribute('restamp', 'true')
}
- theme.setAttribute('class', 'settings-row hr')
- theme.insertAdjacentHTML(
- 'beforebegin',
- getTrustedHTML`
-
-
- `)
}
const customizeToolbar = templateContent.getElementById('customizeToolbar')
@@ -213,3 +236,38 @@ RegisterPolymerTemplateModifications({
}
}
})
+
+RegisterPolymerComponentReplacement(
+ 'settings-appearance-page',
+ class BraveSettingsAppearancePageElement
+ extends SettingsAppearancePageElement {
+ override ready() {
+ super.ready()
+ const openTheme = this.shadowRoot!.getElementById('openTheme')
+ if (!openTheme) {
+ console.error(`[Settings] Couldn't find #openTheme`)
+ } else {
+ // Restore theme link to point to web store instead of to the profile
+ // color picker.
+ openTheme.addEventListener('click',
+ () => {
+ window.open((this as any).themeUrl_ ||
+ loadTimeData.getString('appearanceSettingsThemesGalleryUrl'),
+ '_blank', 'noopener noreferrer');
+ }
+ )
+ }
+ }
+
+ // Restore theme sub-label to say "Open Web Store" when there's no custom
+ // theme set.
+ _adjustThemeSublabel(themeSublabel: string) {
+ //
+ if (themeSublabel === '') {
+ return loadTimeData.getString('appearanceSettingsOpenWebStore')
+ }
+ //
+ return themeSublabel
+ }
+ }
+)
diff --git a/browser/resources/settings/brave_overrides/config.ts b/browser/resources/settings/brave_overrides/config.ts
index 2f79545bc78..a7c77b8f436 100644
--- a/browser/resources/settings/brave_overrides/config.ts
+++ b/browser/resources/settings/brave_overrides/config.ts
@@ -15,6 +15,7 @@ import {RegisterPolymerComponentToIgnore} from 'chrome://resources/brave/polymer
// component before the module is imported).
RegisterPolymerComponentToIgnore('add-site-dialog')
+RegisterPolymerComponentToIgnore('settings-appearance-page')
RegisterPolymerComponentToIgnore('settings-autofill-page')
RegisterPolymerComponentToIgnore('settings-clear-browsing-data-dialog')
RegisterPolymerComponentToIgnore('settings-search-page')
diff --git a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
index dcf5c01d8f3..d15ad47b9f4 100644
--- a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
+++ b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
@@ -227,6 +227,10 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
IDS_SETTINGS_SITE_SETTINGS_SHIELDS_DESCRIPTION},
{"appearanceSettingsBraveTheme",
IDS_SETTINGS_APPEARANCE_SETTINGS_BRAVE_THEMES},
+ {"appearanceSettingsThemesGalleryUrl",
+ IDS_SETTINGS_APPEARANCE_SETTINGS_THEMES_GALLERY_URL},
+ {"appearanceSettingsOpenWebStore",
+ IDS_SETTINGS_APPEARANCE_SETTINGS_OPEN_WEB_STORE},
{"appearanceSettingsShowBookmarksButton",
IDS_SETTINGS_APPEARANCE_SETTINGS_SHOW_BOOKMARKS_BUTTON},
{"appearanceSettingsLocationBarIsWide",