diff --git a/src/_locales b/src/_locales index f3da295..26e17db 160000 --- a/src/_locales +++ b/src/_locales @@ -1 +1 @@ -Subproject commit f3da295d004b7d6314c5baa321d9a5418ec937d9 +Subproject commit 26e17db70ce276ab5ccb5ae582e5c142f12ba655 diff --git a/src/css/popup.css b/src/css/popup.css index d07c25e..db7a71e 100644 --- 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 index c52fe50..f3b3b1d 100644 --- 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 index 10f0f33..ef22e94 100644 --- a/src/popup.html +++ b/src/popup.html @@ -158,6 +158,18 @@
+