Add ability to enable permissions from Mozilla VPN + Proxy onboarding panel

src/css/popup.css

@@ -1318,6 +1318,43 @@ input[type=text] {
   min-block-size: 360px;
 }
 
+.panel.onboarding-panel-8.optional-permissions-disabled {
+  min-block-size: 420px;
+  margin-block-end: 0;
+  margin-inline: 0;
+}
+
+.optional-permissions-disabled #moz-vpn-fw-onboarding-done {
+  display: none !important;
+}
+
+.moz-vpn-permissions {
+  padding-block: var(--marginInline);
+  padding-inline: var(--marginInline);
+  background-color: #cececf1c;
+  border-block-start: 1px solid var(--hr-grey);
+  display: none;
+}
+
+.optional-permissions-disabled .moz-vpn-permissions {
+  display: block;
+}
+
+.moz-vpn-onboarding-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding-inline: var(--marginInline);
+  padding-block-end: var(--marginInline);
+}
+
+.moz-vpn-permissions-copy {
+  padding-inline: 20px;
+  font-size: 12px;
+  margin-block-end: 16px;
+}
+
 .panel-content {
   flex: 1;
   padding-block-start: 16px;
@@ -1344,8 +1381,7 @@ input[type=text] {
 .onboarding-title {
   color: #43484e;
   font-size: var(--font-size-heading);
-  margin-block-end: 0;
+  margin-block: 12px;
-  margin-block-start: 0;
   margin-inline-end: 0;
   margin-inline-start: 0;
   max-inline-size: 80%;
@@ -2100,6 +2136,10 @@ tr:hover > td > .trash-button {
     box-shadow: 0 0 21px 3px #323139;
   }
 
+  .moz-vpn-permissions {
+    background-color: #322f3e;
+  }
+
   .blue-link {
     color: #36abfc;
   }

src/js/popup.js

@@ -643,14 +643,29 @@ Logic.registerPanel(P_ONBOARDING_8, {
 
   // This method is called when the object is registered.
   initialize() {
-    Utils.addEnterHandler(document.querySelector("#onboarding-done-btn"), async () => {
+    document.querySelectorAll(".onboarding-done").forEach(el => {
-      await Logic.setOnboardingStage(8);
+      Utils.addEnterHandler(el, async () => {
-      Logic.showPanel(P_CONTAINERS_LIST);
+        await Logic.setOnboardingStage(8);
+        Logic.showPanel(P_CONTAINERS_LIST);
+      });
     });
+
   },
 
   // This method is called when the panel is shown.
-  prepare() {
+  async prepare() {
+    const mozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
+    if (!mozillaVpnPermissionsEnabled) {
+      const panel = document.querySelector(".onboarding-panel-8");
+      panel.classList.add("optional-permissions-disabled");
+
+      Utils.addEnterHandler(panel.querySelector("#onboarding-enable-permissions"), async () => {
+        const granted = await browser.permissions.request({ permissions: ["proxy", "nativeMessaging"] });
+        if (granted) {
+          await Logic.setOnboardingStage(8);
+        }
+      });
+    }
     return Promise.resolve(null);
   },
 });
@@ -1543,7 +1558,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
         const mozillaVpnInstalled = await browser.runtime.sendMessage({ method: "MozillaVPN_getInstallationStatus" });
         const mozillaVpnConnected = await browser.runtime.sendMessage({ method: "MozillaVPN_getConnectionStatus" });
 
-        this.subtitle.textContent = browser.i18n.getMessage("protectThisContainer");
+        this.subtitle.textContent = browser.i18n.getMessage("integrateContainers");
 
         const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
 

src/popup.html

@@ -62,11 +62,22 @@
   </div>
 
   <div class="panel onboarding onboarding-panel-8 hide" id="onboarding-panel-8">
-    <img class="onboarding-img" alt="" src="/img/moz-vpn-onboarding.svg" />
+    <div class="moz-vpn-onboarding-content">
-    <h3 class="onboarding-title" data-i18n-message-id="proxyNowAvailable"></h3>
+      <img class="onboarding-img" alt="" src="/img/moz-vpn-onboarding.svg" />
-    <p data-i18n-message-id="onboarding-8-description"></p>
+      <h3 class="onboarding-title" data-i18n-message-id="proxyNowAvailable"></h3>
-    <div class="half-button-wrapper">
+      <p data-i18n-message-id="onboarding-8-description"></p>
-      <a href="#" id="onboarding-done-btn" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="done"></a>
+    </div>
+    <div id="moz-vpn-fw-onboarding-done" class="half-button-wrapper">
+      <a id="moz-vpn-fw-onboarding-done" href="#" class="half-onboarding-button keyboard-nav onboarding-done" tabindex="0" data-i18n-message-id="done"></a>
+    </div>
+    <div class="moz-vpn-permissions">
+      <div class="moz-vpn-permissions-copy">
+        <span data-i18n-message-id="mozillaVpnRequiresAdditionalPermissions"></span>
+      </div>
+      <div class="half-button-wrapper">
+        <a href="#" id="permissions-not-now" class="half-onboarding-button grey-button keyboard-nav onboarding-done" tabindex="0" data-i18n-message-id="notNow"></a>
+        <a href="#" id="onboarding-enable-permissions" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="enable"></a>
+      </div>
     </div>
   </div>
 
@@ -176,7 +187,7 @@
       </div>
       <div class="collapsible-content flx-col controller-collapsible-content">
         <div class="flx-row flx-space-between">
-          <span class="moz-vpn-subtitle" data-i18n-message-id="protectYourContainers"></span>
+          <span class="moz-vpn-subtitle" data-i18n-message-id="integrateContainers"></span>
         </div>
         <button id="moz-vpn-learn-more" class="moz-vpn-cta primary-cta" data-i18n-message-id="getMozillaVpn"></button>
       </div>