refactor(injector): inline dark mode handler script

commit: 38d2b5d381ccfa03780c056b1ad2bbff3a5a845e
author: brice · 10mo ago · 2025-12-16 20:50 UTC
committer: brice · 10mo ago · 2025-12-16 21:47 UTC
parent: bf08946
signature: unsigned

1 file · +66 -21

M internal/infrastructure/webkit/injector.go +66 -21


@@ -4,7 +4,6 @@ import (
4	4		"context"
5	5		"fmt"
6	6
7		-	"github.com/bnema/dumber/assets"
8	7		"github.com/bnema/dumber/internal/logging"
9	8		"github.com/bnema/puregotk-webkit/webkit"
10	9		)

@@ -16,6 +15,56 @@ const (
16	15		MessageHandlerName = "dumber"
17	16		)
18	17
	18	+	// darkModeScript patches window.matchMedia to respect GTK's dark mode preference.
	19	+	// It must be injected at document start, after __dumber_gtk_prefers_dark is set.
	20	+	const darkModeScript = `(function() {
	21	+	const prefersDark = window.__dumber_gtk_prefers_dark \|\| false;
	22	+	const originalMatchMedia = window.matchMedia.bind(window);
	23	+
	24	+	// Inject color-scheme meta tag
	25	+	const meta = document.createElement('meta');
	26	+	meta.name = 'color-scheme';
	27	+	meta.content = prefersDark ? 'dark light' : 'light dark';
	28	+	document.documentElement.appendChild(meta);
	29	+
	30	+	// Inject root color-scheme style
	31	+	const style = document.createElement('style');
	32	+	style.setAttribute('data-dumber-theme', '');
	33	+	style.textContent = ':root{color-scheme:' + (prefersDark ? 'dark' : 'light') + ';}';
	34	+	document.documentElement.appendChild(style);
	35	+
	36	+	// Patch matchMedia for prefers-color-scheme queries
	37	+	window.matchMedia = function(query) {
	38	+	if (typeof query === 'string') {
	39	+	if (query.includes('prefers-color-scheme: dark')) {
	40	+	return {
	41	+	matches: prefersDark,
	42	+	media: query,
	43	+	onchange: null,
	44	+	addListener: function() {},
	45	+	removeListener: function() {},
	46	+	addEventListener: function() {},
	47	+	removeEventListener: function() {},
	48	+	dispatchEvent: function() { return false; }
	49	+	};
	50	+	}
	51	+	if (query.includes('prefers-color-scheme: light')) {
	52	+	return {
	53	+	matches: !prefersDark,
	54	+	media: query,
	55	+	onchange: null,
	56	+	addListener: function() {},
	57	+	removeListener: function() {},
	58	+	addEventListener: function() {},
	59	+	removeEventListener: function() {},
	60	+	dispatchEvent: function() { return false; }
	61	+	};
	62	+	}
	63	+	}
	64	+	return originalMatchMedia(query);
	65	+	};
	66	+	})();`
	67	+
19	68		// ContentInjector encapsulates script injection into WebViews.
20	69		// It injects minimal scripts for dark mode detection in web pages.
21	70		type ContentInjector struct {

@@ -45,7 +94,7 @@ func (ci *ContentInjector) SetPrefersDark(prefersDark bool) {
45	94		// Only injects:
46	95		// - window.__dumber_gtk_prefers_dark flag
47	96		// - window.__dumber_webview_id (for debugging)
48		-	// - color-scheme.js (patches matchMedia for prefers-color-scheme)
	97	+	// - darkModeScript (patches matchMedia for prefers-color-scheme)
49	98		func (ci ContentInjector) InjectScripts(ctx context.Context, ucm webkit.UserContentManager, webviewID WebViewID) {
50	99		log := logging.FromContext(ctx).With().Str("component", "content-injector").Logger()
51	100

@@ -63,17 +112,17 @@ func (ci ContentInjector) InjectScripts(ctx context.Context, ucm webkit.UserCo
63	112		log.Debug().Str("script", label).Msg("injected user script")
64	113		}
65	114
66		-	// 1. Inject GTK dark mode preference (must be before color-scheme.js)
67		-	darkModeScript := fmt.Sprintf("window.__dumber_gtk_prefers_dark=%t;", ci.prefersDark)
	115	+	// 1. Inject GTK dark mode preference (must be before dark mode handler)
	116	+	darkModePrefScript := fmt.Sprintf("window.__dumber_gtk_prefers_dark=%t;", ci.prefersDark)
68	117		addScript(
69	118		webkit.NewUserScript(
70		-	darkModeScript,
	119	+	darkModePrefScript,
71	120		webkit.UserContentInjectTopFrameValue,
72	121		webkit.UserScriptInjectAtDocumentStartValue,
73	122		nil,
74	123		nil,
75	124		),
76		-	"gtk-dark-mode",
	125	+	"gtk-dark-mode-pref",
77	126		)
78	127
79	128		// 2. Inject WebView ID for debugging

@@ -91,21 +140,17 @@ func (ci ContentInjector) InjectScripts(ctx context.Context, ucm webkit.UserCo
91	140		)
92	141		}
93	142
94		-	// 3. Inject color-scheme handler (uses __dumber_gtk_prefers_dark to patch matchMedia)
95		-	if assets.ColorSchemeScript != "" {
96		-	addScript(
97		-	webkit.NewUserScript(
98		-	assets.ColorSchemeScript,
99		-	webkit.UserContentInjectTopFrameValue,
100		-	webkit.UserScriptInjectAtDocumentStartValue,
101		-	nil,
102		-	nil,
103		-	),
104		-	"color-scheme",
105		-	)
106		-	} else {
107		-	log.Warn().Msg("ColorSchemeScript asset is empty; dark mode may not work correctly")
108		-	}
	143	+	// 3. Inject dark mode handler (patches matchMedia using __dumber_gtk_prefers_dark)
	144	+	addScript(
	145	+	webkit.NewUserScript(
	146	+	darkModeScript,
	147	+	webkit.UserContentInjectTopFrameValue,
	148	+	webkit.UserScriptInjectAtDocumentStartValue,
	149	+	nil,
	150	+	nil,
	151	+	),
	152	+	"dark-mode-handler",
	153	+	)
109	154
110	155		log.Debug().Bool("prefers_dark", ci.prefersDark).Msg("minimal scripts injected")
111	156		}

 	"context"
 	"fmt"
-	"github.com/bnema/dumber/assets"
 	"github.com/bnema/dumber/internal/logging"
 	"github.com/bnema/puregotk-webkit/webkit"
 )
 	MessageHandlerName = "dumber"
 )
+// darkModeScript patches window.matchMedia to respect GTK's dark mode preference.
+// It must be injected at document start, after __dumber_gtk_prefers_dark is set.
+const darkModeScript = `(function() {
+  const prefersDark = window.__dumber_gtk_prefers_dark || false;
+  const originalMatchMedia = window.matchMedia.bind(window);
+  // Inject color-scheme meta tag
+  const meta = document.createElement('meta');
+  meta.name = 'color-scheme';
+  meta.content = prefersDark ? 'dark light' : 'light dark';
+  document.documentElement.appendChild(meta);
+  // Inject root color-scheme style
+  const style = document.createElement('style');
+  style.setAttribute('data-dumber-theme', '');
+  style.textContent = ':root{color-scheme:' + (prefersDark ? 'dark' : 'light') + ';}';
+  document.documentElement.appendChild(style);
+  // Patch matchMedia for prefers-color-scheme queries
+  window.matchMedia = function(query) {
+    if (typeof query === 'string') {
+      if (query.includes('prefers-color-scheme: dark')) {
+        return {
+          matches: prefersDark,
+          media: query,
+          onchange: null,
+          addListener: function() {},
+          removeListener: function() {},
+          addEventListener: function() {},
+          removeEventListener: function() {},
+          dispatchEvent: function() { return false; }
+        };
+      }
+      if (query.includes('prefers-color-scheme: light')) {
+        return {
+          matches: !prefersDark,
+          media: query,
+          onchange: null,
+          addListener: function() {},
+          removeListener: function() {},
+          addEventListener: function() {},
+          removeEventListener: function() {},
+          dispatchEvent: function() { return false; }
+        };
+      }
+    }
+    return originalMatchMedia(query);
+  };
+})();`
 // ContentInjector encapsulates script injection into WebViews.
 // It injects minimal scripts for dark mode detection in web pages.
 type ContentInjector struct {
 // Only injects:
 // - window.__dumber_gtk_prefers_dark flag
 // - window.__dumber_webview_id (for debugging)
-// - color-scheme.js (patches matchMedia for prefers-color-scheme)
+// - darkModeScript (patches matchMedia for prefers-color-scheme)
 func (ci *ContentInjector) InjectScripts(ctx context.Context, ucm *webkit.UserContentManager, webviewID WebViewID) {
 	log := logging.FromContext(ctx).With().Str("component", "content-injector").Logger()
 		log.Debug().Str("script", label).Msg("injected user script")
 	}
-	// 1. Inject GTK dark mode preference (must be before color-scheme.js)
+	// 1. Inject GTK dark mode preference (must be before dark mode handler)
-	darkModeScript := fmt.Sprintf("window.__dumber_gtk_prefers_dark=%t;", ci.prefersDark)
+	darkModePrefScript := fmt.Sprintf("window.__dumber_gtk_prefers_dark=%t;", ci.prefersDark)
 	addScript(
 		webkit.NewUserScript(
-			darkModeScript,
+			darkModePrefScript,
 			webkit.UserContentInjectTopFrameValue,
 			webkit.UserScriptInjectAtDocumentStartValue,
 			nil,
 			nil,
 		),
-		"gtk-dark-mode",
+		"gtk-dark-mode-pref",
 	)
 	// 2. Inject WebView ID for debugging
 		)
 	}
-	// 3. Inject color-scheme handler (uses __dumber_gtk_prefers_dark to patch matchMedia)
+	// 3. Inject dark mode handler (patches matchMedia using __dumber_gtk_prefers_dark)
-	if assets.ColorSchemeScript != "" {
+	addScript(
-		addScript(
+		webkit.NewUserScript(
-			webkit.NewUserScript(
+			darkModeScript,
-				assets.ColorSchemeScript,
+			webkit.UserContentInjectTopFrameValue,
-				webkit.UserContentInjectTopFrameValue,
+			webkit.UserScriptInjectAtDocumentStartValue,
-				webkit.UserScriptInjectAtDocumentStartValue,
+			nil,
-				nil,
+			nil,
-				nil,
+		),
-			),
+		"dark-mode-handler",
-			"color-scheme",
+	)
-		)
-	} else {
-		log.Warn().Msg("ColorSchemeScript asset is empty; dark mode may not work correctly")
-	}
 	log.Debug().Bool("prefers_dark", ci.prefersDark).Msg("minimal scripts injected")
 }