Merge commit '5f45c21'

Author: Mapaor

src/content/overlay.css

@@ -100,16 +100,16 @@ img.mwe-math-fallback-image-display.hoverlatex-hover {
 
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
-	.hoverlatex-overlay {
+	.hoverlatex-overlay:not(.theme-light):not(.theme-dark) {
 		background: #1e1e1e;
 		color: #f0f0f0;
 		box-shadow: 0 3px 10px rgba(0,0,0,0.6);
 	}
-	.hoverlatex-overlay.copied {
+	.hoverlatex-overlay:not(.theme-light):not(.theme-dark).copied {
 		background: #052e16;
 		color: #dcfce7;
 	}
-	.hoverlatex-overlay .check-icon {
+	.hoverlatex-overlay:not(.theme-light):not(.theme-dark) .check-icon {
 		color: #dcfce7;
 	}
 }

src/content/overlay.js

@@ -6,90 +6,86 @@
 		lastMathJaxV3Latex: null,
 		lastCopyGestureTs: 0,
 		lastCopiedTex: null,
+		themeMode: 'system',
+		themeModeLoaded: false,
 	};
 
-	function getOverlay() {
-		return ns.state.overlay;
-	}
-
-	function setOverlay(el) {
-		ns.state.overlay = el;
-	}
-
-	async function setOverlayThemeClass() {
-		const overlay = getOverlay();
-		if (!overlay) return;
-    // Remove any previous theme class
-		overlay.classList.remove('theme-light', 'theme-dark');
-		let theme = 'system';
-
+	async function loadThemeModeOnce() {
+		if (ns.state.themeModeLoaded) return;
 		try {
 			const result = await browser.storage.local.get('themeMode');
-      // console.log('[Copy LaTeX] setOverlayThemeClass: browser.storage.local themeMode =', result.themeMode);
-      theme = result.themeMode || 'system';
+			ns.state.themeMode = result.themeMode || 'system';
 		} catch (e) {
 			// This can happen during navigation/refresh or extension reload: the content-script
 			// context is torn down while an async storage call is in-flight.
 			const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : String(e);
 			if (!message.includes('Extension context invalidated')) {
-				console.warn('[Copy LaTeX] setOverlayThemeClass: error reading browser.storage.local', e);
+				console.warn('[Copy LaTeX] loadThemeModeOnce: error reading browser.storage.local', e);
 			}
+			// Keep default themeMode='system'
+		} finally {
+			ns.state.themeModeLoaded = true;
+			// If the overlay already exists, apply the loaded theme immediately.
+			applyOverlayThemeClass();
 		}
+	}
+
+	function applyOverlayThemeClass() {
+		const overlay = getOverlay();
+		if (!overlay) return;
+
+		const theme = ns.state.themeMode || 'system';
+		const wantsLight = theme === 'light';
+		const wantsDark = theme === 'dark';
+
+		// Avoid class churn: only touch DOM if we need to.
+		const hasLight = overlay.classList.contains('theme-light');
+		const hasDark = overlay.classList.contains('theme-dark');
+		if (wantsLight === hasLight && wantsDark === hasDark) return;
+
+		overlay.classList.toggle('theme-light', wantsLight);
+		overlay.classList.toggle('theme-dark', wantsDark);
+	}
+
+	// Keep ns.state.themeMode in sync without doing async work on hover.
+	try {
+		browser.storage.onChanged.addListener((changes, areaName) => {
+			if (areaName !== 'local') return;
+			if (!changes.themeMode) return;
+			ns.state.themeMode = changes.themeMode.newValue || 'system';
+			ns.state.themeModeLoaded = true;
+			applyOverlayThemeClass();
+		});
+	} catch (e) {
+		// Defensive: some environments may not expose storage listeners in this context.
+	}
+
+	// Kick off a single async load early.
+	loadThemeModeOnce();
 
-    // console.log('[Copy LaTeX] setOverlayThemeClass: using theme =', theme);
-		if (theme === 'light') overlay.classList.add('theme-light');
-		else if (theme === 'dark') overlay.classList.add('theme-dark');
-    // If system, do not add any theme class (prefers-color-scheme CSS media query will apply)
-  }
+	function getOverlay() {
+		return ns.state.overlay;
+	}
+
+	function setOverlay(el) {
+		ns.state.overlay = el;
+	}
+
+	async function setOverlayThemeClass() {
+		// Backwards-compatible async signature.
+		// We *never* do async theme reads on hover; we apply the cached state.
+		if (!ns.state.themeModeLoaded) loadThemeModeOnce();
+		applyOverlayThemeClass();
+	}
 
 	function createOverlay() {
 		const overlay = document.createElement('div');
 		overlay.className = 'hoverlatex-overlay';
-    // console.log('[Copy LaTeX] Overlay created. Initial class:', overlay.className);
 
 		setOverlay(overlay);
 
-    // Set theme class based on user preference
-		setOverlayThemeClass().then(() => {
-			console.log('[Copy LaTeX] Overlay after theme set. Classes:', overlay.className);
-			const bg = window.getComputedStyle(overlay).backgroundColor;
-			console.log('[Copy LaTeX] Overlay computed background after theme set:', bg);
-		});
-
-		// MutationObserver to log class/style changes (I'll remove it later)
-		const observer = new MutationObserver((mutationsList) => {
-			for (const mutation of mutationsList) {
-				if (
-					mutation.type === 'attributes' &&
-					(mutation.attributeName === 'class' || mutation.attributeName === 'style')
-				) {
-					console.log('[Copy LaTeX][MutationObserver] Overlay attribute changed:', mutation.attributeName, {
-						class: overlay.className,
-						style: overlay.getAttribute('style'),
-						computedBg: window.getComputedStyle(overlay).backgroundColor,
-					});
-				}
-			}
-		});
-		observer.observe(overlay, { attributes: true, attributeFilter: ['class', 'style'] });
-
-		// Random interval observer: logs computed background color at random intervals (10-100ms)
-		let lastBg = '';
-		function randomBgLogger() {
-			const currentOverlay = getOverlay();
-			if (currentOverlay) {
-				const bg = window.getComputedStyle(currentOverlay).backgroundColor;
-				if (bg !== lastBg) {
-					console.log('[Copy LaTeX][RandomBgObserver] Overlay computed background:', bg);
-					lastBg = bg;
-				}
-			}
-
-      // Schedule next check at a random interval between 10ms and 100ms
-			const nextDelay = Math.floor(Math.random() * 91) + 10;
-			setTimeout(randomBgLogger, nextDelay);
-		}
-		randomBgLogger();
+		// Apply cached theme immediately (no async waits).
+		setOverlayThemeClass();
 
     // HTML overlay content with inline SVG icon and 'Click to copy' text
 		overlay.appendChild(ns.svg.createSvgFromString(ns.svg.copy_svg));
@@ -110,23 +106,17 @@
       // console.log('[Copy LaTeX] showOverlay: overlay exists, reusing. Classes:', overlay.className);
     }
 
-    // Only make overlay visible after theme is set
-		setOverlayThemeClass().then(() => {
-      // Remove .visible if present before theme is set
-			overlay.classList.remove('visible');
-      // console.log('[Copy LaTeX] showOverlay: after theme set. Classes:', overlay.className);
-      const bg = window.getComputedStyle(overlay).backgroundColor;
-      // console.log('[Copy LaTeX] showOverlay: computed background:', bg);
-      overlay.dataset.tex = tex;
-
-			const rect = target.getBoundingClientRect();
-			const overlayWidth = overlay.offsetWidth;
-			const top = rect.top + window.scrollY - overlay.offsetHeight - 8;
-			const left = rect.left + window.scrollX + rect.width / 2 - overlayWidth / 2;
-			overlay.style.top = `${top}px`;
-			overlay.style.left = `${left}px`;
-			overlay.classList.add('visible');
-		});
+		// Ensure theme is applied synchronously to avoid flicker.
+		setOverlayThemeClass();
+		overlay.dataset.tex = tex;
+
+		const rect = target.getBoundingClientRect();
+		const overlayWidth = overlay.offsetWidth;
+		const top = rect.top + window.scrollY - overlay.offsetHeight - 8;
+		const left = rect.left + window.scrollX + rect.width / 2 - overlayWidth / 2;
+		overlay.style.top = `${top}px`;
+		overlay.style.left = `${left}px`;
+		overlay.classList.add('visible');
 	}
 
 	function hideOverlay() {