Add per-item toggles to site whitelist

ext/src/ui/options/Whitelist.svelte

@@ -98,10 +98,13 @@
         if (isEditing) return;
 
         if (knownAppToAdd?.matches) {
-            items = [...items, { pattern: knownAppToAdd.matches }];
+            items = [
+                ...items,
+                { pattern: knownAppToAdd.matches, isEnabled: true }
+            ];
             knownAppToAdd = null;
         } else {
-            items = [...items, { pattern: "" }];
+            items = [...items, { pattern: "", isEnabled: true }];
             beginEditing(items.length - 1);
         }
     }
@@ -129,7 +132,17 @@
                 class="whitelist__item"
                 class:whitelist__item--selected={isEditingItem}
                 class:whitelist__item--expanded={isItemExpanded}
+                class:whitelist__item--disabled={!item.isEnabled}
+                class:whitelist__item--editing={isEditingItem}
             >
+                {#if !isEditingItem}
+                    <input
+                        type="checkbox"
+                        title={_("optionsSiteWhitelistItemEnabled")}
+                        bind:checked={item.isEnabled}
+                    />
+                {/if}
+
                 <div
                     class="whitelist__title"
                     on:dblclick={() => beginEditing(i)}
@@ -140,6 +153,7 @@
                             class="whitelist__input-pattern"
                             pattern={REMOTE_MATCH_PATTERN_REGEX.source}
                             required
+                            title={_("optionsSiteWhitelistItemPattern")}
                             bind:this={editingInput}
                             bind:value={editingValue}
                             on:input={onEditInput}

ext/src/ui/options/styles/index.css

@@ -367,6 +367,9 @@ button.ghost:not(:hover) {
 .whitelist__item--selected {
     background-color: var(--blue-50-a30) !important;
 }
+.whitelist__item--disabled:not(.whitelist__item--editing) .whitelist__title {
+    opacity: 0.65;
+}
 
 .whitelist__title {
     display: flex;

ext/src/ui/popup/Popup.svelte

@@ -228,7 +228,7 @@
 
         const whitelist = await options.get("siteWhitelist");
         if (!whitelist.find(item => item.pattern === app.matches)) {
-            whitelist.push({ pattern: app.matches });
+            whitelist.push({ pattern: app.matches, isEnabled: true });
             await options.set("siteWhitelist", whitelist);
 
             await browser.tabs.reload(pageInfo.tabId);