refactor: migrate some styling features to the new architecture
Again, by using StylesheetScript we also get dynamic styles for free.
Bug: twpowertools:176, twpowertools:61
Change-Id: I8c660f8b9cddaf56b3a29c8d07d48d070ee2cd34
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index 3e914af..d8d0ba0 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -1,4 +1,4 @@
-import {injectScript, injectStyles, injectStylesheet} from '../../common/contentScriptsUtils';
+import {injectScript, injectStylesheet} from '../../common/contentScriptsUtils';
import {getOptions} from '../../common/options/optionsUtils.js';
import XHRProxyKillSwitchHandler from '../../xhrInterceptor/killSwitchHandler.js';
import {injectPreviousPostsLinksUnifiedProfileIfEnabled} from '../utilsCommon/unifiedProfiles.js';
@@ -125,35 +125,6 @@
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;}');
- }
-
- if (options.increasecontrast) {
- injectStyles(
- '.thread-summary.read:not(.checked){background: var(--TWPT-thread-read-background, #ecedee)!important;}');
- }
-
- if (options.stickysidebarheaders) {
- injectStyles(
- 'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}');
- }
-
- if (options.enhancedannouncementsdot) {
- injectStylesheet(
- chrome.runtime.getURL('css/enhanced_announcements_dot.css'));
- }
-
- if (options.repositionexpandthread) {
- injectStylesheet(chrome.runtime.getURL('css/reposition_expand_thread.css'));
- }
-
- if (options.imagemaxheight) {
- injectStylesheet(chrome.runtime.getURL('css/image_max_height.css'));
- }
-
if (options.ccforcehidedrawer) {
var drawer = document.querySelector('material-drawer');
if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {
diff --git a/src/entryPoints/communityConsole/contentScripts/main.ts b/src/entryPoints/communityConsole/contentScripts/main.ts
index 2274fd0..16bd30f 100644
--- a/src/entryPoints/communityConsole/contentScripts/main.ts
+++ b/src/entryPoints/communityConsole/contentScripts/main.ts
@@ -48,6 +48,12 @@
import FlattenThreadsReplyBtnHandler from '../../../features/flattenThreads/presentation/nodeWatcherHandlers/replyBtn.handler';
import FlattenThreads from '../../../features/flattenThreads/core/flattenThreads';
import FlattenThreadsStylesScript from '../../../features/flattenThreads/presentation/scripts/styles.script';
+import FixedToolbarStylesScript from '../../../features/fixedToolbar/presentation/scripts/styles.script';
+import EnhancedAnnouncementsDotStylesScript from '../../../features/enhancedAnnouncementsDot/presentation/scripts/styles.script';
+import ImageMaxHeightStylesScript from '../../../features/imageMaxHeight/presentation/scripts/styles.script';
+import RepositionExpandThreadStylesScript from '../../../features/repositionExpandThread/presentation/scripts/styles.script';
+import StickySidebarHeadersStylesScript from '../../../features/stickySidebarHeaders/presentation/scripts/styles.script';
+import IncreaseContrastStylesScript from '../../../features/increaseContrast/presentation/scripts/styles.script';
const scriptRunner = createScriptRunner();
scriptRunner.run();
@@ -174,7 +180,13 @@
new AutoRefreshStylesScript(),
new CCExtraInfoInjectScript(),
new CCExtraInfoStylesScript(),
+ new EnhancedAnnouncementsDotStylesScript(),
+ new FixedToolbarStylesScript(),
new FlattenThreadsStylesScript(),
+ new ImageMaxHeightStylesScript(),
+ new IncreaseContrastStylesScript(),
+ new RepositionExpandThreadStylesScript(),
+ new StickySidebarHeadersStylesScript(),
new WorkflowsImportStylesheetScript(),
// Standalone scripts
diff --git a/src/features/enhancedAnnouncementsDot/presentation/scripts/styles.script.ts b/src/features/enhancedAnnouncementsDot/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..5844311
--- /dev/null
+++ b/src/features/enhancedAnnouncementsDot/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class EnhancedAnnouncementsDotStylesScript extends StylesheetScript {
+ stylesheet = 'css/enhanced_announcements_dot.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('enhancedannouncementsdot');
+ }
+}
diff --git a/src/static/css/enhanced_announcements_dot.css b/src/features/enhancedAnnouncementsDot/ui/styles.css
similarity index 100%
rename from src/static/css/enhanced_announcements_dot.css
rename to src/features/enhancedAnnouncementsDot/ui/styles.css
diff --git a/src/features/fixedToolbar/presentation/scripts/styles.script.ts b/src/features/fixedToolbar/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..29133fc
--- /dev/null
+++ b/src/features/fixedToolbar/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class FixedToolbarStylesScript extends StylesheetScript {
+ stylesheet = 'css/fixed_toolbar.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('fixedtoolbar');
+ }
+}
diff --git a/src/features/fixedToolbar/ui/styles.css b/src/features/fixedToolbar/ui/styles.css
new file mode 100644
index 0000000..c52fb30
--- /dev/null
+++ b/src/features/fixedToolbar/ui/styles.css
@@ -0,0 +1,6 @@
+ec-bulk-actions {
+ position: sticky;
+ top: 0;
+ background: var(--TWPT-primary-background, #fff);
+ z-index: 96;
+}
diff --git a/src/features/imageMaxHeight/presentation/scripts/styles.script.ts b/src/features/imageMaxHeight/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..9befaa9
--- /dev/null
+++ b/src/features/imageMaxHeight/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class ImageMaxHeightStylesScript extends StylesheetScript {
+ stylesheet = 'css/image_max_height.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('imagemaxheight');
+ }
+}
diff --git a/src/static/css/image_max_height.css b/src/features/imageMaxHeight/ui/styles.css
similarity index 100%
rename from src/static/css/image_max_height.css
rename to src/features/imageMaxHeight/ui/styles.css
diff --git a/src/features/increaseContrast/presentation/scripts/styles.script.ts b/src/features/increaseContrast/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..2ff828c
--- /dev/null
+++ b/src/features/increaseContrast/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class IncreaseContrastStylesScript extends StylesheetScript {
+ stylesheet = 'css/increase_contrast.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('increasecontrast');
+ }
+}
diff --git a/src/features/increaseContrast/ui/styles.css b/src/features/increaseContrast/ui/styles.css
new file mode 100644
index 0000000..026230e
--- /dev/null
+++ b/src/features/increaseContrast/ui/styles.css
@@ -0,0 +1,3 @@
+.thread-summary.read:not(.checked) {
+ background: var(--TWPT-thread-read-background, #ecedee) !important;
+}
diff --git a/src/features/repositionExpandThread/presentation/scripts/styles.script.ts b/src/features/repositionExpandThread/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..2d54313
--- /dev/null
+++ b/src/features/repositionExpandThread/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class RepositionExpandThreadStylesScript extends StylesheetScript {
+ stylesheet = 'css/reposition_expand_thread.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('repositionexpandthread');
+ }
+}
diff --git a/src/static/css/reposition_expand_thread.css b/src/features/repositionExpandThread/ui/styles.css
similarity index 100%
rename from src/static/css/reposition_expand_thread.css
rename to src/features/repositionExpandThread/ui/styles.css
diff --git a/src/features/stickySidebarHeaders/presentation/scripts/styles.script.ts b/src/features/stickySidebarHeaders/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..eda313e
--- /dev/null
+++ b/src/features/stickySidebarHeaders/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class StickySidebarHeadersStylesScript extends StylesheetScript {
+ stylesheet = 'css/sticky_sidebar_headers.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('stickysidebarheaders');
+ }
+}
diff --git a/src/features/stickySidebarHeaders/ui/styles.css b/src/features/stickySidebarHeaders/ui/styles.css
new file mode 100644
index 0000000..cd64b74
--- /dev/null
+++ b/src/features/stickySidebarHeaders/ui/styles.css
@@ -0,0 +1,6 @@
+material-drawer .main-header {
+ background: var(--TWPT-drawer-background, #fff) !important;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+}