for #498: security onboarding panels and logic

webextension/js/popup.js

@@ -70,15 +70,19 @@ const Logic = {
   _currentPanel: null,
   _previousPanel: null,
   _panels: {},
+  _onboardingVariation: null,
 
   init() {
     // Remove browserAction "upgraded" badge when opening panel
     this.clearBrowserActionBadge();
 
     // Retrieve the list of identities.
-    this.refreshIdentities()
+    const identitiesPromise = this.refreshIdentities();
+    // Get the onboarding variation
+    const variationPromise = this.getShieldStudyVariation();
 
     // Routing to the correct panel.
+    Promise.all([identitiesPromise, variationPromise])
     .then(() => {
       // If localStorage is disabled, we don't show the onboarding.
       if (!localStorage || localStorage.getItem("onboarded4")) {
@@ -160,6 +164,15 @@ const Logic = {
     }).catch((e) => {throw e;});
   },
 
+  getPanelSelector(panel) {
+    if (this._onboardingVariation === "securityOnboarding" &&
+        panel.hasOwnProperty("securityPanelSelector")) {
+      return panel.securityPanelSelector;
+    } else {
+      return panel.panelSelector;
+    }
+  },
+
   async showPanel(panel, currentIdentity = null) {
     // Invalid panel... ?!?
     if (!(panel in this._panels)) {
@@ -175,7 +188,7 @@ const Logic = {
     await this._panels[panel].prepare();
     Object.keys(this._panels).forEach((panelKey) => {
       const panelItem = this._panels[panelKey];
-      const panelElement = document.querySelector(panelItem.panelSelector);
+      const panelElement = document.querySelector(this.getPanelSelector(panelItem));
       if (!panelElement.classList.contains("hide")) {
         panelElement.classList.add("hide");
         if ("unregister" in panelItem) {
@@ -183,7 +196,7 @@ const Logic = {
         }
       }
     });
-    document.querySelector(this._panels[panel].panelSelector).classList.remove("hide");
+    document.querySelector(this.getPanelSelector(this._panels[panel])).classList.remove("hide");
   },
 
   showPreviousPanel() {
@@ -258,6 +271,14 @@ const Logic = {
     });
   },
 
+  getShieldStudyVariation() {
+    return browser.runtime.sendMessage({
+      method: "getShieldStudyVariation"
+    }).then(variation => {
+      this._onboardingVariation = variation;
+    });
+  },
+
   generateIdentityName() {
     const defaultName = "Container #";
     const ids = [];
@@ -286,13 +307,16 @@ const Logic = {
 
 Logic.registerPanel(P_ONBOARDING_1, {
   panelSelector: ".onboarding-panel-1",
+  securityPanelSelector: ".security-onboarding-panel-1",
 
   // This method is called when the object is registered.
   initialize() {
     // Let's move to the next panel.
-    Logic.addEnterHandler(document.querySelector("#onboarding-start-button"), () => {
-      localStorage.setItem("onboarded1", true);
-      Logic.showPanel(P_ONBOARDING_2);
+    [...document.querySelectorAll(".onboarding-start-button")].forEach(startElement => {
+      Logic.addEnterHandler(startElement, () => {
+        localStorage.setItem("onboarded1", true);
+        Logic.showPanel(P_ONBOARDING_2);
+      });
     });
   },
 
@@ -307,13 +331,16 @@ Logic.registerPanel(P_ONBOARDING_1, {
 
 Logic.registerPanel(P_ONBOARDING_2, {
   panelSelector: ".onboarding-panel-2",
+  securityPanelSelector: ".security-onboarding-panel-2",
 
   // This method is called when the object is registered.
   initialize() {
     // Let's move to the containers list panel.
-    Logic.addEnterHandler(document.querySelector("#onboarding-next-button"), () => {
-      localStorage.setItem("onboarded2", true);
-      Logic.showPanel(P_ONBOARDING_3);
+    [...document.querySelectorAll(".onboarding-next-button")].forEach(nextElement => {
+      Logic.addEnterHandler(nextElement, () => {
+        localStorage.setItem("onboarded2", true);
+        Logic.showPanel(P_ONBOARDING_3);
+      });
     });
   },
 
@@ -328,13 +355,16 @@ Logic.registerPanel(P_ONBOARDING_2, {
 
 Logic.registerPanel(P_ONBOARDING_3, {
   panelSelector: ".onboarding-panel-3",
+  securityPanelSelector: ".security-onboarding-panel-3",
 
   // This method is called when the object is registered.
   initialize() {
     // Let's move to the containers list panel.
-    Logic.addEnterHandler(document.querySelector("#onboarding-almost-done-button"), () => {
-      localStorage.setItem("onboarded3", true);
-      Logic.showPanel(P_ONBOARDING_4);
+    [...document.querySelectorAll(".onboarding-almost-done-button")].forEach(almostElement => {
+      Logic.addEnterHandler(almostElement, () => {
+        localStorage.setItem("onboarded3", true);
+        Logic.showPanel(P_ONBOARDING_4);
+      });
     });
   },