omnibox: render favicon inside 20x20 circular wrapper chip (match homepage); prevents stretching and ensures consistent round shape

commit: e337302d5ba3d5f39c33b3d4c437db4478b1825c
author: bamen · 13mo ago · 2025-09-09 18:12 UTC
committer: bamen · 13mo ago · 2025-09-09 17:03 UTC
parent: c6e3d36
signature: unsigned

1 file · +7 -5

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


@@ -168,13 +168,15 @@ func getOmniboxScript() string {
168	168		H.suggestions.forEach((s, i)=>{
169	169		const item = document.createElement('div');
170	170		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;':'');
171		-	// Favicon
	171	+	// Favicon chip (wrapper ensures perfect circle sizing)
	172	+	const chip = document.createElement('div');
	173	+	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;';
172	174		const icon = document.createElement('img');
173	175		icon.src = s.favicon \|\| '';
174	176		icon.width = 16; icon.height = 16; icon.loading = 'lazy';
175		-	// Circular chip with light gray background for consistent contrast
176		-	icon.style.cssText = 'flex:0 0 20px;width:16px;height:16px;padding:2px;box-sizing:content-box;border-radius:50%;background:#ccc;border:1px solid rgba(0,0,0,.12);box-shadow:0 1px 2px rgba(0,0,0,.12);filter:brightness(1.06) contrast(1.03);';
177		-	icon.onerror = ()=>{ icon.style.display='none'; };
	177	+	icon.style.cssText = 'width:16px;height:16px;filter:brightness(1.06) contrast(1.03);image-rendering:-webkit-optimize-contrast;';
	178	+	icon.onerror = ()=>{ chip.style.display='none'; };
	179	+	chip.appendChild(icon);
178	180		// Text line: Domain \| full path (one line, fade at end)
179	181		let domain = '', path = '';
180	182		try { const u = new URL(s.url, window.location.href); domain = u.hostname; path = (u.pathname\|\|'') + (u.search\|\|'') + (u.hash\|\|''); } catch(_) { domain = s.url \|\| ''; }

@@ -187,7 +189,7 @@ func getOmniboxScript() string {
187	189		const sep = document.createElement('span'); sep.textContent = ' \| '; sep.style.cssText = 'color:#777;';
188	190		const pathEl = document.createElement('span'); pathEl.textContent = path \|\| '/'; pathEl.style.cssText = 'color:#9ad;';
189	191		text.appendChild(domainEl); text.appendChild(sep); text.appendChild(pathEl);
190		-	item.appendChild(icon); item.appendChild(text);
	192	+	item.appendChild(chip); item.appendChild(text);
191	193		item.addEventListener('mouseenter', ()=>{ H.selectedIndex = i; H.paintList(); H.scrollListToSelection(); H.setFaded(true); });
192	194		item.addEventListener('click',()=>{ H.post({type:'navigate', url:s.url}); H.toggle(false); });
193	195		list.appendChild(item);

           H.suggestions.forEach((s, i)=>{
             const item = document.createElement('div');
             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;':'');
-            // Favicon
+            // Favicon chip (wrapper ensures perfect circle sizing)
+            const chip = 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';
-            // Circular chip with light gray background for consistent contrast
+            icon.style.cssText = 'width:16px;height:16px;filter:brightness(1.06) contrast(1.03);image-rendering:-webkit-optimize-contrast;';
-            icon.style.cssText = 'flex:0 0 20px;width:16px;height:16px;padding:2px;box-sizing:content-box;border-radius:50%;background:#ccc;border:1px solid rgba(0,0,0,.12);box-shadow:0 1px 2px rgba(0,0,0,.12);filter:brightness(1.06) contrast(1.03);';
+            icon.onerror = ()=>{ chip.style.display='none'; };
-            icon.onerror = ()=>{ icon.style.display='none'; };
+            chip.appendChild(icon);
             // Text line: Domain | full path (one line, fade at end)
             let domain = '', path = '';
             try { const u = new URL(s.url, window.location.href); domain = u.hostname; path = (u.pathname||'') + (u.search||'') + (u.hash||''); } catch(_) { domain = s.url || ''; }
             const sep = document.createElement('span'); sep.textContent = ' | '; sep.style.cssText = 'color:#777;';
             const pathEl = document.createElement('span'); pathEl.textContent = path || '/'; pathEl.style.cssText = 'color:#9ad;';
             text.appendChild(domainEl); text.appendChild(sep); text.appendChild(pathEl);
-            item.appendChild(icon); item.appendChild(text);
+            item.appendChild(chip); item.appendChild(text);
             item.addEventListener('mouseenter', ()=>{ H.selectedIndex = i; H.paintList(); H.scrollListToSelection(); H.setFaded(true); });
             item.addEventListener('click',()=>{ H.post({type:'navigate', url:s.url}); H.toggle(false); });
             list.appendChild(item);