omnibox/find UX: focus + select input on hover; hover selects list items (omnibox and find) for quicker navigation

commit: d736c5dba9ab23639380ba6db12b05b5a31e5f31
author: bamen · 13mo ago · 2025-09-09 17:30 UTC
committer: bamen · 13mo ago · 2025-09-09 16:37 UTC
parent: 8610746
signature: unsigned

1 file · +5 -0

M pkg/webkit/ucm_js_cgo.go +5 -0


@@ -51,6 +51,9 @@ func getOmniboxScript() string {
51	51		style.textContent = '.dumber-find-highlight{background:#ffeb3b;color:#000;padding:0 1px;border-radius:2px;box-shadow:0 0 0 1px #c8b900 inset}';
52	52		document.documentElement.appendChild(style);
53	53		box.appendChild(input); box.appendChild(list); root.appendChild(box); document.documentElement.appendChild(root);
	54	+	// Focus and select input on hover for quick typing
	55	+	input.addEventListener('mouseenter', ()=>{ if (H.visible) { try { input.focus({preventScroll:true}); input.select(); } catch(_) { input.focus(); } } });
	56	+	root.addEventListener('mouseenter', ()=>{ if (H.visible) { try { input.focus({preventScroll:true}); } catch(_) { input.focus(); } } });
54	57		input.addEventListener('keydown', (e)=>{
55	58		if (e.key === 'Escape'){ H.close(); }
56	59		else if (H.mode==='omnibox' && e.key === 'Enter'){

@@ -94,6 +97,7 @@ func getOmniboxScript() string {
94	97		const url = document.createElement('div'); url.textContent = s.url \|\| ''; url.style.cssText = 'flex:1;color:#9ad;word-break:break-all;';
95	98		const title = document.createElement('div'); title.textContent = s.title \|\| ''; title.style.cssText = 'flex:1;color:#ccc;opacity:.9;';
96	99		item.appendChild(title); item.appendChild(url);
	100	+	item.addEventListener('mouseenter', ()=>{ H.selectedIndex = i; H.paintList(); });
97	101		item.addEventListener('click',()=>{ H.post({type:'navigate', url:s.url}); H.toggle(false); });
98	102		list.appendChild(item);
99	103		});

@@ -108,6 +112,7 @@ func getOmniboxScript() string {
108	112		item.style.cssText = 'padding:8px 10px;cursor:pointer;border-bottom:1px solid #2a2a2a;'+(i===H.selectedIndex?'background:#0a0a0a;':'');
109	113		const ctx = document.createElement('div'); ctx.textContent = m.context \|\| ''; ctx.style.cssText = 'color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
110	114		item.appendChild(ctx);
	115	+	item.addEventListener('mouseenter', ()=>{ H.selectedIndex = i; H.paintList(); });
111	116		item.addEventListener('click',()=>{ H.selectedIndex=i; H.revealSelection(); H.paintList(); H.close(); });
112	117		list.appendChild(item);
113	118		});


@@ -51,6 +51,9 @@ func getOmniboxScript() string {
51	style.textContent = '.dumber-find-highlight{background:#ffeb3b;color:#000;padding:0 1px;border-radius:2px;box-shadow:0 0 0 1px #c8b900 inset}';	51		style.textContent = '.dumber-find-highlight{background:#ffeb3b;color:#000;padding:0 1px;border-radius:2px;box-shadow:0 0 0 1px #c8b900 inset}';
52	document.documentElement.appendChild(style);	52		document.documentElement.appendChild(style);
53	box.appendChild(input); box.appendChild(list); root.appendChild(box); document.documentElement.appendChild(root);	53		box.appendChild(input); box.appendChild(list); root.appendChild(box); document.documentElement.appendChild(root);
		54	+	// Focus and select input on hover for quick typing
		55	+	input.addEventListener('mouseenter', ()=>{ if (H.visible) { try { input.focus({preventScroll:true}); input.select(); } catch(_) { input.focus(); } } });
		56	+	root.addEventListener('mouseenter', ()=>{ if (H.visible) { try { input.focus({preventScroll:true}); } catch(_) { input.focus(); } } });
54	input.addEventListener('keydown', (e)=>{	57		input.addEventListener('keydown', (e)=>{
55	if (e.key === 'Escape'){ H.close(); }	58		if (e.key === 'Escape'){ H.close(); }
56	else if (H.mode==='omnibox' && e.key === 'Enter'){	59		else if (H.mode==='omnibox' && e.key === 'Enter'){

@@ -94,6 +97,7 @@ func getOmniboxScript() string {
94	const url = document.createElement('div'); url.textContent = s.url \|\| ''; url.style.cssText = 'flex:1;color:#9ad;word-break:break-all;';	97		const url = document.createElement('div'); url.textContent = s.url \|\| ''; url.style.cssText = 'flex:1;color:#9ad;word-break:break-all;';
95	const title = document.createElement('div'); title.textContent = s.title \|\| ''; title.style.cssText = 'flex:1;color:#ccc;opacity:.9;';	98		const title = document.createElement('div'); title.textContent = s.title \|\| ''; title.style.cssText = 'flex:1;color:#ccc;opacity:.9;';
96	item.appendChild(title); item.appendChild(url);	99		item.appendChild(title); item.appendChild(url);
		100	+	item.addEventListener('mouseenter', ()=>{ H.selectedIndex = i; H.paintList(); });
97	item.addEventListener('click',()=>{ H.post({type:'navigate', url:s.url}); H.toggle(false); });	101		item.addEventListener('click',()=>{ H.post({type:'navigate', url:s.url}); H.toggle(false); });
98	list.appendChild(item);	102		list.appendChild(item);
99	});	103		});

@@ -108,6 +112,7 @@ func getOmniboxScript() string {
108	item.style.cssText = 'padding:8px 10px;cursor:pointer;border-bottom:1px solid #2a2a2a;'+(i===H.selectedIndex?'background:#0a0a0a;':'');	112		item.style.cssText = 'padding:8px 10px;cursor:pointer;border-bottom:1px solid #2a2a2a;'+(i===H.selectedIndex?'background:#0a0a0a;':'');
109	const ctx = document.createElement('div'); ctx.textContent = m.context \|\| ''; ctx.style.cssText = 'color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';	113		const ctx = document.createElement('div'); ctx.textContent = m.context \|\| ''; ctx.style.cssText = 'color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
110	item.appendChild(ctx);	114		item.appendChild(ctx);
		115	+	item.addEventListener('mouseenter', ()=>{ H.selectedIndex = i; H.paintList(); });
111	item.addEventListener('click',()=>{ H.selectedIndex=i; H.revealSelection(); H.paintList(); H.close(); });	116		item.addEventListener('click',()=>{ H.selectedIndex=i; H.revealSelection(); H.paintList(); H.close(); });
112	list.appendChild(item);	117		list.appendChild(item);
113	});	118		});