Refactor: extract DevTools data from ExtensionData (#10589)

src/background/extension.ts

@@ -15,7 +15,7 @@ import createCSSFilterStylesheet from '../generators/css-filter';
 import {getDynamicThemeFixesFor} from '../generators/dynamic-theme';
 import createStaticStylesheet from '../generators/static-theme';
 import {createSVGFilterStylesheet, getSVGFilterMatrixValue, getSVGReverseFilterMatrixValue} from '../generators/svg-filter';
-import type {ExtensionData, FilterConfig, Shortcuts, UserSettings, TabInfo, TabData, Command} from '../definitions';
+import type {ExtensionData, FilterConfig, Shortcuts, UserSettings, TabInfo, TabData, Command, DevToolsData} from '../definitions';
 import {isSystemDarkModeEnabled, runColorSchemeChangeDetector} from '../utils/media-query';
 import {isFirefox} from '../utils/platform';
 import {MessageType} from '../utils/message';
@@ -243,6 +243,9 @@ export class Extension {
             collect: async () => {
                 return await this.collectData();
             },
+            collectDevToolsData: async () => {
+                return await this.collectDevToolsData();
+            },
             changeSettings: async (settings) => this.changeSettings(settings),
             setTheme: (theme) => this.setTheme(theme),
             toggleActiveTab: async () => this.toggleActiveTab(),
@@ -369,17 +372,11 @@ export class Extension {
         const [
             news,
             shortcuts,
-            dynamicFixesText,
-            filterFixesText,
-            staticThemesText,
             activeTab,
             isAllowedFileSchemeAccess,
         ] = await Promise.all([
             Newsmaker.getLatest(),
             this.getShortcuts(),
-            DevTools.getDynamicThemeFixesText(),
-            DevTools.getInversionFixesText(),
-            DevTools.getStaticThemesText(),
             this.getActiveTabInfo(),
             new Promise<boolean>((r) => chrome.extension.isAllowedFileSchemeAccess(r)),
         ]);
@@ -392,15 +389,27 @@ export class Extension {
             shortcuts,
             colorScheme: ConfigManager.COLOR_SCHEMES_RAW!,
             forcedScheme: this.autoState === 'scheme-dark' ? 'dark' : this.autoState === 'scheme-light' ? 'light' : null,
-            devtools: {
-                dynamicFixesText,
-                filterFixesText,
-                staticThemesText,
-            },
             activeTab,
         };
     }
 
+    static async collectDevToolsData(): Promise<DevToolsData> {
+        const [
+            dynamicFixesText,
+            filterFixesText,
+            staticThemesText
+        ] = await Promise.all([
+            DevTools.getDynamicThemeFixesText(),
+            DevTools.getInversionFixesText(),
+            DevTools.getStaticThemesText(),
+        ]);
+        return {
+            dynamicFixesText,
+            filterFixesText,
+            staticThemesText
+        };
+    }
+
     private static async getActiveTabInfo() {
         await this.loadData();
         const tabURL = await TabManager.getActiveTabURL();

src/background/make-chromium-happy.ts

@@ -15,6 +15,7 @@ export function makeChromiumHappy() {
         if (![
             // Messenger
             MessageType.UI_GET_DATA,
+            MessageType.UI_GET_DEVTOOLS_DATA,
             MessageType.UI_APPLY_DEV_DYNAMIC_THEME_FIXES,
             MessageType.UI_APPLY_DEV_INVERSION_FIXES,
             MessageType.UI_APPLY_DEV_STATIC_THEMES,

src/background/messenger.ts

@@ -1,10 +1,11 @@
 import {isFirefox} from '../utils/platform';
-import type {ExtensionData, FilterConfig, TabInfo, Message, UserSettings} from '../definitions';
+import type {ExtensionData, FilterConfig, TabInfo, Message, UserSettings, DevToolsData} from '../definitions';
 import {MessageType} from '../utils/message';
 import {makeFirefoxHappy} from './make-firefox-happy';
 
 export interface ExtensionAdapter {
     collect: () => Promise<ExtensionData>;
+    collectDevToolsData: () => Promise<DevToolsData>;
     changeSettings: (settings: Partial<UserSettings>) => void;
     setTheme: (theme: Partial<FilterConfig>) => void;
     markNewsAsRead: (ids: string[]) => Promise<void>;
@@ -35,7 +36,7 @@ export default class Messenger {
         }
     }
 
-    private static messageListener(message: Message, sender: chrome.runtime.MessageSender, sendResponse: (response: {data?: ExtensionData | TabInfo; error?: string} | 'unsupportedSender') => void) {
+    private static messageListener(message: Message, sender: chrome.runtime.MessageSender, sendResponse: (response: {data?: ExtensionData | DevToolsData | TabInfo; error?: string} | 'unsupportedSender') => void) {
         if (isFirefox && makeFirefoxHappy(message, sender, sendResponse)) {
             return;
         }
@@ -48,16 +49,20 @@ export default class Messenger {
             this.onUIMessage(message, sendResponse);
             return ([
                 MessageType.UI_GET_DATA,
+                MessageType.UI_GET_DEVTOOLS_DATA,
             ].includes(message.type));
         }
     }
 
     private static firefoxPortListener(port: chrome.runtime.Port) {
-        let promise: Promise<ExtensionData | TabInfo | null>;
+        let promise: Promise<ExtensionData | DevToolsData | TabInfo | null>;
         switch (port.name) {
             case MessageType.UI_GET_DATA:
                 promise = this.adapter.collect();
                 break;
+            case MessageType.UI_GET_DEVTOOLS_DATA:
+                promise = this.adapter.collectDevToolsData();
+                break;
             // These types require data, so we need to add a listener to the port.
             case MessageType.UI_APPLY_DEV_DYNAMIC_THEME_FIXES:
             case MessageType.UI_APPLY_DEV_INVERSION_FIXES:
@@ -94,11 +99,14 @@ export default class Messenger {
             .catch((error) => port.postMessage({error}));
     }
 
-    private static onUIMessage({type, data}: Message, sendResponse: (response: {data?: ExtensionData | TabInfo; error?: string}) => void) {
+    private static onUIMessage({type, data}: Message, sendResponse: (response: {data?: ExtensionData | DevToolsData | TabInfo; error?: string}) => void) {
         switch (type) {
             case MessageType.UI_GET_DATA:
                 this.adapter.collect().then((data) => sendResponse({data}));
                 break;
+            case MessageType.UI_GET_DEVTOOLS_DATA:
+                this.adapter.collectDevToolsData().then((data) => sendResponse({data}));
+                break;
             case MessageType.UI_SUBSCRIBE_TO_CHANGES:
                 this.changeListenerCount++;
                 break;

src/definitions.d.ts

@@ -13,14 +13,15 @@ export interface ExtensionData {
     shortcuts: Shortcuts;
     colorScheme: ParsedColorSchemeConfig;
     forcedScheme: 'dark' | 'light' | null;
-    devtools: {
-        dynamicFixesText: string;
-        filterFixesText: string;
-        staticThemesText: string;
-    };
     activeTab: TabInfo;
 }
 
+export interface DevToolsData {
+    dynamicFixesText: string;
+    filterFixesText: string;
+    staticThemesText: string;
+}
+
 export interface TabData {
     type: MessageType;
     data?: any;

src/ui/connect/connector.ts

@@ -1,5 +1,5 @@
 import {isFirefox} from '../../utils/platform';
-import type {ExtensionData, ExtensionActions, FilterConfig, Message, UserSettings} from '../../definitions';
+import type {ExtensionData, ExtensionActions, FilterConfig, Message, UserSettings, DevToolsData} from '../../definitions';
 import {MessageType} from '../../utils/message';
 
 declare const browser: {
@@ -51,6 +51,13 @@ export default class Connector implements ExtensionActions {
         return await this.sendRequest<ExtensionData>(MessageType.UI_GET_DATA);
     }
 
+    async getDevToolsData() {
+        if (isFirefox) {
+            return await this.firefoxSendRequestWithResponse<DevToolsData>(MessageType.UI_GET_DEVTOOLS_DATA);
+        }
+        return await this.sendRequest<DevToolsData>(MessageType.UI_GET_DEVTOOLS_DATA);
+    }
+
     private onChangesReceived = ({type, data}: Message) => {
         if (type === MessageType.BG_CHANGES) {
             this.changeSubscribers.forEach((callback) => callback(data));

src/ui/devtools/components/body.tsx

@@ -4,13 +4,13 @@ import {withState, useState} from 'malevic/state';
 import {Button, MessageBox, Overlay} from '../../controls';
 import {ThemeEngine} from '../../../generators/theme-engines';
 import {DEVTOOLS_DOCS_URL} from '../../../utils/links';
-import type {ExtWrapper} from '../../../definitions';
+import type {DevToolsData, ExtWrapper} from '../../../definitions';
 import {getCurrentThemePreset} from '../../popup/theme/utils';
 import {isFirefox} from '../../../utils/platform';
 
-type BodyProps = ExtWrapper;
+type BodyProps = ExtWrapper & {devtools: DevToolsData};
 
-function Body({data, actions}: BodyProps) {
+function Body({data, actions, devtools}: BodyProps) {
     const context = getContext();
     const {state, setState} = useState({errorText: null as string | null});
     let textNode: HTMLTextAreaElement;
@@ -20,17 +20,17 @@ function Body({data, actions}: BodyProps) {
     const wrapper = (theme.engine === ThemeEngine.staticTheme
         ? {
             header: 'Static Theme Editor',
-            fixesText: data.devtools.staticThemesText,
+            fixesText: devtools.staticThemesText,
             apply: (text: string) => actions.applyDevStaticThemes(text),
             reset: () => actions.resetDevStaticThemes(),
         } : theme.engine === ThemeEngine.cssFilter || theme.engine === ThemeEngine.svgFilter ? {
             header: 'Inversion Fix Editor',
-            fixesText: data.devtools.filterFixesText,
+            fixesText: devtools.filterFixesText,
             apply: (text: string) => actions.applyDevInversionFixes(text),
             reset: () => actions.resetDevInversionFixes(),
         } : {
             header: 'Dynamic Theme Editor',
-            fixesText: data.devtools.dynamicFixesText,
+            fixesText: devtools.dynamicFixesText,
             apply: (text: string) => actions.applyDevDynamicThemeFixes(text),
             reset: () => actions.resetDevDynamicThemeFixes(),
         });

src/ui/devtools/index.tsx

@@ -2,21 +2,28 @@ import {m} from 'malevic';
 import {sync} from 'malevic/dom';
 import Body from './components/body';
 import Connector from '../connect/connector';
-import type {ExtensionData} from '../../definitions';
+import type {DevToolsData, ExtensionData} from '../../definitions';
 
 declare const __CHROMIUM_MV3__: boolean;
 
-function renderBody(data: ExtensionData, actions: Connector) {
-    sync(document.body, <Body data={data} actions={actions} />);
+function renderBody(data: ExtensionData, devToolsData: DevToolsData, actions: Connector) {
+    sync(document.body, <Body data={data} devtools={devToolsData} actions={actions} />);
 }
 
 async function start() {
     const connector = new Connector();
     window.addEventListener('unload', () => connector.disconnect());
 
-    const data = await connector.getData();
-    renderBody(data, connector);
-    connector.subscribeToChanges((data) => renderBody(data, connector));
+    let [data, devToolsData] = await Promise.all([
+        connector.getData(),
+        connector.getDevToolsData(),
+    ]);
+    renderBody(data, devToolsData, connector);
+    connector.subscribeToChanges(async (data_) => {
+        data = data_;
+        devToolsData = await connector.getDevToolsData();
+        renderBody(data, devToolsData, connector);
+    });
 }
 
 start();

src/utils/message.ts

@@ -1,5 +1,6 @@
 export enum MessageType {
     UI_GET_DATA = 'ui-get-data',
+    UI_GET_DEVTOOLS_DATA = 'ui-get-devtools-data',
     UI_SUBSCRIBE_TO_CHANGES = 'ui-subscribe-to-changes',
     UI_UNSUBSCRIBE_FROM_CHANGES = 'ui-unsubscribe-from-changes',
     UI_CHANGE_SETTINGS = 'ui-change-settings',