From 69f06f96cc828ed0e6c4ff43584dde11583db259 Mon Sep 17 00:00:00 2001 From: groovecoder Date: Wed, 5 Jul 2017 13:27:59 -0500 Subject: [PATCH 1/2] add onboarding panel for long-press --- package.json | 2 +- webextension/background.js | 2 +- webextension/js/popup.js | 26 +++++++++++++++++++++++++- webextension/manifest.json | 2 +- webextension/popup.html | 9 ++++++++- 5 files changed, 36 insertions(+), 5 deletions(-) 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..0387aef 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -14,6 +14,7 @@ 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,8 +90,10 @@ const Logic = { // Routing to the correct panel. // If localStorage is disabled, we don't show the onboarding. - if (!localStorage || localStorage.getItem("onboarded4")) { + if (!localStorage || localStorage.getItem("onboarded5")) { this.showPanel(P_CONTAINERS_LIST); + } else if (localStorage.getItem("onboarded4")) { + this.showPanel(P_ONBOARDING_5); } else if (localStorage.getItem("onboarded3")) { this.showPanel(P_ONBOARDING_4); } else if (localStorage.getItem("onboarded2")) { @@ -385,6 +388,27 @@ Logic.registerPanel(P_ONBOARDING_4, { // Let's move to the containers list panel. document.querySelector("#onboarding-done-button").addEventListener("click", () => { localStorage.setItem("onboarded4", true); + 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. + document.querySelector("#onboarding-longpress-button").addEventListener("click", () => { + localStorage.setItem("onboarded5", true); 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 @@ How to assign sites to containers

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 + + +
+ Long-press the New Tab button to create a new container tab. +

Container tabs when you need them.

+

Long-press the New Tab button to create a new container tab.

+ Done
From e0abaa67e2fcea54d259842f030eff0d4ce52d6d Mon Sep 17 00:00:00 2001 From: Jonathan Kingston Date: Wed, 5 Jul 2017 16:07:24 -0700 Subject: [PATCH 2/2] Using browser.storage.local for onboarding stage --- webextension/js/popup.js | 78 ++++++++++++++++++++++++++++------------ 1 file changed, 56 insertions(+), 22 deletions(-) diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 0387aef..1006dab 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -9,6 +9,8 @@ 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"; @@ -90,20 +92,52 @@ const Logic = { // Routing to the correct panel. // If localStorage is disabled, we don't show the onboarding. - if (!localStorage || localStorage.getItem("onboarded5")) { - this.showPanel(P_CONTAINERS_LIST); - } else if (localStorage.getItem("onboarded4")) { - this.showPanel(P_ONBOARDING_5); - } 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() { @@ -316,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); }); }); @@ -340,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); }); }); @@ -364,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); }); }); @@ -386,8 +420,8 @@ 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); }); }, @@ -407,8 +441,8 @@ Logic.registerPanel(P_ONBOARDING_5, { // This method is called when the object is registered. initialize() { // Let's move to the containers list panel. - document.querySelector("#onboarding-longpress-button").addEventListener("click", () => { - localStorage.setItem("onboarded5", true); + Logic.addEnterHandler(document.querySelector("#onboarding-longpress-button"), async function () { + await Logic.setOnboardingStage(5); Logic.showPanel(P_CONTAINERS_LIST); }); },