Merge pull request #2390 from dannycolin/issue-1103

Add ability to filter the container list

src/_locales

@@ -1 +1 @@
-Subproject commit f3da295d004b7d6314c5baa321d9a5418ec937d9
+Subproject commit 26e17db70ce276ab5ccb5ae582e5c142f12ba655

src/css/popup.css

@@ -2374,3 +2374,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

@@ -51,7 +51,6 @@ async function getExtensionInfo() {
   return extensionInfo;
 }
 
-
 // This object controls all the panels, identities and many other things.
 const Logic = {
   _identities: [],
@@ -465,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";
+      }
+    }
   }
 };
 
@@ -847,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>