From a930fc97f883d764b38682d22da0e20802785251 Mon Sep 17 00:00:00 2001 From: Vitor Pamplona Date: Sat, 26 Sep 2026 18:02:53 -0400 Subject: [PATCH] design(browser): let the collapsed handle go quiet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The handle is on screen the whole time a page is, and almost nobody pulls it down — it is there for when you are stuck on a site, not as a status display. Tinting it with the Tor accent lit it up on every page, because onion routing is the normal case here rather than the exception, and an accent that is always on is one nobody reads. So it spends colour only on what a reader should act on: plain HTTP keeps the error colour, the console-error dot stays (5dp at 80%, down from a solid 7dp), and everything else — Tor included — is the same muted grey. Tor is not hidden; it keeps its badge inside the pill, where the address row says "Onion-routed" in words for anyone who opens it. I also tried dropping the handle's background, and put it back: on a dark page it nearly vanished, and the point is to call less attention, not to be undiscoverable. `BrowserPillRenderTest` needed a note. Its "did anything render" guard is a flat `distinct colours > 20` over the whole canvas, and `05-handles` — three small bars on mostly empty space — fell to 18 once the accent came off. That guard was in effect asserting the handle has a saturated accent, which is the thing being removed. Rather than lower it for all eleven images, that one gets `minColours = 12`: a blank render scores 1-3, so it still catches the failure the guard exists for. Co-Authored-By: Claude Opus 5 (1M context) --- .../commons/browser/ui/pill/BrowserPill.kt | 20 ++++++++++++------- .../browser/ui/pill/BrowserPillRenderTest.kt | 10 ++++++++-- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/commonsUI/src/commonMain/kotlin/com/vitorpamplona/amethyst/commons/browser/ui/pill/BrowserPill.kt b/commonsUI/src/commonMain/kotlin/com/vitorpamplona/amethyst/commons/browser/ui/pill/BrowserPill.kt index 3c261ee149..2c93718755 100644 --- a/commonsUI/src/commonMain/kotlin/com/vitorpamplona/amethyst/commons/browser/ui/pill/BrowserPill.kt +++ b/commonsUI/src/commonMain/kotlin/com/vitorpamplona/amethyst/commons/browser/ui/pill/BrowserPill.kt @@ -141,9 +141,16 @@ fun BrowserPill( } /** - * The collapsed grabber. It tells the page's story before it's opened: the bar takes the error colour on - * plain HTTP and the Tor accent when onion-routed, a hairline fills while the page loads, and a dot - * appears when the console has errors. + * The collapsed grabber. + * + * It is on screen the whole time a page is, and almost nobody pulls it down: it is there for when you + * are stuck on a site, not as a status display. So it stays quiet, and spends colour only on the states + * a reader should act on. + * + * Onion routing is not one of them. It is the normal case here rather than an exception, and an accent + * that is always lit is one nobody reads — it just makes the handle loud on every page. Tor keeps its + * badge inside the pill, where the address and "Onion-routed" say it in words for anyone who opens it. + * What is left in the handle is plain HTTP, which is a warning, and a dot for console errors. */ @Composable fun PillHandle( @@ -155,8 +162,7 @@ fun PillHandle( val barColor = when (ui.security) { BrowserChrome.Security.HTTP -> MaterialTheme.colorScheme.error - BrowserChrome.Security.TOR -> MaterialTheme.colorScheme.tertiary - else -> MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.7f) + else -> MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.45f) } Box( modifier @@ -200,9 +206,9 @@ fun PillHandle( Modifier .align(Alignment.CenterEnd) .padding(start = 44.dp) - .size(7.dp) + .size(5.dp) .clip(CircleShape) - .background(MaterialTheme.colorScheme.error), + .background(MaterialTheme.colorScheme.error.copy(alpha = 0.8f)), ) } } diff --git a/commonsUI/src/jvmTest/kotlin/com/vitorpamplona/amethyst/commons/browser/ui/pill/BrowserPillRenderTest.kt b/commonsUI/src/jvmTest/kotlin/com/vitorpamplona/amethyst/commons/browser/ui/pill/BrowserPillRenderTest.kt index 3ac0d504e9..d449a33afb 100644 --- a/commonsUI/src/jvmTest/kotlin/com/vitorpamplona/amethyst/commons/browser/ui/pill/BrowserPillRenderTest.kt +++ b/commonsUI/src/jvmTest/kotlin/com/vitorpamplona/amethyst/commons/browser/ui/pill/BrowserPillRenderTest.kt @@ -42,6 +42,7 @@ class BrowserPillRenderTest { name: String, widthDp: Int, heightDp: Int, + minColours: Int = 20, content: @Composable () -> Unit, ) { val density = 2f @@ -61,7 +62,7 @@ class BrowserPillRenderTest { val pixels = image.peekPixels() ?: error("no pixels for $name") val distinct = HashSet() for (y in 0 until height step 7) for (x in 0 until width step 7) distinct += pixels.getColor(x, y) - assertTrue(distinct.size > 20, "$name rendered almost nothing (${distinct.size} colours)") + assertTrue(distinct.size > minColours, "$name rendered almost nothing (${distinct.size} colours)") } finally { scene.close() } @@ -75,7 +76,12 @@ class BrowserPillRenderTest { @Test fun napplet() = render("04-napplet", 820, 800) { BrowserPillNappletPreview() } - @Test fun handles() = render("05-handles", 820, 160) { PillHandlesPreview() } + // Three small bars on a mostly empty canvas, and deliberately the quietest thing + // the redesign draws — so it clears the "did anything render" bar by less than the + // full screens do. It scored 18 when the accent came off; a blank render is 1-3, so + // 12 still catches the failure this guard is for without demanding a colour the + // component is not supposed to have. + @Test fun handles() = render("05-handles", 820, 160, minColours = 12) { PillHandlesPreview() } @Test fun find() = render("06-find", 820, 220) { FindInPagePreview() }