blob: d14048437978dba367e04efd193bb630ed141099 [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íneza7ae3db2022-01-28 11:57:27 +010011import InfiniteScroll from './infiniteScroll.js';
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020012import {unifiedProfilesFix} from './unifiedProfiles.js';
Adrià Vilanova Martínez1e10d192021-12-31 16:01:13 +010013import Workflows from './workflows/workflows.js';
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020014
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010015var mutationObserver, options, avatars, infiniteScroll, workflows;
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020016
17const watchedNodesSelectors = [
18 // App container (used to set up the intersection observer and inject the dark
19 // mode button)
20 'ec-app',
21
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010022 // Scrollable content (used for the intersection observer)
23 '.scrollable-content',
24
25 // Load more bar and buttons
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020026 '.load-more-bar',
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010027 '.scTailwindThreadMorebuttonbutton',
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020028
Adrià Vilanova Martínez7e8796c2022-01-23 21:46:46 +010029 // User profile card inside ec-unified-user
30 'ec-unified-user .scTailwindUser_profileUsercardmain',
31
Adrià Vilanova Martínez531cd072021-12-05 20:15:43 +010032 // Username span/editor inside ec-unified-user (user profile view)
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +020033 'ec-unified-user .scTailwindUser_profileUsercarddetails',
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020034
35 // Rich text editor
36 'ec-movable-dialog',
37 'ec-rich-text-editor',
38
39 // Read/unread bulk action in the list of thread, for the batch lock feature
40 'ec-bulk-actions material-button[debugid="mark-read-button"]',
41 'ec-bulk-actions material-button[debugid="mark-unread-button"]',
42
Adrià Vilanova Martínez854cb912022-02-02 16:18:23 +010043 // Thread list items (used to inject the avatars and extra info)
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020044 'li',
45
Adrià Vilanova Martínez854cb912022-02-02 16:18:23 +010046 // Thread list item toolbelt (used for the extra info feature)
47 'ec-thread-summary .main .toolbelt',
48
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020049 // Thread list (used for the autorefresh feature)
50 'ec-thread-list',
51
52 // Unified profile iframe
53 'iframe',
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +010054
55 // Canned response tags or toolbelt (for the extra info feature)
Adrià Vilanova Martínez6e4a68d2022-01-24 21:44:32 +010056 'ec-canned-response-row .tags',
57 'ec-canned-response-row .main .toolbelt',
58
59 // Div containing ec-question (for the extra info feature)
60 'ec-thread div[role="list"]',
61
62 // Replies (for the extra info feature)
63 'ec-thread ec-message',
Adrià Vilanova Martínez4f56d562022-01-26 00:23:27 +010064
65 // User activity chart (for the per-forum stats feature)
66 'ec-unified-user .scTailwindUser_profileUserprofilesection ' +
67 'sc-tailwind-shared-activity-chart',
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020068];
69
70function handleCandidateNode(node) {
71 if (typeof node.classList !== 'undefined') {
72 if (('tagName' in node) && node.tagName == 'EC-APP') {
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010073 infiniteScroll.setUpIntersectionObserver(node, false);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020074
75 // Inject the dark mode button
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020076 // TODO(avm99963): make this feature dynamic.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020077 if (options.ccdarktheme && options.ccdarktheme_mode == 'switch') {
78 var rightControl = node.querySelector('header .right-control');
79 if (rightControl !== null)
80 injectDarkModeButton(rightControl, options.ccdarktheme_switch_status);
81 }
82 }
83
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010084 // To set up infinite scroll
85 if (node.classList.contains('scrollable-content')) {
86 infiniteScroll.setUpIntersectionObserver(node, true);
87 }
88
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020089 // Start the intersectionObserver for the "load more"/"load all" buttons
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020090 // inside a thread if the option is currently enabled.
91 if (node.classList.contains('load-more-bar')) {
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +010092 infiniteScroll.observeLoadMoreBar(node);
93 }
94 if (node.classList.contains('scTailwindThreadMorebuttonbutton')) {
95 infiniteScroll.observeLoadMoreInteropBtn(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020096 }
97
Adrià Vilanova Martínez7e8796c2022-01-23 21:46:46 +010098 // Show additional details in the profile view.
99 if (node.matches('ec-unified-user .scTailwindUser_profileUsercardmain')) {
100 window.TWPTExtraInfo.injectAtProfileIfEnabled(node);
101 }
102
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200103 // Show the "previous posts" links if the option is currently enabled.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200104 // Here we're selecting the 'ec-user > div' element (unique child)
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +0200105 if (node.matches(
106 'ec-unified-user .scTailwindUser_profileUsercarddetails')) {
107 injectPreviousPostsLinksUnifiedProfileIfEnabled(
108 /* isCommunityConsole = */ true);
109 }
110
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +0100111 // #!if ['chromium', 'chromium_mv3'].includes(browser_target)
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200112 // Fix the drag&drop issue with the rich text editor if the option is
113 // currently enabled.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200114 //
115 // We target both tags because in different contexts different
116 // elements containing the text editor get added to the DOM structure.
117 // Sometimes it's a EC-MOVABLE-DIALOG which already contains the
118 // EC-RICH-TEXT-EDITOR, and sometimes it's the EC-RICH-TEXT-EDITOR
119 // directly.
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200120 if (('tagName' in node) &&
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200121 (node.tagName == 'EC-MOVABLE-DIALOG' ||
122 node.tagName == 'EC-RICH-TEXT-EDITOR')) {
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200123 applyDragAndDropFixIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200124 }
Adrià Vilanova Martínezeebc0ac2022-01-05 14:45:53 +0100125 // #!endif
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200126
Adrià Vilanova Martínez1e10d192021-12-31 16:01:13 +0100127 // Inject the batch lock and workflow buttons in the thread list if the
128 // corresponding options are currently enabled.
129 // The order is the inverse because the first one will be shown last.
Adrià Vilanova Martínez7e8796c2022-01-23 21:46:46 +0100130 if (batchLock.shouldAddButton(node)) batchLock.addButtonIfEnabled(node);
Adrià Vilanova Martínez1e10d192021-12-31 16:01:13 +0100131
132 if (workflows.shouldAddThreadListBtn(node))
133 workflows.addThreadListBtnIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200134
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200135 // Inject avatar links to threads in the thread list. injectIfEnabled is
136 // responsible of determining whether it should run or not depending on its
137 // current setting.
Adrià Vilanova Martínez854cb912022-02-02 16:18:23 +0100138 //
139 // Also, inject extra info in the thread list.
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200140 if (('tagName' in node) && (node.tagName == 'LI') &&
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200141 node.querySelector('ec-thread-summary') !== null) {
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200142 avatars.injectIfEnabled(node);
Adrià Vilanova Martínez854cb912022-02-02 16:18:23 +0100143 window.TWPTExtraInfo.injectAtThreadListIfEnabled(node);
144 }
145
146 // Inject extra info in the toolbelt of an expanded thread list item.
147 if (node.matches('ec-thread-summary .main .toolbelt')) {
148 window.TWPTExtraInfo.injectAtExpandedThreadListIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200149 }
150
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200151 // Set up the autorefresh list feature. The setUp function is responsible
152 // of determining whether it should run or not depending on the current
153 // setting.
154 if (('tagName' in node) && node.tagName == 'EC-THREAD-LIST') {
avm99963fd222672021-08-12 23:23:01 +0200155 window.TWPTAutoRefresh.setUp();
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200156 }
157
158 // Redirect unified profile iframe to dark version if applicable
159 if (node.tagName == 'IFRAME' && isDarkThemeOn(options) &&
160 unifiedProfilesFix.checkIframe(node)) {
161 unifiedProfilesFix.fixIframe(node);
162 }
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +0100163
164 // Show additional details in the canned responses view.
165 if (node.matches('ec-canned-response-row .tags')) {
166 window.TWPTExtraInfo.injectAtCRIfEnabled(node, /* isExpanded = */ false);
167 }
168 if (node.matches('ec-canned-response-row .main .toolbelt')) {
169 const tags = node.parentNode?.querySelector?.('.tags');
Adrià Vilanova Martínez6e4a68d2022-01-24 21:44:32 +0100170 if (tags)
171 window.TWPTExtraInfo.injectAtCRIfEnabled(tags, /* isExpanded = */ true);
172 }
173
174 // Show additional details in the thread view.
175 if (node.matches('ec-thread div[role="list"]')) {
176 const question = node.querySelector('ec-question');
177 if (question) window.TWPTExtraInfo.injectAtQuestionIfEnabled(question);
178 }
179 if (node.matches('ec-thread ec-message')) {
180 window.TWPTExtraInfo.injectAtMessageIfEnabled(node);
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +0100181 }
Adrià Vilanova Martínez4f56d562022-01-26 00:23:27 +0100182
183 // Inject per-forum stats section in the user profile
184 if (node.matches(
185 'ec-unified-user .scTailwindUser_profileUserprofilesection ' +
186 'sc-tailwind-shared-activity-chart')) {
187 window.TWPTExtraInfo.injectPerForumStatsIfEnabled(node);
188 }
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200189 }
190}
191
192function handleRemovedNode(node) {
193 // Remove snackbar when exiting thread list view
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200194 if ('tagName' in node && node.tagName == 'EC-THREAD-LIST') {
avm99963fd222672021-08-12 23:23:01 +0200195 window.TWPTAutoRefresh.hideUpdatePrompt();
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200196 }
197}
198
199function mutationCallback(mutationList, observer) {
200 mutationList.forEach((mutation) => {
201 if (mutation.type == 'childList') {
202 mutation.addedNodes.forEach(function(node) {
203 handleCandidateNode(node);
204 });
205
206 mutation.removedNodes.forEach(function(node) {
207 handleRemovedNode(node);
208 });
209 }
210 });
211}
212
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200213var observerOptions = {
214 childList: true,
215 subtree: true,
216};
217
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200218getOptions(null).then(items => {
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200219 options = items;
220
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200221 // Initialize classes needed by the mutation observer
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200222 avatars = new AvatarsHandler();
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +0100223 infiniteScroll = new InfiniteScroll();
Adrià Vilanova Martínez1e10d192021-12-31 16:01:13 +0100224 workflows = new Workflows();
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200225
Adrià Vilanova Martínez854cb912022-02-02 16:18:23 +0100226 // autoRefresh and extraInfo are initialized in start.js
avm99963d3f4ac02021-08-12 18:36:58 +0200227
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200228 // Before starting the mutation Observer, check whether we missed any
229 // mutations by manually checking whether some watched nodes already
230 // exist.
231 var cssSelectors = watchedNodesSelectors.join(',');
232 document.querySelectorAll(cssSelectors)
233 .forEach(node => handleCandidateNode(node));
234
235 mutationObserver = new MutationObserver(mutationCallback);
236 mutationObserver.observe(document.body, observerOptions);
237
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200238 // TODO(avm99963): The following features are not dynamic. Make them be.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200239 if (options.fixedtoolbar) {
240 injectStyles(
241 'ec-bulk-actions{position: sticky; top: 0; background: var(--TWPT-primary-background, #fff); z-index: 96;}');
242 }
243
244 if (options.increasecontrast) {
245 injectStyles(
246 '.thread-summary.read:not(.checked){background: var(--TWPT-thread-read-background, #ecedee)!important;}');
247 }
248
249 if (options.stickysidebarheaders) {
250 injectStyles(
251 'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}');
252 }
253
254 if (options.enhancedannouncementsdot) {
255 injectStylesheet(
256 chrome.runtime.getURL('css/enhanced_announcements_dot.css'));
257 }
258
259 if (options.repositionexpandthread) {
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200260 injectStylesheet(chrome.runtime.getURL('css/reposition_expand_thread.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200261 }
262
Adrià Vilanova Martínez9d27c212021-12-05 13:54:10 +0100263 if (options.imagemaxheight) {
264 injectStylesheet(chrome.runtime.getURL('css/image_max_height.css'));
265 }
266
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200267 if (options.ccforcehidedrawer) {
268 var drawer = document.querySelector('material-drawer');
269 if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {
270 document.querySelector('.material-drawer-button').click();
271 }
272 }
273
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200274 // Batch lock
275 injectScript(chrome.runtime.getURL('batchLockInject.bundle.js'));
276 injectStylesheet(chrome.runtime.getURL('css/batchlock_inject.css'));
277 // Thread list avatars
278 injectStylesheet(chrome.runtime.getURL('css/thread_list_avatars.css'));
279 // Auto refresh list
280 injectStylesheet(chrome.runtime.getURL('css/autorefresh_list.css'));
Adrià Vilanova Martínez7e8796c2022-01-23 21:46:46 +0100281 // Extra info
282 injectStylesheet(chrome.runtime.getURL('css/extrainfo.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200283});