Show permission warning in advanced proxy panel

src/css/popup.css

@@ -2031,6 +2031,38 @@ tr:hover > td > .trash-button {
   margin-inline-start: 8px;
 }
 
+/* ----- Permissions Overlay ---------- */
+
+#advanced-proxy-settings-panel,
+.advanced-proxy-panel-content {
+  block-size: 100%;
+}
+
+.permissions-overlay {
+  position: absolute;
+  inset-inline: 0 0;
+  inset-block-start: 40px;
+  inset-block-end: 0;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+  background-color: white;
+  padding: 2.25rem;
+  display: none;
+}
+
+#enable-proxy-permissions {
+  block-size: var(--rowHeight);
+  text-align: center;
+  font-family: var(--fontMetropolis);
+  font-size: 14px;
+  margin-block-start: 1rem;
+}
+
+.permissions-overlay-copy {
+  text-align: center;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --iconCloseX: url("/img/close-light.svg");

src/js/popup.js

@@ -1851,12 +1851,45 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
 Logic.registerPanel(P_ADVANCED_PROXY_SETTINGS, {
   panelSelector: "#advanced-proxy-settings-panel",
 
-  initialize(){
+  async initialize(){
     this._proxyForm = document.querySelector(".advanced-proxy-panel-content");
     this._advancedProxyInput = this._proxyForm.querySelector("#edit-advanced-proxy-input");
     const clearAdvancedProxyInput = this._proxyForm.querySelector("#clear-advanced-proxy-input");
     this._submitadvancedProxy = this._proxyForm.querySelector("#submit-advanced-proxy");
 
+    const proxyPermissionEnabled = await browser.permissions.contains({ permissions: ["proxy"] });
+    if (!proxyPermissionEnabled) {
+
+      // Restrict tabbing inside advanced proxy panel to proxy permissions ui
+      const panel = document.getElementById("advanced-proxy-settings-panel");
+      const clickableEls = panel.querySelectorAll("button, a, input");
+      clickableEls.forEach(el => {
+        if (!el.dataset.tabGroup && el.id !== "advanced-proxy-settings-return") {
+          el.tabindex = "-1";
+          el.disabled = true;
+        }
+      });
+
+      // Show proxy permission overlay
+      const permissionsOverlay = document.getElementById("permissions-overlay");
+      permissionsOverlay.style.display = "flex";
+
+      // Add "enable" button handling
+      const enableProxyPermissionsButton = document.getElementById("enable-proxy-permissions");
+      enableProxyPermissionsButton.focus();
+      enableProxyPermissionsButton.addEventListener("click", async() => {
+        const granted = await browser.permissions.request({ permissions: ["proxy"] });
+        if (granted) {
+          permissionsOverlay.style.display = "none";
+          // restore normal panel tabbing
+          clickableEls.forEach(el => {
+            el.tabindex = "0";
+            el.disabled = false;
+          });
+        }
+      });
+    }
+
     this._advancedProxyInput.addEventListener("keydown", (e) => {
       if (e.key !== "Enter") {
         this.hideInvalidEntryWarning();

src/popup.html

@@ -437,6 +437,10 @@
       <button id="submit-advanced-proxy" class="primary-cta apply-to-container" data-i18n-message-id="applyToContainer"></button>
       <a id="advanced-proxy-settings-learn-more" href="" class="blue-link" data-i18n-message-id="learnMore"></a>
     </form>
+    <div id="permissions-overlay" class="permissions-overlay" data-tab-group="proxy-disabled">
+      <p class="permissions-overlay-copy" data-tab-group="proxy-disabled">This feature requires that Proxy permissions. This permission can be revoked at any time in Settings.</p>
+      <button id="enable-proxy-permissions" class="primary-cta" data-tab-group="proxy-disabled">Enable</button>
+    </div>
   </div>
   <script src="js/utils.js"></script>
   <script src="js/popup.js"></script>