diff --git a/src/css/options.css b/src/css/options.css index 9346afe..bc7ed0e 100644 --- a/src/css/options.css +++ b/src/css/options.css @@ -3,27 +3,62 @@ body { color: #202023; } -h3 { +h3:first-of-type { margin-block-start: 2.5rem; } -h3:first-of-type { - margin-block-start: 1rem; +label { + font-weight: bold; + display: flex; + align-items: flex-start; } -p, -label { +label > span { + padding-block-start: 3px; +} + +.settings-group { + margin-block-end: 16px; +} + +form { + display: flex; + flex-direction: column; +} + +p { color: rgb(74, 74, 79); } +.settings-group p { + margin-inline-start: 24px; + margin-block: 4px 8px; +} + +input[type="checkbox"] { + margin-inline: 0 8px; + inline-size: 16px; + block-size: 16px; +} + +button { + margin-inline: 0 auto; +} + +.keyboard-shortcut { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 70%; +} + @media (prefers-color-scheme: dark) { body { background: #202023; color: #fff; } - p, - label { + p { color: rgb(177, 177, 179); } } diff --git a/src/js/options.js b/src/js/options.js index 025ae99..cd78400 100644 --- a/src/js/options.js +++ b/src/js/options.js @@ -1,18 +1,36 @@ const NUMBER_OF_KEYBOARD_SHORTCUTS = 10; -async function requestPermissions() { - const checkbox = document.querySelector("#bookmarksPermissions"); - if (checkbox.checked) { - const granted = await browser.permissions.request({permissions: ["bookmarks"]}); - if (!granted) { - checkbox.checked = false; - return; +document.querySelectorAll("[data-permission-id]").forEach( async(el) => { + const permissionId = el.dataset.permissionId; + const permissionEnabled = await browser.permissions.contains({ permissions: [permissionId] }); + el.checked = !!permissionEnabled; + el.addEventListener("change", async() => { + if (el.checked) { + const granted = await browser.permissions.request({ permissions: [permissionId] }); + if (!granted) { + el.checked = false; + return; + } + } else { + await browser.permissions.remove({ permissions: [permissionId] }); } - } else { - await browser.permissions.remove({permissions: ["bookmarks"]}); - } - browser.runtime.sendMessage({ method: "resetBookmarksContext" }); -} + + switch (permissionId) { + case "bookmarks": + browser.runtime.sendMessage({ method: "resetBookmarksContext" }); + break; + + case "nativeMessaging": + console.log("do native messaging things"); + console.log("if disabled - remove mozilla vpn proxy configurations"); + break; + + case "proxy": + console.log("do proxy things..."); + console.log("if disabled - remove proxy configurations"); + } + }); +}); async function enableDisableSync() { const checkbox = document.querySelector("#syncCheck"); @@ -26,12 +44,8 @@ async function enableDisableReplaceTab() { } async function setupOptions() { - const hasPermission = await browser.permissions.contains({permissions: ["bookmarks"]}); const { syncEnabled } = await browser.storage.local.get("syncEnabled"); const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled"); - if (hasPermission) { - document.querySelector("#bookmarksPermissions").checked = true; - } document.querySelector("#syncCheck").checked = !!syncEnabled; document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled; setupContainerShortcutSelects(); @@ -79,7 +93,6 @@ function resetOnboarding() { } document.addEventListener("DOMContentLoaded", setupOptions); -document.querySelector("#bookmarksPermissions").addEventListener( "change", requestPermissions); document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync); document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab); document.querySelector("button").addEventListener("click", resetOnboarding); @@ -87,4 +100,4 @@ document.querySelector("button").addEventListener("click", resetOnboarding); for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) { document.querySelector("#open_container_"+i) .addEventListener("change", storeShortcutChoice); -} \ No newline at end of file +} diff --git a/src/options.html b/src/options.html index 3f9b66c..3a7ceee 100644 --- a/src/options.html +++ b/src/options.html @@ -10,72 +10,100 @@

- -

+
+ +

+
+
+ +

+

+
+ +
+ +

+

+
+

- -

+
+ +

+
+

- -

+ +
+ +

+
+

-

-

-

-

-

-

-

-

-

-