[Sync] Add a spearate input element for custom sync url and show

relaunch button when toogle/url change.

browser/brave_local_state_prefs.cc

@@ -180,6 +180,9 @@ void RegisterLocalStatePrefs(PrefRegistrySimple* registry) {
   misc_metrics::GeneralBrowserUsage::RegisterPrefs(registry);
 
   playlist::PlaylistServiceFactory::RegisterLocalStatePrefs(registry);
+
+  registry->RegisterBooleanPref(kBraveCustomSyncUrlEnabled, false);
+  registry->RegisterStringPref(kBraveCustomSyncUrl, std::string());
 }
 
 }  // namespace brave

browser/brave_profile_prefs.cc

@@ -237,7 +237,6 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
   registry->RegisterBooleanPref(kTabMuteIndicatorNotClickable, false);
 
   brave_sync::Prefs::RegisterProfilePrefs(registry);
-  registry->RegisterBooleanPref(kBraveCustomSyncUrlEnabled, false);
 
   brave_shields::RegisterShieldsP3AProfilePrefs(registry);
 

browser/extensions/api/settings_private/brave_prefs_util.cc

@@ -229,6 +229,7 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetAllowlistedKeys() {
   // Sync prefs
   (*s_brave_allowlist)[kBraveCustomSyncUrlEnabled] =
       settings_api::PrefType::kBoolean;
+  (*s_brave_allowlist)[kBraveCustomSyncUrl] = settings_api::PrefType::kUrl;
 
   // WebTorrent pref
   (*s_brave_allowlist)[kWebTorrentEnabled] = settings_api::PrefType::kBoolean;

browser/resources/settings/brave_overrides/basic_page.ts

@@ -254,7 +254,9 @@ RegisterPolymerTemplateModifications({
         'braveSync',
         'braveSync',
         'settings-brave-sync-page',
-        {}
+        {
+          prefs: '{{prefs}}'
+        }
       ))
       const sectionShields = document.createElement('template')
       sectionShields.setAttribute('is', 'dom-if')

browser/resources/settings/brave_sync_page/brave_sync_browser_proxy.ts

@@ -5,6 +5,7 @@
 
 import {SyncStatus} from '/shared/settings/people_page/sync_browser_proxy.js';
 import {sendWithPromise} from 'chrome://resources/js/cr.js';
+import {loadTimeData} from '../i18n_setup.js';
 
 export type BraveDeviceInfo = {
   name: string
@@ -56,6 +57,15 @@ export class BraveSyncBrowserProxy {
   getWordsCount(syncCode: string): Promise<number> {
     return sendWithPromise('SyncGetWordsCount', syncCode);
   }
+
+  wasCustomSyncUrlEnabledAtStartup(): boolean {
+    return loadTimeData.getBoolean('customSyncUrlEnabledAtStartup');
+  }
+
+  validateSyncUrl(url: string) {
+    return sendWithPromise('validateSyncUrl', url);
+  }
+
   static getInstance() {
     return instance || (instance = new BraveSyncBrowserProxy())
   }

browser/resources/settings/brave_sync_page/brave_sync_page.html

@@ -1,41 +1,36 @@
 <style include="settings-shared iron-flex">
-      cr-input {
-        width: 100%;
-        --cr-input-width: 50%;
-        margin-top: 10px;
-        margin-left: 20px;
-      }
+  cr-input {
+    width: 100%;
+    --cr-input-width: 50%;
+    margin-top: 10px;
+    margin-left: 20px;
+  }
 
-      cr-input::part(row-container) {
-        justify-content: normal;
-      }
+  cr-input::part(row-container) {
+    justify-content: normal;
+  }
 </style>
 <settings-animated-pages id="pages" section="braveSync">
   <div route-path="default">
-    <cr-link-row id="brave-sync-setup"
-      label$="[[syncLabel_]]"
-      on-click="onSyncTap_"
-      role-description="$i18n{subpageArrowRoleDescription}">
+    <cr-link-row id="brave-sync-setup" label$="[[syncLabel_]]" on-click="onSyncTap_" role-description="$i18n{subpageArrowRoleDescription}">
     </cr-link-row>
   </div>
 
   <template is="dom-if" route-path="/braveSync/setup">
-    <settings-subpage
-      associated-control="[[$$('#brave-sync-setup')]]"
-      page-title="[[syncLabel_]]">
-      <settings-brave-sync-subpage
-          sync-status="[[syncStatus_]]">
+    <settings-subpage associated-control="[[$$('#brave-sync-setup')]]" page-title="[[syncLabel_]]">
+      <settings-brave-sync-subpage sync-status="[[syncStatus_]]">
       </settings-brave-sync-subpage>
     </settings-subpage>
   </template>
 </settings-animated-pages>
 
-
-<settings-toggle-button id="customSyncUrlEnabled"
-  class="hr"
-  pref="{{prefs.brave.custom_sync_url_enabled}}"
-  label="$i18n{braveCustomSyncUrlEnableLabel}">
+<settings-toggle-button id="customSyncUrlEnabled" class="hr" pref="{{prefs.brave.custom_sync_url_enabled}}" label="$i18n{braveCustomSyncUrlEnableLabel}">
+  <template is="dom-if" if="[[shouldShowRestart_(prefs.brave.custom_sync_url_enabled.value)]]">
+    <cr-button on-click="onRestartClick_" slot="more-actions">
+      $i18n{restart}
+    </cr-button>
+  </template>
 </settings-toggle-button>
 <template is="dom-if" if="[[prefs.brave.custom_sync_url_enabled.value]]">
-  <cr-input id="customSyncUrl" value="{{customSyncUrl_}}" placeholder="$i18n{enterCustomSyncUrl}" spellcheck="false"></cr-input>
+  <sync-url-input id="customSyncUrl" pref="{{prefs.brave.custom_sync_url}}"></sync-url-input>
 </template>

browser/resources/settings/brave_sync_page/brave_sync_page.ts

@@ -9,6 +9,7 @@ import 'chrome://resources/cr_elements/icons.html.js';
 import '../settings_page/settings_animated_pages.js';
 import '../settings_page/settings_subpage.js';
 import '../settings_shared.css.js';
+import './sync_url_input.js';
 import '../settings_vars.css.js';
 import './brave_sync_subpage.js';
 import 'chrome://resources/cr_elements/cr_input/cr_input.js';
@@ -22,6 +23,7 @@ import { PrefsMixin, PrefsMixinInterface } from '/shared/settings/prefs/prefs_mi
 
 import { BaseMixin } from '../base_mixin.js';
 import { Route, Router } from '../router.js';
+import { RelaunchMixin, RestartType } from '../relaunch_mixin.js';
 
 import { BraveSyncBrowserProxy, BraveSyncStatus } from './brave_sync_browser_proxy.js';
 import { getTemplate } from './brave_sync_page.html.js';
@@ -32,10 +34,7 @@ import { getTemplate } from './brave_sync_page.html.js';
  * custom sync.
  */
 
-const SettingsBraveSyncPageElementBase =
-  I18nMixin(WebUiListenerMixin(PrefsMixin(BaseMixin(PolymerElement)))) as {
-    new(): PolymerElement & PrefsMixinInterface & WebUiListenerMixinInterface & I18nMixinInterface
-  }
+const SettingsBraveSyncPageElementBase = RelaunchMixin(PrefsMixin(I18nMixin(WebUiListenerMixin((BaseMixin(PolymerElement))))));
 
 export class SettingsBraveSyncPageElement extends SettingsBraveSyncPageElementBase {
   static get is() {
@@ -74,11 +73,11 @@ export class SettingsBraveSyncPageElement extends SettingsBraveSyncPageElementBa
 
   computeSyncLabel_() {
     if (this.syncStatus_ !== undefined &&
-        this.syncStatus_.hasSyncWordsDecryptionError) {
-        return this.i18n('braveSyncCouldNotSyncActionLabel');
+      this.syncStatus_.hasSyncWordsDecryptionError) {
+      return this.i18n('braveSyncCouldNotSyncActionLabel');
     }
     const isAlreadySetup = this.syncStatus_ !== undefined &&
-        !this.syncStatus_.firstSetupInProgress;
+      !this.syncStatus_.firstSetupInProgress;
     const key = isAlreadySetup ? 'braveSyncManageActionLabel' : 'braveSyncSetupActionLabel';
     return this.i18n(key);
   }
@@ -87,7 +86,7 @@ export class SettingsBraveSyncPageElement extends SettingsBraveSyncPageElementBa
     super.connectedCallback()
     const onSyncStatus = this.handleSyncStatus_.bind(this)
     this.braveBrowserProxy_.getSyncStatus().then(
-        (status: BraveSyncStatus) => onSyncStatus(status));
+      (status: BraveSyncStatus) => onSyncStatus(status));
     this.addWebUiListener(
       'sync-prefs-changed', this.handleSyncPrefsChanged_.bind(this));
     this.addWebUiListener('sync-status-changed', onSyncStatus);
@@ -96,7 +95,7 @@ export class SettingsBraveSyncPageElement extends SettingsBraveSyncPageElementBa
   onSyncTap_() {
     // Users can go to sync subpage regardless of sync status.
     const router = Router.getInstance();
-    router.navigateTo((router.getRoutes() as {BRAVE_SYNC_SETUP: Route}).BRAVE_SYNC_SETUP);
+    router.navigateTo((router.getRoutes() as { BRAVE_SYNC_SETUP: Route }).BRAVE_SYNC_SETUP);
   }
 
   /**
@@ -116,12 +115,28 @@ export class SettingsBraveSyncPageElement extends SettingsBraveSyncPageElementBa
         await this.browserProxy_.setDecryptionPassphrase(pureSyncCode);
       } else if (!this.isEncryptionSet_) {
         this.browserProxy_.setEncryptionPassphrase(pureSyncCode)
-        .then(successfullySet => {
-          this.isEncryptionSet_ = successfullySet
-        })
+          .then(successfullySet => {
+            this.isEncryptionSet_ = successfullySet
+          })
       }
     }
   }
+
+  /**
+   * @param enabled Whether custom sync url is currently enabled.
+   */
+  private shouldShowRestart_(enabled: boolean): boolean {
+    const proxy = BraveSyncBrowserProxy.getInstance();
+    // TODO: Also need to add a logic when URL is changed.
+    return enabled !== proxy.wasCustomSyncUrlEnabledAtStartup();
+  }
+
+  private onRestartClick_(e: Event) {
+    // Prevent event from bubbling up to the toggle button.
+    e.stopPropagation();
+    this.performRestart(RestartType.RESTART);
+  }
+
 }
 
 customElements.define(

browser/resources/settings/brave_sync_page/sync_url_input.html

@@ -0,0 +1,31 @@
+<style>
+  cr-input {
+    width: 100%;
+    --cr-input-width: 50%;
+    margin-top: 10px;
+    margin-left: 20px;
+  }
+
+  cr-input::part(row-container) {
+    justify-content: normal;
+  }
+</style>
+
+<!-- Max length of 100 KB to prevent browser from freezing. -->
+<cr-input
+  id="input"
+  value="{{value}}"
+  rows="1"
+  autogrow="true"
+  placeholder="$i18n{enterCustomSyncUrl}"
+  invalid="[[showError_]]"
+  on-input="validate_"
+  first-footer="[[errorText_]]"
+  maxlength="102400"
+  spellcheck="false"
+  on-keypress="onKeyPress_"
+  on-input="onInput_"
+  on-blur="validate_"
+  on-change="onChange_"
+>
+</cr-input>