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
2024-06-12 17:36:52 +00:00
parent 59079dfd51
commit 256fc8f6ff
18 changed files with 408 additions and 19 deletions
--- 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*"],
--- 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);
    }
  }

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

--- 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;
+}
--- 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":
+      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 {
    </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"
--- a/browser/components/backup/content/backup-settings.stories.mjs
+++ b/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,
+  },
+};
--- a/browser/components/backup/content/turn-off-scheduled-backups.css
+++ b/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;
+}
--- a/browser/components/backup/content/turn-off-scheduled-backups.mjs
+++ b/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);
--- a/browser/components/backup/content/turn-off-scheduled-backups.stories.mjs
+++ 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`
+  <moz-card style="width: 27.8rem;">
+    <turn-off-scheduled-backups></turn-off-scheduled-backups>
+  </moz-card>
+`;
+
+export const Default = Template.bind({});
--- 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;
  }

--- 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 {
      >
        <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"
--- a/browser/components/backup/jar.mn
+++ b/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)
--- a/browser/components/backup/tests/browser/browser_settings.js
+++ b/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");
+  });
+});
--- 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"]
--- 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");
+    });
  </script>
 </head>
 <body>
--- a/browser/components/backup/tests/chrome/test_turn_off_scheduled_backups.html
+++ b/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>
--- 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()

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