Bug 1275915 - Replace sync verification panel with platform notification. r=markh

MozReview-Commit-ID: CrGGBplrHPI

--HG--
extra : transplant_source : KE%7B%7D%0C%16%40%1D%5E%B2%A6%257%9F%0B%C8%254%A99

browser/components/preferences/in-content/sync.js

@@ -184,12 +184,6 @@ var gSyncPane = {
     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)
     {
@@ -197,9 +191,6 @@ var gSyncPane = {
               .addEventListener(aEventType, aCallback.bind(gSyncPane));
     }
 
-    setEventListener("syncStatusMessageClose", "command", function () {
-      gSyncPane._closeSyncStatusMessageBox();
-    });
     setEventListener("noAccountSetup", "click", function (aEvent) {
       aEvent.stopPropagation();
       gSyncPane.openSetup(null);
@@ -593,31 +584,23 @@ var gSyncPane = {
   },
 
   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();
       }

browser/components/preferences/in-content/sync.xul

@@ -39,18 +39,6 @@
           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">

browser/locales/en-US/chrome/browser/accounts.properties

@@ -16,10 +16,10 @@ 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.

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -436,61 +436,6 @@ description > html|a {
   -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;
 }