for #498: security onboarding panels and logic

index.js

@@ -222,6 +222,7 @@ const ContainerService = {
       "getPreference",
       "sendTelemetryPayload",
       "getTheme",
+      "getShieldStudyVariation",
       "refreshNeeded",
       "forgetIdentityAndRefresh",
       "checkIncompatibleAddons"
@@ -332,6 +333,7 @@ const ContainerService = {
 
     if (self.id === "@shield-study-containers") {
       study.startup(reason);
+      this.shieldStudyVariation = study.variation;
     }
   },
 
@@ -375,6 +377,10 @@ const ContainerService = {
     });
   },
 
+  getShieldStudyVariation() {
+    return this.shieldStudyVariation;
+  },
+
   // utility methods
 
   _containerTabCount(userContextId) {

package.json

@@ -43,7 +43,7 @@
   },
   "scripts": {
     "build": "npm test && jpm xpi",
-    "build-shield": "npm test && json -I -f package.json -e 'this.name=\"shield-study-containers\"' && jpm xpi && json -I -f package.json -e 'this.name=\"testpilot-containers\"'",
+    "build-shield": "npm test && npm run package-shield",
     "deploy": "deploy-txp",
     "lint": "npm-run-all lint:*",
     "lint:addon": "addons-linter webextension --self-hosted",
@@ -51,6 +51,7 @@
     "lint:html": "htmllint webextension/*.html",
     "lint:js": "eslint .",
     "package": "npm run build && mv testpilot-containers.xpi addon.xpi",
+    "package-shield": "json -I -f package.json -e 'this.name=\"shield-study-containers\"' && jpm xpi && json -I -f package.json -e 'this.name=\"testpilot-containers\"'",
     "test": "npm run lint"
   },
   "updateURL": "https://testpilot.firefox.com/files/@testpilot-containers/updates.json"

study.js

@@ -15,9 +15,7 @@ const studyConfig = {
   },
   variations: {
     "control": () => {},
-    "privacyOnboarding": () => {},
+    "securityOnboarding": () => {}
-    "onlineAccountsOnboarding": () => {},
-    "tabManagementOnboarding": () => {}
   }
 };
 

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"), () => {
+    [...document.querySelectorAll(".onboarding-start-button")].forEach(startElement => {
-      localStorage.setItem("onboarded1", true);
+      Logic.addEnterHandler(startElement, () => {
-      Logic.showPanel(P_ONBOARDING_2);
+        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"), () => {
+    [...document.querySelectorAll(".onboarding-next-button")].forEach(nextElement => {
-      localStorage.setItem("onboarded2", true);
+      Logic.addEnterHandler(nextElement, () => {
-      Logic.showPanel(P_ONBOARDING_3);
+        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"), () => {
+    [...document.querySelectorAll(".onboarding-almost-done-button")].forEach(almostElement => {
-      localStorage.setItem("onboarded3", true);
+      Logic.addEnterHandler(almostElement, () => {
-      Logic.showPanel(P_ONBOARDING_4);
+        localStorage.setItem("onboarded3", true);
+        Logic.showPanel(P_ONBOARDING_4);
+      });
     });
   },
 

webextension/popup.html

@@ -7,28 +7,50 @@
 </head>
 <body>
 
-  <div class="hide panel onboarding onboarding-panel-1" id="onboarding-panel-1">
+  <div class="hide panel onboarding onboarding-panel-1">
     <img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
     <h3 class="onboarding-title">A better way to manage all the things you do online</h3>
     <p>
       Use containers to organize tasks, manage accounts, and keep your focus where you want it.
     </p>
-    <a href="#" id="onboarding-start-button" class="onboarding-button">Get Started</a>
+    <a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
   </div>
 
+  <div class="hide panel onboarding security-onboarding-panel-1">
+    <img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
+    <h3 class="onboarding-title">A simple and secure way to manage your online life</h3>
+    <p>
+      Use containers to organize tasks, manage accounts, and keep your sensitive data where you want it.
+    </p>
+    <a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
+  </div>
 
-  <div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2">
+  <div class="panel onboarding onboarding-panel-2 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
     <h3 class="onboarding-title">Put containers to work for you.</h3>
     <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
-    <a href="#" id="onboarding-next-button" class="onboarding-button">Next</a>
+    <a href="#" class="onboarding-button onboarding-next-button">Next</a>
   </div>
 
-  <div class="panel onboarding onboarding-panel-3 hide" id="onboarding-panel-3">
+  <div class="panel onboarding security-onboarding-panel-2 hide">
+    <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
+    <h3 class="onboarding-title">Put containers to work for you.</h3>
+    <p>Color-coding helps you categorize your online life, find things easily, and minimize distractions.</p>
+    <a href="#" class="onboarding-button onboarding-next-button">Next</a>
+  </div>
+
+  <div class="panel onboarding onboarding-panel-3 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
     <h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
     <p>Start with the containers we've created, or create your own.</p>
-    <a href="#" id="onboarding-almost-done-button" class="onboarding-button">Next</a>
+    <a href="#" class="onboarding-button onboarding-almost-done-button">Next</a>
+  </div>
+
+  <div class="panel onboarding security-onboarding-panel-3 hide">
+    <img class="onboarding-img" alt="How Containers Work" src="/img/security-onboarding-3.png" />
+    <h3 class="onboarding-title">Use containers to secure everything within.</h3>
+    <p>Containers separate cookies and sensitive data from other containers, like surrounded by firewalls to block tracking.</p>
+    <a href="#" class="onboarding-button onboarding-almost-done-button">Next</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">