Bug 1409977 - mark Onboarding tour will set as completed instantly via define a tour property;r=fischer draft
authorFred Lin <gasolin@gmail.com>
Mon, 30 Oct 2017 10:44:39 +0800
changeset 688505 6eb6bfb7666e421d3c4f6104e8ba3882b5b16764
parent 688337 d3910b7628b8066d3f30d58b17b5824b05768854
child 738076 7275be7af19ca2a964dfbc2664abbe7c233c56ef
push id86757
push userbmo:gasolin@mozilla.com
push dateMon, 30 Oct 2017 05:19:00 +0000
reviewersfischer
bugs1409977
milestone58.0a1
Bug 1409977 - mark Onboarding tour will set as completed instantly via define a tour property;r=fischer MozReview-Commit-ID: 4zsPzXieZap
browser/extensions/onboarding/content/onboarding.js
--- 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);