refactor(dark-page-handler, dom-observer, index): streamline dark page handling and improve logging

Author: marcusds

src/background/index.ts

@@ -179,6 +179,44 @@ browser.runtime.onMessage.addListener(async (message: any, sender: any) => {
         await method_change(message.key || parsed?.host, message.value);
         break;
       }
+      case 'log_dark_page_check': {
+        const timestamp = new Date().toISOString();
+        const logEntry = {
+          url: message.key,
+          isDark: message.value,
+          timestamp: timestamp,
+        };
+        // Store in browser storage for persistence
+        try {
+          const existingLogs = await browser.storage.local.get('darkPageLogs');
+          const logs = existingLogs.darkPageLogs || [];
+          logs.push(logEntry);
+          // Keep only last 100 entries to prevent storage overflow
+          if (logs.length > 100) {
+            logs.splice(0, logs.length - 100);
+          }
+          await browser.storage.local.set({ darkPageLogs: logs });
+        } catch (error) {
+          console.error('Failed to store dark page log:', error);
+        }
+        break;
+      }
+      case 'get_dark_page_logs': {
+        try {
+          const existingLogs = await browser.storage.local.get('darkPageLogs');
+          const logs = existingLogs.darkPageLogs || [];
+          // Find the most recent log entry for the given URL
+          const urlLogs = logs.filter((log: any) => log.url === message.key);
+          if (urlLogs.length > 0) {
+            const mostRecent = urlLogs[urlLogs.length - 1];
+            return mostRecent.isDark;
+          }
+          return null; // No logs found for this URL
+        } catch (error) {
+          console.error('Failed to retrieve dark page logs:', error);
+          return null;
+        }
+      }
       default:
         console.error('Unknown message action:', message.action);
         break;
@@ -230,7 +268,7 @@ async function send_prefs(changes: {
         window.configured_tabs = ${JSON.stringify(configured_tabs)};
         window.rendered_stylesheets = ${JSON.stringify(rendered_stylesheets)};
         if (window.content_script_state !== 'registered_content_script_first') { /* #226 part 1 workaround */
-            window.do_it(${JSON.stringify(changes)});
+            console.log("sadm DOIT!111");window.do_it(${JSON.stringify(changes)});
         }
     `;
   for (const key of Object.keys(from_manifest)) {

src/common/types.ts

@@ -107,7 +107,7 @@ export interface MethodMetadataWithStylesheets extends MethodMetadataBare {
 }
 export interface MethodExecutor {
   load_into_window(): void;
-  unload_from_window(): void;
+  unload_from_window(light?: boolean, callback?: () => void): void;
 }
 export interface MethodExecutorStatic {
   new (window: Window, options: AddonOptions): MethodExecutor;

src/content/dark-page-handler.ts

@@ -1,7 +1,4 @@
-import type {
-  MethodIndex,
-  MethodMetadataWithExecutors,
-} from '../common/types';
+import type { MethodIndex, MethodMetadataWithExecutors } from '../common/types';
 import { generate_urls } from '../common/generate-urls';
 import { isPageDark } from '../utils/isPageDark';
 import { DISABLED_ID } from '../methods/methods';
@@ -21,46 +18,91 @@ export class DarkPageHandler {
     private disconnectAllObservers: () => void,
   ) {}
 
-  async checkAndPersistDarkPage(): Promise<void> {
+  async disableDarkMode() {
+    this.disconnectAllObservers();
+    const urlKey = generate_urls(window.document.documentURI)[0];
+    const mergedConfigured = window.merged_configured;
+    if (!mergedConfigured[urlKey] || mergedConfigured[urlKey] !== DISABLED_ID) {
+      const tabId = await this.tabIdPromise;
+      const configuredTabs = window.configured_tabs;
+      const url = configuredTabs?.[tabId as number];
+      await browser.runtime.sendMessage({
+        action: 'set_configured_page',
+        key: url,
+        value: DISABLED_ID,
+      });
+      window.do_it({}, DISABLED_ID);
+    }
+  }
+
+  async checkAndPersistDarkPage(retry = false): Promise<void> {
     const isDefaultMethod =
       (await this.methodResolver.isDefaultMethod(window.document.documentURI))
       || (await this.methodResolver.isDefaultMethod(window.location.hostname));
 
-    if (!isDefaultMethod) return;
+    if (!isDefaultMethod) {
+      return;
+    }
 
-    const method = await this.methodResolver.getMethodForUrl(
+    // Check if we have a previous log entry for this URL
+    if (window.location.hostname) {
+      let result = await browser.runtime.sendMessage({
+        action: 'get_dark_page_logs',
+        key: window.location.hostname,
+      });
+      if (result === undefined || result === null) {
+        // Try again with documentURI if no result
+        result = await browser.runtime.sendMessage({
+          action: 'get_dark_page_logs',
+          key: window.document.documentURI,
+        });
+      }
+      if (result === false) {
+        return;
+      }
+    }
+
+    const currentMethod = await this.methodResolver.getMethodForUrl(
       window.document.documentURI,
     );
-    const sheets = document.querySelectorAll('.dblt-ykjmwcnxmi');
 
-    for (const sheet of sheets) {
-      sheet?.setAttribute('media', '(not all)');
-    }
+    const method = await this.methodResolver.getMethodForUrl(
+      window.document.documentURI,
+    );
 
-    if (isPageDark(method)) {
-      this.disconnectAllObservers();
+    if (retry) {
+      // If not the initial check do a simple check
+      if (isPageDark(method)) {
+        await this.disableDarkMode();
+      }
+    } else {
+      const sheets = document.querySelectorAll('.dblt-ykjmwcnxmi');
       for (const sheet of sheets) {
-        sheet?.setAttribute('media', '');
+        sheet?.setAttribute('media', '(not all)');
       }
-      const urlKey = generate_urls(window.document.documentURI)[0];
-      const mergedConfigured = window.merged_configured;
-      if (
-        !mergedConfigured[urlKey]
-        || mergedConfigured[urlKey] !== DISABLED_ID
-      ) {
-        const tabId = await this.tabIdPromise;
-        const configuredTabs = window.configured_tabs;
-        const url = configuredTabs?.[tabId as number];
-        await browser.runtime.sendMessage({
-          action: 'set_configured_page',
-          key: url,
-          value: DISABLED_ID,
+      const keepFromBlinding = document.createElement('style');
+      keepFromBlinding.appendChild(
+        document.createTextNode('* { background: #000 !important; }'),
+      );
+      document.body.appendChild(keepFromBlinding);
+
+      await window.do_it({}, DISABLED_ID, async () => {
+        requestAnimationFrame(async () => {
+          if (isPageDark(method)) {
+            await this.disableDarkMode();
+          } else {
+            await browser.runtime.sendMessage({
+              action: 'log_dark_page_check',
+              key: window.location.hostname,
+              value: false,
+            });
+            for (const sheet of sheets) {
+              sheet?.setAttribute('media', '');
+            }
+            await window.do_it({}, currentMethod.number);
+          }
+          keepFromBlinding.remove();
         });
-        window.do_it({}, DISABLED_ID);
-      }
-    } else {
-      sheets.forEach((link) => {
-        link.setAttribute('media', '');
       });
     }
   }

src/content/dom-observer.ts

@@ -1,15 +1,15 @@
 import { darkDatas, isPageDark } from '../utils/isPageDark';
 import type { MethodIndex, MethodMetadataWithExecutors } from '../common/types';
 
-interface DomObserverDeps {
-  methodResolver: {
-    getMethodForUrl: (url: string, forceMethod?: MethodIndex) => Promise<MethodMetadataWithExecutors>;
-  };
-}
-
-export function createDomObserver(deps: DomObserverDeps) {
-  const { methodResolver } = deps;
-  let darkPageHandler: { checkAndPersistDarkPage: () => Promise<void> } | null = null;
+export function createDomObserver(methodResolver: {
+  getMethodForUrl: (
+    url: string,
+    forceMethod?: MethodIndex,
+  ) => Promise<MethodMetadataWithExecutors>;
+}) {
+  let darkPageHandler: {
+    checkAndPersistDarkPage: (retry: boolean) => Promise<void>;
+  } | null = null;
   const observers: MutationObserver[] = [];
   let disconnected = false;
   let timeout: number | undefined;
@@ -24,7 +24,7 @@ export function createDomObserver(deps: DomObserverDeps) {
 
   function observeClassListChanges(): void {
     timeout = setTimeout(() => disconnectAll(), 45000);
-    
+
     const callback = async (mutationsList: MutationRecord[]) => {
       for (const mutation of mutationsList) {
         if (
@@ -33,10 +33,12 @@ export function createDomObserver(deps: DomObserverDeps) {
             || mutation.attributeName?.startsWith('data-'))
         ) {
           if (darkPageHandler) {
-            darkPageHandler.checkAndPersistDarkPage();
+            darkPageHandler.checkAndPersistDarkPage(true);
           }
-          const method = await methodResolver.getMethodForUrl(window.document.documentURI);
-          if (isPageDark(method)) {
+          const method = await methodResolver.getMethodForUrl(
+            window.document.documentURI,
+          );
+          if (isPageDark(method, true)) {
             disconnectAll();
           }
           break;
@@ -65,7 +67,9 @@ export function createDomObserver(deps: DomObserverDeps) {
     }
   }
 
-  function setDarkPageHandler(handler: { checkAndPersistDarkPage: () => Promise<void> }): void {
+  function setDarkPageHandler(handler: {
+    checkAndPersistDarkPage: () => Promise<void>;
+  }): void {
     darkPageHandler = handler;
   }
 
@@ -74,4 +78,4 @@ export function createDomObserver(deps: DomObserverDeps) {
     observeClassListChanges,
     setDarkPageHandler,
   };
-}
+}

src/content/index.ts

@@ -11,6 +11,7 @@ import { createMethodResolver } from './method-resolver';
 import { DarkPageHandler } from './dark-page-handler';
 import { createDomObserver } from './dom-observer';
 import { createMessageHandler } from './message-handler';
+import { methods } from '../methods/methods-with-executors';
 
 const tabId_promise = browser.runtime.sendMessage({ action: 'query_tabId' });
 const is_iframe = detectIframe();
@@ -29,7 +30,9 @@ declare global {
     do_it: (
       changes: { [s: string]: browser.storage.StorageChange },
       forceMethod?: MethodIndex,
+      unloadCallback?: () => void,
     ) => Promise<void>;
+    _sadam_test: boolean | undefined;
   }
 }
 
@@ -59,9 +62,7 @@ let current_method_promise: Promise<MethodMetadataWithExecutors> = new Promise(
 let current_method_executor: MethodExecutor | undefined;
 
 // Initialize DOM observer first (needed for disconnectAll reference)
-const domObserver = createDomObserver({
-  methodResolver,
-});
+const domObserver = createDomObserver(methodResolver);
 
 // Initialize dark page handler
 const darkPageHandler = new DarkPageHandler(methodResolver, tabId_promise, () =>
@@ -81,12 +82,12 @@ window.do_it = async function do_it(
     [s: string]: browser.storage.StorageChange;
   },
   forceMethod?: MethodIndex,
+  unloadCallback?: () => void,
 ): Promise<void> {
   try {
-    const new_method = await methodResolver.getMethodForUrl(
-      window.document.documentURI,
-      forceMethod,
-    );
+    const new_method = forceMethod
+      ? methods[forceMethod]
+      : await methodResolver.getMethodForUrl(window.document.documentURI);
     if (resolve_current_method_promise) {
       resolve_current_method_promise(new_method);
       resolve_current_method_promise = null;
@@ -124,7 +125,9 @@ window.do_it = async function do_it(
         }
       }
       if (current_method_executor) {
-        current_method_executor.unload_from_window();
+        current_method_executor.unload_from_window(false, () => {
+          unloadCallback?.();
+        });
         current_method_executor = undefined;
       }
       if (new_method.executor) {

src/methods/executors/invert.ts

@@ -20,12 +20,15 @@ export class InvertMethod implements MethodExecutor {
     }
   }
 
-  unload_from_window() {
+  unload_from_window(_light: boolean, callback?: () => void) {
     const el = this.window.document.querySelector(
       '#mybpwaycfxccmnp-dblt-backdrop-filter',
     );
     if (el !== null) {
       el.parentElement!.removeChild(el);
     }
+    if (callback) {
+      callback();
+    }
   }
 }

src/methods/executors/stylesheet-color-processor.ts

@@ -188,8 +188,13 @@ export class StylesheetColorProcessor
       lighten_or_darken_color(color_array, !is_dark_background, default_colors);
   }
 
-  unload_from_window() {
-    StylesheetProcessorAbstract.prototype.unload_from_window.call(this, false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  unload_from_window(_light = false, callback?: () => void) {
+    StylesheetProcessorAbstract.prototype.unload_from_window.call(
+      this,
+      false,
+      callback,
+    );
   }
 
   all_sheets_have_been_processed() {