Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 1 | import {injectScript, injectStyles, injectStylesheet} from '../../common/contentScriptsUtils.js'; |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 2 | import {getOptions, isOptionEnabled} from '../../common/optionsUtils.js'; |
Adrià Vilanova Martínez | 1f65252 | 2021-10-14 00:23:23 +0200 | [diff] [blame] | 3 | import {injectPreviousPostsLinksUnifiedProfileIfEnabled} from '../utilsCommon/unifiedProfiles.js'; |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 4 | |
Adrià Vilanova Martínez | 27c6996 | 2021-07-17 23:32:51 +0200 | [diff] [blame] | 5 | import AvatarsHandler from './avatars.js'; |
Adrià Vilanova Martínez | 462280f | 2021-08-07 22:59:02 +0200 | [diff] [blame] | 6 | import {batchLock} from './batchLock.js'; |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 7 | import {injectDarkModeButton, isDarkThemeOn} from './darkMode.js'; |
Adrià Vilanova Martínez | eebc0ac | 2022-01-05 14:45:53 +0100 | [diff] [blame] | 8 | // #!if ['chromium', 'chromium_mv3'].includes(browser_target) |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 9 | import {applyDragAndDropFixIfEnabled} from './dragAndDropFix.js'; |
Adrià Vilanova Martínez | eebc0ac | 2022-01-05 14:45:53 +0100 | [diff] [blame] | 10 | // #!endif |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 11 | import {unifiedProfilesFix} from './unifiedProfiles.js'; |
Adrià Vilanova Martínez | 1e10d19 | 2021-12-31 16:01:13 +0100 | [diff] [blame] | 12 | import Workflows from './workflows/workflows.js'; |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 13 | |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 14 | var mutationObserver, intersectionObserver, intersectionOptions, options, |
Adrià Vilanova Martínez | 1e10d19 | 2021-12-31 16:01:13 +0100 | [diff] [blame] | 15 | avatars, workflows; |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 16 | |
| 17 | const watchedNodesSelectors = [ |
| 18 | // App container (used to set up the intersection observer and inject the dark |
| 19 | // mode button) |
| 20 | 'ec-app', |
| 21 | |
| 22 | // Load more bar (for the "load more"/"load all" buttons) |
| 23 | '.load-more-bar', |
| 24 | |
Adrià Vilanova Martínez | 531cd07 | 2021-12-05 20:15:43 +0100 | [diff] [blame] | 25 | // Username span/editor inside ec-unified-user (user profile view) |
Adrià Vilanova Martínez | 1f65252 | 2021-10-14 00:23:23 +0200 | [diff] [blame] | 26 | 'ec-unified-user .scTailwindUser_profileUsercarddetails', |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 27 | |
| 28 | // Rich text editor |
| 29 | 'ec-movable-dialog', |
| 30 | 'ec-rich-text-editor', |
| 31 | |
| 32 | // Read/unread bulk action in the list of thread, for the batch lock feature |
| 33 | 'ec-bulk-actions material-button[debugid="mark-read-button"]', |
| 34 | 'ec-bulk-actions material-button[debugid="mark-unread-button"]', |
| 35 | |
| 36 | // Thread list items (used to inject the avatars) |
| 37 | 'li', |
| 38 | |
| 39 | // Thread list (used for the autorefresh feature) |
| 40 | 'ec-thread-list', |
| 41 | |
| 42 | // Unified profile iframe |
| 43 | 'iframe', |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 44 | ]; |
| 45 | |
| 46 | function handleCandidateNode(node) { |
| 47 | if (typeof node.classList !== 'undefined') { |
| 48 | if (('tagName' in node) && node.tagName == 'EC-APP') { |
| 49 | // Set up the intersectionObserver |
| 50 | if (typeof intersectionObserver === 'undefined') { |
| 51 | var scrollableContent = node.querySelector('.scrollable-content'); |
| 52 | if (scrollableContent !== null) { |
| 53 | intersectionOptions = { |
| 54 | root: scrollableContent, |
| 55 | rootMargin: '0px', |
| 56 | threshold: 1.0, |
| 57 | }; |
| 58 | |
| 59 | intersectionObserver = new IntersectionObserver( |
| 60 | intersectionCallback, intersectionOptions); |
| 61 | } |
| 62 | } |
| 63 | |
| 64 | // Inject the dark mode button |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 65 | // TODO(avm99963): make this feature dynamic. |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 66 | if (options.ccdarktheme && options.ccdarktheme_mode == 'switch') { |
| 67 | var rightControl = node.querySelector('header .right-control'); |
| 68 | if (rightControl !== null) |
| 69 | injectDarkModeButton(rightControl, options.ccdarktheme_switch_status); |
| 70 | } |
| 71 | } |
| 72 | |
| 73 | // Start the intersectionObserver for the "load more"/"load all" buttons |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 74 | // inside a thread if the option is currently enabled. |
| 75 | if (node.classList.contains('load-more-bar')) { |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 76 | if (typeof intersectionObserver !== 'undefined') { |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 77 | getOptions(['thread', 'threadall']).then(threadOptions => { |
| 78 | if (threadOptions.thread) |
| 79 | intersectionObserver.observe( |
| 80 | node.querySelector('.load-more-button')); |
| 81 | if (threadOptions.threadall) |
| 82 | intersectionObserver.observe( |
| 83 | node.querySelector('.load-all-button')); |
| 84 | }); |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 85 | } else { |
| 86 | console.warn( |
| 87 | '[infinitescroll] ' + |
| 88 | 'The intersectionObserver is not ready yet.'); |
| 89 | } |
| 90 | } |
| 91 | |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 92 | // Show the "previous posts" links if the option is currently enabled. |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 93 | // Here we're selecting the 'ec-user > div' element (unique child) |
Adrià Vilanova Martínez | 1f65252 | 2021-10-14 00:23:23 +0200 | [diff] [blame] | 94 | if (node.matches( |
| 95 | 'ec-unified-user .scTailwindUser_profileUsercarddetails')) { |
| 96 | injectPreviousPostsLinksUnifiedProfileIfEnabled( |
| 97 | /* isCommunityConsole = */ true); |
| 98 | } |
| 99 | |
Adrià Vilanova Martínez | eebc0ac | 2022-01-05 14:45:53 +0100 | [diff] [blame] | 100 | // #!if ['chromium', 'chromium_mv3'].includes(browser_target) |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 101 | // Fix the drag&drop issue with the rich text editor if the option is |
| 102 | // currently enabled. |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 103 | // |
| 104 | // We target both tags because in different contexts different |
| 105 | // elements containing the text editor get added to the DOM structure. |
| 106 | // Sometimes it's a EC-MOVABLE-DIALOG which already contains the |
| 107 | // EC-RICH-TEXT-EDITOR, and sometimes it's the EC-RICH-TEXT-EDITOR |
| 108 | // directly. |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 109 | if (('tagName' in node) && |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 110 | (node.tagName == 'EC-MOVABLE-DIALOG' || |
| 111 | node.tagName == 'EC-RICH-TEXT-EDITOR')) { |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 112 | applyDragAndDropFixIfEnabled(node); |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 113 | } |
Adrià Vilanova Martínez | eebc0ac | 2022-01-05 14:45:53 +0100 | [diff] [blame] | 114 | // #!endif |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 115 | |
Adrià Vilanova Martínez | 1e10d19 | 2021-12-31 16:01:13 +0100 | [diff] [blame] | 116 | // Inject the batch lock and workflow buttons in the thread list if the |
| 117 | // corresponding options are currently enabled. |
| 118 | // The order is the inverse because the first one will be shown last. |
| 119 | if (batchLock.shouldAddButton(node)) |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 120 | batchLock.addButtonIfEnabled(node); |
Adrià Vilanova Martínez | 1e10d19 | 2021-12-31 16:01:13 +0100 | [diff] [blame] | 121 | |
| 122 | if (workflows.shouldAddThreadListBtn(node)) |
| 123 | workflows.addThreadListBtnIfEnabled(node); |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 124 | |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 125 | // Inject avatar links to threads in the thread list. injectIfEnabled is |
| 126 | // responsible of determining whether it should run or not depending on its |
| 127 | // current setting. |
| 128 | if (('tagName' in node) && (node.tagName == 'LI') && |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 129 | node.querySelector('ec-thread-summary') !== null) { |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 130 | avatars.injectIfEnabled(node); |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 131 | } |
| 132 | |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 133 | // Set up the autorefresh list feature. The setUp function is responsible |
| 134 | // of determining whether it should run or not depending on the current |
| 135 | // setting. |
| 136 | if (('tagName' in node) && node.tagName == 'EC-THREAD-LIST') { |
avm99963 | fd22267 | 2021-08-12 23:23:01 +0200 | [diff] [blame] | 137 | window.TWPTAutoRefresh.setUp(); |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 138 | } |
| 139 | |
| 140 | // Redirect unified profile iframe to dark version if applicable |
| 141 | if (node.tagName == 'IFRAME' && isDarkThemeOn(options) && |
| 142 | unifiedProfilesFix.checkIframe(node)) { |
| 143 | unifiedProfilesFix.fixIframe(node); |
| 144 | } |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 145 | } |
| 146 | } |
| 147 | |
| 148 | function handleRemovedNode(node) { |
| 149 | // Remove snackbar when exiting thread list view |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 150 | if ('tagName' in node && node.tagName == 'EC-THREAD-LIST') { |
avm99963 | fd22267 | 2021-08-12 23:23:01 +0200 | [diff] [blame] | 151 | window.TWPTAutoRefresh.hideUpdatePrompt(); |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 152 | } |
| 153 | } |
| 154 | |
| 155 | function mutationCallback(mutationList, observer) { |
| 156 | mutationList.forEach((mutation) => { |
| 157 | if (mutation.type == 'childList') { |
| 158 | mutation.addedNodes.forEach(function(node) { |
| 159 | handleCandidateNode(node); |
| 160 | }); |
| 161 | |
| 162 | mutation.removedNodes.forEach(function(node) { |
| 163 | handleRemovedNode(node); |
| 164 | }); |
| 165 | } |
| 166 | }); |
| 167 | } |
| 168 | |
| 169 | function intersectionCallback(entries, observer) { |
| 170 | entries.forEach(entry => { |
| 171 | if (entry.isIntersecting) { |
| 172 | entry.target.click(); |
| 173 | } |
| 174 | }); |
| 175 | }; |
| 176 | |
| 177 | var observerOptions = { |
| 178 | childList: true, |
| 179 | subtree: true, |
| 180 | }; |
| 181 | |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 182 | getOptions(null).then(items => { |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 183 | options = items; |
| 184 | |
Adrià Vilanova Martínez | 27c6996 | 2021-07-17 23:32:51 +0200 | [diff] [blame] | 185 | // Initialize classes needed by the mutation observer |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 186 | avatars = new AvatarsHandler(); |
Adrià Vilanova Martínez | 1e10d19 | 2021-12-31 16:01:13 +0100 | [diff] [blame] | 187 | workflows = new Workflows(); |
Adrià Vilanova Martínez | 27c6996 | 2021-07-17 23:32:51 +0200 | [diff] [blame] | 188 | |
avm99963 | b6f68b6 | 2021-08-12 23:13:06 +0200 | [diff] [blame] | 189 | // autoRefresh is initialized in start.js |
avm99963 | d3f4ac0 | 2021-08-12 18:36:58 +0200 | [diff] [blame] | 190 | |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 191 | // Before starting the mutation Observer, check whether we missed any |
| 192 | // mutations by manually checking whether some watched nodes already |
| 193 | // exist. |
| 194 | var cssSelectors = watchedNodesSelectors.join(','); |
| 195 | document.querySelectorAll(cssSelectors) |
| 196 | .forEach(node => handleCandidateNode(node)); |
| 197 | |
| 198 | mutationObserver = new MutationObserver(mutationCallback); |
| 199 | mutationObserver.observe(document.body, observerOptions); |
| 200 | |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 201 | // TODO(avm99963): The following features are not dynamic. Make them be. |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 202 | if (options.fixedtoolbar) { |
| 203 | injectStyles( |
| 204 | 'ec-bulk-actions{position: sticky; top: 0; background: var(--TWPT-primary-background, #fff); z-index: 96;}'); |
| 205 | } |
| 206 | |
| 207 | if (options.increasecontrast) { |
| 208 | injectStyles( |
| 209 | '.thread-summary.read:not(.checked){background: var(--TWPT-thread-read-background, #ecedee)!important;}'); |
| 210 | } |
| 211 | |
| 212 | if (options.stickysidebarheaders) { |
| 213 | injectStyles( |
| 214 | 'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}'); |
| 215 | } |
| 216 | |
| 217 | if (options.enhancedannouncementsdot) { |
| 218 | injectStylesheet( |
| 219 | chrome.runtime.getURL('css/enhanced_announcements_dot.css')); |
| 220 | } |
| 221 | |
| 222 | if (options.repositionexpandthread) { |
Adrià Vilanova Martínez | 27c6996 | 2021-07-17 23:32:51 +0200 | [diff] [blame] | 223 | injectStylesheet(chrome.runtime.getURL('css/reposition_expand_thread.css')); |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 224 | } |
| 225 | |
Adrià Vilanova Martínez | 9d27c21 | 2021-12-05 13:54:10 +0100 | [diff] [blame] | 226 | if (options.imagemaxheight) { |
| 227 | injectStylesheet(chrome.runtime.getURL('css/image_max_height.css')); |
| 228 | } |
| 229 | |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 230 | if (options.ccforcehidedrawer) { |
| 231 | var drawer = document.querySelector('material-drawer'); |
| 232 | if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) { |
| 233 | document.querySelector('.material-drawer-button').click(); |
| 234 | } |
| 235 | } |
| 236 | |
Adrià Vilanova Martínez | d269c62 | 2021-09-04 18:35:55 +0200 | [diff] [blame] | 237 | // Batch lock |
| 238 | injectScript(chrome.runtime.getURL('batchLockInject.bundle.js')); |
| 239 | injectStylesheet(chrome.runtime.getURL('css/batchlock_inject.css')); |
| 240 | // Thread list avatars |
| 241 | injectStylesheet(chrome.runtime.getURL('css/thread_list_avatars.css')); |
| 242 | // Auto refresh list |
| 243 | injectStylesheet(chrome.runtime.getURL('css/autorefresh_list.css')); |
Adrià Vilanova Martínez | 3465e77 | 2021-07-11 19:18:41 +0200 | [diff] [blame] | 244 | }); |