maciekmm · lorefnon · Jun 29, 2022
diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html
@@ -3,12 +3,16 @@
     <head>
         <meta charset="utf-8">
         <link rel="stylesheet" href="style.css">
+        <style id="search-filter-style"></style>
     </head>
     <body>
         <header>
             <ul id="pinned-tabs">
             </ul>
         </header>
+        <div class="search-container">
+            <input type="text" placeholder="Search" class="search-input">
+        </div>
         <main>
             <ul id="containers">
             </ul>
@@ -38,4 +42,4 @@
         <ul id="context-menu"></ul>
         <script src="sidebar.js" type="module"></script>
     </body>
-</html>
+</html>
diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js
@@ -47,6 +47,7 @@ export const ContainerTabsSidebar = {
         )
 
         this._initContextualIdentities()
+        this._initSearch()
     },
 
     _initContextualIdentities() {
@@ -92,6 +93,53 @@ export const ContainerTabsSidebar = {
         })
     },
 
+    async _initSearch() {
+        const searchInput = document.querySelector('.search-input');
+        const searchFilterStyle = document.querySelector('style#search-filter-style')
+        let cidQueryPromise = Promise.resolve();
+        let tabQueryPromise = Promise.resolve();
+        searchInput.addEventListener('input', async () => {
+            const searchQuery = searchInput.value.toLowerCase().trim();
+            if (searchQuery.length === 0) {
+                searchFilterStyle.textContent = ''
+                return
+            }
+            cidQueryPromise = cidQueryPromise.then(() => browser.contextualIdentities.query({}))
+            tabQueryPromise = tabQueryPromise.then(() => browser.tabs.query({}))
+            const allIdentities = await cidQueryPromise
+            const allTabs = await tabQueryPromise
+            const matchingIdentities = allIdentities.filter(cid => {
+                return cid.name.toLowerCase().indexOf(searchQuery) >= 0
+            })
+            const matchingTabs = allTabs.filter(tab => {
+                return (tab.title.toLowerCase().indexOf(searchQuery) >= 0) ||
+                    (tab.url.toLowerCase().indexOf(searchQuery) >= 0)
+            })
+            const cookieStoreIds = new Set()
+            const tabIds = new Set()
+            matchingIdentities.forEach(cid => {
+                cookieStoreIds.add(cid.cookieStoreId)
+            });
+            matchingTabs.forEach(tab => {
+                cookieStoreIds.add(tab.cookieStoreId)
+                tabIds.add(tab.id)
+            });
+            const containerSelector = [...cookieStoreIds]
+                .map(id => `#containers .container[data-container-id="${id}"]`)
+                .join(', ')
+            const tabSelector = [...tabIds]
+                .map(id => `#containers .container-tab[data-tab-id="${id}"]`)
+                .join(', ')
+            searchFilterStyle.textContent = `
+            #containers .container { display: none; }
+            #containers .container-tab { display: none; }
+            ${containerSelector} { display: block; }
+            ${tabSelector} { display: flex; }
+            `
+        })
+        searchInput.focus()
+    },
+
     /**
      * Removes a container from DOM, does not remove it from a browser
      * @param {integer} cookieStoreId - contextual identity id

diff --git a/src/sidebar/style.css b/src/sidebar/style.css
@@ -15,6 +15,18 @@ a, a:link, a:visited {
     text-decoration: none;
 }
 
+.search-container {
+    padding: 5px;
+}
+.search-input {
+    display: block;
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--color-input-border);
+    background: var(--color-input-background);
+    color: var(--color-text);
+}
+
 #pinned-tabs {
     display: flex;
     flex-wrap: wrap;

diff --git a/src/sidebar/theme/dark.css b/src/sidebar/theme/dark.css
@@ -7,6 +7,8 @@
     --color-default-container: #fff;
     --color-container-background: #111;
     --color-container-border: #222;
+    --color-input-background: #111;
+    --color-input-border: #222;
     --color-tab-background: #222;
     --color-close: #ccc;
     --color-icon: #eee;
@@ -28,4 +30,5 @@
 
 .container-icon[src$=".png"] {
     filter: invert();
-}
+}
+
diff --git a/src/sidebar/theme/grey.css b/src/sidebar/theme/grey.css
@@ -9,6 +9,8 @@
     --color-container-background: #2B2D30;
     --color-default-container: #fff;
     --color-container-border: #222;
+    --color-input-background: #424242;
+    --color-input-border: #222;
     --color-close: #ccc;
     --color-icon: #eee;
 }

diff --git a/src/sidebar/theme/light.css b/src/sidebar/theme/light.css
@@ -8,6 +8,8 @@
     --color-container-background: #ffffff;
     --color-container-border: #e3e4e6;
     --color-tab-background: #ececec;
+    --color-input-border: #e3e4e6;
+    --color-input-background: #fff;
     --color-close: var(--color-icon);
     --color-icon: rgba(24, 25, 26, 0.35);
 }
@@ -28,4 +30,4 @@
 .container-actions .container-action:hover,
 .container-tab-close:hover, .container-tab-action:hover {
     background: rgba(0,0,0, 0.1);
-}
+}