silentmode/theseus
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Theseus: show the selected engine's favicon on the search dropdown button

Browse source 
The search box's dropdown button now displays the current engine's favicon
(emoji fallback) + a caret, instead of a generic magnifier — and updates when
the engine changes.
This commit is contained in:
Local Dev 2026-08-01 00:13:14 +02:00
parent 38951f42d5
commit a7112fcc72
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
chrome.html
View file

@ -66,10 +66,14 @@
.searchbox { display: flex; align-items: center; width: 300px; background: var(--surface); border: 1px solid var(--line); .searchbox { display: flex; align-items: center; width: 300px; background: var(--surface); border: 1px solid var(--line);
border-radius: 999px; padding: 0 12px 0 3px; } border-radius: 999px; padding: 0 12px 0 3px; }
.searchbox:focus-within { border-color: #4b7bec; } .searchbox:focus-within { border-color: #4b7bec; }
.engine-btn { width: 34px; height: 30px; border: none; cursor: pointer; border-radius: 999px 0 0 999px; padding: 0; /* dropdown button shows the SELECTED engine's favicon (emoji fallback) + a caret */
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b98a9' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.2'/%3E%3Cpath d='M10.2 10.2 L14 14'/%3E%3C/svg%3E") no-repeat left 8px center / 14px; } .engine-btn { display: flex; align-items: center; gap: 3px; height: 30px; border: none; cursor: pointer;
.engine-btn::after { content: "▾"; position: relative; left: 12px; font-size: 9px; color: var(--dim); } border-radius: 999px 0 0 999px; padding: 0 4px 0 8px; background: transparent; }
.engine-btn:hover { background-color: var(--hover); } .engine-btn:hover { background-color: var(--hover); }
.engine-btn #engineIcon { display: grid; place-items: center; width: 16px; height: 16px; }
.engine-btn .eimg { width: 16px; height: 16px; border-radius: 3px; }
.engine-btn .esym { font-size: 14px; line-height: 1; }
.engine-btn .cv { font-size: 8px; color: var(--dim); }
#search { flex: 1; padding: 7px 4px; } #search { flex: 1; padding: 7px 4px; }
.tor { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: #2b2f3a; color: var(--ink); cursor: pointer; white-space: nowrap; font-size: 12.5px; } .tor { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: #2b2f3a; color: var(--ink); cursor: pointer; white-space: nowrap; font-size: 12.5px; }
.tor.connecting { background: #7a5c14; } .tor.on { background: #6b3fa0; } .tor.connecting { background: #7a5c14; } .tor.on { background: #6b3fa0; }
@ -116,7 +120,7 @@
<button class="star" id="star" title="Save this page">☆</button> <button class="star" id="star" title="Save this page">☆</button>
</div> </div>
<div class="searchbox"> <div class="searchbox">
<button id="engineBtn" class="engine-btn" title="Choose search engine"></button> <button id="engineBtn" class="engine-btn" title="Choose search engine"><span id="engineIcon"></span><span class="cv">▾</span></button>
<input id="search" placeholder="Search" spellcheck="false"> <input id="search" placeholder="Search" spellcheck="false">
</div> </div>
<button class="tor" id="tor" title="Route traffic through Tor">🧅 Tor: Off</button> <button class="tor" id="tor" title="Route traffic through Tor">🧅 Tor: Off</button>
@ -157,6 +161,11 @@
function setEnginePlaceholder(d) { function setEnginePlaceholder(d) {
const cur = (d.engines || []).find((e) => e.id === d.current); const cur = (d.engines || []).find((e) => e.id === d.current);
$("search").placeholder = cur ? "Search with " + cur.name : "Search"; $("search").placeholder = cur ? "Search with " + cur.name : "Search";
const icon = $("engineIcon");
const sym = (cur && cur.sym) || "🔍";
if (cur && cur.favicon)
icon.innerHTML = `<img class="eimg" src="${cur.favicon.replace(/"/g, "&quot;")}" onerror="this.replaceWith(Object.assign(document.createElement('span'),{className:'esym',textContent:'${sym}'}))">`;
else icon.innerHTML = `<span class="esym">${sym}</span>`;
} }
$("engineBtn").onclick = () => { $("engineBtn").onclick = () => {
const r = $("engineBtn").getBoundingClientRect(); const r = $("engineBtn").getBoundingClientRect();