removed faviconurl to fix issue in firefox where tab icons were missing

lbragile · Dec 15, 2020 · 3190946 · 3190946
1 parent 34b1dee
commit 3190946
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 42 deletions.
diff --git a/public/background.js b/public/background.js
@@ -70,7 +70,6 @@ function filterTabs(info, tab, group_id) {
         tabs = tabs.map((x) => {
           return {
             title: x.title,
-            favIconUrl: convertToShortURL(x.favIconUrl),
             url: x.url,
             id: x.id,
           };
@@ -115,32 +114,6 @@ function filterTabs(info, tab, group_id) {
   }, 200);
 }
 
-// Firefox gives base64 string, so must convert it to blob url
-function convertToShortURL(input_str, sliceSize = 512) {
-  if (input_str && input_str.includes("base64")) {
-    input_str = input_str.split(",")[1]; // get the base64 part
-    const byteCharacters = atob(input_str);
-    const byteArrays = [];
-
-    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
-      const slice = byteCharacters.slice(offset, offset + sliceSize);
-
-      const byteNumbers = new Array(slice.length);
-      for (let i = 0; i < slice.length; i++) {
-        byteNumbers[i] = slice.charCodeAt(i);
-      }
-
-      const byteArray = new Uint8Array(byteNumbers);
-      byteArrays.push(byteArray);
-    }
-
-    const blob = new Blob(byteArrays);
-    return URL.createObjectURL(blob);
-  } else {
-    return input_str;
-  }
-}
-
 function findExtTabAndSwitch() {
   var query = { title: "TabMerger", currentWindow: true };
   var exists = { highlighted: true, active: true };

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "name": "__MSG_appName__",
   "description": "__MSG_appDesc__",
   "default_locale": "en",

diff --git a/src/App.js b/src/App.js
@@ -135,7 +135,6 @@ export default function App() {
                       var tabs_arr = [...sync[into_group].tabs, ...merged_tabs];
                       tabs_arr = tabs_arr.map((x) => ({
                         url: x.url,
-                        favIconUrl: x.favIconUrl,
                         title: x.title,
                       }));
 

diff --git a/src/Tabs.css b/src/Tabs.css
@@ -10,6 +10,7 @@
   font-weight: bold;
   padding: 0;
   margin: 0;
+  margin-bottom: 2px;
   height: 20px;
 }
 
@@ -20,13 +21,25 @@
 
 /* MENU */
 .move-tab {
-  margin-bottom: 0;
+  margin-bottom: 2px;
 }
 
 .move-tab:hover {
   cursor: move;
 }
 
+/* TAB ICON */
+.img-tab {
+  margin-top: 3px;
+  width: 20px;
+  height: 20px;
+}
+
+/* TAB URL */
+.a-tab {
+  margin-top: 1px;
+}
+
 /* ENTIRE TAB */
 .draggable {
   position: relative;

diff --git a/src/Tabs.js b/src/Tabs.js
@@ -44,7 +44,6 @@ export default function Tabs(props) {
     var tab_bytes = JSON.stringify({
       url: tab.querySelector("a").href,
       title: tab.querySelector("a").innerText,
-      favIconUrl: tab.querySelector("img").src,
     }).length;
 
     chrome.storage.sync.getBytesInUse(closest_group.id, (itemBytesInUse) => {
@@ -68,13 +67,10 @@ export default function Tabs(props) {
           // reorder tabs based on current positions
           result[closest_group.id].tabs = [
             ...closest_group.lastChild.querySelectorAll("div"),
-          ].map((item) => {
-            return {
-              title: item.lastChild.textContent,
-              url: item.lastChild.href,
-              favIconUrl: item.querySelectorAll("img")[0].src,
-            };
-          });
+          ].map((item) => ({
+            title: item.lastChild.textContent,
+            url: item.lastChild.href,
+          }));
 
           updateGroupItem(origin_id, result[origin_id]);
           updateGroupItem(closest_group.id, result[closest_group.id]);
@@ -108,13 +104,19 @@ export default function Tabs(props) {
     });
   }
 
-  async function handleTabClick(e) {
+  function handleTabClick(e) {
     // ["tab", url_link]
     e.preventDefault();
     var tab = e.target.tagName === "SPAN" ? e.target.parentNode : e.target;
     chrome.storage.local.set({ remove: ["tab", tab.href] });
   }
 
+  function getFavIconURL(url) {
+    var matches = url.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
+    var domain = matches && matches[1]; // domain will be null if no match is found
+    return "http://www.google.com/s2/favicons?domain=" + domain;
+  }
+
   function translate(msg) {
     return chrome.i18n.getMessage(msg);
   }
@@ -150,9 +152,7 @@ export default function Tabs(props) {
             </p>
             <img
               className="img-tab mr-2"
-              src={tab.favIconUrl || "./images/logo16.png"}
-              width="24"
-              height="24"
+              src={getFavIconURL(tab.url) || "./images/logo16.png"}
               alt="icon"
               draggable={false}
             />