Add ability to filter the container list

https://github.com/mozilla/multi-account-containers/pull/2390

src/_locales/de/messages.json

@@ -226,6 +226,15 @@
   "enableSyncDescription": {
     "message": "Mit dieser Einstellung können Sie Ihre Umgebungen und Website-Zuweisungen geräteübergreifend synchronisieren."
   },
+  "syncExclude": {
+    "message": "Umgebung ausschließen"
+  },
+  "syncExcludePlaceholder": {
+    "message": "Einen regulären Ausdruck einfügen"
+  },
+  "syncExcludeDescription": {
+    "message": "Schließen Sie Umgebungen von der Synchronisierung aus, wenn ihr Name mit dem angegebenen regulären Ausdruck ohne Berücksichtigung der Groß-/Kleinschreibung übereinstimmt."
+  },
   "replaceTab": {
     "message": "Tab ersetzen, anstatt einen neuen zu erstellen"
   },

src/_locales/en/messages.json

@@ -73,7 +73,7 @@
     "message": "Syncing Containers is now Available!"
   },
   "onboarding-6-description": {
-    "message": "Turn on sync to share Container and site assignments with any computer connected to your Firefox account."
+    "message": "Turn on Sync to share Container and site assignments with any computer connected to your Firefox account."
   },
   "onboarding-7-header": {
     "message": "Firefox account is required to sync."
@@ -226,6 +226,15 @@
   "enableSyncDescription": {
     "message": "This setting allows you to sync your Containers and site assignments across devices."
   },
+  "syncExclude": {
+    "message": "Container exclusion"
+  },
+  "syncExcludePlaceholder": {
+    "message": "Insert a regular expression"
+  },
+  "syncExcludeDescription": {
+    "message": "Exclude containers from sync when their name matches the specified case insensitive regular expression."
+  },
   "replaceTab": {
     "message": "Replace tab instead of creating a new one"
   },

src/_locales/en_CA/messages.json

@@ -1,7 +1,7 @@
 {
   "extensionDescription": {
-    "message": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and colour-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate. This addon comes with wildcard(*) support.",
+      "message": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate. This addon comes with wildcard(*) support.",
-    "description": "Description of the extension. DO NOT TRANSLATE \"Multi-Account Containers\"."
+      "description": "Description of the extension. DO NOT TRANSLATE \"Multi-Account Containers\"."
   },
   "openInNewTabTitle": {
     "message": "Open New Tab in…",
@@ -27,10 +27,10 @@
     "message": "Always Open Site in Container"
   },
   "openANewTabIn": {
-    "message": "Open a New Tab in…"
+    "message" : "Open a New Tab in…"
   },
   "openNewTabInThisContainer": {
-    "message": "Open New Tab in this Container"
+    "message" : "Open New Tab in this Container"
   },
   "openTabs": {
     "message": "Open Tabs",
@@ -49,7 +49,7 @@
     "message": "Put Containers to work for you."
   },
   "onboarding-2-description": {
-    "message": "Features like colour-coding and separate Container tabs help you find things easily, focus your attention, and minimize distractions."
+    "message": "Features like color-coding and separate Container tabs help you find things easily, focus your attention, and minimize distractions."
   },
   "onboarding-3-header": {
     "message": "A place for everything, and everything in its place."
@@ -73,7 +73,7 @@
     "message": "Syncing Containers is now Available!"
   },
   "onboarding-6-description": {
-    "message": "Turn on sync to share Container and site assignments with any computer connected to your Firefox account."
+    "message": "Turn on Sync to share Container and site assignments with any computer connected to your Firefox account."
   },
   "onboarding-7-header": {
     "message": "Firefox account is required to sync."
@@ -139,7 +139,7 @@
     "message": "Name"
   },
   "color": {
-    "message": "Colour"
+    "message": "Color"
   },
   "icon": {
     "message": "Icon"
@@ -209,7 +209,7 @@
     "message": "Toggle this to see the onboarding panels again."
   },
   "tabBehavior": {
-    "message": "Tab behaviour:"
+    "message": "Tab behavior:"
   },
   "enableBookMarkMenus": {
     "message": "Enable Bookmark Menus"
@@ -226,6 +226,15 @@
   "enableSyncDescription": {
     "message": "This setting allows you to sync your Containers and site assignments across devices."
   },
+  "syncExclude": {
+    "message": "Container exclusion"
+  },
+  "syncExcludePlaceholder": {
+    "message": "Insert a regular expression"
+  },
+  "syncExcludeDescription": {
+    "message": "Exclude containers from sync when their name matches the specified case insensitive regular expression."
+  },
   "replaceTab": {
     "message": "Replace tab instead of creating a new one"
   },
@@ -239,7 +248,7 @@
     "message": "Container to open with Keyboard Shortcut $keyId$",
     "placeholders": {
       "keyId": {
-        "content": "$1"
+          "content": "$1"
       }
     }
   },

src/_locales/en_GB/messages.json

@@ -1,7 +1,7 @@
 {
   "extensionDescription": {
-    "message": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and colour-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate. This addon comes with wildcard(*) support.",
+      "message": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate. This addon comes with wildcard(*) support.",
-    "description": "Description of the extension. DO NOT TRANSLATE \"Multi-Account Containers\"."
+      "description": "Description of the extension. DO NOT TRANSLATE \"Multi-Account Containers\"."
   },
   "openInNewTabTitle": {
     "message": "Open New Tab in…",
@@ -27,10 +27,10 @@
     "message": "Always Open Site in Container"
   },
   "openANewTabIn": {
-    "message": "Open a New Tab in…"
+    "message" : "Open a New Tab in…"
   },
   "openNewTabInThisContainer": {
-    "message": "Open New Tab in this Container"
+    "message" : "Open New Tab in this Container"
   },
   "openTabs": {
     "message": "Open Tabs",
@@ -43,13 +43,13 @@
     "message": "A better way to manage all the things you do online"
   },
   "onboarding-1-description": {
-    "message": "Use Containers to organise tasks, manage accounts, and keep your focus where you want it."
+    "message": "Use Containers to organize tasks, manage accounts, and keep your focus where you want it."
   },
   "onboarding-2-header": {
     "message": "Put Containers to work for you."
   },
   "onboarding-2-description": {
-    "message": "Features like colour-coding and separate Container tabs help you find things easily, focus your attention, and minimise distractions."
+    "message": "Features like color-coding and separate Container tabs help you find things easily, focus your attention, and minimize distractions."
   },
   "onboarding-3-header": {
     "message": "A place for everything, and everything in its place."
@@ -70,13 +70,13 @@
     "message": "Long-press the New Tab button to create a new Container tab."
   },
   "onboarding-6-header": {
-    "message": "Synchronising Containers is now Available!"
+    "message": "Syncing Containers is now Available!"
   },
   "onboarding-6-description": {
-    "message": "Turn on synchronisation to share Container and site assignments with any computer connected to your Firefox account."
+    "message": "Turn on Sync to share Container and site assignments with any computer connected to your Firefox account."
   },
   "onboarding-7-header": {
-    "message": "Firefox account is required to synchronise."
+    "message": "Firefox account is required to sync."
   },
   "onboarding-7-description": {
     "message": "Click Sign In to confirm that your Firefox account is active."
@@ -139,7 +139,7 @@
     "message": "Name"
   },
   "color": {
-    "message": "Colour"
+    "message": "Color"
   },
   "icon": {
     "message": "Icon"
@@ -172,7 +172,7 @@
     "message": "Not Now"
   },
   "startSyncing": {
-    "message": "Start Synchronising"
+    "message": "Start Syncing"
   },
   "info": {
     "message": "info",
@@ -209,22 +209,31 @@
     "message": "Toggle this to see the onboarding panels again."
   },
   "tabBehavior": {
-    "message": "Tab behaviour:"
+    "message": "Tab behavior:"
   },
   "enableBookMarkMenus": {
     "message": "Enable Bookmark Menus"
   },
   "firefoxAccountsSync": {
-    "message": "Firefox accounts synchronisation:"
+    "message": "Firefox accounts sync:"
   },
   "enableSync": {
-    "message": "Enable synchronisation"
+    "message": "Enable sync"
   },
   "enableBookMarkMenusDescription": {
     "message": "This setting allows you to open a bookmark or folder of bookmarks in a Container."
   },
   "enableSyncDescription": {
-    "message": "This setting allows you to synchronise your Containers and site assignments across devices."
+    "message": "This setting allows you to sync your Containers and site assignments across devices."
+  },
+  "syncExclude": {
+    "message": "Container exclusion"
+  },
+  "syncExcludePlaceholder": {
+    "message": "Insert a regular expression"
+  },
+  "syncExcludeDescription": {
+    "message": "Exclude containers from sync when their name matches the specified case insensitive regular expression."
   },
   "replaceTab": {
     "message": "Replace tab instead of creating a new one"
@@ -239,7 +248,7 @@
     "message": "Container to open with Keyboard Shortcut $keyId$",
     "placeholders": {
       "keyId": {
-        "content": "$1"
+          "content": "$1"
       }
     }
   },

src/_locales/fr/messages.json

@@ -226,6 +226,15 @@
   "enableSyncDescription": {
     "message": "Ce paramètre vous permet de synchroniser vos conteneurs et affectations de sites entre vos appareils."
   },
+  "syncExclude": {
+    "message": "Exclusion de conteneurs"
+  },
+  "syncExcludePlaceholder": {
+    "message": "Insérer une expression régulière"
+  },
+  "syncExcludeDescription": {
+    "message": "Exclure des conteneurs de la synchronisation lorsque leur nom correspond à l’expression régulière insensible à la casse spécifiée."
+  },
   "replaceTab": {
     "message": "Remplacer l’onglet plutôt qu’en créer un nouveau"
   },

src/_locales/nl/messages.json

@@ -226,6 +226,15 @@
   "enableSyncDescription": {
     "message": "Met deze instelling kunt u uw containers en websitetoewijzingen met andere apparaten synchroniseren."
   },
+  "syncExclude": {
+    "message": "Uitsluiting van containers"
+  },
+  "syncExcludePlaceholder": {
+    "message": "Een reguliere expressie invoegen"
+  },
+  "syncExcludeDescription": {
+    "message": "Containers uitsluiten van synchronisatie wanneer hun naam overeenkomt met de opgegeven hoofdletterongevoelige reguliere expressie."
+  },
   "replaceTab": {
     "message": "Tabblad vervangen in plaats van een nieuw maken"
   },
@@ -426,7 +435,8 @@
   },
   "saveLegend": {
     "message": "Opslaan",
-    "description": "(Options menu) Save containers to a file group header"},
+    "description": "(Options menu) Save containers to a file group header"
+  },
   "saveButton": {
     "message": "Opslaan",
     "description": "(Options menu) Validate saving containers to a file"

src/css/popup.css

@@ -2395,3 +2395,13 @@ tr:hover > td > .trash-button {
 .overflow .panel.onboarding {
   margin-block: auto;
 }
+
+/* Searchbar */
+.searchbar {
+  margin-block: 4px -4px;
+  padding-inline: 16px;
+}
+
+.searchbar input {
+  inline-size: 100%;
+}

src/js/popup.js

@@ -464,6 +464,23 @@ const Logic = {
     default:
       break;
     }
+  },
+
+  filterContainerList() {
+    const pattern = /^\s+|\s+$/g;
+    const list = Array.from(document.querySelectorAll("#identities-list tr"));
+    const search = document.querySelector("#search-terms").value.replace(pattern, "").toLowerCase();
+
+    for (const i in list) {
+      const text = list[i].querySelector("td div span");
+
+      if (text.innerText.replace(pattern, "").toLowerCase().includes(search) ||
+          !search) {
+        list[i].style.display = "block";
+      } else {
+        list[i].style.display = "none";
+      }
+    }
   }
 };
 
@@ -846,6 +863,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
     document.addEventListener("keydown", Logic.keyboardNavListener);
     document.addEventListener("keydown", Logic.shortcutListener);
+    document.addEventListener("input", Logic.filterContainerList);
 
     MozillaVPN.handleContainerList(identities);
 

src/popup.html

@@ -158,6 +158,18 @@
       </h4>
     </div>
     <div class="scrollable identities-list">
+      <div class="searchbar">
+        <label for="search-terms"
+               class="hide-label"
+               data-i18n-message-id="filterInputLabel">
+        </label>
+        <input type="text"
+               id="search-terms"
+               name="search-terms"
+               placeholder="Search container name"
+               data-i18n-attribute="placeholder"
+               data-i18n-attribute-message-id="filterInputPlaceholder">
+      </div>
       <table class="menu" id="identities-list">
         <tr class="menu-item hover-highlight">
           <td>