Bug 1893299 - build confirmation dialog for turning off scheduled backups. r=backup-reviewers,fluent-reviewers,desktop-theme-reviewers,firefox-desktop-core-reviewers ,bolsson,dao

Patch by kpatenio <kpatenio@mozilla.com>.

Differential Revision: https://phabricator.services.mozilla.com/D210753

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

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") {
+    } else if (event.type == "BackupUI:ToggleScheduledBackups") {
-      this.sendAsyncMessage("ScheduledBackupsConfirm");
+      this.sendAsyncMessage("ToggleScheduledBackups", event.detail);
     }
   }
 

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") {
+    } else if (message.name == "ToggleScheduledBackups") {
-      this.#bs.setScheduledBackups(true);
+      this.#bs.setScheduledBackups(message.data?.isScheduledBackupsEnabled);
     }
   }
 

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;
+}

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("turnOnScheduledBackups", this);
-    this.addEventListener("scheduledBackupsConfirm", 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":
+      case "turnOffScheduledBackups":
-        this.turnOnScheduledBackupsDialogEl.close();
+        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 {
     </dialog>`;
   }
 
+  turnOffScheduledBackupsDialogTemplate() {
+    return html`<dialog id="turn-off-scheduled-backups-dialog">
+      <turn-off-scheduled-backups></turn-off-scheduled-backups>
+    </dialog>`;
+  }
+
   render() {
     return html`<link
         rel="stylesheet"
@@ -102,6 +137,7 @@ export default class BackupSettings extends MozLitElement {
         </div>
 
         ${this.turnOnScheduledBackupsDialogTemplate()}
+        ${this.turnOffScheduledBackupsDialogTemplate()}
 
         <moz-button
           id="backup-toggle-scheduled-button"

browser/components/backup/content/backup-settings.stories.mjs

@@ -36,3 +36,12 @@ BackingUpInProgress.args = {
     scheduledBackupsEnabled: false,
   },
 };
+
+export const ScheduledBackupsEnabled = Template.bind({});
+ScheduledBackupsEnabled.args = {
+  backupServiceState: {
+    backupFilePath: "Documents",
+    backupInProgress: false,
+    scheduledBackupsEnabled: true,
+  },
+};

browser/components/backup/content/turn-off-scheduled-backups.css

@@ -0,0 +1,32 @@
+/* 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 https://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+#backup-turn-off-scheduled-wrapper {
+  display: grid;
+  grid-template-areas:
+    "header"
+    "content"
+    "button-group";
+  grid-template-rows: auto auto auto;
+}
+
+#backup-turn-off-scheduled-header {
+  grid-area: header;
+  margin: 0;
+}
+
+#backup-turn-off-scheduled-content {
+  display: flex;
+  flex-direction: column;
+  grid-area: content;
+  margin-block-start: var(--space-small);
+  margin-block-end: var(--space-large);
+  row-gap: var(--space-large);
+}
+
+#backup-turn-off-scheduled-button-group {
+  grid-area: button-group;
+}

browser/components/backup/content/turn-off-scheduled-backups.mjs

@@ -0,0 +1,105 @@
+/* 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/. */
+
+import { html } from "chrome://global/content/vendor/lit.all.mjs";
+import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+
+/**
+ * The widget for showing available options when users want to turn on
+ * scheduled backups.
+ */
+export default class TurnOffScheduledBackups extends MozLitElement {
+  static get queries() {
+    return {
+      cancelButtonEl: "#backup-turn-off-scheduled-cancel-button",
+      confirmButtonEl: "#backup-turn-off-scheduled-confirm-button",
+    };
+  }
+
+  /**
+   * Dispatches the BackupUI:InitWidget custom event upon being attached to the
+   * DOM, which registers with BackupUIChild for BackupService state updates.
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(
+      new CustomEvent("BackupUI:InitWidget", { bubbles: true })
+    );
+  }
+
+  handleCancel() {
+    this.dispatchEvent(
+      new CustomEvent("dialogCancel", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  handleConfirm() {
+    this.dispatchEvent(
+      new CustomEvent("turnOffScheduledBackups", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  contentTemplate() {
+    return html`
+      <div
+        id="backup-turn-off-scheduled-wrapper"
+        aria-labelledby="backup-turn-off-scheduled-header"
+        aria-describedby="backup-turn-off-scheduled-description"
+      >
+        <h1
+          id="backup-turn-off-scheduled-header"
+          class="heading-medium"
+          data-l10n-id="turn-off-scheduled-backups-header"
+        ></h1>
+        <main id="backup-turn-off-scheduled-content">
+          <div id="backup-turn-off-scheduled-description">
+            <span
+              id="backup-turn-off-scheduled-description-span"
+              data-l10n-id="turn-off-scheduled-backups-description"
+            ></span>
+            <!--TODO: finalize support page links (bug 1900467)-->
+            <a
+              id="backup-turn-off-scheduled-learn-more-link"
+              is="moz-support-link"
+              support-page="todo-backup"
+              data-l10n-id="turn-off-scheduled-backups-support-link"
+            ></a>
+          </div>
+        </main>
+
+        <moz-button-group id="backup-turn-off-scheduled-button-group">
+          <moz-button
+            id="backup-turn-off-scheduled-cancel-button"
+            @click=${this.handleCancel}
+            data-l10n-id="turn-off-scheduled-backups-cancel-button"
+          ></moz-button>
+          <moz-button
+            id="backup-turn-off-scheduled-confirm-button"
+            @click=${this.handleConfirm}
+            type="primary"
+            data-l10n-id="turn-off-scheduled-backups-confirm-button"
+          ></moz-button>
+        </moz-button-group>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/backup/turn-off-scheduled-backups.css"
+      />
+      ${this.contentTemplate()}
+    `;
+  }
+}
+
+customElements.define("turn-off-scheduled-backups", TurnOffScheduledBackups);

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`
+  <moz-card style="width: 27.8rem;">
+    <turn-off-scheduled-backups></turn-off-scheduled-backups>
+  </moz-card>
+`;
+
+export const Default = Template.bind({});

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;
   }
 

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 {
       >
         <h1
           id="backup-turn-on-scheduled-header"
+          class="heading-medium"
           data-l10n-id="turn-on-scheduled-backups-header"
         ></h1>
         <main id="backup-turn-on-scheduled-content">
@@ -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"
             ></span>
+            <!--TODO: finalize support page links (bug 1900467)-->
             <a
               id="backup-turn-on-scheduled-learn-more-link"
               is="moz-support-link"

browser/components/backup/jar.mn

@@ -10,6 +10,8 @@ browser.jar:
   content/browser/backup/BackupManifest.1.schema.json            (content/BackupManifest.1.schema.json)
   content/browser/backup/backup-settings.css                     (content/backup-settings.css)
   content/browser/backup/backup-settings.mjs                     (content/backup-settings.mjs)
+  content/browser/backup/turn-off-scheduled-backups.css          (content/turn-off-scheduled-backups.css)
+  content/browser/backup/turn-off-scheduled-backups.mjs          (content/turn-off-scheduled-backups.mjs)
   content/browser/backup/turn-on-scheduled-backups.css           (content/turn-on-scheduled-backups.css)
   content/browser/backup/turn-on-scheduled-backups.mjs           (content/turn-on-scheduled-backups.mjs)
 * content/browser/backup/archive.template.html                   (content/archive.template.html)

browser/components/backup/tests/browser/browser_settings.js

@@ -70,7 +70,7 @@ add_task(async function test_turn_on_scheduled_backups_confirm() {
     let confirmButton = turnOnScheduledBackups.confirmButtonEl;
     let promise = BrowserTestUtils.waitForEvent(
       window,
-      "scheduledBackupsConfirm"
+      "turnOnScheduledBackups"
     );
 
     Assert.ok(confirmButton, "Confirm button should be found");
@@ -86,3 +86,55 @@ add_task(async function test_turn_on_scheduled_backups_confirm() {
     Assert.ok(scheduledPrefVal, "Scheduled backups pref should be true");
   });
 });
+
+/**
+ * Tests that the turn off scheduled backups dialog can set
+ * browser.backup.scheduled.enabled to false from the settings page.
+ */
+add_task(async function test_turn_off_scheduled_backups_confirm() {
+  await BrowserTestUtils.withNewTab("about:preferences", async browser => {
+    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");
+  });
+});

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

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");
+    });
   </script>
 </head>
 <body>

browser/components/backup/tests/chrome/test_turn_off_scheduled_backups.html

@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Tests for the turn-off-scheduled-backups component</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <script
+  src="chrome://browser/content/backup/turn-off-scheduled-backups.mjs"
+  type="module"
+></script>
+  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <script>
+
+    const { BrowserTestUtils } = ChromeUtils.importESModule(
+      "resource://testing-common/BrowserTestUtils.sys.mjs"
+    );
+
+    /**
+     * Tests that adding a turn-off-scheduled-backups element to the DOM causes it to
+     * fire a BackupUI:InitWidget event.
+     */
+    add_task(async function test_initWidget() {
+      let turnOffScheduledBackups = document.createElement("turn-off-scheduled-backups");
+      let content = document.getElementById("content");
+
+      let sawInitWidget = BrowserTestUtils.waitForEvent(content, "BackupUI:InitWidget");
+      content.appendChild(turnOffScheduledBackups);
+      await sawInitWidget;
+      ok(true, "Saw BackupUI:InitWidget");
+
+      turnOffScheduledBackups.remove();
+    });
+
+    /**
+     * Tests that pressing the confirm button will dispatch the expected events.
+     */
+    add_task(async function test_confirm() {
+      let turnOffScheduledBackups = document.getElementById("test-turn-off-scheduled-backups");
+      let confirmButton = turnOffScheduledBackups.confirmButtonEl;
+
+      ok(confirmButton, "Confirm button should be found");
+
+      let content = document.getElementById("content");
+      let promise = BrowserTestUtils.waitForEvent(content, "turnOffScheduledBackups");
+
+      confirmButton.click()
+
+      await promise;
+      ok(true, "Detected event after selecting the confirm button");
+    })
+
+    /**
+     * Tests that pressing the cancel button will dispatch the expected events.
+     */
+    add_task(async function test_cancel() {
+      let turnOffScheduledBackups = document.getElementById("test-turn-off-scheduled-backups");
+      let cancelButton = turnOffScheduledBackups.cancelButtonEl;
+
+      ok(cancelButton, "Cancel button should be found");
+
+      let content = document.getElementById("content");
+      let promise = BrowserTestUtils.waitForEvent(content, "dialogCancel");
+
+      cancelButton.click()
+
+      await promise;
+      ok(true, "Detected event after selecting the cancel button");
+    })
+  </script>
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none">
+  <turn-off-scheduled-backups id="test-turn-off-scheduled-backups"></turn-off-scheduled-backups>
+</div>
+<pre id="test"></pre>
+</body>
+</html>

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

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
+
 ##