fix(webkit): improve omnibox responsive scaling and layout

- Fix over-aggressive viewport scaling that made omnibox too large at high zoom
- Add box-sizing: border-box to prevent input overflow beyond container
- Implement conditional separator display (hidden when no results)
- Replace viewport units with conservative fixed values for better zoom behavior
- Maintain responsive width while preventing overflow on small screens
- Omnibox now scales proportionally with webpage content

commit: 77f7e1c17d958de9f3d76dabc59437b7f1ba8735
author: bamen · 13mo ago · 2025-09-10 18:36 UTC
committer: bamen · 13mo ago · 2025-09-10 18:31 UTC
parent: 0220350
signature: unsigned

1 file · +28 -4

M pkg/webkit/ucm_js_cgo.go +28 -4


@@ -85,18 +85,37 @@ func getOmniboxScript() string {
85	85		root.id = 'dumber-omnibox-root';
86	86		root.style.cssText = 'position:fixed;inset:0;z-index:2147483647;display:none;';
87	87		const box = document.createElement('div');
88		-	box.style.cssText = 'max-width:720px;margin:8vh auto;padding:8px 10px;background:#1b1b1b;color:#eee;border:1px solid #444;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.6);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;';
	88	+	box.style.cssText = 'width:min(90vw, 720px);margin:8vh auto;padding:8px 12px;background:#1b1b1b;color:#eee;border:1px solid #444;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.6);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;';
89	89		const input = document.createElement('input');
90	90		input.type = 'text';
91	91		input.placeholder = 'Type URL or search…';
92		-	input.style.cssText = 'width:100%;padding:10px 12px;border-radius:6px;border:1px solid #555;background:#121212;color:#eee;font-size:16px;outline:none;';
	92	+	input.style.cssText = 'width:100%;box-sizing:border-box;padding:10px 12px;border-radius:6px;border:1px solid #555;background:#121212;color:#eee;font-size:16px;outline:none;';
93	93		const list = document.createElement('div');
94		-	list.style.cssText = 'margin-top:8px;max-height:50vh;overflow:auto;border-top:1px solid #333;';
	94	+	list.style.cssText = 'margin-top:8px;max-height:50vh;overflow:auto;';
95	95		const style = document.createElement('style');
96	96		style.textContent = '.dumber-find-highlight{background:#ffeb3b;color:#000;padding:0 1px;border-radius:2px;box-shadow:0 0 0 1px #c8b900 inset}.dumber-find-active{background:#ff9800 !important;color:#000;box-shadow:0 0 0 1px #b36b00 inset}';
97	97		document.documentElement.appendChild(style);
98	98		box.appendChild(input); box.appendChild(list); root.appendChild(box); document.documentElement.appendChild(root);
99	99		H.box = box;
	100	+	// Dynamic style updater for responsive behavior
	101	+	const updateStyles = () => {
	102	+	const vw = window.innerWidth;
	103	+	const isSmall = vw < 640;
	104	+	const isLarge = vw > 1920;
	105	+
	106	+	if (box) {
	107	+	box.style.width = isSmall ? '95vw' : isLarge ? 'min(90vw, 840px)' : 'min(90vw, 720px)';
	108	+	box.style.padding = isSmall ? '6px 8px' : '8px 12px';
	109	+	}
	110	+
	111	+	if (input) {
	112	+	input.style.fontSize = isSmall ? '14px' : isLarge ? '17px' : '16px';
	113	+	input.style.padding = isSmall ? '8px 10px' : '10px 12px';
	114	+	input.style.boxSizing = 'border-box';
	115	+	}
	116	+	};
	117	+	updateStyles();
	118	+	window.addEventListener('resize', updateStyles);
100	119		// Click outside the box closes the overlay
101	120		root.addEventListener('mousedown', (e)=>{
102	121		const tgt = e.target;

@@ -164,6 +183,11 @@ func getOmniboxScript() string {
164	183		},
165	184		paintList(){
166	185		const list = H.list; if (!list) return; list.textContent = '';
	186	+
	187	+	// Show/hide separator based on content
	188	+	const hasContent = (H.mode==='omnibox' && H.suggestions.length > 0) \|\| (H.mode==='find' && H.matches.length > 0);
	189	+	list.style.borderTop = hasContent ? '1px solid #333' : 'none';
	190	+
167	191		if (H.mode==='omnibox'){
168	192		H.suggestions.forEach((s, i)=>{
169	193		const item = document.createElement('div');

@@ -173,7 +197,7 @@ func getOmniboxScript() string {
173	197		chip.style.cssText = 'flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#ccc;border:1px solid rgba(0,0,0,.12);box-shadow:0 1px 2px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;';
174	198		const icon = document.createElement('img');
175	199		icon.src = s.favicon \|\| '';
176		-	icon.width = 16; icon.height = 16; icon.loading = 'lazy';
	200	+	icon.loading = 'lazy';
177	201		icon.style.cssText = 'width:16px;height:16px;filter:brightness(1.06) contrast(1.03);image-rendering:-webkit-optimize-contrast;';
178	202		icon.onerror = ()=>{ chip.style.display='none'; };
179	203		chip.appendChild(icon);

         root.id = 'dumber-omnibox-root';
         root.style.cssText = 'position:fixed;inset:0;z-index:2147483647;display:none;';
         const box = document.createElement('div');
-        box.style.cssText = 'max-width:720px;margin:8vh auto;padding:8px 10px;background:#1b1b1b;color:#eee;border:1px solid #444;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.6);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;';
+        box.style.cssText = 'width:min(90vw, 720px);margin:8vh auto;padding:8px 12px;background:#1b1b1b;color:#eee;border:1px solid #444;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.6);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;';
         const input = document.createElement('input');
         input.type = 'text';
         input.placeholder = 'Type URL or search…';
-        input.style.cssText = 'width:100%;padding:10px 12px;border-radius:6px;border:1px solid #555;background:#121212;color:#eee;font-size:16px;outline:none;';
+        input.style.cssText = 'width:100%;box-sizing:border-box;padding:10px 12px;border-radius:6px;border:1px solid #555;background:#121212;color:#eee;font-size:16px;outline:none;';
         const list = document.createElement('div');
-        list.style.cssText = 'margin-top:8px;max-height:50vh;overflow:auto;border-top:1px solid #333;';
+        list.style.cssText = 'margin-top:8px;max-height:50vh;overflow:auto;';
         const style = document.createElement('style');
         style.textContent = '.dumber-find-highlight{background:#ffeb3b;color:#000;padding:0 1px;border-radius:2px;box-shadow:0 0 0 1px #c8b900 inset}.dumber-find-active{background:#ff9800 !important;color:#000;box-shadow:0 0 0 1px #b36b00 inset}';
         document.documentElement.appendChild(style);
         box.appendChild(input); box.appendChild(list); root.appendChild(box); document.documentElement.appendChild(root);
         H.box = box;
+        // Dynamic style updater for responsive behavior
+        const updateStyles = () => {
+          const vw = window.innerWidth;
+          const isSmall = vw < 640;
+          const isLarge = vw > 1920;
+          if (box) {
+            box.style.width = isSmall ? '95vw' : isLarge ? 'min(90vw, 840px)' : 'min(90vw, 720px)';
+            box.style.padding = isSmall ? '6px 8px' : '8px 12px';
+          }
+          if (input) {
+            input.style.fontSize = isSmall ? '14px' : isLarge ? '17px' : '16px';
+            input.style.padding = isSmall ? '8px 10px' : '10px 12px';
+            input.style.boxSizing = 'border-box';
+          }
+        };
+        updateStyles();
+        window.addEventListener('resize', updateStyles);
         // Click outside the box closes the overlay
         root.addEventListener('mousedown', (e)=>{
           const tgt = e.target;
       },
       paintList(){
         const list = H.list; if (!list) return; list.textContent = '';
+        // Show/hide separator based on content
+        const hasContent = (H.mode==='omnibox' && H.suggestions.length > 0) || (H.mode==='find' && H.matches.length > 0);
+        list.style.borderTop = hasContent ? '1px solid #333' : 'none';
         if (H.mode==='omnibox'){
           H.suggestions.forEach((s, i)=>{
             const item = document.createElement('div');
             chip.style.cssText = 'flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#ccc;border:1px solid rgba(0,0,0,.12);box-shadow:0 1px 2px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;';
             const icon = document.createElement('img');
             icon.src = s.favicon || '';
-            icon.width = 16; icon.height = 16; icon.loading = 'lazy';
+            icon.loading = 'lazy';
             icon.style.cssText = 'width:16px;height:16px;filter:brightness(1.06) contrast(1.03);image-rendering:-webkit-optimize-contrast;';
             icon.onerror = ()=>{ chip.style.display='none'; };
             chip.appendChild(icon);