diff --git a/index.js b/index.js index 937dc61..da9cf8d 100644 --- a/index.js +++ b/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) { diff --git a/package.json b/package.json index f910d9c..e226aad 100644 --- a/package.json +++ b/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" diff --git a/study.js b/study.js index 672e5f6..fa2bf58 100644 --- a/study.js +++ b/study.js @@ -15,9 +15,7 @@ const studyConfig = { }, variations: { "control": () => {}, - "privacyOnboarding": () => {}, - "onlineAccountsOnboarding": () => {}, - "tabManagementOnboarding": () => {} + "securityOnboarding": () => {} } }; diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 4f3e391..557d383 100644 --- a/webextension/js/popup.js +++ b/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); + }); }); }, diff --git a/webextension/popup.html b/webextension/popup.html index d7a930c..ad5ed40 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -7,28 +7,50 @@ -
+
Container Tabs Overview

A better way to manage all the things you do online

Use containers to organize tasks, manage accounts, and keep your focus where you want it.

- Get Started + Get Started
+
+ Container Tabs Overview +

A simple and secure way to manage your online life

+

+ Use containers to organize tasks, manage accounts, and keep your sensitive data where you want it. +

+ Get Started +
-
+
How Containers Work

Put containers to work for you.

Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.

- Next + Next
-
+
+ How Containers Work +

Put containers to work for you.

+

Color-coding helps you categorize your online life, find things easily, and minimize distractions.

+ Next +
+ +
How Containers Work

A place for everything, and everything in its place.

Start with the containers we've created, or create your own.

- Next + Next +
+ +
+ How Containers Work +

Use containers to secure everything within.

+

Containers separate cookies and sensitive data from other containers, like surrounded by firewalls to block tracking.

+ Next