added onboarding panel

src/css/popup.css

@@ -974,3 +974,9 @@ span ~ .panel-header-text {
 .amo-rate-cta {
   background: #0f1126;
 }
+
+.no-sync {
+  margin-left: 160px;
+  line-height: 0px;
+  text-decoration: underline;
+}

src/js/popup.js

@@ -17,6 +17,7 @@ const P_ONBOARDING_2 = "onboarding2";
 const P_ONBOARDING_3 = "onboarding3";
 const P_ONBOARDING_4 = "onboarding4";
 const P_ONBOARDING_5 = "onboarding5";
+const P_ONBOARDING_6 = "onboarding6";
 const P_CONTAINERS_LIST = "containersList";
 const P_CONTAINERS_EDIT = "containersEdit";
 const P_CONTAINER_INFO = "containerInfo";
@@ -99,9 +100,12 @@ const Logic = {
     }
 
     switch (onboarded) {
-    case 5:
+    case 6:
       this.showAchievementOrContainersListPanel();
       break;
+    case 5:
+      this.showPanel(P_ONBOARDING_6);
+      break;
     case 4:
       this.showPanel(P_ONBOARDING_5);
       break;
@@ -503,6 +507,39 @@ Logic.registerPanel(P_ONBOARDING_5, {
     // Let's move to the containers list panel.
     Logic.addEnterHandler(document.querySelector("#onboarding-longpress-button"), async () => {
       await Logic.setOnboardingStage(5);
+      Logic.showPanel(P_ONBOARDING_6);
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    return Promise.resolve(null);
+  },
+});
+
+// P_ONBOARDING_6: Sixth page for Onboarding: new tab long-press behavior
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_ONBOARDING_6, {
+  panelSelector: ".onboarding-panel-6",
+
+  // This method is called when the object is registered.
+  initialize() {
+    // Let's move to the containers list panel.
+    Logic.addEnterHandler(document.querySelector("#start-sync-button"), async () => {
+      await Logic.setOnboardingStage(6);
+      await browser.storage.local.set({syncEnabled: true});
+      await browser.runtime.sendMessage({
+        method: "resetSync"
+      });
+      Logic.showPanel(P_CONTAINERS_LIST);
+    });
+    Logic.addEnterHandler(document.querySelector("#no-sync"), async () => {
+      await Logic.setOnboardingStage(6);
+      await browser.storage.local.set({syncEnabled: false});
+      await browser.runtime.sendMessage({
+        method: "resetSync"
+      });
       Logic.showPanel(P_CONTAINERS_LIST);
     });
   },

src/popup.html

@@ -64,7 +64,15 @@
     <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>
+    <a href="#" id="onboarding-longpress-button" class="onboarding-button">Next</a>
+  </div>
+
+  <div class="panel onboarding onboarding-panel-6 hide" id="onboarding-panel-6">
+    <img class="onboarding-img" alt="Click below to start syncing" src="/img/onboarding-3.png" />
+    <h3 class="onboarding-title">Container and site assignments everywhere.</h3>
+    <p>Now containers will sync between installs of the add-on.</p>
+    <a href="#" id="start-sync-button" class="onboarding-button">Start Syncing</a>
+    <div><a herf="#" id="no-sync" class="no-sync">No Thanks</a></div>
   </div>
 
   <div class="panel achievement-panel hide" id="achievement-panel">