feat: tab group support

fix: change to more robust "autofocus" mechanism to fix issue where popup would
show and not be automatically focused on the input

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2024 Nicholas Comer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,17 @@
+# HyperTab
+
+A brutally simple browser extension that targets Firefox meant to be a replica of Chrome's tab switcher. Quickly open, search, then switch to any open tab.
+
+https://github.com/nkcmr/HyperTab/assets/1791521/c60acea5-23c3-4c80-9288-518d06dcc83a
+
+## Usage
+
+Open tab search with <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> (it would be <kbd>A</kbd>, but Firefox uses this for add-on management). Search is automatically focused so you should be able to type some fuzzy search and immediately narrow down what you're looking for.
+
+## Why?
+
+Switching from Chrome to Firefox is mostly fine. But Firefox's current "story" for navigating between tabs is really sub-par (IMO). This extension, for me, implements a _must have_ feature for any browser I am using: Quick tab search and switch.
+
+## Privacy/Security
+
+You're probably here to make sure this extension isn't doing anything sneak, right? Good for you, everyone who is able to understand code should do this. Have a look around and see for yourself. **But,** I will save you a bunch of time: this browser extension does not persist anything and does not talk to any servers; it doesn't need to!

_locales/de/messages.json

@@ -0,0 +1,24 @@
+{
+  "extension_name": {
+    "message": "HyperTab",
+    "description": "The display name for the extension."
+  },
+  "extension_description": {
+    "message": "Schnelle Suche und Wechsel von Registerkarten",
+    "description": "Description of what the extension does."
+  },
+  "ui_open_tabs": {
+    "message": "Öffnen Sie Registerkarten ($COUNT$)",
+    "description": "Text denoting the section in the UI of open tabs",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "82"
+      }
+    }
+  },
+  "ui_search_tabs": {
+    "message": "Suchregisterkarten",
+    "description": "Placeholder text in the tab search box"
+  }
+}

_locales/en/messages.json

@@ -1,10 +1,24 @@
 {
-    "extension_name": {
-        "message": "HyperTab",
-        "description": "The display name for the extension."
-    },
-    "extension_description": {
-        "message": "Quick Tab Search and Switch for Safari",
-        "description": "Description of what the extension does."
+  "extension_name": {
+    "message": "HyperTab",
+    "description": "The display name for the extension."
+  },
+  "extension_description": {
+    "message": "Quick Tab Search and Switch",
+    "description": "Description of what the extension does."
+  },
+  "ui_open_tabs": {
+    "message": "Open Tabs ($COUNT$)",
+    "description": "Text denoting the section in the UI of open tabs",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "82"
+      }
     }
+  },
+  "ui_search_tabs": {
+    "message": "Search Tabs",
+    "description": "Placeholder text in the tab search box"
+  }
 }

manifest.json

@@ -2,9 +2,9 @@
   "manifest_version": 2,
   "default_locale": "en",
 
-  "name": "HyperTab",
-  "description": "Quick tabs search and switch",
-  "version": "0.1",
+  "name": "__MSG_extension_name__",
+  "description": "__MSG_extension_description__",
+  "version": "@@replaced_by_package_sh",
 
   "icons": {
     "48": "images/icon-48.png",
@@ -36,5 +36,5 @@
     }
   },
 
-  "permissions": ["tabs", "*://*/*"]
+  "permissions": ["tabs", "tabGroups", "*://*/*"]
 }

package.json

@@ -19,16 +19,17 @@
   ],
   "dependencies": {
     "@types/chrome": "^0.0.251",
-    "esbuild": "^0.19.5",
-    "npm-run-all": "^4.1.5",
-    "typescript": "^5.2.2",
     "@types/lodash.uniq": "^4.5.9",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "fuse.js": "^7.0.0",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "esbuild": "^0.19.12",
+    "fuse.js": "^7.1.0",
     "lodash.uniq": "^4.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hotkeys-hook": "^4.4.1"
+    "npm-run-all": "^4.1.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hotkeys-hook": "^4.6.2",
+    "styled-components": "^6.1.18",
+    "typescript": "^5.8.3"
   }
 }

popup.css

@@ -132,20 +132,25 @@ table {
     color-scheme: light dark;
 }
 
+html {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    -webkit-box-sizing: inherit;
+    -moz-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
 body {
     width: 500px;
     color: black;
     font-family: system-ui;
     font-size: 12px;
-    background-color: white;
-}
-
-.ht-tab:hover {
-    background-color: #efefef;
-}
-
-.ht-tab-location {
-    color: #e9e9e9;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -157,16 +162,4 @@ body {
         background-color: #2b2b2b;
         color: #f2f2f2;
     }
-
-    .ht-search-wrapper .ht-search-input {
-        background-color: #2b2b2b;
-    }
-
-    .ht-tab-location {
-        color: #e9e9e9;
-    }
-
-    .ht-tab:hover {
-        background-color: #4e4e4e;
-    }
 }

src/background/main.ts

@@ -1,3 +1,5 @@
+import type { Tab } from "../types";
+
 declare const browser: typeof chrome;
 
 // tabSwitches is a stack of all tab activations. every time a tab becomes
@@ -35,55 +37,85 @@ setInterval(() => {
   tabSwitches = uniq(tabSwitches);
 }, 1000);
 
+async function listTabs(): Promise<Tab[]> {
+  const [tabs, groups] = await Promise.all([
+    browser.tabs.query({}).then(
+      // filter out file:///... things, safari does not really have
+      // safari://... things like chrome
+      (allTabs) => allTabs.filter((t) => t.url || t.title)
+    ),
+    browser.tabGroups
+      .query({})
+      .then((groups): Map<number, chrome.tabGroups.TabGroup> => {
+        return new Map(groups.map((g) => [g.id, g]));
+      }),
+  ]);
+
+  const hit = new Map<number, boolean>(
+    tabs.filter((t) => !!t.id).map((t) => [t.id!, false])
+  );
+  const tabsById = new Map<number, Tab>(
+    tabs
+      .filter((t) => !!t.id)
+      .map((t) => {
+        const group = t.groupId > 0 ? groups.get(t.groupId) : undefined;
+        return [
+          t.id!,
+          {
+            ...t,
+            group,
+          },
+        ];
+      })
+  );
+
+  const resultTabs: Tab[] = [];
+  for (let tabId of tabSwitches.slice(1)) {
+    if (hit.get(tabId)) {
+      continue;
+    }
+    hit.set(tabId, true);
+    const tab = tabsById.get(tabId);
+    if (!tab) {
+      continue;
+    }
+    resultTabs.push(tab);
+  }
+  for (let [tabId, didHit] of hit.entries()) {
+    if (didHit) {
+      continue;
+    }
+    const tab = tabsById.get(tabId);
+    if (!tab) {
+      continue;
+    }
+    resultTabs.push(tab);
+  }
+  return resultTabs;
+}
+
 try {
   browser.runtime.onConnect.addListener((port) => {
-    port.onMessage.addListener((message) => {
+    port.onMessage.addListener(async (message) => {
       switch (message.rpc) {
+        case "closeTab":
+          await browser.tabs.remove(message.args.tabID);
+          port.postMessage({
+            result: await listTabs(),
+            id: message.id,
+          });
+          return;
         case "listTabs":
           console.time(`rpc:listTabs:${message.id}`);
-          browser.tabs
-            .query({})
-            .then((tabs) => {
-              // filter out file:///... things, safari does not really have
-              // safari://... things like chrome
-              tabs = tabs.filter((t) => t.url || t.title);
-
-              const hit = new Map<number, boolean>(
-                tabs.filter((t) => !!t.id).map((t) => [t.id!, false])
-              );
-              const tabsById = new Map<number, chrome.tabs.Tab>(
-                tabs.filter((t) => !!t.id).map((t) => [t.id!, t])
-              );
-              const resultTabs = [];
-              for (let tabId of tabSwitches.slice(1)) {
-                if (hit.get(tabId)) {
-                  continue;
-                }
-                hit.set(tabId, true);
-                const tab = tabsById.get(tabId);
-                if (!tab) {
-                  continue;
-                }
-                resultTabs.push(tab);
-              }
-              for (let [tabId, didHit] of hit.entries()) {
-                if (didHit) {
-                  continue;
-                }
-                const tab = tabsById.get(tabId);
-                if (!tab) {
-                  continue;
-                }
-                resultTabs.push(tab);
-              }
-              port.postMessage({
-                result: resultTabs,
-                id: message.id,
-              });
-            })
-            .finally(() => {
-              console.timeEnd(`rpc:listTabs:${message.id}`);
+          try {
+            const resultTabs = await listTabs();
+            port.postMessage({
+              result: resultTabs,
+              id: message.id,
             });
+          } finally {
+            console.timeEnd(`rpc:listTabs:${message.id}`);
+          }
           return;
         default:
           port.postMessage({

src/popup/main.tsx

@@ -9,8 +9,17 @@ import React, {
 } from "react";
 import ReactDOM from "react-dom/client";
 import { useHotkeys } from "react-hotkeys-hook";
+import { styled } from "styled-components";
+import type { Tab } from "../types";
 import "./scrollIntoViewIfNeededPolyfill";
 
+function t(
+  messageName: string,
+  substitutions?: string | string[] | undefined
+): string {
+  return browser.i18n.getMessage(messageName, substitutions);
+}
+
 function hostname(url: string): string {
   try {
     const u = new URL(url);
@@ -23,7 +32,8 @@ function hostname(url: string): string {
 const browser = chrome;
 
 interface BackgroundPage {
-  listTabs(): Promise<chrome.tabs.Tab[]>;
+  listTabs(): Promise<Tab[]>;
+  closeTab(tabID: number): Promise<Tab[]>;
 }
 
 function useBackgroundPage(): BackgroundPage {
@@ -67,12 +77,24 @@ function useBackgroundPage(): BackgroundPage {
         waiter.current.set(id, {
           reject,
           resolve(value) {
-            resolve(value as chrome.tabs.Tab[]);
+            resolve(value as Tab[]);
           },
         });
         port.current.postMessage({ rpc: "listTabs", id });
       });
     },
+    closeTab(tabID) {
+      return new Promise((resolve, reject) => {
+        const id = ++msgId.current;
+        waiter.current.set(id, {
+          reject,
+          resolve(value) {
+            resolve(value as Tab[]);
+          },
+        });
+        port.current.postMessage({ rpc: "closeTab", id, args: { tabID } });
+      });
+    },
   };
 }
 
@@ -126,37 +148,11 @@ const HighlightMatches: FunctionComponent<{
   );
 };
 
-// <big_sigh> ...
-function faviconsWork(tabURL: string, size: number): Promise<boolean> {
-  return new Promise((resolve) => {
-    const hiddenDiv = document.createElement("div", {});
-    hiddenDiv.setAttribute("style", "display:none;");
-    const testImg = document.createElement("img");
-    testImg.src = faviconURL({ url: tabURL } as chrome.tabs.Tab, 32)!;
-    testImg.onerror = () => {
-      document.body.removeChild(hiddenDiv);
-      resolve(false);
-    };
-    testImg.onload = () => {
-      document.body.removeChild(hiddenDiv);
-      resolve(true);
-    };
-    hiddenDiv.appendChild(testImg);
-    document.body.appendChild(hiddenDiv);
-  });
-}
-
-function faviconURL(t: chrome.tabs.Tab, size: number): string | undefined {
-  if (t.favIconUrl) {
-    return t.favIconUrl;
-  }
-  if (!t.url) {
-    return;
-  }
-  const url = new URL(browser.runtime.getURL("/_favicon/"));
-  url.searchParams.set("pageUrl", t.url);
-  url.searchParams.set("size", `${size}`);
-  return url.toString();
+function faviconURL(t: Tab): string | undefined {
+  return (
+    t.favIconUrl ??
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
+  );
 }
 
 const prefersDarkMode = (): boolean => {
@@ -180,24 +176,234 @@ const useDarkMode = (): boolean => {
   return dm;
 };
 
+const POPUP_WIDTH = 500;
+
+const TAB_ITEM_WIDTH = POPUP_WIDTH;
+const TAB_ITEM_PADDING_PX = 15;
+const TAB_ITEM_FAVICON_SIZE = 30;
+const TAB_ITEM_FLEX_GAP = 15;
+const TAB_ITEM_MAIN_WIDTH =
+  TAB_ITEM_WIDTH -
+  TAB_ITEM_PADDING_PX * 2 -
+  TAB_ITEM_FAVICON_SIZE -
+  TAB_ITEM_FLEX_GAP;
+
+const SEARCH_CONTAINER_WIDTH = POPUP_WIDTH;
+const SEARCH_ICON_SIZE = 24;
+const SEARCH_ICON_CONTAINER_SIZE = 30;
+const SEARCH_ICON_PADDING = (SEARCH_ICON_CONTAINER_SIZE - SEARCH_ICON_SIZE) / 2;
+const SEARCH_CONTAINER_FLEX_GAP = TAB_ITEM_FLEX_GAP;
+const SEARCH_CONTAINER_PADDING = TAB_ITEM_PADDING_PX;
+const SEARCH_INPUT_WIDTH =
+  SEARCH_CONTAINER_WIDTH -
+  SEARCH_CONTAINER_PADDING * 2 -
+  SEARCH_ICON_CONTAINER_SIZE -
+  SEARCH_CONTAINER_FLEX_GAP;
+
+const TabList = styled.div`
+  max-height: 500px;
+  overflow: scroll;
+`;
+const TabListEmpty = styled.div`
+  padding: 1.5em;
+  font-size: 1.1em;
+  display: flex;
+  justify-content: center;
+`;
+const TabItem = styled.div<{ $selected: boolean; $dark: boolean }>`
+  width: ${TAB_ITEM_WIDTH}px;
+  padding: ${TAB_ITEM_PADDING_PX}px;
+  cursor: pointer;
+  background-color: ${(props) =>
+    props.$selected ? (props.$dark ? "#535353" : "#e9e9e9") : "inherit"};
+  display: flex;
+  gap: ${TAB_ITEM_FLEX_GAP}px;
+  align-items: center;
+  &:hover {
+    background-color: ${(props) => (props.$dark ? "#4e4e4e" : "#efefef")};
+  }
+`;
+const TabItemFavicon = styled.div<{ $dark: boolean }>`
+  background-color: ${(props) => (props.$dark ? "#6e6e6e" : "#d9d9d9")};
+  border-radius: 5px;
+  padding: 0.5em;
+  width: ${TAB_ITEM_FAVICON_SIZE}px;
+  height: ${TAB_ITEM_FAVICON_SIZE}px;
+  padding: 7px;
+  flex-shrink: 0;
+`;
+const TabItemCloseBox = styled.div`
+  cursor: pointer;
+`;
+const TabItemMain = styled.div`
+  width: ${TAB_ITEM_MAIN_WIDTH}px;
+`;
+const TabItemMainTitle = styled.div<{ $dark: boolean }>`
+  color: ${(props) => (props.$dark ? "#e9e9e9" : "#2b2b2b")};
+  font-size: 1.1em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const TabItemMainHostname = styled.div<{ $dark: boolean }>`
+  margin-top: 3px;
+  color: ${(props) => (props.$dark ? "#a9a9a9" : "#6e6e6e")};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+type ColorSet<C extends string> = `${C}` | `${C}-invert` | `${C}-pale`;
+
+const tabGroupColors: {
+  [K in ColorSet<chrome.tabGroups.ColorEnum>]: string;
+} = {
+  blue: "oklch(48% 0.2 260)",
+  "blue-invert": "oklch(83% 0.17 260)",
+  "blue-pale": "oklch(97% 0.05 260)",
+
+  purple: "oklch(48% 0.2 315)",
+  "purple-invert": "oklch(83% 0.14 315)",
+  "purple-pale": "oklch(97% 0.05 315)",
+
+  cyan: "oklch(48% 0.2 205)",
+  "cyan-invert": "oklch(83% 0.11 205)",
+  "cyan-pale": "oklch(97% 0.05 205)",
+
+  orange: "oklch(48% 0.2 50)",
+  "orange-invert": "oklch(86% 0.14 50)",
+  "orange-pale": "oklch(97% 0.05 50)",
+
+  yellow: "oklch(51% 0.23 90)",
+  "yellow-invert": "oklch(86% 0.14 90)",
+  "yellow-pale": "oklch(97% 0.05 90)",
+
+  pink: "oklch(48% 0.2 360)",
+  "pink-invert": "oklch(83% 0.14 360)",
+  "pink-pale": "oklch(97% 0.05 360)",
+
+  green: "oklch(48% 0.2 145)",
+  "green-invert": "oklch(83% 0.14 145)",
+  "green-pale": "oklch(97% 0.05 145)",
+
+  red: "oklch(48% 0.2 15)",
+  "red-invert": "oklch(83% 0.14 15)",
+  "red-pale": "oklch(97% 0.05 15)",
+
+  grey: "#5e6a77",
+  "grey-invert": "#99a6b4",
+  "grey-pale": "#f2f9ff",
+};
+
+const TabItemGroupPill = styled.span<{
+  $dark: boolean;
+  $color: chrome.tabGroups.ColorEnum;
+}>`
+  background-color: ${(props) =>
+    props.$dark
+      ? tabGroupColors[`${props.$color}-invert`]
+      : tabGroupColors[props.$color]};
+  color: ${(props) =>
+    props.$dark ? `#15141a` : tabGroupColors[`${props.$color}-pale`]};
+  font-weight: 500;
+  padding: 3px 5px;
+  border-radius: 4px;
+  display: inline-block;
+`;
+
+const SearchContainer = styled.div`
+  display: flex;
+  width: ${SEARCH_CONTAINER_WIDTH}px;
+  gap: ${TAB_ITEM_FLEX_GAP}px;
+  padding: ${TAB_ITEM_PADDING_PX}px;
+  align-items: center;
+`;
+
+const SearchIconLeftContainer = styled.div`
+  padding: ${SEARCH_ICON_PADDING}px;
+`;
+
+const SearchInputRightContainer = styled.div``;
+const SearchInput = styled.input`
+  width: ${SEARCH_INPUT_WIDTH}px;
+  outline: none;
+  border: none;
+  font-size: 1.2em;
+`;
+
+type searchField = {
+  aliases?: string[];
+  filterValues: (value: string | null) => boolean;
+  evaluate: (t: Tab, value: string | null) => boolean;
+};
+
+const searchFields: Record<string, searchField> = {
+  sys: {
+    filterValues(value) {
+      return ["true", "false"].includes(value?.toLowerCase() ?? "");
+    },
+    evaluate(t, value) {
+      if (!t.url) {
+        return value === "true";
+      }
+      const ishttp = !!t.url.match(/^https?:\/\//i);
+      return ishttp !== (value === "true");
+    },
+  },
+  pinned: {
+    filterValues(value) {
+      return ["true", "false"].includes(value?.toLowerCase() ?? "");
+    },
+    evaluate(t, value) {
+      return t.pinned === (value === "true");
+    },
+  },
+  hostname: {
+    aliases: ["domain"],
+    filterValues(value) {
+      return true;
+    },
+    evaluate(t, value) {
+      if (!t.url) {
+        return false;
+      }
+      return hostname(t.url).includes(value ?? "");
+    },
+  },
+} as const;
+
+function getSearchField(key: string): searchField | null {
+  return key in searchFields
+    ? searchFields[key]
+    : Object.values(searchFields).find((sf) => {
+        return sf.aliases?.includes(key) ?? false;
+      }) ?? null;
+}
+
+function structuredQuery(query: string): Map<string, string | null> {
+  return new Map<string, string | null>(
+    query
+      .split(/\s+/g)
+      .map((pair): [string, string | null] => {
+        const [key, value] = pair.split(":", 2);
+        return [key, value ?? null];
+      })
+      .filter(([key, value]) => {
+        const sf = getSearchField(key);
+        if (!sf) {
+          return false;
+        }
+        return sf.filterValues(value);
+      })
+  );
+}
+
 const Popup: FunctionComponent = () => {
   const darkMode = useDarkMode();
   const [tabSelector, setTabSelector] = useState(0);
-  const [tabs, setTabs] = useState<chrome.tabs.Tab[]>([]);
+  const [tabs, setTabs] = useState<Tab[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
 
-  const FAVICON_NOT_SUPPORTED = 0;
-  const FAVICON_SUPPORTED_VIA_EXT_URL = 1;
-  const FAVICON_SUPPORTED_VIA_TAB_DATA = 2;
-  const [enableFavicons, setEnabledFavicons] = useState(FAVICON_NOT_SUPPORTED);
-  useEffect(() => {
-    faviconsWork("https://www.google.com", 32).then((ok) => {
-      if (enableFavicons === 0) {
-        setEnabledFavicons(FAVICON_SUPPORTED_VIA_EXT_URL);
-      }
-    });
-  }, []);
-
   useEffect(() => {
     if (tabs.length === 0) {
       return;
@@ -209,7 +415,21 @@ const Popup: FunctionComponent = () => {
   }, [setTabSelector, searchQuery]);
   const searchIndex = useMemo(() => {
     const result = new Fuse(tabs, {
-      keys: ["title", "url"],
+      keys: [
+        "title",
+        {
+          name: "hostname",
+          getFn(obj) {
+            return obj.url ? hostname(obj.url) : "";
+          },
+        },
+        {
+          name: "group",
+          getFn(obj) {
+            return obj.group?.title ?? "";
+          },
+        },
+      ],
       includeMatches: true,
     });
     return result;
@@ -217,12 +437,30 @@ const Popup: FunctionComponent = () => {
   const searchResults = useMemo(() => {
     if (!searchQuery) {
       return tabs.map(
-        (t, i): FuseResult<chrome.tabs.Tab> => ({
+        (t, i): FuseResult<Tab> => ({
           item: t,
           refIndex: i,
         })
       );
     }
+    const sq = structuredQuery(searchQuery);
+    if (sq.size > 0) {
+      return tabs
+        .filter((tab) => {
+          for (let [key, value] of sq.entries()) {
+            if (!getSearchField(key)!.evaluate(tab, value)) {
+              return false;
+            }
+          }
+          return true;
+        })
+        .map(
+          (t, i): FuseResult<Tab> => ({
+            item: t,
+            refIndex: i,
+          })
+        );
+    }
     return searchIndex.search(searchQuery);
   }, [tabs, searchIndex, searchQuery]);
 
@@ -271,9 +509,9 @@ const Popup: FunctionComponent = () => {
     bgpage
       .listTabs()
       .then((returnedTabs) => {
-        if (returnedTabs.find((t) => !!t.favIconUrl)) {
-          setEnabledFavicons(FAVICON_SUPPORTED_VIA_TAB_DATA);
-        }
+        // if (returnedTabs.find((t) => !!t.favIconUrl)) {
+        //   setEnabledFavicons(FAVICON_SUPPORTED_VIA_TAB_DATA);
+        // }
         setTabs(returnedTabs);
       })
       .finally(() => {});
@@ -290,18 +528,23 @@ const Popup: FunctionComponent = () => {
     (selectedTabEle as any).current.scrollIntoViewIfNeeded(false);
   }, [selectedTabEle.current]);
 
+  const [tabHover, setTabHover] = useState<number | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  useEffect(() => {
+    requestIdleCallback(() => {
+      // this is more reliable than autoFocus attribute. sometimes autoFocus
+      // would let the popup open and then input would not be focused.
+      inputRef.current?.focus();
+    });
+  }, [inputRef.current]);
   return (
     <div>
-      <div
-        style={{ padding: "1em", display: "flex" }}
-        className="ht-search-wrapper"
-      >
-        <div style={{ marginRight: "1em" }}>
+      <SearchContainer>
+        <SearchIconLeftContainer>
           <svg
-            style={{ scale: "0.85" }}
             xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
+            width={SEARCH_ICON_SIZE}
+            height={SEARCH_ICON_SIZE}
             viewBox="0 0 24 24"
           >
             <path
@@ -309,128 +552,112 @@ const Popup: FunctionComponent = () => {
               d="M23.809 21.646l-6.205-6.205c1.167-1.605 1.857-3.579 1.857-5.711 0-5.365-4.365-9.73-9.731-9.73-5.365 0-9.73 4.365-9.73 9.73 0 5.366 4.365 9.73 9.73 9.73 2.034 0 3.923-.627 5.487-1.698l6.238 6.238 2.354-2.354zm-20.955-11.916c0-3.792 3.085-6.877 6.877-6.877s6.877 3.085 6.877 6.877-3.085 6.877-6.877 6.877c-3.793 0-6.877-3.085-6.877-6.877z"
             />
           </svg>
-        </div>
-        <input
-          className="ht-search-input"
-          type="text"
-          autoFocus
-          placeholder="Search Tabs"
-          value={searchQuery}
-          style={{
-            width: "100%",
-            outline: "none",
-            border: "none",
-            fontSize: "1.1em",
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "ArrowDown") {
-              selectNext();
-            } else if (e.key === "ArrowUp") {
-              selectPrev();
-            } else if (e.key === "Enter") {
-              goToTab();
-            }
-          }}
-          spellCheck="false"
-          autoCorrect="false"
-          onChange={(e) => {
-            setSearchQuery(e.target.value);
-          }}
-        />
-      </div>
+        </SearchIconLeftContainer>
+        <SearchInputRightContainer>
+          <SearchInput
+            ref={inputRef}
+            type="text"
+            placeholder={t("ui_search_tabs")}
+            value={searchQuery}
+            onKeyDown={(e) => {
+              if (e.key === "ArrowDown") {
+                selectNext();
+              } else if (e.key === "ArrowUp") {
+                selectPrev();
+              } else if (e.key === "Enter") {
+                goToTab();
+              }
+            }}
+            spellCheck="false"
+            autoCorrect="false"
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+            }}
+          />
+        </SearchInputRightContainer>
+      </SearchContainer>
       <hr style={{ opacity: "0.3", marginTop: "0px" }} />
       <div style={{ padding: "1em", fontWeight: "bold" }}>
-        Open Tabs ({tabs.length})
+        {t("ui_open_tabs", `${tabs.length}`)}
       </div>
-      <div
-        style={{
-          maxHeight: "500px",
-          overflow: "scroll",
-          // minHeight: "300px"
-        }}
-      >
+      <TabList>
         {searchResults.length === 0 ? (
-          <div
-            style={{
-              padding: "1.5em",
-              fontSize: "1.1em",
-              display: "flex",
-              justifyContent: "center",
-            }}
-          >
-            No Results Found
-          </div>
+          <TabListEmpty>No Results Found</TabListEmpty>
         ) : null}
         {searchResults.map((t, i) => {
-          const favicURL = enableFavicons !== 0 ? faviconURL(t.item, 32) : null;
+          const favicURL = faviconURL(t.item);
+          const showCloseAction = tabHover === t.item.id! && !t.item.pinned;
           return (
-            <div
+            <TabItem
               key={t.item.id}
-              className="ht-tab"
+              $dark={darkMode}
+              $selected={i === selectedTab}
               onClick={() => {
                 focusTab(t.item.id!, t.item.windowId);
               }}
               ref={i === tabSelector ? selectedTabEle : undefined}
-              style={{
-                padding: "10px",
-                cursor: "pointer",
-                backgroundColor:
-                  i === selectedTab
-                    ? darkMode
-                      ? "#535353"
-                      : "#e9e9e9"
-                    : undefined,
-
-                // favicon support
-                ...(enableFavicons
-                  ? {
-                      display: "flex",
-                      alignItems: "center",
-                    }
-                  : {}),
-              }}
             >
-              {favicURL && (
-                <div
-                  className="ht-tab-favicon"
-                  style={{ marginRight: "1em", padding: ".5em" }}
-                >
+              <TabItemFavicon
+                $dark={darkMode}
+                onMouseEnter={() => {
+                  setTabHover(t.item.id!);
+                }}
+                onMouseLeave={() => {
+                  setTabHover(null);
+                }}
+              >
+                {showCloseAction ? (
+                  <TabItemCloseBox
+                    title="Close Tab"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      bgpage.closeTab(t.item.id!).then((newtabs) => {
+                        if (i < selectedTab) {
+                          setTabSelector((n) => n - 1);
+                        }
+                        setTabs(newtabs);
+                      });
+                    }}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width={16}
+                      height={16}
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z" />
+                    </svg>
+                  </TabItemCloseBox>
+                ) : (
                   <img width={16} height={16} src={favicURL} />
-                </div>
-              )}
-              <div className="ht-tab-right" style={{ width: "93%" }}>
-                <div
-                  className="ht-tab-title"
-                  style={{
-                    color: darkMode ? "#e9e9e9" : "#2b2b2b",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    fontSize: "1.1em",
-                    marginBottom: "6px",
-                    width: "98%",
-                  }}
-                >
-                  {
-                    <HighlightMatches
-                      text={t.item.title ?? ""}
-                      match={t.matches?.find((m) => m.key === "title")}
-                    />
-                  }
-                </div>
-                <div
-                  className="ht-tab-location"
-                  style={{
-                    color: "#6e6e6e",
-                  }}
-                >
+                )}
+              </TabItemFavicon>
+              <TabItemMain>
+                <TabItemMainTitle $dark={darkMode}>
+                  <HighlightMatches
+                    text={t.item.title ?? ""}
+                    match={t.matches?.find((m) => m.key === "title")}
+                  />
+                </TabItemMainTitle>
+                <TabItemMainHostname $dark={darkMode}>
                   {t.item.url ? hostname(t.item.url) : ""}
-                </div>
-              </div>
-            </div>
+                  {t.item.group ? (
+                    <>
+                      &nbsp;|&nbsp;
+                      <TabItemGroupPill
+                        $dark={darkMode}
+                        $color={t.item.group.color}
+                      >
+                        {t.item.group.title}
+                      </TabItemGroupPill>
+                    </>
+                  ) : null}
+                </TabItemMainHostname>
+              </TabItemMain>
+            </TabItem>
           );
         })}
-      </div>
+      </TabList>
     </div>
   );
 };

src/types.ts

@@ -0,0 +1,3 @@
+export type Tab = chrome.tabs.Tab & {
+  group?: chrome.tabGroups.TabGroup;
+};