Merge pull request #506 from mozilla/assignment-onboarding

Assignment onboarding panel and icon badge

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
   "env": {
     "browser": true,
     "es6": true,

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();

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);
     });
   },

webextension/popup.html

@@ -27,6 +27,13 @@
     <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>
+  </div>
+
+  <div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
+    <img class="onboarding-img" alt="How to assign sites to containers" src="/img/onboarding-4.png" />
+    <h3 class="onboarding-title">Always open sites in the containers you want.</h3>
+    <p>Right-click inside a container tab to assign the site to always open in the container.</p>
     <a href="#" id="onboarding-done-button" class="onboarding-button">Done</a>
   </div>