From dc7b5ca396cce9f8b20cbf077787733a39b0a628 Mon Sep 17 00:00:00 2001
From: Lesley Norton <lesley@lesleynorton.com>
Date: Wed, 8 Dec 2021 15:58:30 -0600
Subject: [PATCH] Add sumo link to options page

---
 src/css/options.css |  1 +
 src/js/options.js   | 16 +++++++++++++++-
 src/options.html    |  4 +++-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/css/options.css b/src/css/options.css
index 3ac77c0..5a6baf0 100644
--- a/src/css/options.css
+++ b/src/css/options.css
@@ -29,6 +29,7 @@ label > span {
 form {
   display: flex;
   flex-direction: column;
+  padding-block-end: 1rem;
 }
 
 .settings-group p {
diff --git a/src/js/options.js b/src/js/options.js
index 2d98a9b..311807a 100644
--- a/src/js/options.js
+++ b/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();
diff --git a/src/options.html b/src/options.html
index 4541478..607c10a 100644
--- a/src/options.html
+++ b/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>