add favicons to omnibar tabs, make util function to help and refactor…

… _tabs.onShow (#2043)
brookhong · Oct 21, 2023 · 119c110 · 119c110
1 parent 980c23e
commit 119c110
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/src/content_scripts/common/utils.js b/src/content_scripts/common/utils.js
@@ -846,9 +846,21 @@ function refreshHints(hints, pressedKeys) {
     return result;
 }
 
+function attachFaviconToImgSrc(tab, imgEl) {
+    const browserName = getBrowserName();
+    if (browserName === "Chrome") {
+        imgEl.src = `chrome://favicon/${tab.url}`;
+    } else if (browserName.startsWith("Safari")) {
+        imgEl.src = new URL(tab.url).origin + "/favicon.ico";
+    } else {
+        imgEl.src = tab.favIconUrl;
+    }
+}
+
 export {
     LOG,
     actionWithSelectionPreserved,
+    attachFaviconToImgSrc,
     constructSearchURL,
     createElementWithContent,
     dispatchMouseEvent,

diff --git a/src/content_scripts/ui/frontend.css b/src/content_scripts/ui/frontend.css
@@ -138,6 +138,13 @@ body {
     vertical-align: middle;
     display: table-cell;
 }
+#sk_omnibarSearchResult li.tab {
+  display: flex;
+  align-items: flex-start;
+}
+#sk_omnibarSearchResult li.tab img {
+  margin-right: 0.5rem;
+}
 #sk_omnibarSearchResult li div.title {
     text-align: left;
 }

diff --git a/src/content_scripts/ui/frontend.js b/src/content_scripts/ui/frontend.js
@@ -1,5 +1,6 @@
 import { encode } from 'js-base64';
 import {
+    attachFaviconToImgSrc,
     createElementWithContent,
     generateQuickGuid,
     getAnnotations,
@@ -268,14 +269,7 @@ const Front = (function() {
                 setSanitizedContent(tab, `<div class=sk_tab_wrap><div class=sk_tab_icon><img/></div><div class=sk_tab_title>${htmlEncode(t.title)}</div></div>`);
                 tab.style.boxShadow = "0px 3px 7px 0px rgba(245, 245, 0, 0.9)";
             }
-            const browserName = getBrowserName();
-            if (browserName === "Chrome") {
-                tab.querySelector("img").src = `chrome://favicon/${t.url}`;
-            } else if (browserName.startsWith("Safari")) {
-                tab.querySelector("img").src = new URL(t.url).origin + "/favicon.ico";
-            } else {
-                tab.querySelector("img").src = t.favIconUrl;
-            }
+            attachFaviconToImgSrc(t, tab.querySelector("img"));
             tab.querySelector("div.sk_tab_title").style.width = (unitWidth - 24) + 'px';
             _tabs.append(tab);
         });

diff --git a/src/content_scripts/ui/omnibar.js b/src/content_scripts/ui/omnibar.js
@@ -3,6 +3,7 @@ import KeyboardUtils from '../common/keyboardUtils';
 import Mode from '../common/mode';
 import { debounce } from 'lodash';
 import {
+    attachFaviconToImgSrc,
     constructSearchURL,
     createElementWithContent,
     filterByTitleOrUrl,
@@ -406,8 +407,14 @@ function createOmnibar(front, clipboard) {
         } else if(b.type && b.type.length === 2 && b.type.charCodeAt(0) > 255) {
             type = b.type;
         }
-        var li = createElementWithContent('li',
+        if (b.hasOwnProperty('favIconUrl')) {
+          var li = createElementWithContent('li',
+            `<img/><div class="text-container"><div class="title">${self.highlight(rxp, htmlEncode(b.title))} ${additional}</div><div class="url">${self.highlight(rxp, htmlEncode(decodeURIComponent(b.url)))}</div></div>`, { "class": "tab" });
+          attachFaviconToImgSrc(b, li.querySelector('img'));
+        } else {
+          var li = createElementWithContent('li',
             `<div class="title">${type} ${self.highlight(rxp, htmlEncode(b.title))} ${additional}</div><div class="url">${self.highlight(rxp, htmlEncode(decodeURIComponent(b.url)))}</div>`);
+        }
         li.uid = uid;
         li.url = b.url;
         return li;