add onboarding panel for long-press

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"

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 = {

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

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": {

webextension/popup.html

@@ -57,7 +57,14 @@
     <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>
+    <a href="#" id="onboarding-done-button" class="onboarding-button">Next</a>
+  </div>
+
+  <div class="panel onboarding onboarding-panel-5 hide" id="onboarding-panel-5">
+    <img class="onboarding-img" alt="Long-press the New Tab button to create a new container tab." src="/img/onboarding-3.png" />
+    <h3 class="onboarding-title">Container tabs when you need them.</h3>
+    <p>Long-press the New Tab button to create a new container tab.</p>
+    <a href="#" id="onboarding-longpress-button" class="onboarding-button">Done</a>
   </div>
 
   <div class="panel container-panel hide" id="container-panel">