rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Lesley Norton 2021-12-06 22:19:08 -06:00
parent 567a284196
commit 8e51ea0134
No known key found for this signature in database
GPG key ID: E98FBAEE3F13956E
3 changed files with 79 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/css/popup.css
View file

@ -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;
}

21
src/js/popup.js
View file

@ -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 => {
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();

15
src/popup.html
View file

@ -62,11 +62,22 @@
</div>
<div class="panel onboarding onboarding-panel-8 hide" id="onboarding-panel-8">
<div class="moz-vpn-onboarding-content">
<img class="onboarding-img" alt="" src="/img/moz-vpn-onboarding.svg" />
<h3 class="onboarding-title" data-i18n-message-id="proxyNowAvailable"></h3>
<p data-i18n-message-id="onboarding-8-description"></p>
</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="onboarding-done-btn" class="half-onboarding-button keyboard-nav" tabindex="0" data-i18n-message-id="done"></a>
<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>