blob: 6b32496d6e4733a5148acfd52f78f8def344011c [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ínezd269c622021-09-04 18:35:55 +02008import {applyDragAndDropFixIfEnabled} from './dragAndDropFix.js';
9import {injectPreviousPostsLinksIfEnabled} from './profileHistoryLink.js';
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020010import {unifiedProfilesFix} from './unifiedProfiles.js';
11
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020012var mutationObserver, intersectionObserver, intersectionOptions, options,
13 avatars;
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020014
15const watchedNodesSelectors = [
16 // App container (used to set up the intersection observer and inject the dark
17 // mode button)
18 'ec-app',
19
20 // Load more bar (for the "load more"/"load all" buttons)
21 '.load-more-bar',
22
23 // Username span/editor inside ec-user (user profile view)
24 'ec-user .main-card .header > .name > span',
25 'ec-user .main-card .header > .name > ec-display-name-editor',
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +020026 'ec-unified-user .scTailwindUser_profileUsercarddetails',
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020027
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ínez3465e772021-07-11 19:18:41 +020044];
45
46function 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ínezd269c622021-09-04 18:35:55 +020065 // TODO(avm99963): make this feature dynamic.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020066 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ínezd269c622021-09-04 18:35:55 +020074 // inside a thread if the option is currently enabled.
75 if (node.classList.contains('load-more-bar')) {
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020076 if (typeof intersectionObserver !== 'undefined') {
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020077 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ínez3465e772021-07-11 19:18:41 +020085 } else {
86 console.warn(
87 '[infinitescroll] ' +
88 'The intersectionObserver is not ready yet.');
89 }
90 }
91
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020092 // Show the "previous posts" links if the option is currently enabled.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +020093 // Here we're selecting the 'ec-user > div' element (unique child)
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +020094
95 // TODO(b/twpowertools/80): Remove this:
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +020096 if (node.matches('ec-user .main-card .header > .name > span') ||
97 node.matches(
98 'ec-user .main-card .header > .name > ec-display-name-editor')) {
99 injectPreviousPostsLinksIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200100 }
101
Adrià Vilanova Martínez1f652522021-10-14 00:23:23 +0200102 if (node.matches(
103 'ec-unified-user .scTailwindUser_profileUsercarddetails')) {
104 injectPreviousPostsLinksUnifiedProfileIfEnabled(
105 /* isCommunityConsole = */ true);
106 }
107
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200108 // Fix the drag&drop issue with the rich text editor if the option is
109 // currently enabled.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200110 //
111 // We target both tags because in different contexts different
112 // elements containing the text editor get added to the DOM structure.
113 // Sometimes it's a EC-MOVABLE-DIALOG which already contains the
114 // EC-RICH-TEXT-EDITOR, and sometimes it's the EC-RICH-TEXT-EDITOR
115 // directly.
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200116 if (('tagName' in node) &&
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200117 (node.tagName == 'EC-MOVABLE-DIALOG' ||
118 node.tagName == 'EC-RICH-TEXT-EDITOR')) {
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200119 applyDragAndDropFixIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200120 }
121
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200122 // Inject the batch lock button in the thread list if the option is
123 // currently enabled.
124 if (batchLock.nodeIsReadToggleBtn(node)) {
125 batchLock.addButtonIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200126 }
127
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200128 // Inject avatar links to threads in the thread list. injectIfEnabled is
129 // responsible of determining whether it should run or not depending on its
130 // current setting.
131 if (('tagName' in node) && (node.tagName == 'LI') &&
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200132 node.querySelector('ec-thread-summary') !== null) {
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200133 avatars.injectIfEnabled(node);
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200134 }
135
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200136 // Set up the autorefresh list feature. The setUp function is responsible
137 // of determining whether it should run or not depending on the current
138 // setting.
139 if (('tagName' in node) && node.tagName == 'EC-THREAD-LIST') {
avm99963fd222672021-08-12 23:23:01 +0200140 window.TWPTAutoRefresh.setUp();
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200141 }
142
143 // Redirect unified profile iframe to dark version if applicable
144 if (node.tagName == 'IFRAME' && isDarkThemeOn(options) &&
145 unifiedProfilesFix.checkIframe(node)) {
146 unifiedProfilesFix.fixIframe(node);
147 }
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200148 }
149}
150
151function handleRemovedNode(node) {
152 // Remove snackbar when exiting thread list view
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200153 if ('tagName' in node && node.tagName == 'EC-THREAD-LIST') {
avm99963fd222672021-08-12 23:23:01 +0200154 window.TWPTAutoRefresh.hideUpdatePrompt();
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200155 }
156}
157
158function mutationCallback(mutationList, observer) {
159 mutationList.forEach((mutation) => {
160 if (mutation.type == 'childList') {
161 mutation.addedNodes.forEach(function(node) {
162 handleCandidateNode(node);
163 });
164
165 mutation.removedNodes.forEach(function(node) {
166 handleRemovedNode(node);
167 });
168 }
169 });
170}
171
172function intersectionCallback(entries, observer) {
173 entries.forEach(entry => {
174 if (entry.isIntersecting) {
175 entry.target.click();
176 }
177 });
178};
179
180var observerOptions = {
181 childList: true,
182 subtree: true,
183};
184
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200185getOptions(null).then(items => {
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200186 options = items;
187
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200188 // Initialize classes needed by the mutation observer
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200189 avatars = new AvatarsHandler();
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200190
avm99963b6f68b62021-08-12 23:13:06 +0200191 // autoRefresh is initialized in start.js
avm99963d3f4ac02021-08-12 18:36:58 +0200192
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200193 // Before starting the mutation Observer, check whether we missed any
194 // mutations by manually checking whether some watched nodes already
195 // exist.
196 var cssSelectors = watchedNodesSelectors.join(',');
197 document.querySelectorAll(cssSelectors)
198 .forEach(node => handleCandidateNode(node));
199
200 mutationObserver = new MutationObserver(mutationCallback);
201 mutationObserver.observe(document.body, observerOptions);
202
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200203 // TODO(avm99963): The following features are not dynamic. Make them be.
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200204 if (options.fixedtoolbar) {
205 injectStyles(
206 'ec-bulk-actions{position: sticky; top: 0; background: var(--TWPT-primary-background, #fff); z-index: 96;}');
207 }
208
209 if (options.increasecontrast) {
210 injectStyles(
211 '.thread-summary.read:not(.checked){background: var(--TWPT-thread-read-background, #ecedee)!important;}');
212 }
213
214 if (options.stickysidebarheaders) {
215 injectStyles(
216 'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}');
217 }
218
219 if (options.enhancedannouncementsdot) {
220 injectStylesheet(
221 chrome.runtime.getURL('css/enhanced_announcements_dot.css'));
222 }
223
224 if (options.repositionexpandthread) {
Adrià Vilanova Martínez27c69962021-07-17 23:32:51 +0200225 injectStylesheet(chrome.runtime.getURL('css/reposition_expand_thread.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200226 }
227
228 if (options.ccforcehidedrawer) {
229 var drawer = document.querySelector('material-drawer');
230 if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {
231 document.querySelector('.material-drawer-button').click();
232 }
233 }
234
Adrià Vilanova Martínezd269c622021-09-04 18:35:55 +0200235 // Batch lock
236 injectScript(chrome.runtime.getURL('batchLockInject.bundle.js'));
237 injectStylesheet(chrome.runtime.getURL('css/batchlock_inject.css'));
238 // Thread list avatars
239 injectStylesheet(chrome.runtime.getURL('css/thread_list_avatars.css'));
240 // Auto refresh list
241 injectStylesheet(chrome.runtime.getURL('css/autorefresh_list.css'));
Adrià Vilanova Martínez3465e772021-07-11 19:18:41 +0200242});