Bug 1275915 - Replace sync verification panel with platform notification. r?markh draft
authorEdouard Oger <eoger@fastmail.com>
Tue, 31 May 2016 14:52:11 -0700
changeset 374050 4b457b7d0c16401d5eb2a625379f0bc82534a939
parent 373935 111970c738234569c8c180319155327316335deb
child 522535 4b5f78eeb8a57c5ea37631aa7b86c837a3a0f66d
push id19911
push userbmo:edouard.oger@gmail.com
push dateWed, 01 Jun 2016 18:16:32 +0000
reviewersmarkh
bugs1275915
milestone49.0a1
Bug 1275915 - Replace sync verification panel with platform notification. r?markh MozReview-Commit-ID: CrGGBplrHPI
browser/components/preferences/in-content/sync.js
browser/components/preferences/in-content/sync.xul
browser/locales/en-US/chrome/browser/accounts.properties
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content/sync.js
+++ b/browser/components/preferences/in-content/sync.js
@@ -179,32 +179,23 @@ var gSyncPane = {
   _updateComputerNameValue: function(save) {
     if (save) {
       let textbox = document.getElementById("fxaSyncComputerName");
       Weave.Service.clientsEngine.localName = textbox.value;
     }
     this._populateComputerName(Weave.Service.clientsEngine.localName);
   },
 
-  _closeSyncStatusMessageBox: function() {
-    document.getElementById("syncStatusMessage").removeAttribute("message-type");
-    document.getElementById("syncStatusMessageTitle").textContent = "";
-    document.getElementById("syncStatusMessageDescription").textContent = "";
-  },
-
   _setupEventListeners: function() {
     function setEventListener(aId, aEventType, aCallback)
     {
       document.getElementById(aId)
               .addEventListener(aEventType, aCallback.bind(gSyncPane));
     }
 
-    setEventListener("syncStatusMessageClose", "command", function () {
-      gSyncPane._closeSyncStatusMessageBox();
-    });
     setEventListener("noAccountSetup", "click", function (aEvent) {
       aEvent.stopPropagation();
       gSyncPane.openSetup(null);
     });
     setEventListener("noAccountPair", "click", function (aEvent) {
       aEvent.stopPropagation();
       gSyncPane.openSetup('pair');
     });
@@ -588,41 +579,33 @@ var gSyncPane = {
       .then(url => {
         this.openContentInBrowser(url, {
           replaceQueryString: true
         });
       });
   },
 
   verifyFirefoxAccount: function() {
-    this._closeSyncStatusMessageBox();
-    let changesyncStatusMessage = (data) => {
+    let showVerifyNotification = (data) => {
       let isError = !data;
-      let syncStatusMessage = document.getElementById("syncStatusMessage");
-      let syncStatusMessageTitle = document.getElementById("syncStatusMessageTitle");
-      let syncStatusMessageDescription = document.getElementById("syncStatusMessageDescription");
       let maybeNot = isError ? "Not" : "";
       let sb = this._accountsStringBundle;
       let title = sb.GetStringFromName("verification" + maybeNot + "SentTitle");
       let email = !isError && data ? data.email : "";
-      let description = sb.formatStringFromName("verification" + maybeNot + "SentFull", [email], 1)
-
-      syncStatusMessageTitle.textContent = title;
-      syncStatusMessageDescription.textContent = description;
-      let messageType = isError ? "verify-error" : "verify-success";
-      syncStatusMessage.setAttribute("message-type", messageType);
+      let body = sb.formatStringFromName("verification" + maybeNot + "SentBody", [email], 1);
+      new Notification(title, { body })
     }
 
     let onError = () => {
-      changesyncStatusMessage();
+      showVerifyNotification();
     };
 
     let onSuccess = data => {
       if (data) {
-        changesyncStatusMessage(data);
+        showVerifyNotification(data);
       } else {
         onError();
       }
     };
 
     fxAccounts.resendVerificationEmail()
       .then(fxAccounts.getSignedInUser, onError)
       .then(onSuccess, onError);
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -34,28 +34,16 @@
       class="header"
       hidden="true"
       data-category="paneSync">
   <label class="header-name" flex="1">&paneSync.title;</label>
   <button class="help-button"
           aria-label="&helpButton.label;"/>
 </hbox>
 
-<vbox id="syncStatusMessage-container" data-category="paneSync" hidden="true">
-  <hbox id="syncStatusMessage">
-    <vbox id="syncStatusMessageWrapper">
-      <label id="syncStatusMessageTitle"></label>
-      <description id="syncStatusMessageDescription"></description>
-    </vbox>
-    <vbox>
-      <button id="syncStatusMessageClose" class="close-icon"/>
-    </vbox>
-  </hbox>
-</vbox>
-
 <deck id="weavePrefsDeck" data-category="paneSync" hidden="true">
   <!-- These panels are for the "legacy" sync provider -->
   <vbox id="noAccount" align="center">
     <spacer flex="1"/>
     <description id="syncDesc">
       &weaveDesc.label;
     </description>
     <separator/>
--- a/browser/locales/en-US/chrome/browser/accounts.properties
+++ b/browser/locales/en-US/chrome/browser/accounts.properties
@@ -11,15 +11,15 @@ autoDisconnectSignIn.label = Sign in to 
 autoDisconnectSignIn.accessKey = S
 
 # LOCALIZATION NOTE (reconnectDescription) - %S = Email address of user's Firefox Account
 reconnectDescription = Reconnect %S
 
 # LOCALIZATION NOTE (verifyDescription) - %S = Email address of user's Firefox Account
 verifyDescription = Verify %S
 
-# These strings are shown in a flyout in the Sync preference panel after the
+# These strings are shown in a desktop notification after the
 # user requests we resend a verification email.
 verificationSentTitle = Verification Sent
-# LOCALIZATION NOTE (verificationSentFull) - %S = Email address of user's Firefox Account
-verificationSentFull = A verification link has been sent to %S. Please check your email and click the link to begin syncing.
+# LOCALIZATION NOTE (verificationSentBody) - %S = Email address of user's Firefox Account
+verificationSentBody = A verification link has been sent to %S.
 verificationNotSentTitle = Unable to Send Verification
-verificationNotSentFull = We are unable to send a verification mail at this time, please try again later.
+verificationNotSentBody = We are unable to send a verification mail at this time, please try again later.
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -431,71 +431,16 @@ description > html|a {
   padding-right: 15px;
 }
 
 #noFxaGroup > vbox,
 #fxaGroup {
   -moz-box-align: start;
 }
 
-#syncStatusMessage {
-  visibility: collapse;
-  opacity: 0;
-  transition: opacity 1s linear;
-  padding: 14px 8px 14px 14px;
-  border-radius: 2px;
-}
-
-#syncStatusMessage[message-type] {
-  visibility: visible;
-  opacity: 1;
-}
-
-#syncStatusMessage[message-type="verify-success"] {
-  background-color: #74BF43;
-}
-
-#syncStatusMessage[message-type="verify-error"] {
-  background-color: #D74345;
-}
-
-#syncStatusMessage[message-type="migration"] {
-  background-color: #FF9500;
-}
-
-#syncStatusMessageWrapper {
-  -moz-box-flex: 1;
-  padding-right: 5px;
-}
-
-#syncStatusMessageTitle, #syncStatusMessageDescription {
-  color: #FBFBFB;
-}
-
-#syncStatusMessage[message-type="migration"] #syncStatusMessageTitle {
-  display: none;
-}
-
-#syncStatusMessageTitle {
-  font-weight: bold !important;
-  font-size: 16px;
-  line-height: 157%;
-  margin: 0 0 20px;
-}
-
-#syncStatusMessageDescription {
-  font-size: 14px;
-  line-height: 158%;
-  margin: 0 !important;
-}
-
-#syncStatusMessageClose {
-  margin: 0px;
-}
-
 #fxaSyncEngines > vbox:first-child {
   margin-right: 80px;
 }
 
 #fxaSyncComputerName {
   margin-inline-start: 0px;
   -moz-box-flex: 1;
 }