[Sync] Remove Enable/Disable switch and just use input element for handling custom sync url.

Also show Relauch button and Managed icon when required.

Conflicts:
browser/ui/webui/brave_settings_ui.cc
This commit is contained in:
Jagadesh P
2024-11-27 13:49:47 +05:30
parent ed3323db38
commit 7731484f52
11 changed files with 182 additions and 152 deletions
+2 -2
View File
@@ -747,8 +747,8 @@
<message name="IDS_SETTINGS_BRAVE_SYNC_COULD_NOT_SYNC_ACTION_LABEL" desc="Could not sync devices action label. It is displayed in the case when Brave Sync could not decrypt code words and start work">
Could not sync Brave on your devices
</message>
<message name="IDS_SETTINGS_BRAVE_CUSTOM_SYNC_URL_ENABLE_LABEL" desc="Label for setting to en/disable Custom sync url feature">
Enable custom sync url
<message name="IDS_SETTINGS_BRAVE_CUSTOM_SYNC_URL_TITLE" desc="Title for custom sync url">
Custom sync url
</message>
<message name="IDS_SETTINGS_ENTER_CUSTOM_SYNC_URL" desc="Input label for a custom sync url">
Enter custom sync url
-3
View File
@@ -171,9 +171,6 @@ void RegisterLocalStatePrefs(PrefRegistrySimple* registry) {
misc_metrics::GeneralBrowserUsage::RegisterPrefs(registry);
playlist::PlaylistServiceFactory::RegisterLocalStatePrefs(registry);
registry->RegisterBooleanPref(kBraveCustomSyncUrlEnabled, false);
registry->RegisterStringPref(kBraveCustomSyncUrl, std::string());
}
} // namespace brave
@@ -10,6 +10,7 @@
#include "brave/components/brave_news/common/pref_names.h"
#include "brave/components/brave_rewards/common/pref_names.h"
#include "brave/components/brave_shields/core/common/pref_names.h"
#include "brave/components/brave_sync/brave_sync_prefs.h"
#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
#include "brave/components/brave_wallet/browser/pref_names.h"
#include "brave/components/brave_wayback_machine/buildflags/buildflags.h"
@@ -213,9 +214,8 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetAllowlistedKeys() {
(*s_brave_allowlist)[kMRUCyclingEnabled] = settings_api::PrefType::kBoolean;
// Sync prefs
(*s_brave_allowlist)[kBraveCustomSyncUrlEnabled] =
settings_api::PrefType::kBoolean;
(*s_brave_allowlist)[kBraveCustomSyncUrl] = settings_api::PrefType::kUrl;
(*s_brave_allowlist)[brave_sync::kCustomSyncServiceUrl] =
settings_api::PrefType::kUrl;
// WebTorrent pref
(*s_brave_allowlist)[kWebTorrentEnabled] = settings_api::PrefType::kBoolean;
@@ -58,10 +58,6 @@ export class BraveSyncBrowserProxy {
return sendWithPromise('SyncGetWordsCount', syncCode);
}
wasCustomSyncUrlEnabledAtStartup(): boolean {
return loadTimeData.getBoolean('customSyncUrlEnabledAtStartup');
}
getCustomSyncUrlAtStartup(): string {
return loadTimeData.getString('customSyncUrlAtStartup');
}
@@ -1,16 +1,8 @@
<style include="settings-shared iron-flex">
cr-input {
width: 100%;
--cr-input-width: 50%;
margin-top: 10px;
margin-left: 20px;
}
cr-input::part(row-container) {
justify-content: normal;
}
</style>
<settings-animated-pages id="pages" section="braveSync">
<style include="settings-shared iron-flex"></style>
<settings-animated-pages
id="pages"
section="braveSync"
>
<div route-path="default">
<cr-link-row
id="brave-sync-setup"
@@ -19,9 +11,18 @@
role-description="$i18n{subpageArrowRoleDescription}"
>
</cr-link-row>
<div class="hr"></div>
<sync-url-input
id="customSyncUrl"
pref="{{prefs.brave_sync.sync_service_url}}"
>
</sync-url-input>
</div>
<template is="dom-if" route-path="/braveSync/setup">
<template
is="dom-if"
route-path="/braveSync/setup"
>
<settings-subpage
associated-control="[[$$('#brave-sync-setup')]]"
page-title="[[syncLabel_]]"
@@ -31,25 +32,3 @@
</settings-subpage>
</template>
</settings-animated-pages>
<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, prefs.brave.custom_sync_url.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]]">
<sync-url-input
id="customSyncUrl"
pref="{{prefs.brave.custom_sync_url}}"
></sync-url-input>
</template>
@@ -21,7 +21,6 @@ import { SyncBrowserProxy, SyncBrowserProxyImpl, SyncPrefs } from '/shared/setti
import { PrefsMixin } from '/shared/settings/prefs/prefs_mixin.js';
import { BaseMixin } from '../base_mixin.js';
import { RelaunchMixin, RestartType } from '../relaunch_mixin.js';
import { Route, Router } from '../router.js';
import { BraveSyncBrowserProxy, BraveSyncStatus } from './brave_sync_browser_proxy.js';
@@ -34,8 +33,8 @@ import { getTemplate } from './brave_sync_page.html.js';
*/
const SettingsBraveSyncPageElementBase =
RelaunchMixin(PrefsMixin(I18nMixin(
WebUiListenerMixin((BaseMixin(PolymerElement))))));
PrefsMixin(I18nMixin(
WebUiListenerMixin((BaseMixin(PolymerElement)))));
export class SettingsBraveSyncPageElement extends SettingsBraveSyncPageElementBase {
static get is() {
@@ -122,19 +121,6 @@ export class SettingsBraveSyncPageElement extends SettingsBraveSyncPageElementBa
}
}
}
private shouldShowRestart_(enabled: boolean, url: string): boolean {
const proxy = BraveSyncBrowserProxy.getInstance();
return enabled !== proxy.wasCustomSyncUrlEnabledAtStartup() ||
proxy.getCustomSyncUrlAtStartup() !== url;
}
private onRestartClick_(e: Event) {
// Prevent event from bubbling up to the toggle button.
e.stopPropagation();
this.performRestart(RestartType.RESTART);
}
}
customElements.define(
@@ -1,28 +1,63 @@
<style>
cr-input {
:host {
cursor: auto;
display: block;
width: 100%;
}
cr-input {
--cr-input-width: 50%;
margin: 10px 0;
padding-left: 20px;
margin: 10px 20px;
}
cr-input::part(row-container) {
justify-content: normal;
}
.custom-title {
margin: 10px 20px;
}
</style>
<!-- Max length of 100 KB to prevent browser from freezing. -->
<cr-input
id="input"
value="{{value}}"
error-message="$i18n{notValid}"
placeholder="$i18n{enterCustomSyncUrl}"
invalid="{{invalid}}"
on-input="validate_"
maxlength="102400"
spellcheck="false"
on-keypress="onKeyPress_"
on-blur="validate_"
on-change="onChange_"
>
</cr-input>
<div id="syncUrlInput">
<p class="custom-title">$i18n{braveCustomSyncUrlTitle}</p>
<cr-input
id="input"
value="{{value}}"
error-message="$i18n{notValid}"
placeholder="$i18n{enterCustomSyncUrl}"
invalid="{{invalid}}"
on-input="validate_"
maxlength="102400"
spellcheck="false"
on-keypress="onKeyPress_"
on-blur="validate_"
on-change="onChange_"
disabled="[[controlDisabled_(pref.*, disabled)]]"
>
<template
is="dom-if"
if="[[hasPrefPolicyIndicator(pref.*)]]"
>
<cr-policy-pref-indicator
pref="[[pref]]"
icon-aria-label="[[label]]"
slot="suffix"
>
</cr-policy-pref-indicator>
</template>
<template
is="dom-if"
if="[[shouldShowRestart_(pref.*)]]"
>
<cr-button
on-click="onRestartClick_"
slot="suffix"
>
$i18n{restart}
</cr-button>
</template>
</cr-input>
</div>
@@ -3,42 +3,51 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at https://mozilla.org/MPL/2.0/. */
/**
* @fileoverview `sync-url-input` is a single-line text field that is used
* for setting up custom sync server url. It is based on
* @fileoverview `sync-url-input` is a single-line text field with title
* that is used for setting up custom sync server url. It is based on
* `home-url-input`.
*/
import 'chrome://resources/cr_elements/cr_textarea/cr_textarea.js';
import '/shared/settings/prefs/prefs.js';
import 'chrome://resources/cr_elements/cr_textarea/cr_textarea.js'
import '/shared/settings/prefs/prefs.js'
import type { CrInputElement } from 'chrome://resources/cr_elements/cr_input/cr_input.js';
import { assert } from 'chrome://resources/js/assert.js';
import { PolymerElement } from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import { PrefControlMixin } from '/shared/settings/controls/pref_control_mixin.js';
import { PrefsMixin, PrefsMixinInterface } from '/shared/settings/prefs/prefs_mixin.js';
import type { CrInputElement } from 'chrome://resources/cr_elements/cr_input/cr_input.js'
import type { CrPolicyPrefMixinInterface } from '/shared/settings/controls/cr_policy_pref_mixin.js'
import { BraveSyncBrowserProxy } from './brave_sync_browser_proxy.js';
import { assert } from 'chrome://resources/js/assert.js'
import { PolymerElement } from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'
import { PrefControlMixin } from '/shared/settings/controls/pref_control_mixin.js'
import { PrefsMixin } from '/shared/settings/prefs/prefs_mixin.js'
import { CrPolicyPrefMixin } from '/shared/settings/controls/cr_policy_pref_mixin.js'
import {
RelaunchMixin,
RelaunchMixinInterface,
RestartType
} from '../relaunch_mixin.js'
import { getTemplate } from './sync_url_input.html.js';
import { BraveSyncBrowserProxy } from './brave_sync_browser_proxy.js'
import { getTemplate } from './sync_url_input.html.js'
export interface SyncUrlInputElement {
$: {
input: CrInputElement,
};
input: CrInputElement
}
}
const SyncUrlInputElementBase =
PrefsMixin(PrefControlMixin(PolymerElement)) as
{ new(): PolymerElement & PrefsMixinInterface };
const SyncUrlInputElementBase = RelaunchMixin(
PrefsMixin(PrefControlMixin(CrPolicyPrefMixin(PolymerElement)))
) as {
new (): PolymerElement & CrPolicyPrefMixinInterface & RelaunchMixinInterface
}
export class SyncUrlInputElement extends SyncUrlInputElementBase {
static get is() {
return 'sync-url-input';
return 'sync-url-input'
}
static get template() {
return getTemplate();
return getTemplate()
}
static get properties() {
@@ -53,37 +62,35 @@ export class SyncUrlInputElement extends SyncUrlInputElementBase {
*/
pref: { observer: 'prefChanged_' },
/**
* Indicates whether the input is invalid.s
*/
invalid: {type: Boolean, value: false},
};
invalid: { type: Boolean, value: false },
/**
* Whether the control is disabled, for example due to an extension
* managing the preference.
*/
disabled: {
type: Boolean,
value: false
}
}
}
value: string;
pref: chrome.settingsPrivate.PrefObject<string> | undefined;
invalid: boolean;
value: string
pref: chrome.settingsPrivate.PrefObject<string> | undefined
invalid: boolean
disabled: boolean
private browserProxy_: BraveSyncBrowserProxy =
BraveSyncBrowserProxy.getInstance();
BraveSyncBrowserProxy.getInstance()
private onKeyPress_(e: KeyboardEvent) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
this.validate_();
}
}
private validate_() {
if (this.value === '') {
this.invalid = false;
return;
}
this.browserProxy_.validateCustomSyncUrl(this.value).then(isValid => {
this.invalid = !isValid;
});
/**
* Focus the custom input field.
*/
override focus() {
this.$.input.focusInput()
}
/**
@@ -91,45 +98,83 @@ export class SyncUrlInputElement extends SyncUrlInputElementBase {
*/
private prefChanged_() {
if (!this.pref) {
return;
return
}
this.setInputValueFromPref_();
this.setInputValueFromPref_()
}
private onRestartClick_(e: Event) {
// Prevent event from bubbling up to the toggle button.
e.stopPropagation()
this.performRestart(RestartType.RESTART)
}
private validate_() {
if (this.value === '') {
this.invalid = false
return
}
this.browserProxy_.validateCustomSyncUrl(this.value).then((isValid) => {
this.invalid = !isValid
})
}
private setInputValueFromPref_() {
assert(this.pref!.type === chrome.settingsPrivate.PrefType.URL);
this.value = this.pref!.value;
assert(this.pref!.type === chrome.settingsPrivate.PrefType.URL)
this.value = this.pref!.value
}
private onChange_() {
if (this.invalid) {
this.resetValue_();
return;
this.resetValue_()
return
}
assert(this.pref!.type === chrome.settingsPrivate.PrefType.URL);
this.set('pref.value', this.value);
assert(this.pref!.type === chrome.settingsPrivate.PrefType.URL)
this.set('pref.value', this.value)
}
private resetValue_() {
this.invalid = false;
this.setInputValueFromPref_();
this.$.input.blur();
this.invalid = false
this.setInputValueFromPref_()
this.$.input.blur()
}
/**
* Focus the custom input field.
*/
override focus() {
this.$.input.focusInput();
private onKeyPress_(e: KeyboardEvent) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
this.validate_()
this.onChange_()
}
}
private isPrefEnforced_(): boolean {
return (
!!this.pref &&
this.pref.enforcement === chrome.settingsPrivate.Enforcement.ENFORCED
)
}
private shouldShowRestart_(): boolean {
const proxy = BraveSyncBrowserProxy.getInstance()
return !!this.pref && proxy.getCustomSyncUrlAtStartup() !== this.pref.value
}
private controlDisabled_(): boolean {
return (
this.disabled ||
this.isPrefEnforced_() ||
!!(this.pref && this.pref.userControlDisabled)
)
}
}
declare global {
interface HTMLElementTagNameMap {
'sync-url-input': SyncUrlInputElement;
'sync-url-input': SyncUrlInputElement
}
}
customElements.define(SyncUrlInputElement.is, SyncUrlInputElement);
customElements.define(SyncUrlInputElement.is, SyncUrlInputElement)
+2 -5
View File
@@ -36,6 +36,7 @@
#include "brave/browser/ui/webui/settings/default_brave_shields_handler.h"
#include "brave/components/ai_chat/core/browser/utils.h"
#include "brave/components/ai_chat/core/common/features.h"
#include "brave/components/brave_sync/brave_sync_prefs.h"
#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
#include "brave/components/brave_vpn/common/features.h"
#include "brave/components/brave_wallet/common/features.h"
@@ -212,13 +213,9 @@ void BraveSettingsUI::AddResources(content::WebUIDataSource* html_source,
html_source->AddBoolean(
"isSharedPinnedTabsEnabled",
base::FeatureList::IsEnabled(tabs::features::kBraveSharedPinnedTabs));
html_source->AddBoolean(
"customSyncUrlEnabledAtStartup",
g_browser_process->local_state()->GetBoolean(kBraveCustomSyncUrlEnabled));
html_source->AddString(
"customSyncUrlAtStartup",
g_browser_process->local_state()->GetString(kBraveCustomSyncUrl));
profile->GetPrefs()->GetString(brave_sync::kCustomSyncServiceUrl));
}
// static
@@ -333,8 +333,7 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
IDS_SETTINGS_BRAVE_SYNC_MANAGE_ACTION_LABEL},
{"braveSyncCouldNotSyncActionLabel",
IDS_SETTINGS_BRAVE_SYNC_COULD_NOT_SYNC_ACTION_LABEL},
{"braveCustomSyncUrlEnableLabel",
IDS_SETTINGS_BRAVE_CUSTOM_SYNC_URL_ENABLE_LABEL},
{"braveCustomSyncUrlTitle", IDS_SETTINGS_BRAVE_CUSTOM_SYNC_URL_TITLE},
{"enterCustomSyncUrl", IDS_SETTINGS_ENTER_CUSTOM_SYNC_URL},
{"braveSyncWordCount", IDS_SETTINGS_BRAVE_SYNC_WORD_COUNT},
{"braveSyncCopied", IDS_SETTINGS_BRAVE_SYNC_COPIED_TEXT},
-4
View File
@@ -162,8 +162,4 @@ inline constexpr char kBraveSuggestedSiteSuggestionsEnabled[] =
"brave.brave_suggested_site_suggestions_enabled";
#endif
inline constexpr char kBraveCustomSyncUrlEnabled[] =
"brave.custom_sync_url_enabled";
inline constexpr char kBraveCustomSyncUrl[] = "brave.custom_sync_url";
#endif // BRAVE_COMPONENTS_CONSTANTS_PREF_NAMES_H_