Make some of the options dynamic
This change modifies the logic of several features so they aren't
enabled/disabled depending on the options state when the page is loaded
but dynamically.
So, for instance, when the thread list avatars feature is switched from
enabled to disabled, when browsing the Community Console, newly loaded
thread lists won't have the avatars, without having to reload the whole
Community Console.
This will make "kill switches" more effective, since they will be able
to take effect without having to reload the Community Console page.
The options which still haven't been made dynamic are features which add
CSS tweaks to the Community Console. For those features (like the dark
mode) a future CL will make them dynamic.
Bug: twpowertools:61
Change-Id: I72b511dd3b2622a2e9c633850e29806953e4b284
diff --git a/src/common/csEventListener.js b/src/common/csEventListener.js
index 14b4295..393f5f7 100644
--- a/src/common/csEventListener.js
+++ b/src/common/csEventListener.js
@@ -1,43 +1,48 @@
// In order to pass i18n strings and settings values to the injected scripts,
// which don't have access to the chrome.* APIs, we use event listeners.
+import {getOptions} from './optionsUtils.js';
+
export function setUpListener() {
- chrome.storage.sync.get(null, function(options) {
- window.addEventListener('TWPT_sendRequest', evt => {
- var request = evt.detail;
- switch (request.data.action) {
- case 'geti18nMessage':
- var data = chrome.i18n.getMessage(
- request.data.msg,
- (Array.isArray(request.data.placeholders) ?
- request.data.placeholders :
- []));
- break;
+ window.addEventListener('TWPT_sendRequest', evt => {
+ var request = evt.detail;
- case 'getProfileIndicatorOptions':
- var data = {
- 'indicatorDot': options.profileindicator,
- 'numPosts': options.profileindicatoralt
+ Promise.resolve(null)
+ .then(() => {
+ switch (request.data.action) {
+ case 'geti18nMessage':
+ return chrome.i18n.getMessage(
+ request.data.msg,
+ (Array.isArray(request.data.placeholders) ?
+ request.data.placeholders :
+ []));
+
+ case 'getProfileIndicatorOptions':
+ return getOptions(['profileindicator', 'profileindicatoralt'])
+ .then(options => {
+ return {
+ indicatorDot: options?.profileindicator ?? false,
+ numPosts: options?.profileindicatoralt ?? false,
+ };
+ });
+
+ case 'getNumPostMonths':
+ return getOptions('profileindicatoralt_months')
+ .then(options => options?.profileindicatoralt_months ?? 12);
+
+ default:
+ console.warn('Unknown action ' + request.data.action + '.');
+ return 'unknownAction';
+ }
+ })
+ .then(data => {
+ var response = {
+ data,
+ requestId: request.id,
+ prefix: (request.prefix || 'TWPT'),
};
- break;
- case 'getNumPostMonths':
- var data = options.profileindicatoralt_months;
- break;
-
- default:
- var data = 'unknownAction';
- console.warn('Unknown action ' + request.data.action + '.');
- break;
- }
-
- var response = {
- data,
- requestId: request.id,
- prefix: (request.prefix || 'TWPT'),
- };
-
- window.postMessage(response, '*');
- });
+ window.postMessage(response, '*');
+ });
});
}
diff --git a/src/common/optionsUtils.js b/src/common/optionsUtils.js
index 0efb6c9..16294ab 100644
--- a/src/common/optionsUtils.js
+++ b/src/common/optionsUtils.js
@@ -26,3 +26,23 @@
return options;
}
+
+// Returns a promise which returns the values of options |options| which are
+// stored in the sync storage area.
+export function getOptions(options) {
+ // Once we only target MV3, this can be greatly simplified.
+ return new Promise(
+ (resolve, reject) => {chrome.storage.sync.get(options, items => {
+ if (chrome.runtime.lastError) return reject(chrome.runtime.lastError);
+
+ resolve(items);
+ })});
+}
+
+// Returns a promise which returns whether the |option| option/feature is
+// currently enabled.
+export function isOptionEnabled(option) {
+ return getOptions(option).then(options => {
+ return options?.[option] === true;
+ });
+}
diff --git a/src/contentScripts/communityConsole/autoRefresh.js b/src/contentScripts/communityConsole/autoRefresh.js
index ae11751..a35a6f0 100644
--- a/src/contentScripts/communityConsole/autoRefresh.js
+++ b/src/contentScripts/communityConsole/autoRefresh.js
@@ -1,5 +1,6 @@
import {CCApi} from '../../common/api.js';
import {getAuthUser} from '../../common/communityConsoleUtils.js';
+import {isOptionEnabled} from '../../common/optionsUtils.js';
import {createExtBadge} from './utils/common.js';
@@ -90,6 +91,7 @@
this.isUpdatePromptShown = true;
}
+ // This function can be called even if the update prompt is not shown.
hideUpdatePrompt() {
if (this.snackbar) this.snackbar.classList.add('TWPT-hidden');
document.title = document.title.replace('[!!!] ', '');
@@ -261,24 +263,28 @@
// This is called when a thread list node is detected in the page. This
// initializes the interval to check for updates, and several other things.
setUp() {
- if (!this.isOrderedByTimestampDescending()) {
- this.injectStatusIndicator(false);
- console.debug(
- 'autorefresh_list: refused to start up because the order is not by timestamp descending.');
- return;
- }
+ isOptionEnabled('autorefreshlist').then(isEnabled => {
+ if (!isEnabled) return;
- this.unregister();
+ if (!this.isOrderedByTimestampDescending()) {
+ this.injectStatusIndicator(false);
+ console.debug(
+ 'autorefresh_list: refused to start up because the order is not by timestamp descending.');
+ return;
+ }
- console.debug('autorefresh_list: starting set up...');
+ this.unregister();
- if (this.snackbar === null) this.injectUpdatePrompt();
- this.injectStatusIndicator(true);
+ console.debug('autorefresh_list: starting set up...');
- this.isLookingForUpdates = true;
- this.path = location.pathname;
+ if (this.snackbar === null) this.injectUpdatePrompt();
+ this.injectStatusIndicator(true);
- var checkUpdateCallback = this.checkUpdate.bind(this);
- this.interval = window.setInterval(checkUpdateCallback, intervalMs);
+ this.isLookingForUpdates = true;
+ this.path = location.pathname;
+
+ var checkUpdateCallback = this.checkUpdate.bind(this);
+ this.interval = window.setInterval(checkUpdateCallback, intervalMs);
+ });
}
};
diff --git a/src/contentScripts/communityConsole/avatars.js b/src/contentScripts/communityConsole/avatars.js
index 437e68c..b125a17 100644
--- a/src/contentScripts/communityConsole/avatars.js
+++ b/src/contentScripts/communityConsole/avatars.js
@@ -2,6 +2,7 @@
import {CCApi} from '../../common/api.js';
import {parseUrl} from '../../common/commonUtils.js';
+import {isOptionEnabled} from '../../common/optionsUtils.js';
import AvatarsDB from './utils/AvatarsDB.js'
@@ -10,6 +11,14 @@
this.isFilterSetUp = false;
this.privateForums = [];
this.db = new AvatarsDB();
+
+ // Preload whether the option is enabled or not. This is because in the case
+ // avatars should be injected, if we don't preload this the layout will
+ // shift when injecting the first avatar.
+ isOptionEnabled('threadlistavatars').then(isEnabled => {
+ if (isEnabled)
+ document.body.classList.add('TWPT-threadlistavatars-enabled');
+ });
}
// Gets a list of private forums. If it is already cached, the cached list is
@@ -338,4 +347,17 @@
thread, err);
});
}
+
+ // Inject avatars for thread summary (thread item) |node| in a thread list if
+ // the threadlistavatars option is enabled.
+ injectIfEnabled(node) {
+ isOptionEnabled('threadlistavatars').then(isEnabled => {
+ if (isEnabled) {
+ document.body.classList.add('TWPT-threadlistavatars-enabled');
+ this.inject(node);
+ } else {
+ document.body.classList.remove('TWPT-threadlistavatars-enabled');
+ }
+ });
+ }
};
diff --git a/src/contentScripts/communityConsole/batchLock.js b/src/contentScripts/communityConsole/batchLock.js
index 0d939fa..20af6df 100644
--- a/src/contentScripts/communityConsole/batchLock.js
+++ b/src/contentScripts/communityConsole/batchLock.js
@@ -1,3 +1,5 @@
+import {isOptionEnabled} from '../../common/optionsUtils.js';
+
import {createExtBadge, removeChildNodes} from './utils/common.js';
export var batchLock = {
@@ -135,5 +137,10 @@
else
readToggle.parentNode.insertBefore(
clone, (readToggle.nextSibling || readToggle));
- }
+ },
+ addButtonIfEnabled(readToggle) {
+ isOptionEnabled('batchlock').then(isEnabled => {
+ if (isEnabled) this.addButton(readToggle);
+ });
+ },
};
diff --git a/src/contentScripts/communityConsole/dragAndDropFix.js b/src/contentScripts/communityConsole/dragAndDropFix.js
index 1f293f6..d2b93d0 100644
--- a/src/contentScripts/communityConsole/dragAndDropFix.js
+++ b/src/contentScripts/communityConsole/dragAndDropFix.js
@@ -1,3 +1,5 @@
+import {isOptionEnabled} from '../../common/optionsUtils.js';
+
export function applyDragAndDropFix(node) {
console.debug('Adding link drag&drop fix to ', node);
node.addEventListener('drop', e => {
@@ -7,3 +9,9 @@
}
}, true);
}
+
+export function applyDragAndDropFixIfEnabled(node) {
+ isOptionEnabled('ccdragndropfix').then(isEnabled => {
+ if (isEnabled) applyDragAndDropFix(node);
+ });
+}
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index 5518df8..d16a863 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -1,13 +1,15 @@
import {injectScript, injectStyles, injectStylesheet} from '../../common/contentScriptsUtils.js';
+import {getOptions, isOptionEnabled} from '../../common/optionsUtils.js';
import AvatarsHandler from './avatars.js';
import {batchLock} from './batchLock.js';
import {injectDarkModeButton, isDarkThemeOn} from './darkMode.js';
-import {applyDragAndDropFix} from './dragAndDropFix.js';
-import {injectPreviousPostsLinks} from './profileHistoryLink.js';
+import {applyDragAndDropFixIfEnabled} from './dragAndDropFix.js';
+import {injectPreviousPostsLinksIfEnabled} from './profileHistoryLink.js';
import {unifiedProfilesFix} from './unifiedProfiles.js';
-var mutationObserver, intersectionObserver, intersectionOptions, options, avatars;
+var mutationObserver, intersectionObserver, intersectionOptions, options,
+ avatars;
const watchedNodesSelectors = [
// App container (used to set up the intersection observer and inject the dark
@@ -58,6 +60,7 @@
}
// Inject the dark mode button
+ // TODO(avm99963): make this feature dynamic.
if (options.ccdarktheme && options.ccdarktheme_mode == 'switch') {
var rightControl = node.querySelector('header .right-control');
if (rightControl !== null)
@@ -66,14 +69,17 @@
}
// Start the intersectionObserver for the "load more"/"load all" buttons
- // inside a thread
- if ((options.thread || options.threadall) &&
- node.classList.contains('load-more-bar')) {
+ // inside a thread if the option is currently enabled.
+ if (node.classList.contains('load-more-bar')) {
if (typeof intersectionObserver !== 'undefined') {
- if (options.thread)
- intersectionObserver.observe(node.querySelector('.load-more-button'));
- if (options.threadall)
- intersectionObserver.observe(node.querySelector('.load-all-button'));
+ getOptions(['thread', 'threadall']).then(threadOptions => {
+ if (threadOptions.thread)
+ intersectionObserver.observe(
+ node.querySelector('.load-more-button'));
+ if (threadOptions.threadall)
+ intersectionObserver.observe(
+ node.querySelector('.load-all-button'));
+ });
} else {
console.warn(
'[infinitescroll] ' +
@@ -81,43 +87,46 @@
}
}
- // Show the "previous posts" links
+ // Show the "previous posts" links if the option is currently enabled.
// Here we're selecting the 'ec-user > div' element (unique child)
- if (options.history &&
- (node.matches('ec-user .main-card .header > .name > span') ||
- node.matches(
- 'ec-user .main-card .header > .name > ec-display-name-editor'))) {
- injectPreviousPostsLinks(node);
+ if (node.matches('ec-user .main-card .header > .name > span') ||
+ node.matches(
+ 'ec-user .main-card .header > .name > ec-display-name-editor')) {
+ injectPreviousPostsLinksIfEnabled(node);
}
- // Fix the drag&drop issue with the rich text editor
+ // Fix the drag&drop issue with the rich text editor if the option is
+ // currently enabled.
//
// We target both tags because in different contexts different
// elements containing the text editor get added to the DOM structure.
// Sometimes it's a EC-MOVABLE-DIALOG which already contains the
// EC-RICH-TEXT-EDITOR, and sometimes it's the EC-RICH-TEXT-EDITOR
// directly.
- if (options.ccdragndropfix && ('tagName' in node) &&
+ if (('tagName' in node) &&
(node.tagName == 'EC-MOVABLE-DIALOG' ||
node.tagName == 'EC-RICH-TEXT-EDITOR')) {
- applyDragAndDropFix(node);
+ applyDragAndDropFixIfEnabled(node);
}
- // Inject the batch lock button in the thread list
- if (options.batchlock && batchLock.nodeIsReadToggleBtn(node)) {
- batchLock.addButton(node);
+ // Inject the batch lock button in the thread list if the option is
+ // currently enabled.
+ if (batchLock.nodeIsReadToggleBtn(node)) {
+ batchLock.addButtonIfEnabled(node);
}
- // Inject avatar links to threads in the thread list
- if (options.threadlistavatars && ('tagName' in node) &&
- (node.tagName == 'LI') &&
+ // Inject avatar links to threads in the thread list. injectIfEnabled is
+ // responsible of determining whether it should run or not depending on its
+ // current setting.
+ if (('tagName' in node) && (node.tagName == 'LI') &&
node.querySelector('ec-thread-summary') !== null) {
- avatars.inject(node);
+ avatars.injectIfEnabled(node);
}
- // Set up the autorefresh list feature
- if (options.autorefreshlist && ('tagName' in node) &&
- node.tagName == 'EC-THREAD-LIST') {
+ // Set up the autorefresh list feature. The setUp function is responsible
+ // of determining whether it should run or not depending on the current
+ // setting.
+ if (('tagName' in node) && node.tagName == 'EC-THREAD-LIST') {
window.TWPTAutoRefresh.setUp();
}
@@ -131,8 +140,7 @@
function handleRemovedNode(node) {
// Remove snackbar when exiting thread list view
- if (options.autorefreshlist && 'tagName' in node &&
- node.tagName == 'EC-THREAD-LIST') {
+ if ('tagName' in node && node.tagName == 'EC-THREAD-LIST') {
window.TWPTAutoRefresh.hideUpdatePrompt();
}
}
@@ -164,12 +172,11 @@
subtree: true,
};
-chrome.storage.sync.get(null, function(items) {
+getOptions(null).then(items => {
options = items;
// Initialize classes needed by the mutation observer
- if (options.threadlistavatars)
- avatars = new AvatarsHandler();
+ avatars = new AvatarsHandler();
// autoRefresh is initialized in start.js
@@ -183,6 +190,7 @@
mutationObserver = new MutationObserver(mutationCallback);
mutationObserver.observe(document.body, observerOptions);
+ // TODO(avm99963): The following features are not dynamic. Make them be.
if (options.fixedtoolbar) {
injectStyles(
'ec-bulk-actions{position: sticky; top: 0; background: var(--TWPT-primary-background, #fff); z-index: 96;}');
@@ -214,16 +222,11 @@
}
}
- if (options.batchlock) {
- injectScript(chrome.runtime.getURL('batchLockInject.bundle.js'));
- injectStylesheet(chrome.runtime.getURL('css/batchlock_inject.css'));
- }
-
- if (options.threadlistavatars) {
- injectStylesheet(chrome.runtime.getURL('css/thread_list_avatars.css'));
- }
-
- if (options.autorefreshlist) {
- injectStylesheet(chrome.runtime.getURL('css/autorefresh_list.css'));
- }
+ // Batch lock
+ injectScript(chrome.runtime.getURL('batchLockInject.bundle.js'));
+ injectStylesheet(chrome.runtime.getURL('css/batchlock_inject.css'));
+ // Thread list avatars
+ injectStylesheet(chrome.runtime.getURL('css/thread_list_avatars.css'));
+ // Auto refresh list
+ injectStylesheet(chrome.runtime.getURL('css/autorefresh_list.css'));
});
diff --git a/src/contentScripts/communityConsole/profileHistoryLink.js b/src/contentScripts/communityConsole/profileHistoryLink.js
index 751ddd4..7f2dbd7 100644
--- a/src/contentScripts/communityConsole/profileHistoryLink.js
+++ b/src/contentScripts/communityConsole/profileHistoryLink.js
@@ -1,5 +1,7 @@
-import {getNParent, createExtBadge} from './utils/common.js';
import {escapeUsername, getAuthUser} from '../../common/communityConsoleUtils.js';
+import {isOptionEnabled} from '../../common/optionsUtils.js';
+
+import {createExtBadge, getNParent} from './utils/common.js';
var authuser = getAuthUser();
@@ -57,3 +59,9 @@
mainCardContent.appendChild(container);
}
+
+export function injectPreviousPostsLinksIfEnabled(nameElement) {
+ isOptionEnabled('history').then(isEnabled => {
+ if (isEnabled) injectPreviousPostsLinks(nameElement);
+ });
+}
diff --git a/src/contentScripts/communityConsole/start.js b/src/contentScripts/communityConsole/start.js
index d4c4bd6..ae26cec 100644
--- a/src/contentScripts/communityConsole/start.js
+++ b/src/contentScripts/communityConsole/start.js
@@ -1,20 +1,21 @@
import {injectScript, injectStylesheet} from '../../common/contentScriptsUtils.js';
+import {getOptions} from '../../common/optionsUtils.js';
import AutoRefresh from './autoRefresh.js';
const SMEI_UNIFIED_PROFILES = 9;
-chrome.storage.sync.get(null, function(items) {
+getOptions(null).then(options => {
/* IMPORTANT NOTE: Remember to change this when changing the "ifs" below!! */
- if (items.loaddrafts || items.disableunifiedprofiles) {
+ if (options.loaddrafts || options.disableunifiedprofiles) {
var startup =
JSON.parse(document.querySelector('html').getAttribute('data-startup'));
- if (items.loaddrafts) {
+ if (options.loaddrafts) {
startup[4][13] = true;
}
- if (items.disableunifiedprofiles) {
+ if (options.disableunifiedprofiles) {
var index = startup[1][6].indexOf(SMEI_UNIFIED_PROFILES);
if (index > -1) startup[1][6].splice(index, 1);
}
@@ -25,13 +26,12 @@
// Initialized here instead of in main.js so the first |ViewForumResponse|
// event is received if it happens when the page loads.
- if (items.autorefreshlist)
- window.TWPTAutoRefresh = new AutoRefresh();
+ window.TWPTAutoRefresh = new AutoRefresh();
- if (items.ccdarktheme) {
- switch (items.ccdarktheme_mode) {
+ if (options.ccdarktheme) {
+ switch (options.ccdarktheme_mode) {
case 'switch':
- if (items.ccdarktheme_switch_status == true)
+ if (options.ccdarktheme_switch_status == true)
injectStylesheet(chrome.runtime.getURL('css/ccdarktheme.css'));
break;
diff --git a/src/contentScripts/profile.js b/src/contentScripts/profile.js
index 38894d6..49422a5 100644
--- a/src/contentScripts/profile.js
+++ b/src/contentScripts/profile.js
@@ -1,4 +1,5 @@
import {escapeUsername} from '../common/communityConsoleUtils.js';
+import {getOptions} from '../common/optionsUtils.js';
var authuser = (new URL(location.href)).searchParams.get('authuser') || '0';
@@ -137,8 +138,8 @@
}
}
-chrome.storage.sync.get(null, function(items) {
- if (items.history) {
+getOptions('history').then(options => {
+ if (options?.history) {
if (document.getElementById('unified-user-profile') !== null)
injectPreviousPostsLinksUnifiedProfile();
else
diff --git a/src/contentScripts/profileIndicator.js b/src/contentScripts/profileIndicator.js
index 5edc932..74fc2e7 100644
--- a/src/contentScripts/profileIndicator.js
+++ b/src/contentScripts/profileIndicator.js
@@ -3,11 +3,7 @@
setUpListener();
-chrome.storage.sync.get(null, function(options) {
- if (options.profileindicator || options.profileindicatoralt) {
- injectScript(
- chrome.runtime.getURL('profileIndicatorInject.bundle.js'));
- injectStylesheet(
- chrome.runtime.getURL('css/profileindicator_inject.css'));
- }
-});
+injectScript(
+ chrome.runtime.getURL('profileIndicatorInject.bundle.js'));
+injectStylesheet(
+ chrome.runtime.getURL('css/profileindicator_inject.css'));
diff --git a/src/contentScripts/publicForum.js b/src/contentScripts/publicForum.js
index 38b56ce..0163f54 100644
--- a/src/contentScripts/publicForum.js
+++ b/src/contentScripts/publicForum.js
@@ -1,3 +1,5 @@
+import {getOptions} from '../common/optionsUtils.js';
+
var intersectionObserver;
function intersectionCallback(entries, observer) {
@@ -12,9 +14,9 @@
threshold: 1.0,
};
-chrome.storage.sync.get(null, function(items) {
+getOptions('list').then(options => {
var button = document.querySelector('.thread-list-threads__load-more-button');
- if (items.list && button !== null) {
+ if (options.list && button !== null) {
intersectionObserver =
new IntersectionObserver(intersectionCallback, intersectionOptions);
intersectionObserver.observe(button);
diff --git a/src/contentScripts/publicThread.js b/src/contentScripts/publicThread.js
index 110b5c4..84cb181 100644
--- a/src/contentScripts/publicThread.js
+++ b/src/contentScripts/publicThread.js
@@ -1,3 +1,5 @@
+import {getOptions} from '../common/optionsUtils.js';
+
var CCThreadWithoutMessage = /forum\/[0-9]*\/thread\/[0-9]*$/;
var intersectionObserver;
@@ -14,9 +16,9 @@
threshold: 1.0,
};
-chrome.storage.sync.get(null, function(items) {
+getOptions(null).then(options => {
var redirectLink = document.querySelector('.community-console');
- if (items.redirect && redirectLink !== null) {
+ if (options.redirect && redirectLink !== null) {
var redirectUrl = redirectLink.href;
var searchParams = new URLSearchParams(location.search);
@@ -29,14 +31,14 @@
} else {
var button =
document.querySelector('.thread-all-replies__load-more-button');
- if (items.thread && button !== null) {
+ if (options.thread && button !== null) {
intersectionObserver =
new IntersectionObserver(intersectionCallback, intersectionOptions);
intersectionObserver.observe(button);
}
var allbutton =
document.querySelector('.thread-all-replies__load-all-button');
- if (items.threadall && button !== null) {
+ if (options.threadall && button !== null) {
intersectionObserver =
new IntersectionObserver(intersectionCallback, intersectionOptions);
intersectionObserver.observe(allbutton);
diff --git a/src/static/css/thread_list_avatars.css b/src/static/css/thread_list_avatars.css
index 2edf889..0289afb 100644
--- a/src/static/css/thread_list_avatars.css
+++ b/src/static/css/thread_list_avatars.css
@@ -36,6 +36,6 @@
/*
* Changing styles of existing elements so the avatars fit.
*/
-ec-thread-summary .main-header .panel-description a.header .header-content {
+body.TWPT-threadlistavatars-enabled ec-thread-summary .main-header .panel-description a.header .header-content {
width: calc(100% - 218px);
}