omnibox (Ctrl+L): redesign suggestion row to favicon + Domain | full path (single-line with gradient fade); remove 50/50 split; retain hover select and click navigate

commit: 32dec1eaf8a61de0c26b9f8fc8f07ff6c4c47594
author: bamen · 13mo ago · 2025-09-09 20:31 UTC
committer: bamen · 13mo ago · 2025-09-09 19:26 UTC
parent: 42da155
signature: unsigned

1 file · +19 -3

M pkg/webkit/ucm_js_cgo.go +19 -3


@@ -165,9 +165,25 @@ func getOmniboxScript() string {
165	165		H.suggestions.forEach((s, i)=>{
166	166		const item = document.createElement('div');
167	167		item.style.cssText = 'padding:8px 10px;display:flex;gap:10px;align-items:center;cursor:pointer;border-bottom:1px solid #2a2a2a;'+(i===H.selectedIndex?'background:#0a0a0a;':'');
168		-	const url = document.createElement('div'); url.textContent = s.url \|\| ''; url.style.cssText = 'flex:1;color:#9ad;word-break:break-all;';
169		-	const title = document.createElement('div'); title.textContent = s.title \|\| ''; title.style.cssText = 'flex:1;color:#ccc;opacity:.9;';
170		-	item.appendChild(title); item.appendChild(url);
	168	+	// Favicon
	169	+	const icon = document.createElement('img');
	170	+	icon.src = s.favicon \|\| '';
	171	+	icon.width = 18; icon.height = 18; icon.loading = 'lazy';
	172	+	icon.style.cssText = 'flex:0 0 18px;width:18px;height:18px;border-radius:4px;opacity:.95;';
	173	+	icon.onerror = ()=>{ icon.style.display='none'; };
	174	+	// Text line: Domain \| full path (one line, fade at end)
	175	+	let domain = '', path = '';
	176	+	try { const u = new URL(s.url, window.location.href); domain = u.hostname; path = (u.pathname\|\|'') + (u.search\|\|'') + (u.hash\|\|''); } catch(_) { domain = s.url \|\| ''; }
	177	+	const text = document.createElement('div');
	178	+	text.style.cssText = 'flex:1;min-width:0;display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden;';
	179	+	// Apply gradient fade using mask for WebKit
	180	+	text.style.webkitMaskImage = 'linear-gradient(90deg, black 85%, transparent 100%)';
	181	+	text.style.maskImage = 'linear-gradient(90deg, black 85%, transparent 100%)';
	182	+	const domainEl = document.createElement('span'); domainEl.textContent = domain; domainEl.style.cssText = 'color:#e6e6e6;opacity:.95;';
	183	+	const sep = document.createElement('span'); sep.textContent = ' \| '; sep.style.cssText = 'color:#777;';
	184	+	const pathEl = document.createElement('span'); pathEl.textContent = path \|\| '/'; pathEl.style.cssText = 'color:#9ad;';
	185	+	text.appendChild(domainEl); text.appendChild(sep); text.appendChild(pathEl);
	186	+	item.appendChild(icon); item.appendChild(text);
171	187		item.addEventListener('mouseenter', ()=>{ H.selectedIndex = i; H.paintList(); H.scrollListToSelection(); });
172	188		item.addEventListener('click',()=>{ H.post({type:'navigate', url:s.url}); H.toggle(false); });
173	189		list.appendChild(item);


@@ -165,9 +165,25 @@ func getOmniboxScript() string {
165		H.suggestions.forEach((s, i)=>{	165		H.suggestions.forEach((s, i)=>{
166		const item = document.createElement('div');	166		const item = document.createElement('div');
167		item.style.cssText = 'padding:8px 10px;display:flex;gap:10px;align-items:center;cursor:pointer;border-bottom:1px solid #2a2a2a;'+(i===H.selectedIndex?'background:#0a0a0a;':'');	167		item.style.cssText = 'padding:8px 10px;display:flex;gap:10px;align-items:center;cursor:pointer;border-bottom:1px solid #2a2a2a;'+(i===H.selectedIndex?'background:#0a0a0a;':'');
168	-	const url = document.createElement('div'); url.textContent = s.url \|\| ''; url.style.cssText = 'flex:1;color:#9ad;word-break:break-all;';	168	+	// Favicon
169	-	const title = document.createElement('div'); title.textContent = s.title \|\| ''; title.style.cssText = 'flex:1;color:#ccc;opacity:.9;';	169	+	const icon = document.createElement('img');
170	-	item.appendChild(title); item.appendChild(url);	170	+	icon.src = s.favicon \|\| '';
			171	+	icon.width = 18; icon.height = 18; icon.loading = 'lazy';
			172	+	icon.style.cssText = 'flex:0 0 18px;width:18px;height:18px;border-radius:4px;opacity:.95;';
			173	+	icon.onerror = ()=>{ icon.style.display='none'; };
			174	+	// Text line: Domain \| full path (one line, fade at end)
			175	+	let domain = '', path = '';
			176	+	try { const u = new URL(s.url, window.location.href); domain = u.hostname; path = (u.pathname\|\|'') + (u.search\|\|'') + (u.hash\|\|''); } catch(_) { domain = s.url \|\| ''; }
			177	+	const text = document.createElement('div');
			178	+	text.style.cssText = 'flex:1;min-width:0;display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden;';
			179	+	// Apply gradient fade using mask for WebKit
			180	+	text.style.webkitMaskImage = 'linear-gradient(90deg, black 85%, transparent 100%)';
			181	+	text.style.maskImage = 'linear-gradient(90deg, black 85%, transparent 100%)';
			182	+	const domainEl = document.createElement('span'); domainEl.textContent = domain; domainEl.style.cssText = 'color:#e6e6e6;opacity:.95;';
			183	+	const sep = document.createElement('span'); sep.textContent = ' \| '; sep.style.cssText = 'color:#777;';
			184	+	const pathEl = document.createElement('span'); pathEl.textContent = path \|\| '/'; pathEl.style.cssText = 'color:#9ad;';
			185	+	text.appendChild(domainEl); text.appendChild(sep); text.appendChild(pathEl);
			186	+	item.appendChild(icon); item.appendChild(text);
171		item.addEventListener('mouseenter', ()=>{ H.selectedIndex = i; H.paintList(); H.scrollListToSelection(); });	187		item.addEventListener('mouseenter', ()=>{ H.selectedIndex = i; H.paintList(); H.scrollListToSelection(); });
172		item.addEventListener('click',()=>{ H.post({type:'navigate', url:s.url}); H.toggle(false); });	188		item.addEventListener('click',()=>{ H.post({type:'navigate', url:s.url}); H.toggle(false); });
173		list.appendChild(item);	189		list.appendChild(item);