fix(trello): optimize render for slow networks (#2345)

* fix(trello): optimize render for slow networks * feat(trello): add inject proposal * feat(notion): make injection great again * fix(notion): bug on changing page
toggl · Nov 25, 2024 · 073a7c9 · 073a7c9
1 parent 4dfdcbf
commit 073a7c9
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 137 deletions.
diff --git a/src/content/notion.js b/src/content/notion.js
@@ -3,14 +3,14 @@
  * @urlAlias notion.so
  * @urlRegex *://*.notion.so/*
  */
-'use strict';
+'use strict'
 
-function createWrapper (link) {
-  const wrapper = document.createElement('div');
-  wrapper.classList.add('toggl-button-notion-wrapper');
-  wrapper.appendChild(link);
+function createWrapper(link) {
+  const wrapper = document.createElement('div')
+  wrapper.classList.add('toggl-button-notion-wrapper')
+  wrapper.appendChild(link)
 
-  return wrapper;
+  return wrapper
 }
 
 // Selectors here are madness, it works for as of Dec 4th 2019
@@ -19,79 +19,84 @@ togglbutton.render(
   '.notion-peek-renderer:not(.toggl)',
   { observe: true },
   function (elem) {
-    if (!elem) return;
-    function getDescription () {
-      const descriptionElem = elem.querySelector('.notion-peek-renderer .notion-scroller h1[contenteditable]');
-      return descriptionElem ? descriptionElem.textContent.trim() : '';
+    if (!elem) return
+    function getDescription() {
+      const descriptionElem = elem.querySelector(
+        '.notion-peek-renderer .notion-scroller h1[contenteditable]',
+      )
+      return descriptionElem ? descriptionElem.textContent.trim() : ''
     }
 
     const link = togglbutton.createTimerLink({
       className: 'notion',
       description: getDescription,
       autoTrackable: true,
-    });
+    })
 
-    const wrapper = createWrapper(link);
+    const wrapper = createWrapper(link)
 
-    const root = elem.querySelector('.notion-topbar-share-menu');
+    const root = elem.querySelector('.notion-topbar-share-menu')
     if (root) {
-      root.parentElement.prepend(wrapper);
+      root.parentElement.prepend(wrapper)
     } else {
-      const selector = elem.querySelector('div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)')
-      if (!selector) return;
+      const selector = elem.querySelector(
+        'div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)',
+      )
+      if (!selector) return
       selector.prepend(wrapper)
     }
-  }
-);
-
-setTimeout(() => {
-  togglbutton.render(
-    '.notion-topbar-action-buttons',
-    { observe: true, debounceInterval: 1000 },
-    function (elem) {
-      if (!elem) return;
-      const elements = document.querySelectorAll('.notion-topbar-action-buttons .toggl-button-notion-wrapper')
-      if(elements.length > 0) {
-        elements.forEach(element => element.remove())
+  },
+)
+
+togglbutton.inject(
+  {
+    node: 'main.notion-frame .notion-scroller:not(.toggl)',
+    renderer: function (elem) {
+      const elements = document.querySelectorAll(
+        '.notion-topbar-action-buttons .toggl-button-notion-wrapper',
+      )
+
+      if (elements.length > 0) {
+        elements.forEach((element) => element.remove())
       }
 
-      elem.style.position = 'relative';
-
-      function getDescription () {
-        const controls = document.querySelector('.notion-page-controls');
-        const topBar = document.querySelector('.notion-topbar');
-        let title = '';
+      function getDescription() {
+        const controls = document.querySelector('.notion-page-controls')
+        const topBar = document.querySelector('.notion-topbar')
+        let title = ''
 
         if (controls) {
           if (controls.nextElementSibling) {
-            title = controls.nextElementSibling;
+            title = controls.nextElementSibling
           } else {
-            const parent = controls.parentElement;
-            title = parent ? parent.nextElementSibling : '';
+            const parent = controls.parentElement
+            title = parent ? parent.nextElementSibling : ''
           }
         }
         if (!title && topBar) {
           const breadcrumbs = topBar.querySelector('div > .notranslate')
           if (breadcrumbs) {
-            title = breadcrumbs.childNodes[breadcrumbs.childNodes.length - 1].querySelector('.notranslate:last-child')
+            title = breadcrumbs.childNodes[
+              breadcrumbs.childNodes.length - 1
+            ].querySelector('.notranslate:last-child')
           }
         }
 
-        return title ? title.textContent.trim() : '';
+        return title ? title.textContent.trim() : ''
       }
 
       const link = togglbutton.createTimerLink({
         className: 'notion',
         description: getDescription,
-      });
+      })
 
-      const wrapper = createWrapper(link);
+      const wrapper = createWrapper(link)
 
-      elem.prepend(wrapper);
+      document.querySelector('.notion-topbar-action-buttons').prepend(wrapper)
     },
-    '.notion-topbar .shadow-cursor-breadcrumb *,title'
-  );
-}, 2000)
+  },
+  { observe: true },
+)
 
 /**
  * @name Notion Calendar
@@ -102,18 +107,17 @@ togglbutton.render(
   'div[data-context-panel-root]:not(.toggl)',
   { observe: true },
   function (elem) {
-    if (!elem) return;
-    function getDescription () {
-      const descriptionElem = elem.querySelector('div[contenteditable="true"]');
-      return descriptionElem ? descriptionElem.textContent.trim() : '';
+    if (!elem) return
+    function getDescription() {
+      const descriptionElem = elem.querySelector('div[contenteditable="true"]')
+      return descriptionElem ? descriptionElem.textContent.trim() : ''
     }
-    if(!window.location.hostname.includes('calendar.notion.so')) return;
+    if (!window.location.hostname.includes('calendar.notion.so')) return
     const link = togglbutton.createTimerLink({
       className: 'notion-calendar',
-      description: getDescription
-    });
-
-    elem.firstChild.prepend(link);
-  }
-);
+      description: getDescription,
+    })
 
+    elem.firstChild.prepend(link)
+  },
+)
diff --git a/src/content/trello.js b/src/content/trello.js
@@ -13,92 +13,84 @@ const getProject = () => {
   return project ? project.textContent.trim() : ''
 }
 
-const cardContainerSelector = '.window-wrapper'
-
-togglbutton.render(
-  '#card-back-name:not(.toggl)',
-  { observe: true, debounceInterval: 1000 },
-  (elem) => {
-    const actionsWrapper = $(
-      '#layer-manager-card-back section:nth-child(4) > ul',
-    )
-
-    if (!actionsWrapper) {
-      return
-    }
-
-    const getDescription = () => {
-      const description = $('#card-back-name')
-      return description ? description.textContent.trim() : ''
-    }
-
-    const container = createTag('div', 'button-link trello-tb-wrapper')
-
-    const link = togglbutton.createTimerLink({
-      className: 'trello',
-      description: getDescription,
-      projectName: getProject,
-      container: '[data-testid="card-back-name"]',
-      autoTrackable: true,
-    })
-
-    // Pass through click on Trello button to the timer link
-    container.addEventListener('click', (e) => {
-      link.click()
-    })
-
-    container.appendChild(link)
+const getCardName = () => {
+  return document.querySelector('#card-back-name')?.textContent.trim()
+}
 
-    actionsWrapper.prepend(container)
+togglbutton.inject(
+  {
+    node: '[data-testid="card-back-move-card-button"]:not(.toggl)',
+    renderer: (element) => {
+      const container = createTag('li', 'button-link trello-tb-wrapper')
+
+      const link = togglbutton.createTimerLink({
+        className: 'trello',
+        description: getCardName,
+        projectName: getProject,
+        container: '[data-testid="card-back-name"]',
+        autoTrackable: true,
+      })
+
+      // Pass through click on Trello button to the timer link
+      container.addEventListener('click', (e) => {
+        link.click()
+      })
+
+      container.appendChild(link)
+
+      element.parentNode.parentNode.prepend(container, element)
+    },
   },
-  cardContainerSelector,
+  { observe: true },
 )
 
 /* Checklist buttons */
-togglbutton.render(
-  '[data-testid="check-item-container"]:not(.toggl)',
-  { observe: true, debounceInterval: 1000 },
-  (elem) => {
-    const getTitleText = () => {
-      const description = $('#card-back-name')
-      return description ? description.textContent.trim() : ''
-    }
-
-    const getTaskText = () => {
-      const task = $('.ak-renderer-wrapper', elem)
-      return task ? task.textContent.trim() : ''
-    }
-
-    const getDescription = () => {
-      return `${getTitleText()} - ${getTaskText()}`
-    }
-
-    const link = togglbutton.createTimerLink({
-      className: 'trello-list',
-      buttonType: 'minimal',
-      projectName: getProject,
-      description: getDescription,
-      container: '[data-testid="card-back-name"]',
-    })
-    const wrapper = document.createElement('span')
-    wrapper.classList.add('checklist-item-menu')
-    wrapper.style.display = 'flex'
-    wrapper.style.alignItems = 'center'
-    wrapper.style.marginLeft = '4px'
-    wrapper.appendChild(link)
-
-    // Add StopPropagation to prevent the card from closing.
-    wrapper.addEventListener('click', (e) => {
-      e.preventDefault()
-      e.stopPropagation()
-
-      // Click on the Toggl button
-      link.querySelector('button').click()
-    })
 
-    elem
-      .querySelector('[data-testid="check-item-hover-buttons"]')
-      .appendChild(wrapper)
+togglbutton.injectMany(
+  {
+    node: '[data-testid="check-item-hover-buttons"]:not(.toggl)',
+    renderer: (elements) => {
+      // Loop through all the checklist items.
+      for (const element of elements) {
+        const getTaskText = () => {
+          return (
+            element.parentNode
+              .querySelector('.ak-renderer-wrapper')
+              ?.textContent.trim() ?? ''
+          )
+        }
+
+        const getDescription = () => {
+          return `${getCardName()} - ${getTaskText()}`
+        }
+
+        const link = togglbutton.createTimerLink({
+          className: 'trello-list',
+          buttonType: 'minimal',
+          projectName: getProject,
+          description: getDescription,
+          container: '[data-testid="card-back-name"]',
+        })
+
+        const wrapper = document.createElement('span')
+        wrapper.classList.add('checklist-item-menu')
+        wrapper.style.display = 'flex'
+        wrapper.style.alignItems = 'center'
+        wrapper.style.marginLeft = '4px'
+        wrapper.appendChild(link)
+
+        // Add StopPropagation to prevent the card from closing.
+        wrapper.addEventListener('click', (e) => {
+          e.preventDefault()
+          e.stopPropagation()
+
+          // Click on the Toggl button
+          link.querySelector('button').click()
+        })
+
+        element.appendChild(wrapper)
+      }
+    },
   },
-  cardContainerSelector,
+  { observe: true },
 )