diff --git a/browser/base/content/browser-fxaccounts.js b/browser/base/content/browser-fxaccounts.js index fbfa6997dfe..d6cbccc865c 100644 --- a/browser/base/content/browser-fxaccounts.js +++ b/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; } diff --git a/browser/base/content/sync/notification.xml b/browser/base/content/sync/notification.xml index 7a2b773821c..f3b8a455903 100644 --- a/browser/base/content/sync/notification.xml +++ b/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); + } ]]> diff --git a/browser/components/preferences/in-content/sync.js b/browser/components/preferences/in-content/sync.js index b6c7951071f..fa50c5ecb71 100644 --- a/browser/components/preferences/in-content/sync.js +++ b/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", diff --git a/browser/components/preferences/sync.js b/browser/components/preferences/sync.js index cdbbb674e62..c27262c86e3 100644 --- a/browser/components/preferences/sync.js +++ b/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", diff --git a/services/sync/modules/FxaMigrator.jsm b/services/sync/modules/FxaMigrator.jsm index 9fb07a3fdc2..605ee5d7fe8 100644 --- a/services/sync/modules/FxaMigrator.jsm +++ b/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"]; diff --git a/services/sync/modules/notifications.js b/services/sync/modules/notifications.js index ad83202d2b1..a40e01be602 100644 --- a/services/sync/modules/notifications.js +++ b/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 diff --git a/toolkit/themes/linux/global/notification.css b/toolkit/themes/linux/global/notification.css index cdde09b3bb4..ab39aa4d928 100644 --- a/toolkit/themes/linux/global/notification.css +++ b/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 { diff --git a/toolkit/themes/osx/global/notification.css b/toolkit/themes/osx/global/notification.css index 2d1c80ed2b4..6f812b435d0 100644 --- a/toolkit/themes/osx/global/notification.css +++ b/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; diff --git a/toolkit/themes/windows/global/notification.css b/toolkit/themes/windows/global/notification.css index 883d73756ef..05c64cfaf70 100644 --- a/toolkit/themes/windows/global/notification.css +++ b/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 {