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

Theseus: shield security badge, colour-coded by connection state

Browse source 
Replaces the padlock in the address bar with a heraldic shield outline
that changes colour to communicate the connection state at a glance:

  neutral (--dim)     home / resolving — no site or pending
  secure (#4fd1a5)    BCDN chain-verified (kind:"ok") OR https:// clearnet
  insecure (#f6768a)  nxdomain / resolver error / plain http://

Single-path SVG with fill=currentColor, so state-class CSS toggles the
tint without touching the geometry. The shape matches the reference
image the user provided — flared shoulders at the top, concave flanks
tapering to a sharp bottom point (bounds x:2 y:1.2 w:12 h:13.8 in the
16x16 viewBox).

setBadge() gets one extra branch: for kind:"web" it now inspects
d.url's scheme so plain HTTP shows insecure red instead of the previous
neutral. The legacy .warn class is kept but unused by the standard
states — any lingering caller keeps working (orange).

Green/red match the download-tracker palette so the visual system stays
consistent across the toolbar.
This commit is contained in:
Local Dev 2026-08-02 17:46:03 +02:00
parent 6bb8ecf48a
commit 0169fa3499
1 changed files with 36 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
chrome.html
View file

@ -58,16 +58,18 @@
.urlwrap { flex: 1; display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line);
border-radius: 999px; padding: 0 6px 0 4px; }
.urlwrap:focus-within { border-color: #4b7bec; }
/* Firefox-style padlock — always present (the "site security" button) */
/* Site security shield — always present. Colour communicates state:
neutral (default) for home / resolving, green when the connection is
secure (BCNR chain-verified OR https:// clearnet), red when it isn't
(nxdomain / resolver error / plain http). Shape stays constant so the
button doesn't jump around when the state changes. */
.secbadge { display: grid; place-items: center; width: 28px; height: 26px; border-radius: 6px; border: none;
background: transparent; cursor: pointer; padding: 0; }
background: transparent; cursor: pointer; padding: 0; color: var(--dim); }
.secbadge:hover { background: var(--line2); }
.secbadge svg { width: 15px; height: 15px; }
.secbadge svg .shk { fill: none; stroke: var(--dim); stroke-width: 1.25; stroke-linecap: round; }
.secbadge svg .bdy { fill: var(--dim); }
.secbadge svg .kh { fill: var(--surface); }
.secbadge:hover svg .kh { fill: var(--surface); }
.secbadge.warn svg .shk { stroke: #f6ad55; } .secbadge.warn svg .bdy { fill: #f6ad55; }
.secbadge svg { width: 16px; height: 16px; fill: currentColor; }
.secbadge.secure { color: #4fd1a5; }
.secbadge.insecure { color: #f6768a; }
.secbadge.warn { color: #f6ad55; } /* kept for legacy call sites */
input { padding: 7px 6px; border-radius: 999px; border: none; background: transparent; color: inherit; font-size: 13.5px; outline: none; }
#url { flex: 1; }
/* registry toggle at the END of the address bar — one or two chips */
@ -134,7 +136,12 @@
</div>
<div class="urlwrap">
<button class="secbadge" id="secbadge" title="Site information">
<svg viewBox="0 0 16 16" aria-hidden="true"><path class="shk" d="M5.25 7.2 V5.4 a2.75 2.75 0 0 1 5.5 0 V7.2"/><rect class="bdy" x="3.25" y="7.2" width="9.5" height="6.3" rx="1.7"/><circle class="kh" cx="8" cy="10.3" r=".95"/></svg>
<!-- Heraldic shield outline matching the reference image: flared top
shoulders, concave sides tapering to a sharp bottom point. Single
filled path, `currentColor` so state class toggles the tint. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
<path d="M8 1.2 C6 1.2 3.5 1.7 2.5 2.3 Q2 2.6 2 3.5 L2 7 C2 11.2 4.2 13.7 8 15 C11.8 13.7 14 11.2 14 7 L14 3.5 Q14 2.6 13.5 2.3 C12.5 1.7 10 1.2 8 1.2 Z"/>
</svg>
</button>
<input id="url" placeholder="Ask a search engine or enter web address" spellcheck="false">
<span class="reg" id="reg" hidden></span>
@ -171,7 +178,15 @@
const RELOAD_SVG = `<svg viewBox="0 0 16 16"><path d="M13 8 a5 5 0 1 1 -1.5 -3.6"/><path d="M13 2.5 L13 5 L10.5 5"/></svg>`;
const STOP_SVG = `<svg viewBox="0 0 16 16"><path d="M4.5 4.5 L11.5 11.5 M11.5 4.5 L4.5 11.5"/></svg>`;
function goURL() { const v = $("url").value.trim(); if (v) T.navigate(v); }
function goURL() {
const v = $("url").value.trim();
if (!v) return;
// Blur so the tabs-event handler can update the URL bar to the actual
// loaded page — the "don't clobber the typed text" guard would otherwise
// keep the search keyword displayed while the results are loading.
$("url").blur();
T.navigate(v);
}
$("url").addEventListener("keydown", (e) => { if (e.key === "Enter") goURL(); });
$("search").addEventListener("keydown", (e) => { if (e.key === "Enter") { const q = $("search").value.trim(); if (q) { T.search(q); $("search").value = ""; } } });
$("back").onclick = () => T.back();
@ -248,15 +263,23 @@
T.onBookmarks((b) => { bookmarks = b || []; renderBookmarks(); });
// ---- security badge + minimal registry indicator ----
// Shield colour communicates connection state at a glance:
// neutral — home / resolving (no site OR pending)
// secure — BCDN chain-verified (kind:"ok") OR https:// clearnet
// insecure — nxdomain / resolver error / plain http:// clearnet
function setBadge(d) {
const b = $("secbadge");
let cls = "secbadge", title = "Site information";
const isHttps = typeof d?.url === "string" && d.url.startsWith("https:");
const isHttp = typeof d?.url === "string" && d.url.startsWith("http:") && !isHttps;
if (!d || d.kind === "home") title = "Theseus";
else if (d.kind === "ok") title = "Secure · BCDN via " + (d.source || "on-chain") + " — click for details";
else if (d.kind === "ok") { cls = "secbadge secure"; title = "Secure · BCDN via " + (d.source || "on-chain") + " — click for details"; }
else if (d.kind === "web" && isHttps) { cls = "secbadge secure"; title = "Secure · ICANN (HTTPS) — click for details"; }
else if (d.kind === "web" && isHttp) { cls = "secbadge insecure"; title = "Not secure · plain HTTP — click for details"; }
else if (d.kind === "web") title = "Connection · ICANN — click for details";
else if (d.kind === "resolving") title = "Resolving…";
else if (d.kind === "nxdomain") { cls = "secbadge warn"; title = "Not registered on BCDN"; }
else if (d.kind === "error") { cls = "secbadge warn"; title = "Resolution error"; }
else if (d.kind === "nxdomain") { cls = "secbadge insecure"; title = "Not registered on BCDN"; }
else if (d.kind === "error") { cls = "secbadge insecure"; title = "Resolution error"; }
b.className = cls; b.title = title;
}
function setReg(d) {