diff --git a/.eslintrc.js b/.eslintrc.js index 68705ff..f2a7957 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,7 @@ module.exports = { + "parserOptions": { + "ecmaVersion": 8 + }, "env": { "browser": true, "es6": true, diff --git a/webextension/background.js b/webextension/background.js index 93bdd78..72bd8b8 100644 --- a/webextension/background.js +++ b/webextension/background.js @@ -1,3 +1,5 @@ +const MAJOR_VERSIONS = ["2.3.0"]; + const assignManager = { CLOSEABLE_WINDOWS: new Set([ "about:startpage", @@ -551,3 +553,22 @@ function disableAddon(tabId) { browser.browserAction.disable(tabId); browser.browserAction.setTitle({ tabId, title: "Containers disabled in Private Browsing Mode" }); } + +async function getExtensionInfo() { + const manifestPath = browser.extension.getURL("manifest.json"); + const response = await fetch(manifestPath); + const extensionInfo = await response.json(); + return extensionInfo; +} + +async function displayBrowserActionBadge() { + const extensionInfo = await getExtensionInfo(); + const storage = await browser.storage.local.get({browserActionBadgesClicked: []}); + + if (MAJOR_VERSIONS.indexOf(extensionInfo.version) > -1 && + storage.browserActionBadgesClicked.indexOf(extensionInfo.version) < 0) { + browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"}); + browser.browserAction.setBadgeText({text: "NEW"}); + } +} +displayBrowserActionBadge(); diff --git a/webextension/img/onboarding-4.png b/webextension/img/onboarding-4.png new file mode 100644 index 0000000..96e5068 Binary files /dev/null and b/webextension/img/onboarding-4.png differ diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 3980f82..b1289ae 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -12,6 +12,7 @@ const DEFAULT_ICON = "circle"; const P_ONBOARDING_1 = "onboarding1"; const P_ONBOARDING_2 = "onboarding2"; const P_ONBOARDING_3 = "onboarding3"; +const P_ONBOARDING_4 = "onboarding4"; const P_CONTAINERS_LIST = "containersList"; const P_CONTAINERS_EDIT = "containersEdit"; const P_CONTAINER_INFO = "containerInfo"; @@ -54,6 +55,13 @@ function escaped(strings, ...values) { return result.join(""); } +async function getExtensionInfo() { + const manifestPath = browser.extension.getURL("manifest.json"); + const response = await fetch(manifestPath); + const extensionInfo = await response.json(); + return extensionInfo; +} + // This object controls all the panels, identities and many other things. const Logic = { _identities: [], @@ -63,14 +71,19 @@ const Logic = { _panels: {}, init() { + // Remove browserAction "upgraded" badge when opening panel + this.clearBrowserActionBadge(); + // Retrieve the list of identities. this.refreshIdentities() // Routing to the correct panel. .then(() => { // If localStorage is disabled, we don't show the onboarding. - if (!localStorage || localStorage.getItem("onboarded3")) { + 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")) { @@ -85,6 +98,15 @@ const Logic = { }); }, + async clearBrowserActionBadge() { + const extensionInfo = await getExtensionInfo(); + const storage = await browser.storage.local.get({browserActionBadgesClicked: []}); + browser.browserAction.setBadgeBackgroundColor({color: ""}); + browser.browserAction.setBadgeText({text: ""}); + storage.browserActionBadgesClicked.push(extensionInfo.version); + browser.storage.local.set({browserActionBadgesClicked: storage.browserActionBadgesClicked}); + }, + refreshIdentities() { return browser.runtime.sendMessage({ method: "queryIdentities" @@ -234,8 +256,29 @@ Logic.registerPanel(P_ONBOARDING_3, { // 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", () => { + document.querySelector("#onboarding-almost-done-button").addEventListener("click", () => { localStorage.setItem("onboarded3", true); + Logic.showPanel(P_ONBOARDING_4); + }); + }, + + // This method is called when the panel is shown. + prepare() { + return Promise.resolve(null); + }, +}); + +// P_ONBOARDING_4: Fourth page for Onboarding. +// ---------------------------------------------------------------------------- + +Logic.registerPanel(P_ONBOARDING_4, { + panelSelector: ".onboarding-panel-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.showPanel(P_CONTAINERS_LIST); }); }, diff --git a/webextension/popup.html b/webextension/popup.html index fafc66d..26c00ce 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -27,6 +27,13 @@ How Containers Work

A place for everything, and everything in its place.

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

+ Next + + +
+ 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