From bb660a6bbbf0632eea9a58bd3554a5280061f5bc Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 16 Aug 2020 23:44:45 +1000 Subject: [PATCH] various perf stuff + bugfixes + attempt at weekly view --- mods/core/client.js | 2 +- mods/core/css/dark.css | 17 +++++++-- mods/core/css/light.css | 26 +++++++++++--- mods/core/css/shared.css | 6 ++++ mods/core/menu.js | 2 +- mods/emoji-sets/mod.js | 58 +++++++++++++++++------------- mods/night-shift/mod.js | 35 +++++++++--------- mods/right-to-left/mod.js | 10 +++--- mods/weekly-view/mod.js | 75 ++++++++++++++++++++++----------------- 9 files changed, 143 insertions(+), 88 deletions(-) diff --git a/mods/core/client.js b/mods/core/client.js index 6631d17..43d9137 100644 --- a/mods/core/client.js +++ b/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'); }); diff --git a/mods/core/css/dark.css b/mods/core/css/dark.css index cf0c7a3..6e1904f 100644 --- a/mods/core/css/dark.css +++ b/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 **/ diff --git a/mods/core/css/light.css b/mods/core/css/light.css index 0fdf6d6..995b45c 100644 --- a/mods/core/css/light.css +++ b/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 **/ diff --git a/mods/core/css/shared.css b/mods/core/css/shared.css index 5a146cc..53b04bf 100644 --- a/mods/core/css/shared.css +++ b/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; diff --git a/mods/core/menu.js b/mods/core/menu.js index 7c4ab78..afdd824 100644 --- a/mods/core/menu.js +++ b/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 ( diff --git a/mods/emoji-sets/mod.js b/mods/emoji-sets/mod.js index 4b0c11b..2a171ae 100644 --- a/mods/emoji-sets/mod.js +++ b/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 - .querySelectorAll( - '[src*="notion-emojis.s3-us-west-2.amazonaws.com"]:not(.notion-emoji)' - ) - .forEach((el) => el.remove()); - if ( - (store().style === 'microsoft' && process.platform === 'win32') || - (store().style === 'apple' && process.platform === 'darwin') - ) { + if (!queue.length) requestAnimationFrame(process); + queue.push(...list); + }); + observer.observe(document, { + childList: true, + subtree: true, + characterData: true, + }); + 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 = ` + // ${el.getAttribute('alt')} + // `; + // }); + // document.querySelectorAll('.notion-emoji').forEach((el) => { + // el.outerHTML = `${el.getAttribute('alt')}`; + // }); + // } -- 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') - .forEach((el) => { - el.outerHTML = ` - ${el.getAttribute('alt')} - `; - }); - document.querySelectorAll('.notion-emoji').forEach((el) => { - el.outerHTML = `${el.getAttribute('alt')}`; - }); - tweaked = true; - } else if (store().style !== 'twitter' || tweaked) { + .querySelectorAll('[src*="notion-emojis.s3"]:not(.notion-emoji)') + .forEach((el) => el.remove()); 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, - }); + } }); }, }, diff --git a/mods/night-shift/mod.js b/mods/night-shift/mod.js index 02dfb4e..2b273fa 100644 --- a/mods/night-shift/mod.js +++ b/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 mode = window.matchMedia('(prefers-color-scheme: dark)') - .matches; - if ( - document.querySelector(`.notion-${mode ? 'light' : 'dark'}-theme`) - ) - document.querySelector( - '.notion-app-inner' - ).className = `notion-app-inner notion-${ - mode ? 'dark' : 'light' + const attempt_interval = setInterval(enhance, 500); + function enhance() { + const notion_elem = document.querySelector('.notion-app-inner'); + if (!notion_elem) return; + clearInterval(attempt_interval); + process([{ target: notion_elem }]); + const observer = new MutationObserver(process); + observer.observe(notion_elem, { + attributes: true, + }); + function process(list, observer) { + const mode = `notion-app-inner notion-${ + window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light' }-theme`; - }); - observer.observe(document, { - childList: true, - subtree: true, - attributes: true, - }); + if (list[0].target.className !== mode) + list[0].target.className = mode; + } + } }); }, }, diff --git a/mods/right-to-left/mod.js b/mods/right-to-left/mod.js index c0de109..aae6317 100644 --- a/mods/right-to-left/mod.js +++ b/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() { - const cache = queue; + function process(list) { queue = []; - for (let { target } of cache) { - if (!target.innerText) return; + for (let { target } of list) { + if (!target.innerText) continue; if (target.getAttribute('dir') !== 'auto') target.setAttribute('dir', 'auto'); if ( diff --git a/mods/weekly-view/mod.js b/mods/weekly-view/mod.js index b288f54..cbdfa40 100644 --- a/mods/weekly-view/mod.js +++ b/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 - .querySelectorAll('.notion-collection-view-select > :nth-child(2)') - .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(); - // } - // } - // } - } - }); + if (!queue.length) requestAnimationFrame(process); + queue.push(...list); }); 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(); + } + } + } + } + } + } }); }, },