Bug 1409208 (part 1) - Create a functional disconnect dialog. r?gandalf,eoger draft
authorMark Hammond <mhammond@skippinet.com.au>
Tue, 24 Apr 2018 11:17:00 +1000
changeset 799156 88e8b0037e034b74059ef8f4c722505d254d5673
parent 799120 47e81ea1ef10189ef210867934bf36e14cf223dc
child 799157 f273e5f18fdd1ff80f83ac4251d32ed9e22d5a37
child 799194 000170d90a27303d571723c87befc585f57e70e5
push id110943
push userbmo:markh@mozilla.com
push dateThu, 24 May 2018 02:29:17 +0000
reviewersgandalf, eoger
bugs1409208
milestone62.0a1
Bug 1409208 (part 1) - Create a functional disconnect dialog. r?gandalf,eoger MozReview-Commit-ID: GyGzB6pI0vU
browser/components/preferences/in-content/jar.mn
browser/components/preferences/in-content/sync.js
browser/components/preferences/in-content/syncDisconnect.js
browser/components/preferences/in-content/syncDisconnect.xul
browser/locales/en-US/browser/preferences/syncDisconnect.ftl
browser/locales/en-US/chrome/browser/syncSetup.properties
browser/themes/shared/incontentprefs/syncDisconnect.css
browser/themes/shared/jar.inc.mn
--- a/browser/components/preferences/in-content/jar.mn
+++ b/browser/components/preferences/in-content/jar.mn
@@ -9,9 +9,11 @@ browser.jar:
    content/browser/preferences/in-content/subdialogs.js
 
    content/browser/preferences/in-content/main.js
    content/browser/preferences/in-content/home.js
    content/browser/preferences/in-content/search.js
    content/browser/preferences/in-content/privacy.js
    content/browser/preferences/in-content/containers.js
    content/browser/preferences/in-content/sync.js
+   content/browser/preferences/in-content/syncDisconnect.xul
+   content/browser/preferences/in-content/syncDisconnect.js
    content/browser/preferences/in-content/findInPage.js
--- a/browser/components/preferences/in-content/sync.js
+++ b/browser/components/preferences/in-content/sync.js
@@ -443,44 +443,34 @@ var gSyncPane = {
     };
 
     fxAccounts.resendVerificationEmail()
       .then(fxAccounts.getSignedInUser, onError)
       .then(onSuccess, onError);
   },
 
   unlinkFirefoxAccount(confirm) {
+    let doUnlink = () => {
+      fxAccounts.signOut().then(() => {
+        this.updateWeavePrefs();
+      });
+    };
     if (confirm) {
-      let sb = Services.strings.createBundle("chrome://browser/locale/syncSetup.properties");
-      let disconnectLabel = sb.GetStringFromName("disconnect.label");
-      let title = sb.GetStringFromName("disconnect.verify.title");
-      let body = sb.GetStringFromName("disconnect.verify.bodyHeading") +
-        "\n\n" +
-        sb.GetStringFromName("disconnect.verify.bodyText");
-      let ps = Services.prompt;
-      let buttonFlags = (ps.BUTTON_POS_0 * ps.BUTTON_TITLE_IS_STRING) +
-        (ps.BUTTON_POS_1 * ps.BUTTON_TITLE_CANCEL) +
-        ps.BUTTON_POS_1_DEFAULT;
-
-      let factory = Cc["@mozilla.org/prompter;1"]
-        .getService(Ci.nsIPromptFactory);
-      let prompt = factory.getPrompt(window, Ci.nsIPrompt);
-      let bag = prompt.QueryInterface(Ci.nsIWritablePropertyBag2);
-      bag.setPropertyAsBool("allowTabModal", true);
-
-      let pressed = prompt.confirmEx(title, body, buttonFlags,
-        disconnectLabel, null, null, null, {});
-
-      if (pressed != 0) { // 0 is the "continue" button
-        return;
-      }
+      gSubDialog.open("chrome://browser/content/preferences/in-content/syncDisconnect.xul",
+                      "resizable=no", /* aFeatures */
+                      null, /* aParams */
+                      event => { /* aClosingCallback */
+                        if (event.detail.button == "accept") {
+                          doUnlink();
+                        }
+                      });
+      return;
     }
-    fxAccounts.signOut().then(() => {
-      this.updateWeavePrefs();
-    });
+    // no confirmation implies no data removal, so just disconnect.
+    doUnlink();
   },
 
   _populateComputerName(value) {
     let textbox = document.getElementById("fxaSyncComputerName");
     if (!textbox.hasAttribute("placeholder")) {
       textbox.setAttribute("placeholder",
         Weave.Utils.getDefaultDeviceName());
     }
new file mode 100644
--- /dev/null
+++ b/browser/components/preferences/in-content/syncDisconnect.js
@@ -0,0 +1,45 @@
+// 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/.
+
+let gSyncDisconnectDialog = {
+  init() {
+  },
+
+  // when either of the checkboxes are changed.
+  onDeleteOptionChange() {
+    let eitherChecked = document.getElementById("deleteRemoteSyncData").checked ||
+                        document.getElementById("deleteRemoteOtherData").checked;
+    let newTitle = eitherChecked ? "sync-disconnect-confirm-disconnect-delete" :
+                                   "sync-disconnect-confirm-disconnect";
+    let butDisconnect = document.getElementById("butDisconnect");
+    document.l10n.setAttributes(butDisconnect, newTitle);
+  },
+
+  accept(event) {
+    // * Check the check-boxes
+    // * Start the disconnect and get the completion promise.
+    this.waitForCompletion(Promise.resolve());
+  },
+
+  waitForCompletion(promiseComplete) {
+    // Change the dialog to show we are waiting for completion.
+    document.getElementById("deleteOptionsContent").hidden = true;
+    document.getElementById("deletingContent").hidden = false;
+
+    // And do the santize.
+    promiseComplete.catch(ex => {
+      console.error("Failed to sanitize", ex);
+    }).then(() => {
+      // We dispatch a custom event so the caller knows how we were closed
+      // (if we were a dialog we'd get this for free, but we'd also lose the
+      // ability to keep the dialog open while the sanitize was running)
+      let closingEvent = new CustomEvent("dialogclosing", {
+        bubbles: true,
+        detail: {button: "accept"},
+      });
+      document.documentElement.dispatchEvent(closingEvent);
+      close();
+    });
+  }
+};
new file mode 100644
--- /dev/null
+++ b/browser/components/preferences/in-content/syncDisconnect.xul
@@ -0,0 +1,67 @@
+<?xml version="1.0"?>
+
+<!-- -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- -->
+<!-- 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/. -->
+
+<?xml-stylesheet href="chrome://global/skin/"?>
+<?xml-stylesheet href="chrome://browser/skin/preferences/in-content/syncDisconnect.css" type="text/css"?>
+
+<window id="syncDisconnectDialog" class="windowDialog"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        role="dialog"
+        onload="gSyncDisconnectDialog.init();"
+        data-l10n-id="sync-disconnect-dialog"
+        data-l10n-attrs="title, style">
+
+  <link rel="localization" href="browser/branding/sync-brand.ftl"/>
+  <link rel="localization" href="browser/preferences/syncDisconnect.ftl"/>
+  <script src="chrome://global/content/l10n.js"/>
+  <script src="chrome://browser/content/preferences/in-content/syncDisconnect.js"/>
+
+  <vbox id="deleteOptionsContent">
+    <description id="syncDisconnectHeading" data-l10n-id="sync-disconnect-heading"></description>
+
+    <vbox class="deleteOptions">
+      <hbox class="deleteOption">
+        <checkbox id="deleteRemoteSyncData"
+                  oncommand="gSyncDisconnectDialog.onDeleteOptionChange(event)"/>
+        <vbox>
+          <label class="deleteCaption" data-l10n-id="sync-disconnect-remove-sync-caption"/>
+          <label class="deleteData" data-l10n-id="sync-disconnect-remove-sync-data"/>
+        </vbox>
+      </hbox>
+
+      <hbox class="deleteOption">
+        <checkbox id="deleteRemoteOtherData"
+                  oncommand="gSyncDisconnectDialog.onDeleteOptionChange(event)"/>
+        <vbox>
+          <label class="deleteCaption" data-l10n-id="sync-disconnect-remove-other-caption"/>
+          <label class="deleteData" data-l10n-id="sync-disconnect-remove-other-data"/>
+        </vbox>
+      </hbox>
+    </vbox>
+
+    <vbox>
+      <spacer flex="1"/>
+      <hbox class="actionButtons" align="right" flex="1">
+        <button id="butCancel"
+                oncommand="close(event);"
+                class="syncDisconnectButton"
+                data-l10n-id="sync-disconnect-cancel"/>
+        <button id="butDisconnect"
+                oncommand="gSyncDisconnectDialog.accept(event);"
+                class="syncDisconnectButton"
+                data-l10n-id="sync-disconnect-confirm-disconnect"/>
+      </hbox>
+    </vbox>
+  </vbox>
+
+  <vbox id="deletingContent" align="center" pack="center" flex="1" hidden="true">
+    <hbox align="center">
+      <image class="disconnectThrobber"/>
+      <label class="deleteCaption" data-l10n-id="sync-disconnect-disconnecting"/>
+    </hbox>
+  </vbox>
+</window>
new file mode 100644
--- /dev/null
+++ b/browser/locales/en-US/browser/preferences/syncDisconnect.ftl
@@ -0,0 +1,36 @@
+# 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/.
+
+sync-disconnect-dialog =
+    .title = Disconnect { -sync-brand-short-name }?
+    .style = width: 36em; min-height: 35em;
+
+sync-disconnect-heading = Do you also want to remove browser data on this computer? Your { -sync-brand-name } data will remain in your account, regardless.
+
+sync-disconnect-remove-sync-caption = Remove { -sync-brand-name } Data
+
+sync-disconnect-remove-sync-data = Bookmarks, history, passwords, etc.
+
+sync-disconnect-remove-other-caption = Remove Other Private Data
+
+sync-disconnect-remove-other-data = Cookies, cache, offline website data, etc.
+
+# Shown while the disconnect is in progress
+sync-disconnect-disconnecting = Disconnecting…
+
+sync-disconnect-cancel =
+    .label = Cancel
+    .accesskey = C
+
+## Disconnect confirm Button
+##
+## The 2 labels which may be shown on the single "Disconnect" button, depending
+## on the state of the checkboxes.
+sync-disconnect-confirm-disconnect-delete =
+    .label = Disconnect & Delete
+    .accesskey = D
+
+sync-disconnect-confirm-disconnect =
+    .label = Just Disconnect
+    .accesskey = D
--- a/browser/locales/en-US/chrome/browser/syncSetup.properties
+++ b/browser/locales/en-US/chrome/browser/syncSetup.properties
@@ -3,20 +3,12 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 # Several other strings are used (via Weave.Status.login), but they come from
 #  /services/sync
 
 # Firefox Accounts based setup.
 continue.label = Continue
 
-# LOCALIZATION NOTE (disconnect.label, disconnect.verify.title, disconnect.verify.bodyHeading, disconnect.verify.bodyText):
-# These strings are used in the confirmation dialog shown when the user hits the disconnect button
-# LOCALIZATION NOTE (disconnect.label): This is the label for the disconnect button
-disconnect.label = Disconnect
-disconnect.verify.title = Disconnect
-disconnect.verify.bodyHeading = Disconnect from Sync?
-disconnect.verify.bodyText = Your browsing data will remain on this computer, but it will no longer sync with your account.
-
 relinkVerify.title = Merge Warning
 relinkVerify.heading = Are you sure you want to sign in to Sync?
 # LOCALIZATION NOTE (relinkVerify.description): Email address of a user previously signed into sync.
 relinkVerify.description = A different user was previously signed in to Sync on this computer. Signing in will merge this browser’s bookmarks, passwords and other settings with %S
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/syncDisconnect.css
@@ -0,0 +1,33 @@
+/* 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/. */
+
+#syncDisconnectDialog {
+  padding: 0.5em;
+}
+
+#syncDisconnectHeading {
+  padding-bottom: 1em;
+}
+
+.deleteOptions {
+  border: thin solid lightgray;
+  padding: 1em;
+}
+
+.deleteOption {
+  padding-bottom: 1em;
+}
+
+.deleteData {
+  color: gray;
+}
+
+.disconnectThrobber {
+  width: 16px;
+  min-height: 16px;
+  margin-inline-end: 8px;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  list-style-image: url("chrome://global/skin/icons/loading.png");
+}
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -102,16 +102,17 @@
   skin/classic/browser/preferences/in-content/privacy.css      (../shared/incontentprefs/privacy.css)
   skin/classic/browser/preferences/in-content/search-arrow-indicator.svg  (../shared/incontentprefs/search-arrow-indicator.svg)
   skin/classic/browser/preferences/in-content/search-bar.svg   (../shared/incontentprefs/search-bar.svg)
   skin/classic/browser/preferences/in-content/search.css       (../shared/incontentprefs/search.css)
   skin/classic/browser/preferences/in-content/search.svg       (../shared/incontentprefs/search.svg)
   skin/classic/browser/preferences/in-content/siteDataSettings.css (../shared/incontentprefs/siteDataSettings.css)
   skin/classic/browser/preferences/in-content/sync-devices.svg (../shared/incontentprefs/sync-devices.svg)
   skin/classic/browser/preferences/in-content/sync.svg         (../shared/incontentprefs/sync.svg)
+  skin/classic/browser/preferences/in-content/syncDisconnect.css (../shared/incontentprefs/syncDisconnect.css)
 * skin/classic/browser/preferences/in-content/containers.css   (../shared/incontentprefs/containers.css)
 * skin/classic/browser/preferences/containers.css              (../shared/preferences/containers.css)
   skin/classic/browser/fxa/default-avatar.svg                  (../shared/fxa/default-avatar.svg)
   skin/classic/browser/fxa/sync-illustration.svg               (../shared/fxa/sync-illustration.svg)
   skin/classic/browser/fxa/sync-illustration-issue.svg         (../shared/fxa/sync-illustration-issue.svg)
 
 
   skin/classic/browser/accessibility.svg              (../shared/icons/accessibility.svg)