--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -25,16 +25,18 @@ const SPEECH_BUBBLE_MIN_WIDTH_PX = 1130;
const ICON_STATE_WATERMARK = "watermark";
const ICON_STATE_DEFAULT = "default";
/**
* Add any number of tours, key is the tourId, value should follow the format below
* "tourId": { // The short tour id which could be saved in pref
* // The unique tour id
* id: "onboarding-tour-addons",
+ * // (optional) mark tour as complete instantly when user enters the tour
+ * instantComplete: false,
* // The string id of tour name which would be displayed on the navigation bar
* tourNameId: "onboarding.tour-addon",
* // The method returing strings used on tour notification
* getNotificationStrings(bundle):
* - title: // The string of tour notification title
* - message: // The string of tour notification message
* - button: // The string of tour notification action button title
* // Return a div appended with elements for this tours.
@@ -124,16 +126,17 @@ var onboardingTourset = {
<button id="onboarding-tour-customize-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-customize.button"></button>
</aside>
`;
return div;
},
},
"default": {
id: "onboarding-tour-default-browser",
+ instantComplete: true,
tourNameId: "onboarding.tour-default-browser",
getNotificationStrings(bundle) {
return {
title: bundle.formatStringFromName("onboarding.notification.onboarding-tour-default-browser.title", [BRAND_SHORT_NAME], 1),
message: bundle.formatStringFromName("onboarding.notification.onboarding-tour-default-browser.message", [BRAND_SHORT_NAME], 1),
button: bundle.GetStringFromName("onboarding.button.learnMore"),
};
},
@@ -162,16 +165,17 @@ var onboardingTourset = {
div.addEventListener("beforeshow", () => {
win.document.dispatchEvent(new Event("Agent:CanSetDefaultBrowserInBackground"));
});
return div;
},
},
"sync": {
id: "onboarding-tour-sync",
+ instantComplete: true,
tourNameId: "onboarding.tour-sync2",
getNotificationStrings(bundle) {
return {
title: bundle.GetStringFromName("onboarding.notification.onboarding-tour-sync.title"),
message: bundle.GetStringFromName("onboarding.notification.onboarding-tour-sync.message"),
button: bundle.GetStringFromName("onboarding.button.learnMore"),
};
},
@@ -271,16 +275,17 @@ var onboardingTourset = {
<button id="onboarding-tour-singlesearch-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-singlesearch.button"></button>
</aside>
`;
return div;
},
},
"performance": {
id: "onboarding-tour-performance",
+ instantComplete: true,
tourNameId: "onboarding.tour-performance",
getNotificationStrings(bundle) {
return {
title: bundle.GetStringFromName("onboarding.notification.onboarding-tour-performance.title"),
message: bundle.formatStringFromName("onboarding.notification.onboarding-tour-performance.message", [BRAND_SHORT_NAME], 1),
button: bundle.GetStringFromName("onboarding.button.learnMore"),
};
},
@@ -801,36 +806,32 @@ class Onboarding {
if (tab.id == tourId) {
tab.classList.add("onboarding-active");
tab.setAttribute("aria-selected", true);
telemetry({
event: "overlay-nav-click",
tour_id: tourId,
session_key: this._session_key,
});
+
+ // some tours should completed instantly upon showing.
+ if (tab.getAttribute("data-instant-complete")) {
+ this.setToursCompleted([tourId]);
+ // also track auto completed tour so we can filter data with the same event
+ telemetry({
+ event: "overlay-cta-click",
+ tour_id: tourId,
+ session_key: this._session_key,
+ });
+ }
} else {
tab.classList.remove("onboarding-active");
tab.setAttribute("aria-selected", false);
}
}
-
- switch (tourId) {
- // These tours should tagged completed instantly upon showing.
- case "onboarding-tour-default-browser":
- case "onboarding-tour-sync":
- case "onboarding-tour-performance":
- this.setToursCompleted([tourId]);
- // also track auto completed tour so we can filter data with the same event
- telemetry({
- event: "overlay-cta-click",
- tour_id: tourId,
- session_key: this._session_key,
- });
- break;
- }
}
isTourCompleted(tourId) {
return Services.prefs.getBoolPref(`browser.onboarding.tour.${tourId}.completed`, false);
}
setToursCompleted(tourIds) {
let params = [];
@@ -1192,16 +1193,19 @@ class Onboarding {
li.className = "onboarding-tour-item-container";
// Focusable but not tabbable.
li.tabIndex = -1;
let tab = this._window.document.createElement("span");
tab.id = tour.id;
tab.textContent = this._bundle.GetStringFromName(tour.tourNameId);
tab.className = "onboarding-tour-item";
+ if (tour.instantComplete) {
+ tab.dataset.instantComplete = true;
+ }
tab.tabIndex = 0;
tab.setAttribute("role", "tab");
let tourPanelId = `${tour.id}-page`;
tab.setAttribute("aria-controls", tourPanelId);
li.appendChild(tab);
itemsFrag.appendChild(li);