blob: 6cbfced42ddc33711e77c9a2fdae8acb92212a7d [file] [log] [blame]
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +02001import {injectScript, injectStyles, injectStylesheet} from '../../common/contentScriptsUtils.js';
Adrià Vilanova Martínez4d599252023-02-04 20:54:54 +01002import {getOptions} from '../../common/optionsUtils.js';
Adrià Vilanova Martínez825888a2023-07-23 01:53:48 +02003import XHRProxyKillSwitchHandler from '../../xhrInterceptor/killSwitchHandler.js';
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +02004import {injectPreviousPostsLinksUnifiedProfileIfEnabled} from '../utilsCommon/unifiedProfiles.js';
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +02005
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +02006import AvatarsHandler from './avatars.js';
Adrià Vilanova Martínez462280f2021-08-07 22:59:02 +02007import {batchLock} from './batchLock.js';
Adrià Vilanova Martínez968e93c2024-03-11 23:18:16 +01008import {injectDarkThemeButton, isDarkThemeOn} from './darkTheme/darkTheme.js';
Adrià Vilanova Martínezf472d492024-03-05 21:26:53 +01009import ReportDialogColorThemeFix from './darkTheme/reportDialog.js';
Adrià Vilanova Martínez968e93c2024-03-11 23:18:16 +010010import {unifiedProfilesFix} from './darkTheme/unifiedProfiles.js';
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +010011// #!if ['chromium', 'chromium_mv3'].includes(browser_target)
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020012import {applyDragAndDropFixIfEnabled} from './dragAndDropFix.js';
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +010013// #!endif
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010014import {default as FlattenThreads, kMatchingSelectors as kFlattenThreadMatchingSelectors} from './flattenThreads/flattenThreads.js';
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +010015import {kRepliesSectionSelector} from './threadToolbar/constants.js';
16import ThreadToolbar from './threadToolbar/threadToolbar.js';
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020017
Adrià Vilanova Martínezc78c3ad2024-05-18 00:35:51 +020018var mutationObserver, options, avatars, threadToolbar, flattenThreads,
19 reportDialogColorThemeFix;
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020020
21const watchedNodesSelectors = [
22 // App container (used to set up the intersection observer and inject the dark
23 // mode button)
24 'ec-app',
25
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010026 // Scrollable content (used for the intersection observer)
27 '.scrollable-content',
28
29 // Load more bar and buttons
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020030 '.load-more-bar',
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010031 '.scTailwindThreadMorebuttonbutton',
Adrià Vilanova Martínez88854972022-08-28 11:57:12 +020032 '.scTailwindThreadMessagegapbutton',
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020033
Adrià Vilanova Martínez7e8796c2022-01-23 21:46:46 +010034 // User profile card inside ec-unified-user
35 'ec-unified-user .scTailwindUser_profileUsercardmain',
36
Adrià Vilanova Martínez531cd072021-12-05 20:15:43 +010037 // Username span/editor inside ec-unified-user (user profile view)
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +020038 'ec-unified-user .scTailwindUser_profileUsercarddetails',
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020039
40 // Rich text editor
41 'ec-movable-dialog',
42 'ec-rich-text-editor',
43
44 // Read/unread bulk action in the list of thread, for the batch lock feature
45 'ec-bulk-actions material-button[debugid="mark-read-button"]',
46 'ec-bulk-actions material-button[debugid="mark-unread-button"]',
47
Adrià Vilanova Martínez66836fd2024-05-04 22:43:06 +020048 // Thread list items (used to inject the avatars)
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020049 'li',
50
51 // Thread list (used for the autorefresh feature)
52 'ec-thread-list',
53
Adrià Vilanova Martínezf472d492024-03-05 21:26:53 +010054 // Unified profile iframe and report dialog iframe
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020055 'iframe',
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +010056
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +010057 // Thread page reply section (for the thread page toolbar)
58 kRepliesSectionSelector,
Adrià Vilanova Martínez412b7582022-12-30 01:35:30 +010059
60 // Reply payload (for the flatten threads UI)
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010061 ...kFlattenThreadMatchingSelectors,
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020062];
63
64function handleCandidateNode(node) {
65 if (typeof node.classList !== 'undefined') {
66 if (('tagName' in node) && node.tagName == 'EC-APP') {
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020067 // Inject the dark mode button
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020068 // TODO(avm99963): make this feature dynamic.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020069 if (options.ccdarktheme && options.ccdarktheme_mode == 'switch') {
70 var rightControl = node.querySelector('header .right-control');
71 if (rightControl !== null)
Adrià Vilanova Martínez968e93c2024-03-11 23:18:16 +010072 injectDarkThemeButton(
73 rightControl, options.ccdarktheme_switch_status);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020074 }
75 }
76
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020077 // Show the "previous posts" links if the option is currently enabled.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020078 // Here we're selecting the 'ec-user > div' element (unique child)
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +020079 if (node.matches(
80 'ec-unified-user .scTailwindUser_profileUsercarddetails')) {
81 injectPreviousPostsLinksUnifiedProfileIfEnabled(
82 /* isCommunityConsole = */ true);
83 }
84
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +010085 // #!if ['chromium', 'chromium_mv3'].includes(browser_target)
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020086 // Fix the drag&drop issue with the rich text editor if the option is
87 // currently enabled.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020088 //
89 // We target both tags because in different contexts different
90 // elements containing the text editor get added to the DOM structure.
91 // Sometimes it's a EC-MOVABLE-DIALOG which already contains the
92 // EC-RICH-TEXT-EDITOR, and sometimes it's the EC-RICH-TEXT-EDITOR
93 // directly.
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020094 if (('tagName' in node) &&
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020095 (node.tagName == 'EC-MOVABLE-DIALOG' ||
96 node.tagName == 'EC-RICH-TEXT-EDITOR')) {
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020097 applyDragAndDropFixIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020098 }
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +010099 // #!endif
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200100
Adrià Vilanova Martínezb06c13d2022-06-20 17:30:14 +0000101 // Inject the batch lock button in the thread list if the option is
102 // currently enabled.
Adrià Vilanova Martínez4107b5e2022-10-09 23:11:11 +0200103 if (batchLock.shouldAddButton(node)) {
Adrià Vilanova Martínezb06c13d2022-06-20 17:30:14 +0000104 batchLock.addButtonIfEnabled(node);
105 }
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200106
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200107 // Inject avatar links to threads in the thread list. injectIfEnabled is
108 // responsible of determining whether it should run or not depending on its
109 // current setting.
110 if (('tagName' in node) && (node.tagName == 'LI') &&
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200111 node.querySelector('ec-thread-summary') !== null) {
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200112 avatars.injectIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200113 }
114
Adrià Vilanova Martínezf472d492024-03-05 21:26:53 +0100115 if (node.tagName == 'IFRAME') {
116 // Redirect unified profile iframe to dark version if applicable
117 if (isDarkThemeOn(options) && unifiedProfilesFix.checkIframe(node)) {
118 unifiedProfilesFix.fixIframe(node);
119 }
120
121 // Set report dialog iframe's theme to the appropriate theme
122 reportDialogColorThemeFix.fixThemeIfReportDialogIframeAndApplicable(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200123 }
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +0100124
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +0100125 // Inject thread toolbar
126 if (threadToolbar.shouldInject(node)) {
127 threadToolbar.injectIfApplicable(node);
128 }
Adrià Vilanova Martínez412b7582022-12-30 01:35:30 +0100129
130 // Inject parent reply quote
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100131 if (flattenThreads.shouldInjectQuote(node)) {
132 flattenThreads.injectQuoteIfApplicable(node);
133 }
134
135 // Inject reply button in non-nested view
136 if (flattenThreads.shouldInjectReplyBtn(node)) {
137 flattenThreads.injectReplyBtnIfApplicable(node);
Adrià Vilanova Martínez412b7582022-12-30 01:35:30 +0100138 }
Adrià Vilanova Martínez4d599252023-02-04 20:54:54 +0100139
140 // Delete additional info in the edit message box
141 if (flattenThreads.isAdditionalInfoElement(node)) {
142 flattenThreads.deleteAdditionalInfoElementIfApplicable(node);
143 }
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200144 }
145}
146
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100147function handleRemovedNode(mutation, node) {
148 if (!('tagName' in node)) return;
149
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100150 // Readd reply button when the Community Console removes it
151 if (node.tagName == 'TWPT-FLATTEN-THREAD-REPLY-BUTTON') {
152 flattenThreads.injectReplyBtn(
153 mutation.target, JSON.parse(node.getAttribute('extraInfo')));
154 }
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200155}
156
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100157function mutationCallback(mutationList) {
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200158 mutationList.forEach((mutation) => {
159 if (mutation.type == 'childList') {
160 mutation.addedNodes.forEach(function(node) {
161 handleCandidateNode(node);
162 });
163
164 mutation.removedNodes.forEach(function(node) {
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100165 handleRemovedNode(mutation, node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200166 });
167 }
168 });
169}
170
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200171var observerOptions = {
172 childList: true,
173 subtree: true,
174};
175
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200176getOptions(null).then(items => {
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200177 options = items;
178
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200179 // Initialize classes needed by the mutation observer
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200180 avatars = new AvatarsHandler();
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +0100181 threadToolbar = new ThreadToolbar();
Adrià Vilanova Martínez412b7582022-12-30 01:35:30 +0100182 flattenThreads = new FlattenThreads();
Adrià Vilanova Martínezf472d492024-03-05 21:26:53 +0100183 reportDialogColorThemeFix = new ReportDialogColorThemeFix(options);
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200184
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200185 // Before starting the mutation Observer, check whether we missed any
186 // mutations by manually checking whether some watched nodes already
187 // exist.
188 var cssSelectors = watchedNodesSelectors.join(',');
189 document.querySelectorAll(cssSelectors)
190 .forEach(node => handleCandidateNode(node));
191
192 mutationObserver = new MutationObserver(mutationCallback);
193 mutationObserver.observe(document.body, observerOptions);
194
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200195 // TODO(avm99963): The following features are not dynamic. Make them be.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200196 if (options.fixedtoolbar) {
197 injectStyles(
Adrià Vilanovae8ba09a2024-02-29 19:25:39 +0000198 'ec-bulk-actions{position: sticky; top: 0; background: var(--TWPT-primary-background, #fff); z-index: 96;}');
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200199 }
200
201 if (options.increasecontrast) {
202 injectStyles(
203 '.thread-summary.read:not(.checked){background: var(--TWPT-thread-read-background, #ecedee)!important;}');
204 }
205
206 if (options.stickysidebarheaders) {
207 injectStyles(
208 'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}');
209 }
210
211 if (options.enhancedannouncementsdot) {
212 injectStylesheet(
213 chrome.runtime.getURL('css/enhanced_announcements_dot.css'));
214 }
215
216 if (options.repositionexpandthread) {
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200217 injectStylesheet(chrome.runtime.getURL('css/reposition_expand_thread.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200218 }
219
Adrià Vilanova Martínez9d27c212021-12-05 13:54:10 +0100220 if (options.imagemaxheight) {
221 injectStylesheet(chrome.runtime.getURL('css/image_max_height.css'));
222 }
223
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200224 if (options.ccforcehidedrawer) {
225 var drawer = document.querySelector('material-drawer');
226 if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {
227 document.querySelector('.material-drawer-button').click();
228 }
229 }
230
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200231 // Batch lock
232 injectScript(chrome.runtime.getURL('batchLockInject.bundle.js'));
233 injectStylesheet(chrome.runtime.getURL('css/batchlock_inject.css'));
234 // Thread list avatars
235 injectStylesheet(chrome.runtime.getURL('css/thread_list_avatars.css'));
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +0100236 // Thread toolbar
237 injectStylesheet(chrome.runtime.getURL('css/thread_toolbar.css'));
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100238 // Flatten threads
239 injectStylesheet(chrome.runtime.getURL('css/flatten_threads.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200240});
Adrià Vilanova Martínez825888a2023-07-23 01:53:48 +0200241
242new XHRProxyKillSwitchHandler();