Start updates to to options.html

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 {
+label {
-  margin-block-start: 1rem;
+  font-weight: bold;
+  display: flex;
+  align-items: flex-start;
 }
 
-p,
+label > span {
-label {
+  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,
+  p {
-  label {
     color: rgb(177, 177, 179);
   }
 }

src/js/options.js

@@ -1,18 +1,36 @@
 const NUMBER_OF_KEYBOARD_SHORTCUTS = 10;
 
-async function requestPermissions() {
+document.querySelectorAll("[data-permission-id]").forEach( async(el) => {
-  const checkbox = document.querySelector("#bookmarksPermissions");
+  const permissionId = el.dataset.permissionId;
-  if (checkbox.checked) {
+  const permissionEnabled = await browser.permissions.contains({ permissions: [permissionId] });
-    const granted = await browser.permissions.request({permissions: ["bookmarks"]});
+  el.checked = !!permissionEnabled;
-    if (!granted) { 
+  el.addEventListener("change", async() => {
-      checkbox.checked = false; 
+    if (el.checked) {
-      return;
+      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"]});
+    switch (permissionId) {
-  }
+    case "bookmarks":
-  browser.runtime.sendMessage({ method: "resetBookmarksContext" });
+      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);
-}
+}

src/options.html

@@ -10,72 +10,100 @@
   <body>
     <form>
       <h3 data-i18n-message-id="optionalPermissions"></h3>
-      <label >
-        <input type="checkbox" id="bookmarksPermissions">
-        <span data-i18n-message-id="enableBookMarkMenus"></span>
 
-      </label>
+      <div class="settings-group">
-      <p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
+        <label class="permission">
+          <input type="checkbox" data-permission-id="bookmarks" id="bookmarksPermissions">
+          <span data-i18n-message-id="enableBookMarkMenus"></span>
+        </label>
+        <p data-i18n-message-id="enableBookMarkMenusDescription"></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>
-      <label>
+      <div class="settings-group">
-        <input type="checkbox" id="syncCheck">
+        <label>
-        <span data-i18n-message-id="enableSync"></span>
+          <input type="checkbox" id="syncCheck">
-      </label>
+          <span data-i18n-message-id="enableSync"></span>
-      <p><em data-i18n-message-id="enableSyncDescription"></em></p>
+        </label>
+        <p><em data-i18n-message-id="enableSyncDescription"></em></p>
+      </div>
+
       <h3 data-i18n-message-id="tabBehavior"></h3>
-      <label>
+
-        <input type="checkbox" id="replaceTabCheck">
+      <div class="settings-group">
-        <span data-i18n-message-id="replaceTab"></span>
+        <label>
-      </label>
+          <input type="checkbox" id="replaceTabCheck">
-      <p><em data-i18n-message-id="replaceTabDescription"></em></p>
+          <span data-i18n-message-id="replaceTab"></span>
+        </label>
+        <p><em data-i18n-message-id="replaceTabDescription"></em></p>
+      </div>
+
       <h3 data-i18n-message-id="keyboardShortCuts"></h3>
       <p><em data-i18n-message-id="editWhichContainer"></em></p>
-      <p><label>
+
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="1"></span>
         <select id="open_container_0">
         </select>
       </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="2"></span>
         <select id="open_container_1">
         </select>
       </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="3"></span>
         <select id="open_container_2">
         </select>
       </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="4"></span>
         <select id="open_container_3">
         </select>
       </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="5"></span>
         <select id="open_container_4">
         </select>
       </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="6"></span>
         <select id="open_container_5">
         </select>
       </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="7"></span>
         <select id="open_container_6">
         </select>
       </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="8"></span>
         <select id="open_container_7">
         </select>
       </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="9"></span>
         <select id="open_container_8">
         </select>
       </label></p>
-      <p><label>
+      <p><label class="keyboard-shortcut">
         <span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="10"></span>
         <select id="open_container_9">
         </select>