blob: 2061834b6ed8b8c242fae77162b1722a14f04c99 [file] [log] [blame]
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +02001import {injectScript, injectStyles, injectStylesheet} from '../../common/contentScriptsUtils.js';
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +02002import {getOptions, isOptionEnabled} from '../../common/optionsUtils.js';
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +02003import {injectPreviousPostsLinksUnifiedProfileIfEnabled} from '../utilsCommon/unifiedProfiles.js';
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +02004
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +02005import AvatarsHandler from './avatars.js';
Adrià Vilanova Martínez462280f2021-08-07 22:59:02 +02006import {batchLock} from './batchLock.js';
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +02007import {injectDarkModeButton, isDarkThemeOn} from './darkMode.js';
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +01008// #!if ['chromium', 'chromium_mv3'].includes(browser_target)
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +02009import {applyDragAndDropFixIfEnabled} from './dragAndDropFix.js';
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +010010// #!endif
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010011import {default as FlattenThreads, kMatchingSelectors as kFlattenThreadMatchingSelectors} from './flattenThreads/flattenThreads.js';
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010012import InfiniteScroll from './infiniteScroll.js';
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +010013import {kRepliesSectionSelector} from './threadToolbar/constants.js';
14import ThreadToolbar from './threadToolbar/threadToolbar.js';
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020015import {unifiedProfilesFix} from './unifiedProfiles.js';
Adrià Vilanova Martínez2788d122022-10-10 22:06:25 +020016import Workflows from './workflows/workflows.js';
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020017
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +010018var mutationObserver, options, avatars, infiniteScroll, workflows,
Adrià Vilanova Martínez412b7582022-12-30 01:35:30 +010019 threadToolbar, flattenThreads;
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ínez854cb912022-02-02 16:18:23 +010048 // Thread list items (used to inject the avatars and extra info)
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020049 'li',
50
Adrià Vilanova Martínez854cb912022-02-02 16:18:23 +010051 // Thread list item toolbelt (used for the extra info feature)
52 'ec-thread-summary .main .toolbelt',
53
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020054 // Thread list (used for the autorefresh feature)
55 'ec-thread-list',
56
57 // Unified profile iframe
58 'iframe',
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +010059
Adrià Vilanova Martíneze0d65f22022-11-06 18:49:35 +010060 // Canned response tags or toolbelt (for the extra info feature and the
61 // "import CR" popup for the workflows feature)
Adrià Vilanova Martínez6e4a68d2022-01-24 21:44:32 +010062 'ec-canned-response-row .tags',
63 'ec-canned-response-row .main .toolbelt',
64
Adrià Vilanova Martínez09b3bdb2022-02-05 00:15:05 +010065 // Question state chips container (for the extra info feature)
66 'ec-question .state-chips',
Adrià Vilanova Martínez6e4a68d2022-01-24 21:44:32 +010067
68 // Replies (for the extra info feature)
69 'ec-thread ec-message',
Adrià Vilanova Martínez4f56d562022-01-26 00:23:27 +010070
71 // User activity chart (for the per-forum stats feature)
72 'ec-unified-user .scTailwindUser_profileUserprofilesection ' +
73 'sc-tailwind-shared-activity-chart',
Adrià Vilanova Martínez5a8055b2022-09-29 13:05:19 +020074
75 // Thread page main content
76 'ec-thread > .page > .material-content > div[role="list"]',
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +010077
78 // Thread page reply section (for the thread page toolbar)
79 kRepliesSectionSelector,
Adrià Vilanova Martínez412b7582022-12-30 01:35:30 +010080
81 // Reply payload (for the flatten threads UI)
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010082 ...kFlattenThreadMatchingSelectors,
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020083];
84
85function handleCandidateNode(node) {
86 if (typeof node.classList !== 'undefined') {
87 if (('tagName' in node) && node.tagName == 'EC-APP') {
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010088 infiniteScroll.setUpIntersectionObserver(node, false);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020089
90 // Inject the dark mode button
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020091 // TODO(avm99963): make this feature dynamic.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020092 if (options.ccdarktheme && options.ccdarktheme_mode == 'switch') {
93 var rightControl = node.querySelector('header .right-control');
94 if (rightControl !== null)
95 injectDarkModeButton(rightControl, options.ccdarktheme_switch_status);
96 }
97 }
98
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010099 // To set up infinite scroll
100 if (node.classList.contains('scrollable-content')) {
101 infiniteScroll.setUpIntersectionObserver(node, true);
102 }
103
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200104 // Start the intersectionObserver for the "load more"/"load all" buttons
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200105 // inside a thread if the option is currently enabled.
106 if (node.classList.contains('load-more-bar')) {
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +0100107 infiniteScroll.observeLoadMoreBar(node);
108 }
Adrià Vilanova Martínez88854972022-08-28 11:57:12 +0200109 if (node.classList.contains('scTailwindThreadMorebuttonbutton') ||
110 node.classList.contains('scTailwindThreadMessagegapbutton')) {
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +0100111 infiniteScroll.observeLoadMoreInteropBtn(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200112 }
113
Adrià Vilanova Martínez7e8796c2022-01-23 21:46:46 +0100114 // Show additional details in the profile view.
115 if (node.matches('ec-unified-user .scTailwindUser_profileUsercardmain')) {
116 window.TWPTExtraInfo.injectAtProfileIfEnabled(node);
117 }
118
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200119 // Show the "previous posts" links if the option is currently enabled.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200120 // Here we're selecting the 'ec-user > div' element (unique child)
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +0200121 if (node.matches(
122 'ec-unified-user .scTailwindUser_profileUsercarddetails')) {
123 injectPreviousPostsLinksUnifiedProfileIfEnabled(
124 /* isCommunityConsole = */ true);
125 }
126
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +0100127 // #!if ['chromium', 'chromium_mv3'].includes(browser_target)
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200128 // Fix the drag&drop issue with the rich text editor if the option is
129 // currently enabled.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200130 //
131 // We target both tags because in different contexts different
132 // elements containing the text editor get added to the DOM structure.
133 // Sometimes it's a EC-MOVABLE-DIALOG which already contains the
134 // EC-RICH-TEXT-EDITOR, and sometimes it's the EC-RICH-TEXT-EDITOR
135 // directly.
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200136 if (('tagName' in node) &&
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200137 (node.tagName == 'EC-MOVABLE-DIALOG' ||
138 node.tagName == 'EC-RICH-TEXT-EDITOR')) {
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200139 applyDragAndDropFixIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200140 }
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +0100141 // #!endif
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200142
Adrià Vilanova Martínez2788d122022-10-10 22:06:25 +0200143 // Inject the worflows menu in the thread list if the option is currently
144 // enabled.
145 if (workflows.shouldAddThreadListBtn(node)) {
146 workflows.addThreadListBtnIfEnabled(node);
147 }
148
Adrià Vilanova Martínezb06c13d2022-06-20 17:30:14 +0000149 // Inject the batch lock button in the thread list if the option is
150 // currently enabled.
Adrià Vilanova Martínez4107b5e2022-10-09 23:11:11 +0200151 if (batchLock.shouldAddButton(node)) {
Adrià Vilanova Martínezb06c13d2022-06-20 17:30:14 +0000152 batchLock.addButtonIfEnabled(node);
153 }
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200154
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200155 // Inject avatar links to threads in the thread list. injectIfEnabled is
156 // responsible of determining whether it should run or not depending on its
157 // current setting.
Adrià Vilanova Martínez854cb912022-02-02 16:18:23 +0100158 //
159 // Also, inject extra info in the thread list.
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200160 if (('tagName' in node) && (node.tagName == 'LI') &&
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200161 node.querySelector('ec-thread-summary') !== null) {
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200162 avatars.injectIfEnabled(node);
Adrià Vilanova Martínez854cb912022-02-02 16:18:23 +0100163 window.TWPTExtraInfo.injectAtThreadListIfEnabled(node);
164 }
165
166 // Inject extra info in the toolbelt of an expanded thread list item.
167 if (node.matches('ec-thread-summary .main .toolbelt')) {
168 window.TWPTExtraInfo.injectAtExpandedThreadListIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200169 }
170
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200171 // Set up the autorefresh list feature. The setUp function is responsible
172 // of determining whether it should run or not depending on the current
173 // setting.
174 if (('tagName' in node) && node.tagName == 'EC-THREAD-LIST') {
avm99963fd222672021-08-12 23:23:01 +0200175 window.TWPTAutoRefresh.setUp();
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200176 }
177
178 // Redirect unified profile iframe to dark version if applicable
179 if (node.tagName == 'IFRAME' && isDarkThemeOn(options) &&
180 unifiedProfilesFix.checkIframe(node)) {
181 unifiedProfilesFix.fixIframe(node);
182 }
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +0100183
Adrià Vilanova Martíneze0d65f22022-11-06 18:49:35 +0100184 // Show additional details in the canned responses view (and add the
185 // "import" button if applicable for the workflows feature).
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +0100186 if (node.matches('ec-canned-response-row .tags')) {
187 window.TWPTExtraInfo.injectAtCRIfEnabled(node, /* isExpanded = */ false);
Adrià Vilanova Martíneze0d65f22022-11-06 18:49:35 +0100188 window.TWPTWorkflowsImport.addButtonIfEnabled(node);
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +0100189 }
190 if (node.matches('ec-canned-response-row .main .toolbelt')) {
191 const tags = node.parentNode?.querySelector?.('.tags');
Adrià Vilanova Martínez6e4a68d2022-01-24 21:44:32 +0100192 if (tags)
193 window.TWPTExtraInfo.injectAtCRIfEnabled(tags, /* isExpanded = */ true);
194 }
195
196 // Show additional details in the thread view.
Adrià Vilanova Martínez09b3bdb2022-02-05 00:15:05 +0100197 if (node.matches('ec-question .state-chips')) {
198 window.TWPTExtraInfo.injectAtQuestionIfEnabled(node);
Adrià Vilanova Martínez6e4a68d2022-01-24 21:44:32 +0100199 }
200 if (node.matches('ec-thread ec-message')) {
201 window.TWPTExtraInfo.injectAtMessageIfEnabled(node);
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +0100202 }
Adrià Vilanova Martínez4f56d562022-01-26 00:23:27 +0100203
204 // Inject per-forum stats section in the user profile
205 if (node.matches(
206 'ec-unified-user .scTailwindUser_profileUserprofilesection ' +
207 'sc-tailwind-shared-activity-chart')) {
208 window.TWPTExtraInfo.injectPerForumStatsIfEnabled(node);
209 }
Adrià Vilanova Martínez5a8055b2022-09-29 13:05:19 +0200210
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +0100211 // Inject old thread page design warning if applicable
Adrià Vilanova Martínezd2344c42022-09-30 13:14:29 +0200212 if (node.matches(
213 'ec-thread > .page > .material-content > div[role="list"]')) {
214 window.TWPTThreadPageDesignWarning.injectWarningIfApplicable(node);
Adrià Vilanova Martínez5a8055b2022-09-29 13:05:19 +0200215 }
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +0100216
217 // Inject thread toolbar
218 if (threadToolbar.shouldInject(node)) {
219 threadToolbar.injectIfApplicable(node);
220 }
Adrià Vilanova Martínez412b7582022-12-30 01:35:30 +0100221
222 // Inject parent reply quote
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100223 if (flattenThreads.shouldInjectQuote(node)) {
224 flattenThreads.injectQuoteIfApplicable(node);
225 }
226
227 // Inject reply button in non-nested view
228 if (flattenThreads.shouldInjectReplyBtn(node)) {
229 flattenThreads.injectReplyBtnIfApplicable(node);
Adrià Vilanova Martínez412b7582022-12-30 01:35:30 +0100230 }
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200231 }
232}
233
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100234function handleRemovedNode(mutation, node) {
235 if (!('tagName' in node)) return;
236
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200237 // Remove snackbar when exiting thread list view
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100238 if (node.tagName == 'EC-THREAD-LIST') {
avm99963fd222672021-08-12 23:23:01 +0200239 window.TWPTAutoRefresh.hideUpdatePrompt();
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200240 }
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100241
242 // Readd reply button when the Community Console removes it
243 if (node.tagName == 'TWPT-FLATTEN-THREAD-REPLY-BUTTON') {
244 flattenThreads.injectReplyBtn(
245 mutation.target, JSON.parse(node.getAttribute('extraInfo')));
246 }
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200247}
248
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100249function mutationCallback(mutationList) {
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200250 mutationList.forEach((mutation) => {
251 if (mutation.type == 'childList') {
252 mutation.addedNodes.forEach(function(node) {
253 handleCandidateNode(node);
254 });
255
256 mutation.removedNodes.forEach(function(node) {
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100257 handleRemovedNode(mutation, node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200258 });
259 }
260 });
261}
262
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200263var observerOptions = {
264 childList: true,
265 subtree: true,
266};
267
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200268getOptions(null).then(items => {
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200269 options = items;
270
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200271 // Initialize classes needed by the mutation observer
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200272 avatars = new AvatarsHandler();
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +0100273 infiniteScroll = new InfiniteScroll();
Adrià Vilanova Martínez2788d122022-10-10 22:06:25 +0200274 workflows = new Workflows();
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +0100275 threadToolbar = new ThreadToolbar();
Adrià Vilanova Martínez412b7582022-12-30 01:35:30 +0100276 flattenThreads = new FlattenThreads();
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200277
Adrià Vilanova Martíneze0d65f22022-11-06 18:49:35 +0100278 // autoRefresh, extraInfo, threadPageDesignWarning and workflowsImport are
279 // initialized in start.js
avm99963d3f4ac02021-08-12 18:36:58 +0200280
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200281 // Before starting the mutation Observer, check whether we missed any
282 // mutations by manually checking whether some watched nodes already
283 // exist.
284 var cssSelectors = watchedNodesSelectors.join(',');
285 document.querySelectorAll(cssSelectors)
286 .forEach(node => handleCandidateNode(node));
287
288 mutationObserver = new MutationObserver(mutationCallback);
289 mutationObserver.observe(document.body, observerOptions);
290
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200291 // TODO(avm99963): The following features are not dynamic. Make them be.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200292 if (options.fixedtoolbar) {
293 injectStyles(
294 'ec-bulk-actions{position: sticky; top: 0; background: var(--TWPT-primary-background, #fff); z-index: 96;}');
295 }
296
297 if (options.increasecontrast) {
298 injectStyles(
299 '.thread-summary.read:not(.checked){background: var(--TWPT-thread-read-background, #ecedee)!important;}');
300 }
301
302 if (options.stickysidebarheaders) {
303 injectStyles(
304 'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}');
305 }
306
307 if (options.enhancedannouncementsdot) {
308 injectStylesheet(
309 chrome.runtime.getURL('css/enhanced_announcements_dot.css'));
310 }
311
312 if (options.repositionexpandthread) {
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200313 injectStylesheet(chrome.runtime.getURL('css/reposition_expand_thread.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200314 }
315
Adrià Vilanova Martínez9d27c212021-12-05 13:54:10 +0100316 if (options.imagemaxheight) {
317 injectStylesheet(chrome.runtime.getURL('css/image_max_height.css'));
318 }
319
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200320 if (options.ccforcehidedrawer) {
321 var drawer = document.querySelector('material-drawer');
322 if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {
323 document.querySelector('.material-drawer-button').click();
324 }
325 }
326
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200327 // Batch lock
328 injectScript(chrome.runtime.getURL('batchLockInject.bundle.js'));
329 injectStylesheet(chrome.runtime.getURL('css/batchlock_inject.css'));
330 // Thread list avatars
331 injectStylesheet(chrome.runtime.getURL('css/thread_list_avatars.css'));
332 // Auto refresh list
333 injectStylesheet(chrome.runtime.getURL('css/autorefresh_list.css'));
Adrià Vilanova Martínez7e8796c2022-01-23 21:46:46 +0100334 // Extra info
335 injectStylesheet(chrome.runtime.getURL('css/extrainfo.css'));
avm9996337601bc2022-02-21 10:36:45 +0100336 injectStylesheet(chrome.runtime.getURL('css/extrainfo_perforumstats.css'));
Adrià Vilanova Martínez2d9be8d2022-12-28 00:50:14 +0100337 // Workflows, Thread toolbar
338 injectScript(chrome.runtime.getURL('litComponentsInject.bundle.js'));
339 // Thread toolbar
340 injectStylesheet(chrome.runtime.getURL('css/thread_toolbar.css'));
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +0100341 // Flatten threads
342 injectStylesheet(chrome.runtime.getURL('css/flatten_threads.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200343});