diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs index d4679e9a5f81..1518293b2160 100644 --- a/browser/components/BrowserGlue.sys.mjs +++ b/browser/components/BrowserGlue.sys.mjs @@ -441,7 +441,7 @@ let JSWINDOWACTORS = { esModuleURI: "resource:///actors/BackupUIChild.sys.mjs", events: { "BackupUI:InitWidget": { wantUntrusted: true }, - "BackupUI:ScheduledBackupsConfirm": { wantUntrusted: true }, + "BackupUI:ToggleScheduledBackups": { wantUntrusted: true }, }, }, matches: ["about:preferences*", "about:settings*"], diff --git a/browser/components/backup/actors/BackupUIChild.sys.mjs b/browser/components/backup/actors/BackupUIChild.sys.mjs index 668debaa6ee0..b9796425e583 100644 --- a/browser/components/backup/actors/BackupUIChild.sys.mjs +++ b/browser/components/backup/actors/BackupUIChild.sys.mjs @@ -29,8 +29,8 @@ export class BackupUIChild extends JSWindowActorChild { if (event.type == "BackupUI:InitWidget") { this.#inittedWidgets.add(event.target); this.sendAsyncMessage("RequestState"); - } else if (event.type == "BackupUI:ScheduledBackupsConfirm") { - this.sendAsyncMessage("ScheduledBackupsConfirm"); + } else if (event.type == "BackupUI:ToggleScheduledBackups") { + this.sendAsyncMessage("ToggleScheduledBackups", event.detail); } } diff --git a/browser/components/backup/actors/BackupUIParent.sys.mjs b/browser/components/backup/actors/BackupUIParent.sys.mjs index f97d00cbdc8c..908ea4c47781 100644 --- a/browser/components/backup/actors/BackupUIParent.sys.mjs +++ b/browser/components/backup/actors/BackupUIParent.sys.mjs @@ -69,8 +69,8 @@ export class BackupUIParent extends JSWindowActorParent { receiveMessage(message) { if (message.name == "RequestState") { this.sendState(); - } else if (message.name == "ScheduledBackupsConfirm") { - this.#bs.setScheduledBackups(true); + } else if (message.name == "ToggleScheduledBackups") { + this.#bs.setScheduledBackups(message.data?.isScheduledBackupsEnabled); } } diff --git a/browser/components/backup/content/backup-settings.css b/browser/components/backup/content/backup-settings.css index e78596b00a76..09d2345d1b71 100644 --- a/browser/components/backup/content/backup-settings.css +++ b/browser/components/backup/content/backup-settings.css @@ -5,3 +5,7 @@ #turn-on-scheduled-backups-dialog { width: 27.8rem; } + +#turn-off-scheduled-backups-dialog { + width: 23.94rem; +} diff --git a/browser/components/backup/content/backup-settings.mjs b/browser/components/backup/content/backup-settings.mjs index 2992a7e1e7e1..2b3a160d585d 100644 --- a/browser/components/backup/content/backup-settings.mjs +++ b/browser/components/backup/content/backup-settings.mjs @@ -7,6 +7,8 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; // eslint-disable-next-line import/no-unassigned-import import "chrome://browser/content/backup/turn-on-scheduled-backups.mjs"; +// eslint-disable-next-line import/no-unassigned-import +import "chrome://browser/content/backup/turn-off-scheduled-backups.mjs"; /** * The widget for managing the BackupService that is embedded within the main @@ -22,6 +24,8 @@ export default class BackupSettings extends MozLitElement { scheduledBackupsButtonEl: "#backup-toggle-scheduled-button", turnOnScheduledBackupsDialogEl: "#turn-on-scheduled-backups-dialog", turnOnScheduledBackupsEl: "turn-on-scheduled-backups", + turnOffScheduledBackupsEl: "turn-off-scheduled-backups", + turnOffScheduledBackupsDialogEl: "#turn-off-scheduled-backups-dialog", }; } @@ -48,23 +52,43 @@ export default class BackupSettings extends MozLitElement { new CustomEvent("BackupUI:InitWidget", { bubbles: true }) ); - this.addEventListener("scheduledBackupsCancel", this); - this.addEventListener("scheduledBackupsConfirm", this); + this.addEventListener("turnOnScheduledBackups", this); + this.addEventListener("turnOffScheduledBackups", this); + this.addEventListener("dialogCancel", this); } handleEvent(event) { switch (event.type) { - case "scheduledBackupsConfirm": + case "turnOnScheduledBackups": this.turnOnScheduledBackupsDialogEl.close(); this.dispatchEvent( - new CustomEvent("BackupUI:ScheduledBackupsConfirm", { + new CustomEvent("BackupUI:ToggleScheduledBackups", { bubbles: true, composed: true, + detail: { + isScheduledBackupsEnabled: true, + }, }) ); break; - case "scheduledBackupsCancel": - this.turnOnScheduledBackupsDialogEl.close(); + case "turnOffScheduledBackups": + this.turnOffScheduledBackupsDialogEl.close(); + this.dispatchEvent( + new CustomEvent("BackupUI:ToggleScheduledBackups", { + bubbles: true, + composed: true, + detail: { + isScheduledBackupsEnabled: false, + }, + }) + ); + break; + case "dialogCancel": + if (this.turnOnScheduledBackupsDialogEl.open) { + this.turnOnScheduledBackupsDialogEl.close(); + } else { + this.turnOffScheduledBackupsDialogEl.close(); + } break; } } @@ -75,6 +99,11 @@ export default class BackupSettings extends MozLitElement { this.turnOnScheduledBackupsDialogEl ) { this.turnOnScheduledBackupsDialogEl.showModal(); + } else if ( + this.backupServiceState.scheduledBackupsEnabled && + this.turnOffScheduledBackupsDialogEl + ) { + this.turnOffScheduledBackupsDialogEl.showModal(); } } @@ -86,6 +115,12 @@ export default class BackupSettings extends MozLitElement { `; } + turnOffScheduledBackupsDialogTemplate() { + return html` + + `; + } + render() { return html` ${this.turnOnScheduledBackupsDialogTemplate()} + ${this.turnOffScheduledBackupsDialogTemplate()} +

+
+
+ + + +
+
+ + + + + + + `; + } + + render() { + return html` + + ${this.contentTemplate()} + `; + } +} + +customElements.define("turn-off-scheduled-backups", TurnOffScheduledBackups); diff --git a/browser/components/backup/content/turn-off-scheduled-backups.stories.mjs b/browser/components/backup/content/turn-off-scheduled-backups.stories.mjs new file mode 100644 index 000000000000..1a628f6ba635 --- /dev/null +++ b/browser/components/backup/content/turn-off-scheduled-backups.stories.mjs @@ -0,0 +1,25 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// eslint-disable-next-line import/no-unresolved +import { html } from "lit.all.mjs"; +import "chrome://global/content/elements/moz-card.mjs"; +import "./turn-off-scheduled-backups.mjs"; + +window.MozXULElement.insertFTLIfNeeded("locales-preview/backupSettings.ftl"); +window.MozXULElement.insertFTLIfNeeded("branding/brand.ftl"); + +export default { + title: "Domain-specific UI Widgets/Backup/Turn Off Scheduled Backups", + component: "turn-off-scheduled-backups", + argTypes: {}, +}; + +const Template = () => html` + + + +`; + +export const Default = Template.bind({}); diff --git a/browser/components/backup/content/turn-on-scheduled-backups.css b/browser/components/backup/content/turn-on-scheduled-backups.css index baa5d61776b9..b9b7fffa41ec 100644 --- a/browser/components/backup/content/turn-on-scheduled-backups.css +++ b/browser/components/backup/content/turn-on-scheduled-backups.css @@ -15,12 +15,9 @@ "content" "button-group"; grid-template-rows: auto auto auto; - line-height: 1.5; #backup-turn-on-scheduled-header { grid-area: header; - font-size: var(--font-size-large); - font-weight: var(--font-weight); margin: 0; } diff --git a/browser/components/backup/content/turn-on-scheduled-backups.mjs b/browser/components/backup/content/turn-on-scheduled-backups.mjs index 02ebc7dcd8eb..eb1d80c44f05 100644 --- a/browser/components/backup/content/turn-on-scheduled-backups.mjs +++ b/browser/components/backup/content/turn-on-scheduled-backups.mjs @@ -48,7 +48,7 @@ export default class TurnOnScheduledBackups extends MozLitElement { handleCancel() { this.dispatchEvent( - new CustomEvent("scheduledBackupsCancel", { + new CustomEvent("dialogCancel", { bubbles: true, composed: true, }) @@ -65,7 +65,7 @@ export default class TurnOnScheduledBackups extends MozLitElement { * Before confirmation, verify passwords match and FxA format rules (bug 1896772). */ this.dispatchEvent( - new CustomEvent("scheduledBackupsConfirm", { + new CustomEvent("turnOnScheduledBackups", { bubbles: true, composed: true, }) @@ -163,6 +163,7 @@ export default class TurnOnScheduledBackups extends MozLitElement { >

@@ -171,6 +172,7 @@ export default class TurnOnScheduledBackups extends MozLitElement { id="backup-turn-on-scheduled-description-span" data-l10n-id="turn-on-scheduled-backups-description" > + { + await SpecialPowers.pushPrefEnv({ + set: [["browser.backup.scheduled.enabled", true]], + }); + + let settings = browser.contentDocument.querySelector("backup-settings"); + + await settings.updateComplete; + + let turnOffButton = settings.scheduledBackupsButtonEl; + + Assert.ok( + turnOffButton, + "Button to turn off scheduled backups should be found" + ); + + turnOffButton.click(); + + await settings.updateComplete; + + let turnOffScheduledBackups = settings.turnOffScheduledBackupsEl; + + Assert.ok( + turnOffScheduledBackups, + "turn-off-scheduled-backups should be found" + ); + + let confirmButton = turnOffScheduledBackups.confirmButtonEl; + let promise = BrowserTestUtils.waitForEvent( + window, + "turnOffScheduledBackups" + ); + + Assert.ok(confirmButton, "Confirm button should be found"); + + confirmButton.click(); + + await promise; + await settings.updateComplete; + + let scheduledPrefVal = Services.prefs.getBoolPref( + "browser.backup.scheduled.enabled" + ); + Assert.ok(!scheduledPrefVal, "Scheduled backups pref should be false"); + }); +}); diff --git a/browser/components/backup/tests/chrome/chrome.toml b/browser/components/backup/tests/chrome/chrome.toml index 0e1cc0dc14aa..2f05dacbb9b4 100644 --- a/browser/components/backup/tests/chrome/chrome.toml +++ b/browser/components/backup/tests/chrome/chrome.toml @@ -6,4 +6,6 @@ skip-if = ["os == 'android'"] ["test_backup_settings.html"] +["test_turn_off_scheduled_backups.html"] + ["test_turn_on_scheduled_backups.html"] diff --git a/browser/components/backup/tests/chrome/test_backup_settings.html b/browser/components/backup/tests/chrome/test_backup_settings.html index fad7137d5151..2889ec7e4488 100644 --- a/browser/components/backup/tests/chrome/test_backup_settings.html +++ b/browser/components/backup/tests/chrome/test_backup_settings.html @@ -66,6 +66,41 @@ ok(!dialog.open, "Dialog should not be open"); }); + + /** + * Tests that the dialog for turning off scheduled backups can be displayed + * from settings, or hidden if cancelled. + */ + add_task(async function test_turnOffScheduledBackupsDialog() { + let settings = document.getElementById("test-backup-settings"); + settings.backupServiceState = { + scheduledBackupsEnabled: true, + } + + await settings.updateComplete; + + let turnOffButton = settings.scheduledBackupsButtonEl; + let dialog = settings.turnOffScheduledBackupsDialogEl; + + ok(turnOffButton, "Button to turn off scheduled backups should be found"); + ok(!dialog.open, "Dialog should not be open"); + + turnOffButton.click(); + await settings.updateComplete; + + ok(dialog?.open, "Dialog should be open"); + + let turnOffScheduledBackups = dialog.querySelector("turn-off-scheduled-backups"); + ok(turnOffScheduledBackups, "turn-off-scheduled-backups should be found"); + + let cancelButton = turnOffScheduledBackups.shadowRoot.getElementById("backup-turn-off-scheduled-cancel-button"); + ok(cancelButton, "Cancel button should be found"); + + cancelButton.click(); + await settings.updateComplete; + + ok(!dialog.open, "Dialog should not be open"); + }); diff --git a/browser/components/backup/tests/chrome/test_turn_off_scheduled_backups.html b/browser/components/backup/tests/chrome/test_turn_off_scheduled_backups.html new file mode 100644 index 000000000000..a92422fcfd7b --- /dev/null +++ b/browser/components/backup/tests/chrome/test_turn_off_scheduled_backups.html @@ -0,0 +1,79 @@ + + + + + Tests for the turn-off-scheduled-backups component + + + + + + + +

+ +

+
+
diff --git a/browser/components/backup/tests/chrome/test_turn_on_scheduled_backups.html b/browser/components/backup/tests/chrome/test_turn_on_scheduled_backups.html
index 054df24ff756..f4e93a586f30 100644
--- a/browser/components/backup/tests/chrome/test_turn_on_scheduled_backups.html
+++ b/browser/components/backup/tests/chrome/test_turn_on_scheduled_backups.html
@@ -42,7 +42,7 @@
       ok(confirmButton, "Confirm button should be found");
 
       let content = document.getElementById("content");
-      let promise = BrowserTestUtils.waitForEvent(content, "scheduledBackupsConfirm");
+      let promise = BrowserTestUtils.waitForEvent(content, "turnOnScheduledBackups");
 
       confirmButton.click()
 
@@ -60,7 +60,7 @@
       ok(cancelButton, "Cancel button should be found");
 
       let content = document.getElementById("content");
-      let promise = BrowserTestUtils.waitForEvent(content, "scheduledBackupsCancel");
+      let promise = BrowserTestUtils.waitForEvent(content, "dialogCancel");
 
       cancelButton.click()
 
diff --git a/browser/locales-preview/backupSettings.ftl b/browser/locales-preview/backupSettings.ftl
index f3d36f9c28d6..86486e26e6dc 100644
--- a/browser/locales-preview/backupSettings.ftl
+++ b/browser/locales-preview/backupSettings.ftl
@@ -32,4 +32,13 @@ turn-on-scheduled-backups-encryption-repeat-password-label = Repeat password
 turn-on-scheduled-backups-cancel-button = Cancel
 turn-on-scheduled-backups-confirm-button = Turn on backup
 
+## These strings are displayed in a modal when users want to turn off scheduled backups.
+
+turn-off-scheduled-backups-header = Turn off backup?
+turn-off-scheduled-backups-description = This also deletes all of your backup data. It can’t be undone.
+turn-off-scheduled-backups-support-link = Learn more
+
+turn-off-scheduled-backups-cancel-button = Cancel
+turn-off-scheduled-backups-confirm-button = Turn off and delete backup
+
 ##