add ability to filter the container list

mozilla · Jul 21, 2022 · 47062d2 · 47062d2
1 parent 7dee05e
commit 47062d2
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 2 deletions.
diff --git a/src/_locales b/src/_locales
diff --git a/src/css/popup.css b/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%;
+}
diff --git a/src/js/popup.js b/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);
 

diff --git a/src/popup.html b/src/popup.html
@@ -158,6 +158,18 @@ <h4 class="moz-vpn-logotype vpn-status-container-list display-none">Mozilla VPN
       </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>