Add sumo link to options page

src/css/options.css

@@ -29,6 +29,7 @@ label > span {
 form {
   display: flex;
   flex-direction: column;
+  padding-block-end: 1rem;
 }
 
 .settings-group p {

src/js/options.js

@@ -99,10 +99,24 @@ browser.permissions.onRemoved.addListener(resetPermissionsUi);
 document.addEventListener("DOMContentLoaded", setupOptions);
 document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
 document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
-document.querySelector("button").addEventListener("click", resetOnboarding);
 maybeShowPermissionsWarningIcon();
 for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
   document.querySelector("#open_container_"+i)
     .addEventListener("change", storeShortcutChoice);
 }
+
+document.querySelectorAll("[data-btn-id]").forEach(btn => {
+  btn.addEventListener("click", () => {
+    switch (btn.dataset.btnId) {
+    case "reset-onboarding":
+      resetOnboarding();
+      break;
+    case "moz-vpn-learn-more":
+      browser.tabs.create({
+        url: MozillaVPN.attachUtmParameters("https://support.mozilla.org/kb/protect-your-container-tabs-mozilla-vpn", "options-learn-more")
+      });
+      break;
+    }
+  });
+});
 resetPermissionsUi();

src/options.html

@@ -113,8 +113,10 @@
         </select>
       </label></p>
       <h3 data-i18n-message-id="onboarding"></h3>
-      <button data-i18n-message-id="resetOnboardingPanels"></button>
+      <button data-btn-id="reset-onboarding" data-i18n-message-id="resetOnboardingPanels"></button>
       <p><em data-i18n-message-id="onboardingToggle"></em></p>
+      <h3>Mozilla VPN</h3>
+      <button data-btn-id="moz-vpn-learn-more" data-i18n-message-id="learnMore"></button>
     </form>
     <script src="js/options.js"></script>
   </body>