diff --git a/package.json b/package.json
index 9c2ab39..6311822 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "testpilot-containers",
"title": "Containers Experiment",
"description": "Containers works by isolating cookie jars using separate origin-attributes defined visually by colored ‘Container Tabs’. This add-on is a modified version of the containers feature for Firefox Test Pilot.",
- "version": "2.3.0",
+ "version": "2.4.0",
"author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
"bugs": {
"url": "https://github.com/mozilla/testpilot-containers/issues"
diff --git a/webextension/background.js b/webextension/background.js
index a4e5d3d..2884dfd 100644
--- a/webextension/background.js
+++ b/webextension/background.js
@@ -1,4 +1,4 @@
-const MAJOR_VERSIONS = ["2.3.0"];
+const MAJOR_VERSIONS = ["2.3.0", "2.4.0"];
const LOOKUP_KEY = "$ref";
const assignManager = {
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index bd371d2..1006dab 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -9,11 +9,14 @@ const DEFAULT_COLOR = "blue";
const DEFAULT_ICON = "circle";
const NEW_CONTAINER_ID = "new";
+const ONBOARDING_STORAGE_KEY = "onboarding-stage";
+
// List of panels
const P_ONBOARDING_1 = "onboarding1";
const P_ONBOARDING_2 = "onboarding2";
const P_ONBOARDING_3 = "onboarding3";
const P_ONBOARDING_4 = "onboarding4";
+const P_ONBOARDING_5 = "onboarding5";
const P_CONTAINERS_LIST = "containersList";
const P_CONTAINERS_EDIT = "containersEdit";
const P_CONTAINER_INFO = "containerInfo";
@@ -89,18 +92,52 @@ const Logic = {
// Routing to the correct panel.
// If localStorage is disabled, we don't show the onboarding.
- if (!localStorage || localStorage.getItem("onboarded4")) {
- this.showPanel(P_CONTAINERS_LIST);
- } else if (localStorage.getItem("onboarded3")) {
- this.showPanel(P_ONBOARDING_4);
- } else if (localStorage.getItem("onboarded2")) {
- this.showPanel(P_ONBOARDING_3);
- } else if (localStorage.getItem("onboarded1")) {
- this.showPanel(P_ONBOARDING_2);
- } else {
- this.showPanel(P_ONBOARDING_1);
+ const data = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]);
+ let onboarded = data[ONBOARDING_STORAGE_KEY];
+ if (!onboarded) {
+ // Legacy local storage used before panel 5
+ if (localStorage.getItem("onboarded4")) {
+ onboarded = 4;
+ } else if (localStorage.getItem("onboarded3")) {
+ onboarded = 3;
+ } else if (localStorage.getItem("onboarded2")) {
+ onboarded = 2;
+ } else if (localStorage.getItem("onboarded1")) {
+ onboarded = 1;
+ } else {
+ onboarded = 0;
+ }
+ this.setOnboardingStage(onboarded);
}
+ switch (onboarded) {
+ case 5:
+ this.showPanel(P_CONTAINERS_LIST);
+ break;
+ case 4:
+ this.showPanel(P_ONBOARDING_5);
+ break;
+ case 3:
+ this.showPanel(P_ONBOARDING_4);
+ break;
+ case 2:
+ this.showPanel(P_ONBOARDING_3);
+ break;
+ case 1:
+ this.showPanel(P_ONBOARDING_2);
+ break;
+ case 0:
+ default:
+ this.showPanel(P_ONBOARDING_1);
+ break;
+ }
+
+ },
+
+ setOnboardingStage(stage) {
+ return browser.storage.local.set({
+ [ONBOARDING_STORAGE_KEY]: stage
+ });
},
async clearBrowserActionBadge() {
@@ -313,8 +350,8 @@ Logic.registerPanel(P_ONBOARDING_1, {
initialize() {
// Let's move to the next panel.
[...document.querySelectorAll(".onboarding-start-button")].forEach(startElement => {
- Logic.addEnterHandler(startElement, () => {
- localStorage.setItem("onboarded1", true);
+ Logic.addEnterHandler(startElement, async function () {
+ await Logic.setOnboardingStage(1);
Logic.showPanel(P_ONBOARDING_2);
});
});
@@ -337,8 +374,8 @@ Logic.registerPanel(P_ONBOARDING_2, {
initialize() {
// Let's move to the containers list panel.
[...document.querySelectorAll(".onboarding-next-button")].forEach(nextElement => {
- Logic.addEnterHandler(nextElement, () => {
- localStorage.setItem("onboarded2", true);
+ Logic.addEnterHandler(nextElement, async function () {
+ await Logic.setOnboardingStage(2);
Logic.showPanel(P_ONBOARDING_3);
});
});
@@ -361,8 +398,8 @@ Logic.registerPanel(P_ONBOARDING_3, {
initialize() {
// Let's move to the containers list panel.
[...document.querySelectorAll(".onboarding-almost-done-button")].forEach(almostElement => {
- Logic.addEnterHandler(almostElement, () => {
- localStorage.setItem("onboarded3", true);
+ Logic.addEnterHandler(almostElement, async function () {
+ await Logic.setOnboardingStage(3);
Logic.showPanel(P_ONBOARDING_4);
});
});
@@ -383,8 +420,29 @@ Logic.registerPanel(P_ONBOARDING_4, {
// This method is called when the object is registered.
initialize() {
// Let's move to the containers list panel.
- document.querySelector("#onboarding-done-button").addEventListener("click", () => {
- localStorage.setItem("onboarded4", true);
+ Logic.addEnterHandler(document.querySelector("#onboarding-done-button"), async function () {
+ await Logic.setOnboardingStage(4);
+ Logic.showPanel(P_ONBOARDING_5);
+ });
+ },
+
+ // This method is called when the panel is shown.
+ prepare() {
+ return Promise.resolve(null);
+ },
+});
+
+// P_ONBOARDING_5: Fifth page for Onboarding: new tab long-press behavior
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_ONBOARDING_5, {
+ panelSelector: ".onboarding-panel-5",
+
+ // This method is called when the object is registered.
+ initialize() {
+ // Let's move to the containers list panel.
+ Logic.addEnterHandler(document.querySelector("#onboarding-longpress-button"), async function () {
+ await Logic.setOnboardingStage(5);
Logic.showPanel(P_CONTAINERS_LIST);
});
},
diff --git a/webextension/manifest.json b/webextension/manifest.json
index e0ddc0e..c2413a9 100644
--- a/webextension/manifest.json
+++ b/webextension/manifest.json
@@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Containers Experiment",
- "version": "2.3.0",
+ "version": "2.4.0",
"description": "Containers works by isolating cookie jars using separate origin-attributes defined visually by colored ‘Container Tabs’. This add-on is a modified version of the containers feature for Firefox Test Pilot.",
"icons": {
diff --git a/webextension/popup.html b/webextension/popup.html
index bfca0ec..8123f97 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -57,7 +57,14 @@
Always open sites in the containers you want.
Right-click inside a container tab to assign the site to always open in the container.
- Done
+ Next
+
+
+
+
+
Container tabs when you need them.
+
Long-press the New Tab button to create a new container tab.
+
Done