Bug 1120716 - Offer "learn more" links in the legacy-Sync-to-FxA migration UI. r=markh,Unfocused

browser/base/content/browser-fxaccounts.js

@@ -295,7 +295,7 @@ let gFxAccounts = {
         // the first device (so the user is prompted to create an account).
         // If there is an email address it is the "join the party" flow, so the
         // user is prompted to sign in with the address they previously used.
-        let msg, upgradeLabel, upgradeAccessKey;
+        let msg, upgradeLabel, upgradeAccessKey, learnMoreLink;
         if (this._migrationInfo.email) {
           msg = this.strings.formatStringFromName("signInAfterUpgradeOnOtherDevice.description",
                                                   [this._migrationInfo.email],
@@ -306,6 +306,7 @@ let gFxAccounts = {
           msg = this.strings.GetStringFromName("needUserLong");
           upgradeLabel = this.strings.GetStringFromName("upgradeToFxA.label");
           upgradeAccessKey = this.strings.GetStringFromName("upgradeToFxA.accessKey");
+          learnMoreLink = this.fxaMigrator.learnMoreLink;
         }
         note = new Weave.Notification(
           undefined, msg, undefined, Weave.Notifications.PRIORITY_WARNING, [
@@ -313,7 +314,7 @@ let gFxAccounts = {
               this._expectingNotifyClose = true;
               this.fxaMigrator.createFxAccount(window);
             }),
-          ]
+          ], learnMoreLink
         );
         break;
       }

browser/base/content/sync/notification.xml

@@ -73,6 +73,18 @@
                                              notification.priority,
                                              notification.buttons);
           node.notification = notification;
+
+          if (notification.link) {
+            let XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+            let link = node.ownerDocument.createElementNS(XULNS, "label");
+            link.className = "text-link";
+            link.setAttribute("value", notification.link.text);
+            link.href = notification.link.href;
+            let desc = node.ownerDocument.getAnonymousElementByAttribute(
+              node, "anonid", "messageText"
+            );
+            desc.appendChild(link);
+          }
         ]]></body>
       </method>
 

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

@@ -313,6 +313,16 @@ let gSyncPane = {
                                                   [email], 1) :
                           sb.GetStringFromName("needUserLong");
 
+        // The "Learn more" link.
+        if (!email) {
+          let learnMoreLink = document.createElement("label");
+          learnMoreLink.className = "text-link";
+          let { text, href } = fxaMigrator.learnMoreLink;
+          learnMoreLink.setAttribute("value", text);
+          learnMoreLink.href = href;
+          elt.appendChild(learnMoreLink);
+        }
+
         // The "upgrade" button.
         let button = document.getElementById("sync-migrate-upgrade");
         button.setAttribute("label",

browser/components/preferences/sync.js

@@ -213,6 +213,16 @@ let gSyncPane = {
                                                   [email], 1) :
                           sb.GetStringFromName("needUserLong");
 
+        // The "Learn more" link.
+        if (!email) {
+          let learnMoreLink = document.createElement("label");
+          learnMoreLink.className = "text-link";
+          let { text, href } = fxaMigrator.learnMoreLink;
+          learnMoreLink.setAttribute("value", text);
+          learnMoreLink.href = href;
+          elt.appendChild(learnMoreLink);
+        }
+
         // The "upgrade" button.
         let button = document.getElementById("sync-migrate-upgrade");
         button.setAttribute("label",

services/sync/modules/FxaMigrator.jsm

@@ -524,8 +524,22 @@ Migrator.prototype = {
       default:
         throw new Error("Unexpected telemetry flag: " + flag);
     }
-  }
-}
+  },
+
+  get learnMoreLink() {
+    try {
+      var url = Services.prefs.getCharPref("app.support.baseURL");
+    } catch (err) {
+      return null;
+    }
+    url += "sync-upgrade";
+    let sb = Services.strings.createBundle("chrome://weave/locale/services/sync.properties");
+    return {
+      text: sb.GetStringFromName("sync.eol.learnMore.label"),
+      href: Services.urlFormatter.formatURL(url),
+    };
+  },
+};
 
 // We expose a singleton
 this.EXPORTED_SYMBOLS = ["fxaMigrator"];

services/sync/modules/notifications.js

@@ -84,7 +84,7 @@ this.Notifications = {
  * A basic notification.  Subclass this to create more complex notifications.
  */
 this.Notification =
- function Notification(title, description, iconURL, priority, buttons) {
+function Notification(title, description, iconURL, priority, buttons, link) {
   this.title = title;
   this.description = description;
 
@@ -96,6 +96,9 @@ this.Notification =
 
   if (buttons)
     this.buttons = buttons;
+
+  if (link)
+    this.link = link;
 }
 
 // We set each prototype property individually instead of redefining

toolkit/themes/linux/global/notification.css

@@ -4,20 +4,36 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+notification,
+.messageText > .text-link {
+  color: InfoText !important;
+}
+
 notification {
   background-color: InfoBackground;
-  color: InfoText;
   text-shadow: none;
 }
 
+notification[type="info"],
+notification[type="info"] .messageText > .text-link {
+  color: -moz-DialogText !important;
+}
+
 notification[type="info"] {
   background-color: -moz-Dialog;
-  color: -moz-DialogText;
+}
+
+notification[type="critical"],
+notification[type="critical"] .messageText > .text-link {
+  color: white !important;
 }
 
 notification[type="critical"] {
   background-image: linear-gradient(rgb(212,0,0), rgb(152,0,0));
-  color: white;
+}
+
+.messageText > .text-link {
+  text-decoration: underline;
 }
 
 .notification-inner {

toolkit/themes/osx/global/notification.css

@@ -10,27 +10,43 @@ notification {
   text-shadow: none;
 }
 
+notification[type="info"],
+notification[type="info"] .messageText > .text-link {
+  color: rgba(255,255,255,0.95) !important;
+}
+
 notification[type="info"] {
-  color: rgba(255,255,255,0.95);
   background: url("chrome://global/skin/notification/info-bar-background.png") #404040 repeat-x top left;
   border-top: 1px solid #707070;
   border-bottom: 1px solid #2a2a2a;
 }
 
+notification[type="warning"],
+notification[type="warning"] .messageText > .text-link {
+  color: rgba(0,0,0,0.95) !important;
+}
+
 notification[type="warning"] {
-  color: rgba(0,0,0,0.95);
   background: url("chrome://global/skin/notification/warning-bar-background.png") #ffc703 repeat-x top left;
   border-top: 1px solid #ffe970;
   border-bottom: 1px solid #bf8a01;
 }
 
+notification[type="critical"],
+notification[type="critical"] .messageText > .text-link {
+  color: rgba(255,255,255,0.95) !important;
+}
+
 notification[type="critical"] {
-  color: rgba(255,255,255,0.95);
   background: url("chrome://global/skin/notification/critical-bar-background.png") #980000 repeat-x top left;
   border-top: 1px solid #e35959;
   border-bottom: 1px solid #5d0000;
 }
 
+.messageText > .text-link {
+  text-decoration: underline;
+}
+
 .messageImage {
   width: 16px;
   height: 16px;

toolkit/themes/windows/global/notification.css

@@ -4,20 +4,36 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+notification,
+.messageText > .text-link {
+  color: InfoText !important;
+}
+
 notification {
   background-color: InfoBackground;
-  color: InfoText;
   text-shadow: none;
 }
 
+notification[type="info"],
+notification[type="info"] .messageText > .text-link {
+  color: -moz-DialogText !important;
+}
+
 notification[type="info"] {
   background-color: -moz-Dialog;
-  color: -moz-DialogText;
+}
+
+notification[type="critical"],
+notification[type="critical"] .messageText > .text-link {
+  color: white !important;
 }
 
 notification[type="critical"] {
   background-image: linear-gradient(rgb(212,0,0), rgb(152,0,0));
-  color: white;
+}
+
+.messageText > .text-link {
+  text-decoration: underline;
 }
 
 .messageImage {