WIP: Display bookmark favicons

msmolens · Jan 2, 2024 · 507f2a9 · 507f2a9
1 parent 3f13e5e
commit 507f2a9
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/manifest.json b/src/manifest.json
@@ -31,7 +31,7 @@
   "options_ui": {
     "page": "options.html"
   },
-  "permissions": ["bookmarks", "contextMenus", "history", "storage"],
+  "permissions": ["bookmarks", "contextMenus", "favicon", "history", "storage"],
   "browser_specific_settings": {
     "gecko": {
       "id": "[email protected]",

diff --git a/src/treetop/Bookmark.svelte b/src/treetop/Bookmark.svelte
@@ -21,6 +21,13 @@
   // Maximum length of displayed bookmark titles and, in tooltips, URLs.
   const maxLength = 78;
 
+  const faviconSize = 16;
+
+  // Favicon
+  const faviconUrl = `/_favicon/?pageUrl=${encodeURIComponent(
+    new URL(url).origin,
+  )}&size=${faviconSize}`;
+
   let name: string;
   $: {
     // Set name, truncating based on preference setting.
@@ -100,6 +107,15 @@
     }
   }
 
+  span {
+    white-space: nowrap;
+  }
+
+  img {
+    vertical-align: middle;
+    padding-right: 3px;
+  }
+
   a:link,
   a:visited {
     color: inherit;
@@ -149,6 +165,13 @@
   }
 </style>
 
-<a href={url} data-node-id={nodeId} title={tooltip} class={visitedClass}>
-  {name}
-</a>
+<span>
+  <img
+    aria-hidden={true}
+    src={faviconUrl}
+    height={faviconSize}
+    width={faviconSize} />
+  <a href={url} data-node-id={nodeId} title={tooltip} class={visitedClass}>
+    {name}
+  </a>
+</span>