corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1927644: Choose what to sync UI updates r=sync-reviewers,fluent-reviewers,settings-reviewers,desktop-theme-reviewers,dao,mossop,markh

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D227434
This commit is contained in:
Sammy Khamis
2024-11-12 23:30:23 +00:00
parent a5c790b490
commit b55e774133
6 changed files with 59 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/components/preferences/dialogs/syncChooseWhatToSync.js
View File

@@ -20,7 +20,7 @@ let gSyncChooseWhatToSync = {
this._adjustForPrefs();
let options = window.arguments[0];
if (options.disconnectFun) {
// We offer 'disconnect'
// Offer 'Disconnect' functionality if it was provided
document.addEventListener("dialogextra2", function () {
options.disconnectFun().then(disconnected => {
if (disconnected) {
@@ -29,7 +29,7 @@ let gSyncChooseWhatToSync = {
});
});
} else {
// no "disconnect" - hide the button.
// Hide the 'Disconnect' button if not applicable
document
.getElementById("syncChooseOptions")
.getButton("extra2").hidden = true;

8
browser/components/preferences/dialogs/syncChooseWhatToSync.xhtml
View File

@@ -10,13 +10,13 @@
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
onload="gSyncChooseWhatToSync.init();"
data-l10n-id="sync-choose-what-to-sync-dialog3"
data-l10n-id="sync-choose-what-to-sync-dialog4"
data-l10n-attrs="title, style"
>
<dialog
id="syncChooseOptions"
buttons="accept,cancel,extra2"
data-l10n-id="sync-choose-what-to-sync-dialog3"
data-l10n-id="sync-choose-what-to-sync-dialog4"
data-l10n-attrs="buttonlabelaccept, buttonlabelextra2"
>
<linkset>
@@ -29,10 +29,6 @@
</linkset>
<script src="chrome://global/content/preferencesBindings.js" />
<script src="chrome://browser/content/preferences/dialogs/syncChooseWhatToSync.js" />
<description
class="sync-choose-dialog-description"
data-l10n-id="sync-choose-dialog-subtitle"
/>
<html:div class="sync-engines-list">
<html:div class="sync-engine-bookmarks">
<checkbox

34
browser/components/preferences/sync.inc.xhtml
View File

@@ -168,33 +168,27 @@
</groupbox>
<groupbox>
<deck id="syncStatus" flex="1">
<!-- sync not yet configured. -->
<vbox id="syncStatusContainer" flex="1">
<hbox>
<html:h2 id="syncStatusTitle" data-l10n-id="prefs-syncing-off"/>
<spacer flex="1"/>
<!-- 'Sync Now' button, visible only when sync is on -->
<button id="syncNow" class="accessory-button needs-account-ready"></button>
</hbox>
<vbox id="syncNotConfigured">
<label>
<html:h2 data-l10n-id="prefs-syncing-off"/>
</label>
<hbox class="sync-group info-box-container">
<vbox flex="1">
<label data-l10n-id="prefs-sync-offer-setup-label2"/>
</vbox>
<vbox>
<button id="syncSetup"
is="highlightable-button"
class="accessory-button needs-account-ready"
data-l10n-id="prefs-sync-turn-on-syncing"/>
</vbox>
<button id="syncSetup"
is="highlightable-button"
class="accessory-button needs-account-ready"
data-l10n-id="prefs-sync-turn-on-syncing"/>
</hbox>
</vbox>
<vbox id="syncConfigured">
<hbox>
<html:h2 data-l10n-id="prefs-syncing-on"/>
<spacer flex="1"/>
<button id="syncNow"
class="accessory-button needs-account-ready"/>
</hbox>
<vbox class="sync-group info-box-container sync-configured">
<vbox class="sync-group sync-info-box sync-configured">
<label data-l10n-id="sync-syncing-across-devices-heading"/>
<html:div class="sync-engines-list">
<html:div engine_preference="services.sync.engine.bookmarks">
@@ -233,12 +227,12 @@
<hbox>
<button id="syncChangeOptions"
is="highlightable-button"
data-l10n-id="sync-change-options"/>
data-l10n-id="sync-manage-options"/>
<spacer flex="1"/>
</hbox>
</vbox>
</vbox>
</deck>
</vbox>
</groupbox>
</vbox>
</hbox>

29
browser/components/preferences/sync.js
View File

@@ -31,6 +31,7 @@ var gSyncPane = {
init() {
this._setupEventListeners();
this.setupEnginesUI();
this.updateSyncUI();
document
.getElementById("weavePrefsDeck")
@@ -258,6 +259,27 @@ var gSyncPane = {
});
},
updateSyncUI() {
const state = UIState.get();
const isSyncEnabled = state.syncEnabled;
let syncStatusTitle = document.getElementById("syncStatusTitle");
let syncNowButton = document.getElementById("syncNow");
let syncNotConfiguredEl = document.getElementById("syncNotConfigured");
let syncConfiguredEl = document.getElementById("syncConfigured");
if (isSyncEnabled) {
syncStatusTitle.setAttribute("data-l10n-id", "prefs-syncing-on");
syncNowButton.hidden = false;
syncConfiguredEl.hidden = false;
syncNotConfiguredEl.hidden = true;
} else {
syncStatusTitle.setAttribute("data-l10n-id", "prefs-syncing-off");
syncNowButton.hidden = true;
syncConfiguredEl.hidden = true;
syncNotConfiguredEl.hidden = false;
}
},
async _chooseWhatToSync(isAlreadySyncing) {
// Assuming another device is syncing and we're not,
// we update the engines selection so the correct
@@ -284,6 +306,7 @@ var gSyncPane = {
fxAccounts.telemetry
.recordConnection(["sync"], "ui")
.then(() => {
this.updateSyncUI();
return Weave.Service.configure();
})
.catch(err => {
@@ -396,12 +419,10 @@ var gSyncPane = {
.setAttribute("href", accountsManageURI);
});
// and the actual sync state.
let eltSyncStatus = document.getElementById("syncStatus");
let eltSyncStatus = document.getElementById("syncStatusContainer");
eltSyncStatus.hidden = !syncReady;
eltSyncStatus.selectedIndex = state.syncEnabled
? SYNC_CONNECTED
: SYNC_DISCONNECTED;
this._updateSyncNow(state.syncing);
this.updateSyncUI();
},
_getEntryPoint() {

14
browser/locales/en-US/browser/preferences/preferences.ftl
View File

@@ -926,22 +926,20 @@ sync-currently-syncing-payment-methods = Payment methods
sync-currently-syncing-addons = Add-ons
sync-currently-syncing-settings = Settings
sync-change-options =
.label = Change…
.accesskey = C
sync-manage-options =
.label = Manage sync…
.accesskey = M
## The "Choose what to sync" dialog.
sync-choose-what-to-sync-dialog3 =
.title = Choose What To Sync
sync-choose-what-to-sync-dialog4 =
.title = Manage what syncs on all your connected devices
.style = min-width: 36em;
.buttonlabelaccept = Save Changes
.buttonlabelaccept = Save
.buttonaccesskeyaccept = S
.buttonlabelextra2 = Disconnect…
.buttonaccesskeyextra2 = D
sync-choose-dialog-subtitle = Changes to the list of items to sync will be reflected across all your connected devices.
sync-engine-bookmarks =
.label = Bookmarks
.accesskey = m

18
browser/themes/shared/preferences/preferences.css
View File

@@ -572,8 +572,7 @@ a[is="moz-support-link"]:not(.sidebar-footer-link) {
#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
#weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected,
#syncStatus:not([selectedIndex="1"]) > #syncConfigured {
#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
visibility: collapse;
}
@@ -810,10 +809,14 @@ html|dialog,
margin-inline: 4px 8px;
}
#syncStatus {
#syncStatusContainer {
margin-top: 32px;
}
#syncChangeOptions {
margin-inline-start: 0;
}
.sync-group {
margin-block: var(--space-large);
border: 1px solid var(--in-content-border-color);
@@ -823,16 +826,15 @@ html|dialog,
display: block;
}
.sync-choose-dialog-description {
margin-block-end: 10px;
.sync-info-box {
border-radius: var(--border-radius-medium);
padding: var(--space-large);
}
.sync-engines-list > div,
.sync-engines-list + hbox {
margin-top: 0;
padding-top: var(--space-large);
max-width: 300px;
height: auto;
}
dialog > .sync-engines-list > div,
@@ -861,7 +863,7 @@ dialog > .sync-engines-list + hbox {
}
.sync-engines-list {
column-count: 2;
column-count: 3;
column-fill: balance;
margin-block-end: 10px;
}