feat: experiment with more structured query pattern

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

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",
+    "esbuild": "^0.19.5",
     "fuse.js": "^7.0.0",
     "lodash.uniq": "^4.5.0",
+    "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hotkeys-hook": "^4.4.1"
+    "react-hotkeys-hook": "^4.4.1",
+    "styled-components": "^6.1.9",
+    "typescript": "^5.2.2"
   }
 }

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

@@ -35,18 +35,11 @@ setInterval(() => {
   tabSwitches = uniq(tabSwitches);
 }, 1000);
 
-try {
+async function listTabs(): Promise<chrome.tabs.Tab[]> {
-  browser.runtime.onConnect.addListener((port) => {
+  const _tabs = await browser.tabs.query({});
-    port.onMessage.addListener((message) => {
-      switch (message.rpc) {
-        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 tabs = _tabs.filter((t) => t.url || t.title);
 
   const hit = new Map<number, boolean>(
     tabs.filter((t) => !!t.id).map((t) => [t.id!, false])
@@ -76,14 +69,31 @@ try {
     }
     resultTabs.push(tab);
   }
+  return resultTabs;
+}
+
+try {
+  browser.runtime.onConnect.addListener((port) => {
+    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}`);
+          try {
+            const resultTabs = await listTabs();
             port.postMessage({
               result: resultTabs,
               id: message.id,
             });
-            })
+          } finally {
-            .finally(() => {
             console.timeEnd(`rpc:listTabs:${message.id}`);
-            });
+          }
           return;
         default:
           port.postMessage({

src/popup/main.tsx

@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import ReactDOM from "react-dom/client";
 import { useHotkeys } from "react-hotkeys-hook";
+import { styled } from "styled-components";
 import "./scrollIntoViewIfNeededPolyfill";
 
 function t(
@@ -31,6 +32,7 @@ const browser = chrome;
 
 interface BackgroundPage {
   listTabs(): Promise<chrome.tabs.Tab[]>;
+  closeTab(tabID: number): Promise<chrome.tabs.Tab[]>;
 }
 
 function useBackgroundPage(): BackgroundPage {
@@ -80,6 +82,18 @@ function useBackgroundPage(): BackgroundPage {
         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 chrome.tabs.Tab[]);
+          },
+        });
+        port.current.postMessage({ rpc: "closeTab", id, args: { tabID } });
+      });
+    },
   };
 }
 
@@ -133,37 +147,41 @@ const HighlightMatches: FunctionComponent<{
   );
 };
 
-// <big_sigh> ...
+// // <big_sigh> ...
-function faviconsWork(tabURL: string, size: number): Promise<boolean> {
+// function faviconsWork(tabURL: string, size: number): Promise<boolean> {
-  return new Promise((resolve) => {
+//   return new Promise((resolve) => {
-    const hiddenDiv = document.createElement("div", {});
+//     const hiddenDiv = document.createElement("div", {});
-    hiddenDiv.setAttribute("style", "display:none;");
+//     hiddenDiv.setAttribute("style", "display:none;");
-    const testImg = document.createElement("img");
+//     const testImg = document.createElement("img");
-    testImg.src = faviconURL({ url: tabURL } as chrome.tabs.Tab, 32)!;
+//     testImg.src = faviconURL({ url: tabURL } as chrome.tabs.Tab, 32)!;
-    testImg.onerror = () => {
+//     testImg.onerror = () => {
-      document.body.removeChild(hiddenDiv);
+//       document.body.removeChild(hiddenDiv);
-      resolve(false);
+//       resolve(false);
-    };
+//     };
-    testImg.onload = () => {
+//     testImg.onload = () => {
-      document.body.removeChild(hiddenDiv);
+//       document.body.removeChild(hiddenDiv);
-      resolve(true);
+//       resolve(true);
-    };
+//     };
-    hiddenDiv.appendChild(testImg);
+//     hiddenDiv.appendChild(testImg);
-    document.body.appendChild(hiddenDiv);
+//     document.body.appendChild(hiddenDiv);
-  });
+//   });
-}
+// }
 
 function faviconURL(t: chrome.tabs.Tab, size: number): string | undefined {
-  if (t.favIconUrl) {
+  return (
-    return t.favIconUrl;
+    t.favIconUrl ??
-  }
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
-  if (!t.url) {
+  );
-    return;
+  // if (t.favIconUrl) {
-  }
+  //   return t.favIconUrl;
-  const url = new URL(browser.runtime.getURL("/_favicon/"));
+  // }
-  url.searchParams.set("pageUrl", t.url);
+  // if (!t.url) {
-  url.searchParams.set("size", `${size}`);
+  //   return;
-  return url.toString();
+  // }
+  // const url = new URL(browser.runtime.getURL("/_favicon/"));
+  // url.searchParams.set("pageUrl", t.url);
+  // url.searchParams.set("size", `${size}`);
+  // return url.toString();
 }
 
 const prefersDarkMode = (): boolean => {
@@ -187,23 +205,186 @@ 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 }>`
+  color: ${(props) => (props.$dark ? "#a9a9a9" : "#6e6e6e")};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+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: chrome.tabs.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 [searchQuery, setSearchQuery] = useState("");
 
-  const FAVICON_NOT_SUPPORTED = 0;
+  // const FAVICON_NOT_SUPPORTED = 0;
-  const FAVICON_SUPPORTED_VIA_EXT_URL = 1;
+  // const FAVICON_SUPPORTED_VIA_EXT_URL = 1;
-  const FAVICON_SUPPORTED_VIA_TAB_DATA = 2;
+  // const FAVICON_SUPPORTED_VIA_TAB_DATA = 2;
-  const [enableFavicons, setEnabledFavicons] = useState(FAVICON_NOT_SUPPORTED);
+  // const [enableFavicons, setEnabledFavicons] = useState(FAVICON_NOT_SUPPORTED);
-  useEffect(() => {
+  // useEffect(() => {
-    faviconsWork("https://www.google.com", 32).then((ok) => {
+  //   faviconsWork("https://www.google.com", 32).then((ok) => {
-      if (enableFavicons === 0) {
+  //     if (enableFavicons === 0) {
-        setEnabledFavicons(FAVICON_SUPPORTED_VIA_EXT_URL);
+  //       setEnabledFavicons(FAVICON_SUPPORTED_VIA_EXT_URL);
-      }
+  //     }
-    });
+  //   });
-  }, []);
+  // }, []);
 
   useEffect(() => {
     if (tabs.length === 0) {
@@ -216,7 +397,15 @@ 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) : "";
+          },
+        },
+      ],
       includeMatches: true,
     });
     return result;
@@ -230,6 +419,24 @@ const Popup: FunctionComponent = () => {
         })
       );
     }
+    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<chrome.tabs.Tab> => ({
+            item: t,
+            refIndex: i,
+          })
+        );
+    }
     return searchIndex.search(searchQuery);
   }, [tabs, searchIndex, searchQuery]);
 
@@ -278,9 +485,9 @@ const Popup: FunctionComponent = () => {
     bgpage
       .listTabs()
       .then((returnedTabs) => {
-        if (returnedTabs.find((t) => !!t.favIconUrl)) {
+        // if (returnedTabs.find((t) => !!t.favIconUrl)) {
-          setEnabledFavicons(FAVICON_SUPPORTED_VIA_TAB_DATA);
+        //   setEnabledFavicons(FAVICON_SUPPORTED_VIA_TAB_DATA);
-        }
+        // }
         setTabs(returnedTabs);
       })
       .finally(() => {});
@@ -297,18 +504,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
+      <SearchContainer>
-        style={{ padding: "1em", display: "flex" }}
+        <SearchIconLeftContainer>
-        className="ht-search-wrapper"
-      >
-        <div style={{ marginRight: "1em" }}>
           <svg
-            style={{ scale: "0.85" }}
             xmlns="http://www.w3.org/2000/svg"
-            width="24"
+            width={SEARCH_ICON_SIZE}
-            height="24"
+            height={SEARCH_ICON_SIZE}
             viewBox="0 0 24 24"
           >
             <path
@@ -316,19 +528,13 @@ 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>
+        </SearchIconLeftContainer>
-        <input
+        <SearchInputRightContainer>
-          className="ht-search-input"
+          <SearchInput
+            ref={inputRef}
             type="text"
-          autoFocus
             placeholder={t("ui_search_tabs")}
             value={searchQuery}
-          style={{
-            width: "100%",
-            outline: "none",
-            border: "none",
-            fontSize: "1.1em",
-          }}
             onKeyDown={(e) => {
               if (e.key === "ArrowDown") {
                 selectNext();
@@ -344,100 +550,79 @@ const Popup: FunctionComponent = () => {
               setSearchQuery(e.target.value);
             }}
           />
-      </div>
+        </SearchInputRightContainer>
+      </SearchContainer>
       <hr style={{ opacity: "0.3", marginTop: "0px" }} />
       <div style={{ padding: "1em", fontWeight: "bold" }}>
         {t("ui_open_tabs", `${tabs.length}`)}
       </div>
-      <div
+      <TabList>
-        style={{
-          maxHeight: "500px",
-          overflow: "scroll",
-          // minHeight: "300px"
-        }}
-      >
         {searchResults.length === 0 ? (
-          <div
+          <TabListEmpty>No Results Found</TabListEmpty>
-            style={{
-              padding: "1.5em",
-              fontSize: "1.1em",
-              display: "flex",
-              justifyContent: "center",
-            }}
-          >
-            No Results Found
-          </div>
         ) : null}
         {searchResults.map((t, i) => {
-          const favicURL = enableFavicons !== 0 ? faviconURL(t.item, 32) : null;
+          const favicURL = faviconURL(t.item, 32);
+          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",
+              <TabItemFavicon
-                cursor: "pointer",
+                $dark={darkMode}
-                backgroundColor:
+                onMouseEnter={() => {
-                  i === selectedTab
+                  setTabHover(t.item.id!);
-                    ? darkMode
+                }}
-                      ? "#535353"
+                onMouseLeave={() => {
-                      : "#e9e9e9"
+                  setTabHover(null);
-                    : undefined,
+                }}
-
+              >
-                // favicon support
+                {showCloseAction ? (
-                ...(enableFavicons
+                  <TabItemCloseBox
-                  ? {
+                    title="Close Tab"
-                      display: "flex",
+                    onClick={(e) => {
-                      alignItems: "center",
+                      e.stopPropagation();
+                      bgpage.closeTab(t.item.id!).then((newtabs) => {
+                        if (i < selectedTab) {
+                          setTabSelector((n) => n - 1);
                         }
-                  : {}),
+                        setTabs(newtabs);
+                      });
                     }}
                   >
-              {favicURL && (
+                    <svg
-                <div
+                      xmlns="http://www.w3.org/2000/svg"
-                  className="ht-tab-favicon"
+                      width={16}
-                  style={{ marginRight: "1em", padding: ".5em" }}
+                      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%" }}>
+              </TabItemFavicon>
-                <div
+              <TabItemMain>
-                  className="ht-tab-title"
+                <TabItemMainTitle $dark={darkMode}>
-                  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")}
                   />
-                  }
+                </TabItemMainTitle>
-                </div>
+                <TabItemMainHostname $dark={darkMode}>
-                <div
-                  className="ht-tab-location"
-                  style={{
-                    color: "#6e6e6e",
-                  }}
-                >
                   {t.item.url ? hostname(t.item.url) : ""}
-                </div>
+                </TabItemMainHostname>
-              </div>
+              </TabItemMain>
-            </div>
+            </TabItem>
           );
         })}
-      </div>
+      </TabList>
     </div>
   );
 };