various perf stuff + bugfixes + attempt at weekly view

mods/core/client.js

@@ -18,7 +18,7 @@ module.exports = (store, __exports) => {
 
   // additional hotkeys
   document.defaultView.addEventListener('keyup', (event) => {
-    if (event.code === 'F5') window.reload();
+    if (event.code === 'F5') location.reload();
     if (event.key === 'e' && (event.ctrlKey || event.metaKey))
       electron.ipcRenderer.send('enhancer:open-extension-menu');
   });

mods/core/css/dark.css

@@ -81,7 +81,8 @@
 .dark [style*='border-right: 1px solid rgba(255, 255, 255,'] {
   border-right: 1px solid var(--theme--table-border) !important;
 }
-.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] {
+.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'],
+.dark [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] {
   box-shadow: var(--theme--table-border) 0px -1px 0px !important;
 }
 .dark [style*='border-left: 1px solid rgba(255, 255, 255,'] {
@@ -90,12 +91,24 @@
 .dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] {
   box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
 }
+.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 1px 0px 0px inset'] {
+  box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
+}
+
+.dark
+  [style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'] {
+  background-image: linear-gradient(
+    to right,
+    var(--theme--bg_gray) 0%,
+    var(--theme--bg_gray) 100%
+  ) !important;
+}
 
 .dark [style*='background: rgb(71, 76, 80)'],
 .dark [style*='background: rgb(80, 85, 88)'],
 .dark [style*='background: rgb(98, 102, 104)'] {
   background: var(--theme--interactive_hover) !important;
-  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
 }
 
 /** ui colours **/

mods/core/css/light.css

@@ -15,7 +15,8 @@
   background: var(--theme--sidebar) !important;
 }
 .notion-body:not(.dark),
-.notion-body:not(.dark) [style*='background: white'],
+.notion-body:not(.dark)
+  [style*='background: white']:not(.notion-help-button):not([style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;']),
 .notion-body:not(.dark) [style*='background-color: white'] {
   background: var(--theme--main) !important;
 }
@@ -49,7 +50,9 @@
   .notion-scroller.horizontal.vertical
   .notion-selectable
   > a[style*='background: white'],
-.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'] {
+.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'] {
   background: var(--theme--card) !important;
 }
 .notion-body:not(.dark)
@@ -63,7 +66,9 @@
   box-shadow: var(--theme--main) -3px 0px 0px !important;
 }
 .notion-body:not(.dark)
-  [style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'] {
+  [style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] {
   box-shadow: var(--theme--main) -3px 0px 0px,
     var(--theme--table-border) 0px 1px 0px !important;
 }
@@ -102,12 +107,25 @@
   [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px inset'] {
   box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
 }
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.16) 1px 0px 0px inset'] {
+  box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
+}
+
+.notion-body:not(.dark)
+  [style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)'] {
+  background-image: linear-gradient(
+    to right,
+    var(--theme--bg_gray) 0%,
+    var(--theme--bg_gray) 100%
+  ) !important;
+}
 
 .notion-body:not(.dark) [style*='background: rgba(55, 53, 47,'],
 .notion-body:not(.dark) [style*='background: rgb(239, 239, 238)'],
 .notion-body:not(.dark) [style*='background: rgba(206, 205, 202, 0.5)'] {
   background: var(--theme--interactive_hover) !important;
-  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
 }
 
 /** ui colours **/

mods/core/css/shared.css

@@ -9,6 +9,12 @@
 
 @import './localised.css';
 
+/* colour help button - one of the few specific classes it does give us */
+.notion-help-button {
+  background: var(--theme--interactive_hover) !important;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
+}
+
 /* prevent block hover options overlaying topbar */
 *:not([style*='z-index']) {
   z-index: 1;

mods/core/menu.js

@@ -18,7 +18,7 @@ window['__start'] = async () => {
   document.querySelector('#menu-titlebar').appendChild(buttons.element);
 
   document.defaultView.addEventListener('keyup', (event) => {
-    if (event.code === 'F5') window.reload();
+    if (event.code === 'F5') location.reload();
     if ((event.ctrlKey || event.metaKey) && event.key === 'e') browser.close();
     if (!(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey) {
       if (

mods/emoji-sets/mod.js

@@ -42,28 +42,40 @@ module.exports = {
     'renderer/preload.js'(store, __exports) {
       document.addEventListener('readystatechange', (event) => {
         if (document.readyState !== 'complete') return false;
+        let queue = [];
         const observer = new MutationObserver((list, observer) => {
-          document
+          if (!queue.length) requestAnimationFrame(process);
-            .querySelectorAll(
+          queue.push(...list);
-              '[src*="notion-emojis.s3-us-west-2.amazonaws.com"]:not(.notion-emoji)'
+        });
-            )
+        observer.observe(document, {
-            .forEach((el) => el.remove());
+          childList: true,
-          if (
+          subtree: true,
-            (store().style === 'microsoft' && process.platform === 'win32') ||
+          characterData: true,
-            (store().style === 'apple' && process.platform === 'darwin')
+        });
-          ) {
+        function process() {
+          queue = [];
+
+          // if (
+          //   (store().style === 'microsoft' && process.platform === 'win32') ||
+          //   (store().style === 'apple' && process.platform === 'darwin')
+          // ) {
+          //   document
+          //     .querySelectorAll('.notion-record-icon .notion-emoji')
+          //     .forEach((el) => {
+          //       el.outerHTML = `<span style="font-size: 0.9em; position: relative; bottom: 0.1em; right: 0.05em">
+          //         ${el.getAttribute('alt')}
+          //       </span>`;
+          //     });
+          //   document.querySelectorAll('.notion-emoji').forEach((el) => {
+          //     el.outerHTML = `<span>${el.getAttribute('alt')}</span>`;
+          //   });
+          // } -- attempt load improvement by using actual emojis instead of pictures
+          // ...breaks changing them again after
+
+          if (store().style !== 'twitter' || tweaked) {
             document
-              .querySelectorAll('.notion-record-icon .notion-emoji')
+              .querySelectorAll('[src*="notion-emojis.s3"]:not(.notion-emoji)')
-              .forEach((el) => {
+              .forEach((el) => el.remove());
-                el.outerHTML = `<span style="font-size: 0.9em; position: relative; bottom: 0.1em; right: 0.05em">
-                  ${el.getAttribute('alt')}
-                </span>`;
-              });
-            document.querySelectorAll('.notion-emoji').forEach((el) => {
-              el.outerHTML = `<span>${el.getAttribute('alt')}</span>`;
-            });
-            tweaked = true;
-          } else if (store().style !== 'twitter' || tweaked) {
             document.querySelectorAll('.notion-emoji').forEach((el) => {
               el.style.setProperty(
                 'background',
@@ -75,11 +87,7 @@ module.exports = {
             });
             tweaked = true;
           }
-        });
+        }
-        observer.observe(document, {
-          childList: true,
-          subtree: true,
-        });
       });
     },
   },

mods/night-shift/mod.js

@@ -18,23 +18,26 @@ module.exports = {
     'renderer/preload.js'(store, __exports) {
       document.addEventListener('readystatechange', (event) => {
         if (document.readyState !== 'complete') return false;
-        const observer = new MutationObserver((list, observer) => {
+        const attempt_interval = setInterval(enhance, 500);
-          const mode = window.matchMedia('(prefers-color-scheme: dark)')
+        function enhance() {
-            .matches;
+          const notion_elem = document.querySelector('.notion-app-inner');
-          if (
+          if (!notion_elem) return;
-            document.querySelector(`.notion-${mode ? 'light' : 'dark'}-theme`)
+          clearInterval(attempt_interval);
-          )
+          process([{ target: notion_elem }]);
-            document.querySelector(
+          const observer = new MutationObserver(process);
-              '.notion-app-inner'
+          observer.observe(notion_elem, {
-            ).className = `notion-app-inner notion-${
+            attributes: true,
-              mode ? 'dark' : 'light'
+          });
+          function process(list, observer) {
+            const mode = `notion-app-inner notion-${
+              window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light'
             }-theme`;
-        });
+            if (list[0].target.className !== mode)
-        observer.observe(document, {
+              list[0].target.className = mode;
-          childList: true,
+          }
-          subtree: true,
+        }
-          attributes: true,
-        });
       });
     },
   },

mods/right-to-left/mod.js

@@ -20,20 +20,18 @@ module.exports = {
         if (document.readyState !== 'complete') return false;
         let queue = [];
         const observer = new MutationObserver((list, observer) => {
-          if (!queue.length) requestAnimationFrame(process);
+          if (!queue.length) requestAnimationFrame(() => process(list));
           queue.push(...list);
-          console.log(queue.length);
         });
         observer.observe(document, {
           childList: true,
           subtree: true,
           characterData: true,
         });
-        function process() {
+        function process(list) {
-          const cache = queue;
           queue = [];
-          for (let { target } of cache) {
+          for (let { target } of list) {
-            if (!target.innerText) return;
+            if (!target.innerText) continue;
             if (target.getAttribute('dir') !== 'auto')
               target.setAttribute('dir', 'auto');
             if (

mods/weekly-view/mod.js

@@ -18,45 +18,54 @@ module.exports = {
     'renderer/preload.js'(store, __exports) {
       document.addEventListener('readystatechange', (event) => {
         if (document.readyState !== 'complete') return false;
+        let queue = [];
         const observer = new MutationObserver((list, observer) => {
-          document
+          if (!queue.length) requestAnimationFrame(process);
-            .querySelectorAll('.notion-collection-view-select > :nth-child(2)')
+          queue.push(...list);
-            .forEach((collection_view) => {
-              if (collection_view.innerText === 'weekly') {
-                collection_view =
-                  collection_view.parentElement.parentElement.parentElement
-                    .parentElement.parentElement;
-                // collection_view.classList.add('weekly_view');
-                // document
-                //   .querySelectorAll('.adi_week_cal .notion-calendar-view-day')
-                //   .forEach((day) => {
-                //     if (day.style.background)
-                //       day.parentElement.parentElement.classList.add(
-                //         'this_week'
-                //       );
-                //   });
-                // var weeks = document.querySelectorAll('.this_week')[0].parentElement
-                //   .children;
-                // // delete al div that not contain a class of "this_week"
-                // while (weeks.length > 1) {
-                //   for (let index = 0; index < weeks.length; index++) {
-                //     // const element = array[index];
-                //     if (weeks[index].classList.contains('this_week')) {
-                //       console.log('yes');
-                //     } else {
-                //       // console.log(index);
-                //       weeks[index].remove();
-                //     }
-                //   }
-                // }
-              }
-            });
         });
         observer.observe(document, {
           childList: true,
           subtree: true,
-          attributes: true,
         });
+        function process() {
+          queue = [];
+
+          for (let elem of document.getElementsByClassName(
+            'notion-collection-view-select'
+          )) {
+            // console.log("this is working2");
+            if (elem.innerText === 'weekly') {
+              // console.log("this is working3");
+              var days_list = elem.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
+                'notion-calendar-view-day'
+              );
+              for (let index = 0; index < days_list.length; index++) {
+                // const element = array[index];
+                if (days_list[index].style.background) {
+                  days_list[index].parentElement.parentElement.classList.add(
+                    'this_week'
+                  );
+                  // console.log("yay");
+                }
+              }
+              var weeks = document.getElementsByClassName('this_week')[0]
+                .parentElement.children;
+              // delete al div that not contain a class of "this_week"
+              while (weeks.length > 1) {
+                for (let index = 0; index < weeks.length; index++) {
+                  // const element = array[index];
+
+                  if (weeks[index].classList.contains('this_week')) {
+                    console.log('yes');
+                  } else {
+                    // console.log(index);
+                    weeks[index].remove();
+                  }
+                }
+              }
+            }
+          }
+        }
       });
     },
   },