blob: f43a25af1dacf14bfa11fc8df6a79a39a5a79d7e [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
Adrià Vilanova Martínez09b3bdb2022-02-05 00:15:05 +010059 // Question state chips container (for the extra info feature)
60 'ec-question .state-chips',
Adrià Vilanova Martínez6e4a68d2022-01-24 21:44:32 +010061
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.
Adrià Vilanova Martínez09b3bdb2022-02-05 00:15:05 +0100175 if (node.matches('ec-question .state-chips')) {
176 window.TWPTExtraInfo.injectAtQuestionIfEnabled(node);
Adrià Vilanova Martínez6e4a68d2022-01-24 21:44:32 +0100177 }
178 if (node.matches('ec-thread ec-message')) {
179 window.TWPTExtraInfo.injectAtMessageIfEnabled(node);
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +0100180 }
Adrià Vilanova Martínez4f56d562022-01-26 00:23:27 +0100181
182 // Inject per-forum stats section in the user profile
183 if (node.matches(
184 'ec-unified-user .scTailwindUser_profileUserprofilesection ' +
185 'sc-tailwind-shared-activity-chart')) {
186 window.TWPTExtraInfo.injectPerForumStatsIfEnabled(node);
187 }
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200188 }
189}
190
191function handleRemovedNode(node) {
192 // Remove snackbar when exiting thread list view
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200193 if ('tagName' in node && node.tagName == 'EC-THREAD-LIST') {
avm99963fd222672021-08-12 23:23:01 +0200194 window.TWPTAutoRefresh.hideUpdatePrompt();
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200195 }
196}
197
198function mutationCallback(mutationList, observer) {
199 mutationList.forEach((mutation) => {
200 if (mutation.type == 'childList') {
201 mutation.addedNodes.forEach(function(node) {
202 handleCandidateNode(node);
203 });
204
205 mutation.removedNodes.forEach(function(node) {
206 handleRemovedNode(node);
207 });
208 }
209 });
210}
211
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200212var observerOptions = {
213 childList: true,
214 subtree: true,
215};
216
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200217getOptions(null).then(items => {
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200218 options = items;
219
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200220 // Initialize classes needed by the mutation observer
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200221 avatars = new AvatarsHandler();
Adrià Vilanova Martíneza7ae3db2022-01-28 11:57:27 +0100222 infiniteScroll = new InfiniteScroll();
Adrià Vilanova Martínez1e10d192021-12-31 16:01:13 +0100223 workflows = new Workflows();
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200224
Adrià Vilanova Martínez854cb912022-02-02 16:18:23 +0100225 // autoRefresh and extraInfo are initialized in start.js
avm99963d3f4ac02021-08-12 18:36:58 +0200226
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200227 // Before starting the mutation Observer, check whether we missed any
228 // mutations by manually checking whether some watched nodes already
229 // exist.
230 var cssSelectors = watchedNodesSelectors.join(',');
231 document.querySelectorAll(cssSelectors)
232 .forEach(node => handleCandidateNode(node));
233
234 mutationObserver = new MutationObserver(mutationCallback);
235 mutationObserver.observe(document.body, observerOptions);
236
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200237 // TODO(avm99963): The following features are not dynamic. Make them be.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200238 if (options.fixedtoolbar) {
239 injectStyles(
240 'ec-bulk-actions{position: sticky; top: 0; background: var(--TWPT-primary-background, #fff); z-index: 96;}');
241 }
242
243 if (options.increasecontrast) {
244 injectStyles(
245 '.thread-summary.read:not(.checked){background: var(--TWPT-thread-read-background, #ecedee)!important;}');
246 }
247
248 if (options.stickysidebarheaders) {
249 injectStyles(
250 'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}');
251 }
252
253 if (options.enhancedannouncementsdot) {
254 injectStylesheet(
255 chrome.runtime.getURL('css/enhanced_announcements_dot.css'));
256 }
257
258 if (options.repositionexpandthread) {
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200259 injectStylesheet(chrome.runtime.getURL('css/reposition_expand_thread.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200260 }
261
Adrià Vilanova Martínez9d27c212021-12-05 13:54:10 +0100262 if (options.imagemaxheight) {
263 injectStylesheet(chrome.runtime.getURL('css/image_max_height.css'));
264 }
265
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200266 if (options.ccforcehidedrawer) {
267 var drawer = document.querySelector('material-drawer');
268 if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {
269 document.querySelector('.material-drawer-button').click();
270 }
271 }
272
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200273 // Batch lock
274 injectScript(chrome.runtime.getURL('batchLockInject.bundle.js'));
275 injectStylesheet(chrome.runtime.getURL('css/batchlock_inject.css'));
276 // Thread list avatars
277 injectStylesheet(chrome.runtime.getURL('css/thread_list_avatars.css'));
278 // Auto refresh list
279 injectStylesheet(chrome.runtime.getURL('css/autorefresh_list.css'));
Adrià Vilanova Martínez7e8796c2022-01-23 21:46:46 +0100280 // Extra info
281 injectStylesheet(chrome.runtime.getURL('css/extrainfo.css'));
avm9996337601bc2022-02-21 10:36:45 +0100282 injectStylesheet(chrome.runtime.getURL('css/extrainfo_perforumstats.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200283});