Repository navigation
mitmweb: add status/method badges to the flow table - #8335
Conversation
Replace the inline-colored status text with a colored status-code badge and render the request method as an outlined badge. Both reuse the semantic state tokens, so they follow the dark theme automatically. Add hover tooltips (via a new optional Icon `title` prop and a title on the TLS cell) to the TLS, replay, intercept, and error indicators. Part of mitmproxy#7789.
Add a soft variant of the state palette (`--mitmweb-<state>-soft-bg`/`-fg`) and use it for the status badges and the footer option labels. A saturated fill glares against a dark surface once it is repeated across every row, so the soft fill sinks towards the background and the label text carries the hue. The solid tokens stay vivid for the header connection label and `.btn-info`, which appear one at a time and are meant to draw the eye. Light values alias the existing solid colors, so the light theme is unchanged.
The status column renders a badge that reuses the semantic state tokens, so nothing consumes --mitmweb-status-1xx…5xx/-other any more.
lups2000
left a comment
lups2000
left a comment
There was a problem hiding this comment.
Thanks :) Looks nice 🙌
Just a few nits:
Maybe these could have the same height?
Not strictly related to this PR, but for the future: the column content is sometimes left-aligned and sometimes right-aligned. Maybe we should stick to one alignment, or possibly center it consistently. But this is more something to consider when we improve the FlowTable UI :)
The two components differed only in styling, so a single presentational Badge in common/ now carries the shared class and callers pass the variant class. statusClass moves to flow/utils next to statusCode, mirroring getIcon which likewise returns a CSS class.
The two badges sized themselves from their own font size, padding and border, so the outlined method badge came out about a pixel shorter than the filled status badge. A fixed height on the shared base plus a transparent border makes the box identical regardless of the variant.
Just wanted to confirm they have the same height now (18px) 
|
Thank you :) Is the |
Oh wow, I didn't even notice that. Yes, it's probably cut off because the column size for the "status" is too small (in width). Will fix that. The |
The badge's padding and border pushed word-shaped DNS response codes such as NOERROR past the 60px cell, where the table's overflow rule clipped them.
Description
Renders the flow table's status code as a colored badge (by response class) and the method as an outlined badge, replacing the inline-colored text.
The badges reuse the semantic state tokens added in #8316/#8317, so they follow the dark theme. The dark palette uses soft fills (tinted background, colored label) rather than solid ones, because a solid fill repeated on every row glares.
Also adds hover tooltips to the TLS / replay / intercept / error indicators, via a new optional
titleprop onIconthat renders an SVG<title>(and stops marking the iconaria-hidden, so it's no longer decorative). This is a small addition I had in my old branch, which could be expanded upon later.Part of #7789. The badge styling is a precedent the tag badges in #8290 could reuse; this PR does not implement tagging.
Out of scope: swapping the sprite content-type icons to lucide (the sprites don't recolor in dark mode). I'll tackle that in a the next PR.
Screenshots
Checklist