8a99c0959c
- Link-status pill: it measured its own width inside a view already capped at 100 px, so it could never grow and long hrefs were cut short. An off-screen twin now reports the natural width; main caps it to the tab area (never under the sidebar) and the pill ellipsises past that. - Address bar at narrow widths: the URL input's intrinsic minimum width pushed the registry chips and the star out past the bar. #url now has min-width: 0 and the trailing controls are fixed-size flex items. - The BCDN/ICANN segmented chips are replaced by one Ariadne's Thread icon (spiral + tail) at the end of the bar: acid when served from BCDN, blue for ICANN, caret when the name exists on both. Click opens a native menu (registry-menu-popup): switch registry, remember per name / per TLD, forget choices, collision policy, and a jump to the Plug-ins settings section. Reuses the existing switch / remember / policy paths (collision-switch body extracted to switchRegistry, open-settings to openSettingsTab). preload's openSettings now forwards a section slug.
31 lines
1.6 KiB
HTML
31 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html><head><meta charset="utf-8">
|
|
<style>
|
|
:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
|
|
html, body { margin: 0; background: transparent; overflow: hidden; }
|
|
.pill { background: #1c222c; border: 1px solid #ffffff26; border-top: none; border-left: none;
|
|
border-radius: 0 8px 0 0; box-shadow: 0 -2px 12px #0006;
|
|
color: #b9c2d0; font-size: 11.5px; padding: 4px 10px 4px 8px;
|
|
display: inline-block; max-width: 100%; overflow: hidden;
|
|
text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
|
|
/* Off-screen twin used only to measure the URL's natural width. The
|
|
visible pill is capped at 100% of this view, so measuring IT would
|
|
just report whatever width the view already has — the pill could
|
|
never grow past its first 100px and long links got cut short. */
|
|
.measure { position: absolute; left: 0; top: 0; visibility: hidden; max-width: none; }
|
|
@media (prefers-color-scheme: light) {
|
|
.pill { background: #ffffff; color: #3c4453; border-color: rgba(0,0,0,.15); }
|
|
}
|
|
</style></head>
|
|
<body><span class="pill" id="p"></span><span class="pill measure" id="m" aria-hidden="true"></span>
|
|
<script>
|
|
const p = document.getElementById("p");
|
|
const m = document.getElementById("m");
|
|
window.linkstatus.onUrl((url) => {
|
|
const s = String(url || "");
|
|
p.textContent = s; m.textContent = s;
|
|
// Ask main for the natural width; main clamps to the tab area and the
|
|
// visible pill ellipsises whatever doesn't fit.
|
|
requestAnimationFrame(() => { try { window.linkstatus.resize(m.offsetWidth + 2, p.offsetHeight + 2); } catch (e) {} });
|
|
});
|
|
</script></body></html>
|