diff --git a/src/css/popup.css b/src/css/popup.css index f063fdd..414af8d 100644 --- a/src/css/popup.css +++ b/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-start: 0; + margin-block: 12px; 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; } diff --git a/src/js/popup.js b/src/js/popup.js index 51d34b0..5842be2 100644 --- a/src/js/popup.js +++ b/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 () => { - await Logic.setOnboardingStage(8); - Logic.showPanel(P_CONTAINERS_LIST); + document.querySelectorAll(".onboarding-done").forEach(el => { + Utils.addEnterHandler(el, async () => { + 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(); diff --git a/src/popup.html b/src/popup.html index 586d0e5..ab01ec3 100644 --- a/src/popup.html +++ b/src/popup.html @@ -62,11 +62,22 @@
- -

-

-
- +
+ +

+

+
+
+ +
+
+
+ +
+
+ + +
@@ -176,7 +187,7 @@
- +