[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

@@ -189,6 +189,12 @@
       Always show toolbar in full screen
     </message>
   </if>
+  <message name="IDS_SETTINGS_APPEARANCE_SETTINGS_THEMES_GALLERY_URL" translateable="false">
+    https://chrome.google.com/webstore?hl=[GRITLANGCODE]&amp;category=theme
+  </message>
+  <message name="IDS_SETTINGS_APPEARANCE_SETTINGS_OPEN_WEB_STORE" desc="Sub-label about choosing something from the Chrome Web Store.">
+    Open Web Store
+  </message>
   <message name="IDS_SETTINGS_APPEARANCE_SETTINGS_GET_MORE_THEMES" desc="The label for opening theme web store">
     Get more themes
   </message>

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`
+          <settings-brave-appearance-theme prefs="{{prefs}}">
+          </settings-brave-appearance-theme>
+      `)
+      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`
-          <settings-brave-appearance-theme prefs="{{prefs}}">
-          </settings-brave-appearance-theme>
-        `)
     }
 
     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 expr="not is_linux">
+      if (themeSublabel === '') {
+        return loadTimeData.getString('appearanceSettingsOpenWebStore')
+      }
+      // </if>
+      return themeSublabel
+    }
+  }
+)

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')

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",