Bug 1380963 - Display different welcome messages for update or new users on the overlay tour icon.r=mossop, Gasolin, flod
MozReview-Commit-ID: A8DxVkSz9dX
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -36,22 +36,23 @@
#onboarding-notification-icon::after,
#onboarding-overlay-icon::after {
background: #5ce6e6;
position: absolute;
font-size: 12px;
border: 1px solid #fff;
text-align: center;
color: #10404a;
+ box-sizing: content-box;
}
#onboarding-overlay-icon::after {
content: attr(aria-label);
top: -6px;
- offset-inline-start: 32px;
+ offset-inline-start: 39px;
border-radius: 22px;
padding: 5px 8px;
min-width: 100px;
}
#onboarding-overlay-dialog,
.onboarding-hidden {
display: none;
@@ -421,17 +422,17 @@
background-position: right 34px center;
}
#onboarding-notification-icon::after {
--height: 22px;
--vpadding: 3px;
content: attr(data-tooltip);
top: 0;
- offset-inline-start: 68px;
+ offset-inline-start: 73px;
line-height: calc(var(--height) - var(--vpadding) * 2);
border-radius: calc(var(--height) / 2);
padding: var(--vpadding) 10px;
}
#onboarding-notification-close-btn {
background-color: rgba(255, 255, 255, 0.97);
border: none;
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -232,18 +232,19 @@ var onboardingTourset = {
class Onboarding {
constructor(contentWindow) {
this.init(contentWindow);
}
async init(contentWindow) {
this._window = contentWindow;
this._tours = [];
+ this._tourType = Services.prefs.getStringPref("browser.onboarding.tour-type", "update");
- let tourIds = this._getTourIDList(Services.prefs.getStringPref("browser.onboarding.tour-type", "update"));
+ let tourIds = this._getTourIDList();
tourIds.forEach(tourId => {
if (onboardingTourset[tourId]) {
this._tours.push(onboardingTourset[tourId]);
}
});
if (this._tours.length === 0) {
return;
@@ -294,18 +295,18 @@ class Onboarding {
this._loadJS(TOUR_AGENT_JS_URI);
this._initPrefObserver();
// Doing tour notification takes some effort. Let's do it on idle.
this._window.requestIdleCallback(() => this._initNotification());
}
- _getTourIDList(tourType) {
- let tours = Services.prefs.getStringPref(`browser.onboarding.${tourType}tour`, "");
+ _getTourIDList() {
+ let tours = Services.prefs.getStringPref(`browser.onboarding.${this._tourType}tour`, "");
return tours.split(",").filter(tourId => tourId !== "").map(tourId => tourId.trim());
}
_initNotification() {
let doc = this._window.document;
if (doc.hidden) {
// When the preloaded-browser feature is on,
// it would preload an hidden about:newtab in the background.
@@ -649,17 +650,20 @@ class Onboarding {
<div id="onboarding-notification-body">
<h6 id="onboarding-notification-tour-title"></h6>
<span id="onboarding-notification-tour-message"></span>
</div>
<button id="onboarding-notification-action-btn"></button>
</section>
<button id="onboarding-notification-close-btn"></button>
`;
- let toolTip = this._bundle.formatStringFromName("onboarding.notification-icon-tool-tip", [BRAND_SHORT_NAME], 1);
+ let toolTip = this._bundle.formatStringFromName(
+ this._tourType === "new" ? "onboarding.notification-icon-tool-tip" :
+ "onboarding.notification-icon-tooltip-updated",
+ [BRAND_SHORT_NAME], 1);
div.querySelector("#onboarding-notification-icon").setAttribute("data-tooltip", toolTip);
return div;
}
hide() {
this.setToursCompleted(this._tours.map(tour => tour.id));
this.sendMessageToChrome("set-prefs", [
{
@@ -695,17 +699,21 @@ class Onboarding {
this._bundle.GetStringFromName("onboarding.hidden-checkbox-label-text");
div.querySelector("#onboarding-header").textContent =
this._bundle.GetStringFromName("onboarding.overlay-title2");
return div;
}
_renderOverlayIcon() {
let img = this._window.document.createElement("div");
- let tooltip = this._bundle.formatStringFromName("onboarding.overlay-icon-tooltip", [BRAND_SHORT_NAME], 1);
+ let tooltip = this._bundle.formatStringFromName(
+ this._tourType === "new" ? "onboarding.overlay-icon-tooltip" :
+ "onboarding.overlay-icon-tooltip-updated",
+ [BRAND_SHORT_NAME], 1);
+
img.setAttribute("aria-label", tooltip);
img.id = "onboarding-overlay-icon";
return img;
}
_loadTours(tours) {
let itemsFrag = this._window.document.createDocumentFragment();
let pagesFrag = this._window.document.createDocumentFragment();
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -5,16 +5,19 @@
onboarding.overlay-title2=Let’s get started
onboarding.hidden-checkbox-label-text=Mark all as complete, and hide the tour
#LOCALIZATION NOTE(onboarding.button.learnMore): this string is used as a button label, displayed near the message, and shared across all the onboarding notifications.
onboarding.button.learnMore=Learn More
# LOCALIZATION NOTE(onboarding.notification-icon-tool-tip): This string will be used to show the tooltip alongside the notification icon in the notification bar. %S is brandShortName.
onboarding.notification-icon-tool-tip=New to %S?
# LOCALIZATION NOTE(onboarding.overlay-icon-tooltip): This string will be used to show the tooltip alongside the notification icon in the overlay tour. %S is brandShortName.
onboarding.overlay-icon-tooltip=New to %S? Let’s get started.
+# LOCALIZATION NOTE(onboarding.overlay-icon-tooltip-updated): %S is brandShortName.
+onboarding.overlay-icon-tooltip-updated=%S is all new. See what you can do!
+onboarding.notification-icon-tooltip-updated=See what’s new!
onboarding.tour-search2=Search
onboarding.tour-search.title2=Find it faster.
# LOCALIZATION NOTE (onboarding.tour-search.description2): If Amazon is not part
# of the default searchplugins for your locale, you can replace it with another
# ecommerce website (if you're shipping one), but not with a general purpose
# search engine (Google, Bing, Yandex, etc.). Alternatively, only reference
# Wikipedia and drop Amazon from the text.