tab favicon fixes: support uploaded images, use emoji for window title, work on macos

mods/core/client.js

@@ -217,7 +217,7 @@ module.exports = (store, __exports) => {
     electron.ipcRenderer.on('enhancer:get-menu-theme', setThemeVars);
 
     if (tabsEnabled) {
-      let tab_title = '';
+      let tab_title = { img: '', emoji: '', text: '' };
       if (process.platform === 'darwin')
         document
           .querySelector('.notion-sidebar [style*="37px"]:empty')
@@ -227,30 +227,27 @@ module.exports = (store, __exports) => {
       );
       __electronApi.setWindowTitle = (title) => {
         const $container =
-            document.querySelector(
-              '.notion-peek-renderer [style="padding-left: calc(126px + env(safe-area-inset-left)); padding-right: calc(126px + env(safe-area-inset-right)); max-width: 100%; width: 100%;"]'
-            ) ||
-            document.querySelector(
-              '.notion-frame [style="padding-left: calc(96px + env(safe-area-inset-left)); padding-right: calc(96px + env(safe-area-inset-right)); max-width: 100%; margin-bottom: 8px; width: 100%;"]'
-            ) ||
             document.querySelector('.notion-peak-renderer') ||
             document.querySelector('.notion-frame'),
           icon = $container.querySelector(
-            '.notion-record-icon [aria-label]:not([src^="data:"])'
+            '[style*="env(safe-area-inset-left)"] > .notion-record-icon img:not([src^="data:"])'
           ),
-          text = $container.querySelector('[placeholder="Untitled"]');
+          img =
-        title =
+            icon && icon.getAttribute('src')
-          (icon
+              ? `<img src="${
-            ? icon.getAttribute('src')
+                  icon.getAttribute('src').startsWith('/')
-              ? `<img src="${icon.getAttribute('src')}">`
+                    ? 'notion://www.notion.so'
-              : `${icon.getAttribute('aria-label')} `
+                    : ''
-            : '') +
+                }${icon.getAttribute('src')}">`
-          (text
+              : '',
+          emoji = icon ? icon.getAttribute('aria-label') : '';
+        let text = $container.querySelector('[placeholder="Untitled"]');
+        text = text
           ? text.innerText || 'Untitled'
           : [
               setTimeout(() => __electronApi.setWindowTitle(title), 250),
               title,
-              ][1]);
+            ][1];
         TITLE_OBSERVER.disconnect();
         TITLE_OBSERVER.observe($container, {
           childList: true,
@@ -258,9 +255,17 @@ module.exports = (store, __exports) => {
           characterData: true,
           attributes: true,
         });
-        if (tab_title !== title) {
+        if (
-          tab_title = title;
+          tab_title.img !== img ||
-          electron.ipcRenderer.sendToHost('enhancer:set-tab-title', title);
+          tab_title.emoji !== emoji ||
+          tab_title.text !== text
+        ) {
+          tab_title = {
+            img,
+            emoji,
+            text,
+          };
+          electron.ipcRenderer.sendToHost('enhancer:set-tab-title', tab_title);
         }
       };
       __electronApi.openInNewWindow = (urlPath) => {

mods/core/css/tabs.css

@@ -131,7 +131,10 @@ body,
   opacity: 0.8;
 }
 #tabs .tab img {
+  object-fit: cover;
+  height: 1em;
   width: 1em;
+  border-radius: 3px;
   margin: 0 0.5em -3px 0.1em;
 }
 #tabs .tab:first-child {

mods/core/render.js

@@ -383,13 +383,13 @@ module.exports = (store, __exports) => {
             if (selected) {
               this.views.active = +id;
               this.views.loaded[id].focus();
-              const electronWindow = electron.remote.getCurrentWindow();
+              const electronWindow = electron.remote.getCurrentWindow(),
-              if (
+                title =
-                electronWindow &&
+                  (this.state.tabs.get(+id).emoji
-                electronWindow.getTitle() !== this.state.tabs.get(+id).title
+                    ? `${this.state.tabs.get(+id).emoji} `
-              ) {
+                    : '') + this.state.tabs.get(+id).text;
-                electronWindow.setTitle(this.state.tabs.get(+id).title);
+              if (electronWindow && electronWindow.getTitle() !== title)
-              }
+                electronWindow.setTitle(title);
             }
           }
         }
@@ -427,6 +427,7 @@ module.exports = (store, __exports) => {
               document.body.style.setProperty(style[0], style[1]);
             break;
           case 'enhancer:set-tab-title':
+            console.log(event.args[0]);
             if (this.state.tabs.get(+event.target.id)) {
               this.setState({
                 tabs: new Map(
@@ -436,12 +437,15 @@ module.exports = (store, __exports) => {
                   })
                 ),
               });
-              const electronWindow = electron.remote.getCurrentWindow();
+              const electronWindow = electron.remote.getCurrentWindow(),
+                title =
+                  (event.args[0].emoji ? `${event.args[0].emoji} ` : '') +
+                  event.args[0].text;
               if (
                 event.target.id == this.views.current.id &&
-                electronWindow.getTitle() !== event.args[0]
+                electronWindow.getTitle() !== title
               )
-                electronWindow.setTitle(event.args[0]);
+                electronWindow.setTitle(title);
             }
             break;
           case 'enhancer:select-tab':
@@ -746,7 +750,7 @@ module.exports = (store, __exports) => {
                   },
                   React.createElement('span', {
                     dangerouslySetInnerHTML: {
-                      __html: title,
+                      __html: (title.img || '') + title.text,
                     },
                   }),
                   React.createElement(