Add Mozilla VPN & Proxy permissions block to options.html
This commit is contained in:
Lesley Norton
parent
07d7b0cad4
commit
3c3b5ae705
4 changed files with 99 additions and 32 deletions
|
|
@ -1,6 +1,11 @@
|
|||
body {
|
||||
--grey10: #e7e7e7;
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
background: #fff;
|
||||
color: #202023;
|
||||
color: rgb(74, 74, 79);
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h3:first-of-type {
|
||||
|
|
@ -8,13 +13,13 @@ h3:first-of-type {
|
|||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
label > span {
|
||||
padding-block-start: 3px;
|
||||
padding-inline-end: 4px;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
|
|
@ -26,10 +31,6 @@ form {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgb(74, 74, 79);
|
||||
}
|
||||
|
||||
.settings-group p {
|
||||
margin-inline-start: 24px;
|
||||
margin-block: 4px 8px;
|
||||
|
|
@ -37,6 +38,7 @@ p {
|
|||
|
||||
input[type="checkbox"] {
|
||||
margin-inline: 0 8px;
|
||||
margin-block: 1px auto;
|
||||
inline-size: 16px;
|
||||
block-size: 16px;
|
||||
}
|
||||
|
|
@ -50,14 +52,51 @@ button {
|
|||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
max-inline-size: 70%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.moz-vpn-proxy-permissions {
|
||||
border-radius: 1rem;
|
||||
padding-inline: 4rem;
|
||||
padding-block: 2rem 1rem;
|
||||
margin-block: 0 2rem;
|
||||
border: 1px solid var(--grey10);
|
||||
}
|
||||
|
||||
h3.moz-vpn-proxy-permissions-title {
|
||||
margin-block: 0 1rem;
|
||||
margin-inline: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.moz-vpn-proxy-permissions-title.show-warning::before {
|
||||
background-image: url("/img/warning.svg");
|
||||
background-size: 24px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
inset-inline-start: -2.5rem;
|
||||
content: "";
|
||||
display: block;
|
||||
block-size: 24px;
|
||||
inline-size: 24px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #202023;
|
||||
background: #23212a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.moz-vpn-proxy-permissions {
|
||||
border-color: transparent;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgb(177, 177, 179);
|
||||
}
|
||||
|
|
|
|||
17
src/img/warning.svg
Normal file
17
src/img/warning.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_773_14374)">
|
||||
<path d="M19.7573 12.6702L14.0576 1.2724C13.8664 0.890072 13.5726 0.568517 13.209 0.343779C12.8454 0.119041 12.4263 0 11.9989 0C11.5714 0 11.1523 0.119041 10.7887 0.343779C10.4251 0.568517 10.1313 0.890072 9.94015 1.2724L4.24044 12.6748C4.06617 13.0254 3.98427 13.4148 4.00249 13.8059C4.02072 14.1971 4.13847 14.5771 4.3446 14.91C4.55073 15.243 4.83842 15.5178 5.18045 15.7085C5.52247 15.8993 5.90752 15.9996 6.29915 16H17.6974C18.0898 16.0002 18.4757 15.9001 18.8184 15.7092C19.1612 15.5183 19.4495 15.2429 19.6558 14.9093C19.8622 14.5757 19.9799 14.1948 19.9976 13.8029C20.0154 13.411 19.9327 13.0211 19.7573 12.6702V12.6702ZM10.8481 4.49406C10.8481 4.18891 10.9693 3.89625 11.1851 3.68047C11.401 3.46469 11.6937 3.34347 11.9989 3.34347C12.3041 3.34347 12.5968 3.46469 12.8126 3.68047C13.0284 3.89625 13.1496 4.18891 13.1496 4.49406V9.09644C13.1496 9.40159 13.0284 9.69425 12.8126 9.91003C12.5968 10.1258 12.3041 10.247 11.9989 10.247C11.6937 10.247 11.401 10.1258 11.1851 9.91003C10.9693 9.69425 10.8481 9.40159 10.8481 9.09644V4.49406ZM11.9989 13.9865C11.7144 13.9865 11.4362 13.9021 11.1997 13.7441C10.9631 13.586 10.7788 13.3614 10.6699 13.0986C10.561 12.8358 10.5325 12.5466 10.588 12.2676C10.6435 11.9886 10.7805 11.7324 10.9817 11.5312C11.1829 11.3301 11.4392 11.1931 11.7182 11.1376C11.9973 11.0821 12.2865 11.1106 12.5493 11.2195C12.8122 11.3283 13.0368 11.5127 13.1949 11.7492C13.3529 11.9857 13.4373 12.2638 13.4373 12.5482C13.4373 12.9297 13.2858 13.2955 13.016 13.5652C12.7462 13.8349 12.3804 13.9865 11.9989 13.9865V13.9865Z" fill="#FF4F5E"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_773_14374" x="0" y="0" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_773_14374"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_773_14374" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -17,6 +17,16 @@ document.querySelectorAll("[data-permission-id]").forEach( async(el) => {
|
|||
});
|
||||
});
|
||||
|
||||
async function maybeShowPermissionsWarningIcon() {
|
||||
const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
|
||||
if (!bothMozillaVpnPermissionsEnabled) {
|
||||
const permissionsWarningEl = document.querySelector(".moz-vpn-proxy-permissions-title");
|
||||
if (permissionsWarningEl) {
|
||||
permissionsWarningEl.classList.add("show-warning");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function enableDisableSync() {
|
||||
const checkbox = document.querySelector("#syncCheck");
|
||||
await browser.storage.local.set({syncEnabled: !!checkbox.checked});
|
||||
|
|
@ -81,7 +91,7 @@ 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);
|
||||
|
|
|
|||
|
|
@ -13,36 +13,37 @@
|
|||
<form>
|
||||
<h3 data-i18n-message-id="optionalPermissions"></h3>
|
||||
|
||||
<div id="moz-vpn-proxy-permissions" class="moz-vpn-proxy-permissions">
|
||||
<h3 class="moz-vpn-proxy-permissions-title" data-i18n-message-id="mozillaVpnAndProxyPermissionsTitle"></h3>
|
||||
<div class="moz-vpn-proxy-permissions-content">
|
||||
<div class="settings-group">
|
||||
<label class="permission">
|
||||
<input type="checkbox" data-permission-id="nativeMessaging">
|
||||
<span class="bold" data-i18n-message-id="nativeMessagingPermissionTitle"></span>
|
||||
</label>
|
||||
<p><em data-i18n-message-id="nativeMessagingPermissionDescription"></em></p>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label class="permission">
|
||||
<input type="checkbox" data-permission-id="proxy">
|
||||
<span class="bold" data-i18n-message-id="proxyPermissionTitle"></span>
|
||||
</label>
|
||||
<p><em data-i18n-message-id="proxyPermissionDescription"></em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label class="permission">
|
||||
<input type="checkbox" data-permission-id="bookmarks" id="bookmarksPermissions">
|
||||
<span data-i18n-message-id="enableBookMarkMenus"></span>
|
||||
<span class="bold" data-i18n-message-id="enableBookMarkMenus"></span>
|
||||
</label>
|
||||
<p data-i18n-message-id="enableBookMarkMenusDescription"></p>
|
||||
<p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label class="permission">
|
||||
<input type="checkbox" data-permission-id="nativeMessaging" id="nativeMessaging">
|
||||
<span data-i18n-message-id="enableNativeMessaging"></span>
|
||||
</label>
|
||||
<p data-i18n-message-id="enableNativeMessagingDescription"></p>
|
||||
<p><em data-i18n-message-id="permissionsNote"></em></p>
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label class="permission">
|
||||
<input type="checkbox" data-permission-id="proxy" id="proxy">
|
||||
<span data-i18n-message-id="enableProxyPermissions"></span>
|
||||
</label>
|
||||
<p data-i18n-message-id="enableProxyPermissionsDescription"></p>
|
||||
<p><em data-i18n-message-id="permissionsNote"></em></p>
|
||||
</div>
|
||||
|
||||
<h3 data-i18n-message-id="firefoxAccountsSync"></h3>
|
||||
<div class="settings-group">
|
||||
<label>
|
||||
<input type="checkbox" id="syncCheck">
|
||||
<span data-i18n-message-id="enableSync"></span>
|
||||
<span class="bold" data-i18n-message-id="enableSync"></span>
|
||||
</label>
|
||||
<p><em data-i18n-message-id="enableSyncDescription"></em></p>
|
||||
</div>
|
||||
|
|
@ -52,7 +53,7 @@
|
|||
<div class="settings-group">
|
||||
<label>
|
||||
<input type="checkbox" id="replaceTabCheck">
|
||||
<span data-i18n-message-id="replaceTab"></span>
|
||||
<span class="bold" data-i18n-message-id="replaceTab"></span>
|
||||
</label>
|
||||
<p><em data-i18n-message-id="replaceTabDescription"></em></p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue