Foix #2138 - Add proxy as optional permission, add toggle option on settings page, conditionally show proxy container settings if approved/added

src/_locales/en/messages.json

@@ -221,6 +221,12 @@
   "enableBookMarkMenus": {
     "message": "Enable Bookmark Menus"
   },
+  "enableProxy": {
+    "message": "Enable custom per-container proxy settings"
+  },
+  "enableProxyDescription": {
+    "message": "This setting allows you to route all traffic from a specific Container through a proxy. This feature requires the proxy permission. This permission grants the add-on to control browser proxy settings."
+  },
   "enableSync": {
     "message": "Enable Sync"
   },

src/css/popup.css

@@ -585,6 +585,10 @@ manage things like container crud */
   padding-inline-start: 0;
 }
 
+.edit-container-panel fieldset.proxy-container-settings.is-hidden {
+  display: none;
+}
+
 .edit-container-panel fieldset:last-of-type {
   margin-block-start: 16px;
 }

src/js/background/assignManager.js

@@ -372,7 +372,7 @@ window.assignManager = {
     return currentContainerState && currentContainerState.isIsolated;
   },
 
-  init() {
+  async init() {
     browser.contextMenus.onClicked.addListener((info, tab) => {
       info.bookmarkId ?
         this._onClickedBookmark(info) :
@@ -380,7 +380,15 @@ window.assignManager = {
     });
 
     // Before anything happens we decide if the request should be proxified
-    browser.proxy.onRequest.addListener(this.handleProxifiedRequest, {urls: ["<all_urls>"]});
+    const hasProxyPermission = await browser.permissions.contains({
+      permissions: ["proxy"]
+    });
+
+    console.log("hasProxyPermission: ", hasProxyPermission);
+    
+    if (hasProxyPermission) {
+      browser.proxy.onRequest.addListener(this.handleProxifiedRequest, {urls: ["<all_urls>"]});
+    }
 
     // Before a request is handled by the browser we decide if we should
     // route through a different container

src/js/background/messageHandler.js

@@ -106,6 +106,10 @@ const messageHandler = {
           return assignManager._setOrRemoveAssignment(tab.id, m.url, m.newUserContextId, m.value);
         });
         break;
+      case "proxyPermissionCheck":
+        return await browser.permissions.contains({
+          permissions: ["proxy"],
+        });
       }
       return response;
     });

src/js/options.js

@@ -1,17 +1,24 @@
 const NUMBER_OF_KEYBOARD_SHORTCUTS = 10;
 
-async function requestPermissions() {
-  const checkbox = document.querySelector("#bookmarksPermissions");
+async function requestPermissions(event) {
+  const checkbox = event.target;
+  const permission = checkbox.dataset.permission;
   if (checkbox.checked) {
-    const granted = await browser.permissions.request({permissions: ["bookmarks"]});
+    const granted = await browser.permissions.request({
+      permissions: [permission],
+    });
     if (!granted) { 
       checkbox.checked = false; 
       return;
     }
   } else {
-    await browser.permissions.remove({permissions: ["bookmarks"]});
+    await browser.permissions.remove({ permissions: [permission] });
   }
-  browser.runtime.sendMessage({ method: "resetBookmarksContext" });
+  
+  if (permission === "bookmarks") {
+    browser.runtime.sendMessage({ method: "resetBookmarksContext" });
+  }
+
 }
 
 async function enableDisableSync() {
@@ -26,11 +33,15 @@ async function enableDisableReplaceTab() {
 }
 
 async function setupOptions() {
-  const hasPermission = await browser.permissions.contains({permissions: ["bookmarks"]});
+  const hasBookmarksPermission = await browser.permissions.contains({permissions: ["bookmarks"]});
+  const hasProxyPermission = await browser.permissions.contains({permissions: ["proxy"]});
   const { syncEnabled } = await browser.storage.local.get("syncEnabled");
   const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
-  if (hasPermission) {
-    document.querySelector("#bookmarksPermissions").checked = true;
+  if (hasBookmarksPermission) {
+    document.querySelector("#bookmarksPermission").checked = true;
+  }
+  if (hasProxyPermission) {
+    document.querySelector("#proxyPermission").checked = true;
   }
   document.querySelector("#syncCheck").checked = !!syncEnabled;
   document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled;
@@ -79,7 +90,10 @@ function resetOnboarding() {
 }
 
 document.addEventListener("DOMContentLoaded", setupOptions);
-document.querySelector("#bookmarksPermissions").addEventListener( "change", requestPermissions);
+document
+  .querySelectorAll(".permissionCheckbox").forEach(  checkbox =>{
+    checkbox.addEventListener("change", requestPermissions);
+  });
 document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
 document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
 document.querySelector("button").addEventListener("click", resetOnboarding);

src/js/popup.js

@@ -1428,6 +1428,16 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       iconInput.checked = iconInput.value === identity.icon;
     });
 
+    const hasProxyPermission = await browser.runtime.sendMessage({
+      method: "proxyPermissionCheck",
+    });
+
+    console.log("hasProxyPermission: ", hasProxyPermission);
+
+    if (hasProxyPermission) {
+      document.querySelector(".proxy-container-settings").classList.remove("is-hidden");
+    }
+
     // Clear the proxy field before doing the retrieval requests below
     document.querySelector("#edit-container-panel-proxy").value = "";
 

src/manifest.json

@@ -28,11 +28,11 @@
     "unlimitedStorage",
     "tabs",
     "webRequestBlocking",
-    "webRequest",
-    "proxy"
+    "webRequest"
   ],
   "optional_permissions": [
-    "bookmarks"
+    "bookmarks",
+    "proxy"
   ],
   "commands": {
     "_execute_browser_action": {

src/options.html

@@ -11,11 +11,15 @@
     <form>
       <h3 data-i18n-message-id="optionalPermissions"></h3>
       <label >
-        <input type="checkbox" id="bookmarksPermissions">
+        <input class="permissionCheckbox" data-permission="bookmarks" type="checkbox" id="bookmarksPermission">
         <span data-i18n-message-id="enableBookMarkMenus"></span>
-
       </label>
       <p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
+      <label > 
+        <input class="permissionCheckbox" data-permission="proxy" type="checkbox" id="proxyPermission">
+        <span data-i18n-message-id="enableProxy"></span>
+      </label>
+      <p><em data-i18n-message-id="enableProxyDescription"></em></p>
       <h3 data-i18n-message-id="firefoxAccountsSync"></h3>
       <label>
         <input type="checkbox" id="syncCheck">

src/popup.html

@@ -277,7 +277,7 @@
         <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
           <legend class="form-header" data-i18n-message-id="icon"></legend>
         </fieldset>
-        <fieldset>
+        <fieldset class="proxy-container-settings is-hidden">
           <legend>Proxy (Optional)</legend>
           <input type="text" name="container-proxy" id="edit-container-panel-proxy" maxlength="50" placeholder="type://host:port"/>
         </fieldset>