added second onboarding panel

src/css/popup.css

@@ -357,11 +357,11 @@ table {
 }
 
 .half-button-wrapper {
-  width: 100%;
-  flex-direction: row;
-  display: flex;
   align-items: center;
+  display: flex;
+  flex-direction: row;
   height: 44px;
+  inline-size: 100%;
 }
 
 .half-onboarding-button {
@@ -370,18 +370,18 @@ table {
   border-radius: 3px;
   color: white;
   display: flex;
+  flex: 1 0 auto;
   font-size: 14px;
+  height: 44px;
   inline-size: 50%;
   justify-content: center;
+  margin-inline-end: 4px;
   text-decoration: none;
   transition: background-color 75ms;
-  flex: 1 0 auto;
-  height: 44px;
-  margin: 0 4px 0 0;
 }
 
 .grey-button {
-  background-color: #E3E3E3;
+  background-color: #e3e3e3;
   color: #000;
 }
 

src/img/Account.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><defs><style>.cls-1{fill:#6a57a5;}.cls-2{fill:#5a4a9e;}.cls-3{fill:#e7dfff;}</style></defs><title>account</title><path class="cls-1" d="M110,138.89A58.89,58.89,0,1,1,168.89,80,59,59,0,0,1,110,138.89Z"/><path class="cls-2" d="M110,130.27A50.27,50.27,0,1,1,160.27,80,50.33,50.33,0,0,1,110,130.27Z"/><circle class="cls-3" cx="110.39" cy="65.12" r="23.27" transform="translate(-12.01 27.1) rotate(-13.28)"/><path class="cls-3" d="M141.78,92.87c-8.2-9.46-19.58,3.28-31.39,3.28S87.2,83.41,79,92.87a7.83,7.83,0,0,0-.53,9.53,38.43,38.43,0,0,0,63.83,0A7.83,7.83,0,0,0,141.78,92.87Z"/></svg>

src/img/Sync.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><defs><style>.cls-1{fill:#9f9fad;}.cls-2{fill:#5a4a9e;}.cls-3{fill:#6a57a5;}.cls-4{fill:#8f8f9d;}.cls-5{fill:none;stroke:#80808e;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px;}.cls-6{fill:#231f20;opacity:0.4;}.cls-7{fill:#ee3389;}.cls-8{fill:#7661aa;}</style></defs><title>Sync</title><path class="cls-1" d="M119.16,122.69v4.81H19.76v-4.81l12.83-3.21h72.15Z"/><rect class="cls-1" x="24.57" y="55.35" width="89.79" height="67.34" rx="3"/><path class="cls-2" d="M79.08,65l-49.7,49.7a1.61,1.61,0,0,0,1.6,1.61h77a1.62,1.62,0,0,0,1.61-1.61V65Z"/><polygon class="cls-3" points="29.38 64.97 29.38 114.67 79.08 64.97 29.38 64.97"/><path class="cls-2" d="M107.94,60.16H31a1.6,1.6,0,0,0-1.6,1.6V65h80.17V61.76A1.61,1.61,0,0,0,107.94,60.16Z"/><path class="cls-4" d="M108.74,121.09H30.18a.81.81,0,0,1,0-1.61h78.56a.81.81,0,1,1,0,1.61Z"/><line class="cls-5" x1="63.61" y1="124.18" x2="74.83" y2="124.18"/><path class="cls-6" d="M114.35,127.35H102.2V71.64a5.53,5.53,0,0,1,5.52-5.53h6.63Z"/><path class="cls-1" d="M200.24,134.72v4.81h-99.4v-4.81l12.82-3.21h72.15Z"/><rect class="cls-1" x="105.65" y="67.38" width="89.79" height="67.34" rx="3"/><path class="cls-2" d="M160.16,77l-49.71,49.7a1.61,1.61,0,0,0,1.61,1.6h77a1.6,1.6,0,0,0,1.6-1.6V77Z"/><polygon class="cls-3" points="110.45 77 110.45 126.7 160.16 77 110.45 77"/><path class="cls-2" d="M189,72.19h-77a1.61,1.61,0,0,0-1.61,1.6V77h80.17V73.79A1.6,1.6,0,0,0,189,72.19Z"/><path class="cls-4" d="M189.82,133.11H111.26a.8.8,0,1,1,0-1.6h78.56a.8.8,0,0,1,0,1.6Z"/><line class="cls-5" x1="144.69" y1="136.2" x2="155.91" y2="136.2"/><path class="cls-7" d="M136.85,50l-3-.55a3,3,0,0,0-3.51,2.37l-.27,1.45c-1.59,8.36-9.86,14.42-19.66,14.42a21,21,0,0,1-15.93-6.89H103a3,3,0,0,0,3-3v-3a3,3,0,0,0-3-3H84.86a3,3,0,0,0-3,3V73.64a3,3,0,0,0,3,3h3a3,3,0,0,0,3-3V69.72a30.8,30.8,0,0,0,19.57,6.87c14.15,0,26.15-9.11,28.54-21.66l.27-1.45A2.94,2.94,0,0,0,136.85,50Z"/><path class="cls-8" d="M84.06,47l3,.54a3.41,3.41,0,0,0,.55,0,3,3,0,0,0,3-2.41l.27-1.45h0c1.59-8.36,9.86-14.42,19.65-14.42a21,21,0,0,1,15.94,6.89H117.9a3,3,0,0,0-3,3v3a3,3,0,0,0,3,3h18.15a3,3,0,0,0,3-3V23.43a3,3,0,0,0-3-3h-3a3,3,0,0,0-3,3v3.92a30.82,30.82,0,0,0-19.58-6.88c-14.14,0-26.14,9.11-28.53,21.67l-.27,1.45A3,3,0,0,0,84.06,47Z"/></svg>

src/js/popup.js

@@ -18,6 +18,7 @@ const P_ONBOARDING_3 = "onboarding3";
 const P_ONBOARDING_4 = "onboarding4";
 const P_ONBOARDING_5 = "onboarding5";
 const P_ONBOARDING_6 = "onboarding6";
+const P_ONBOARDING_7 = "onboarding7";
 const P_CONTAINERS_LIST = "containersList";
 const P_CONTAINERS_EDIT = "containersEdit";
 const P_CONTAINER_INFO = "containerInfo";
@@ -100,9 +101,12 @@ const Logic = {
     }
 
     switch (onboarded) {
-    case 6:
+    case 7:
       this.showAchievementOrContainersListPanel();
       break;
+    case 6:
+      this.showPanel(P_ONBOARDING_7);
+      break;
     case 5:
       this.showPanel(P_ONBOARDING_6);
       break;
@@ -532,10 +536,10 @@ Logic.registerPanel(P_ONBOARDING_6, {
       await browser.runtime.sendMessage({
         method: "resetSync"
       });
-      Logic.showPanel(P_CONTAINERS_LIST);
+      Logic.showPanel(P_ONBOARDING_7);
     });
     Logic.addEnterHandler(document.querySelector("#no-sync"), async () => {
-      await Logic.setOnboardingStage(6);
+      await Logic.setOnboardingStage(7);
       await browser.storage.local.set({syncEnabled: false});
       await browser.runtime.sendMessage({
         method: "resetSync"
@@ -550,6 +554,33 @@ Logic.registerPanel(P_ONBOARDING_6, {
   },
 });
 
+// P_ONBOARDING_6: Sixth page for Onboarding: new tab long-press behavior
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_ONBOARDING_7, {
+  panelSelector: ".onboarding-panel-7",
+
+  // This method is called when the object is registered.
+  initialize() {
+    // Let's move to the containers list panel.
+    Logic.addEnterHandler(document.querySelector("#sign-in"), async () => {
+      browser.tabs.create({
+        url: "https://accounts.firefox.com/?service=sync&utm_source=addon&utm_medium=panel&utm_campaign=container-sync",
+      });
+      await Logic.setOnboardingStage(7);
+      Logic.showPanel(P_CONTAINERS_LIST);
+    });
+    Logic.addEnterHandler(document.querySelector("#no-sign-in"), async () => {
+      await Logic.setOnboardingStage(7);
+      Logic.showPanel(P_CONTAINERS_LIST);
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    return Promise.resolve(null);
+  },
+});
 // P_CONTAINERS_LIST: The list of containers. The main page.
 // ----------------------------------------------------------------------------
 

src/popup.html

@@ -68,12 +68,22 @@
   </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" />
+    <img class="onboarding-img" alt="Syncing Containers is now Available!" src="/img/Sync.svg" />
     <h3 class="onboarding-title">Syncing Containers is now Available!</h3>
     <p>Turn on Sync to share container and site assignments with any computer connected to your Firefox Account.</p>
     <div class="half-button-wrapper">
-      <a herf="#" id="no-sync" class="half-onboarding-button grey-button">No Thanks</a>
-      <a href="https://accounts.firefox.com/?service=sync&utm_source=addon&utm_medium=panel&utm_campaign=container-sync" id="start-sync-button" class="half-onboarding-button">Start Syncing</a>
+      <a herf="#" id="no-sync" class="half-onboarding-button grey-button">Not Now</a>
+      <a href="#" id="start-sync-button" class="half-onboarding-button">Start Syncing</a>
+    </div>
+  </div>
+
+  <div class="panel onboarding onboarding-panel-7 hide" id="onboarding-panel-7">
+    <img class="onboarding-img" alt="Firefox Account is required to sync" src="/img/Account.svg" />
+    <h3 class="onboarding-title">Firefox Account is required to sync.</h3>
+    <p>Click Sign In to confirm that your Firefox Account is active.</p>
+    <div class="half-button-wrapper">
+      <a herf="#" id="no-sign-in" class="half-onboarding-button grey-button">Not Now</a>
+      <a href="#" id="sign-in" class="half-onboarding-button">Sign In</a>
     </div>
   </div>