mitmweb: add status/method badges to the flow table (#8335) · mitmproxy/mitmproxy@4c018bb · GitHub
Skip to content

Commit 4c018bb

Browse files
sleeyaxautofix-ci[bot]
sleeyax
and
autofix-ci[bot]
authored
mitmweb: add status/method badges to the flow table (#8335)
* feat(web): add status/method badges and flow-table tooltips 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 #7789. * feat(web): tone down solid state fills in the dark theme 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. * feat(web): drop the now-unused status-code color tokens The status column renders a badge that reuses the semantic state tokens, so nothing consumes --mitmweb-status-1xx…5xx/-other any more. * [autofix.ci] apply automated fixes * refactor(web): unify the status and method badges into one component 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. * fix(web): give the status and method badges the same height 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. * fix(web): widen the status column so DNS codes fit 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. --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 9a9c21e commit 4c018bb

13 files changed

Lines changed: 289 additions & 88 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions

‎web/src/css/app.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import (less) "global.less";
2+
@import (less) "badges.less";
23
@import (less) "sprites.less";
34
@import (less) "layout.less";
45
@import (less) "tabs.less";

‎web/src/css/badges.less‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.badge {
2+
display: inline-flex;
3+
align-items: center;
4+
// Middle rather than baseline, so badges line up across columns despite differing font sizes.
5+
vertical-align: middle;
6+
height: 18px;
7+
// A transparent border keeps outlined and filled badges the same size.
8+
border: 1px solid transparent;
9+
border-radius: 4px;
10+
line-height: 1;
11+
}
12+
13+
.status-badge {
14+
padding: 0 6px;
15+
font-size: 12px;
16+
font-weight: 600;
17+
color: var(--mitmweb-neutral-soft-fg);
18+
background-color: var(--mitmweb-neutral-soft-bg);
19+
20+
&.status-1xx {
21+
color: var(--mitmweb-info-soft-fg);
22+
background-color: var(--mitmweb-info-soft-bg);
23+
}
24+
&.status-2xx {
25+
color: var(--mitmweb-success-soft-fg);
26+
background-color: var(--mitmweb-success-soft-bg);
27+
}
28+
&.status-3xx {
29+
color: var(--mitmweb-warning-soft-fg);
30+
background-color: var(--mitmweb-warning-soft-bg);
31+
}
32+
&.status-4xx,
33+
&.status-5xx {
34+
color: var(--mitmweb-danger-soft-fg);
35+
background-color: var(--mitmweb-danger-soft-bg);
36+
}
37+
}
38+
39+
.method-badge {
40+
padding: 0 4px;
41+
border-color: var(--mitmweb-border);
42+
font-family: @font-family-monospace;
43+
font-size: 11px;
44+
font-weight: 500;
45+
text-transform: uppercase;
46+
color: var(--mitmweb-fg-muted);
47+
}

‎web/src/css/flowtable.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@
170170
}
171171

172172
.col-status {
173-
width: 50px;
173+
width: 80px;
174174
}
175175

176176
.col-size {

‎web/src/css/global.less‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,18 @@
5353
--mitmweb-text-warning: #8a6d3b;
5454
--mitmweb-text-danger: #a94442;
5555

56+
// State — soft colors, for the many small pills that are on screen permanently (status badges, footer options)
57+
--mitmweb-neutral-soft-bg: var(--mitmweb-fg-muted);
58+
--mitmweb-neutral-soft-fg: #fff;
59+
--mitmweb-info-soft-bg: var(--mitmweb-info);
60+
--mitmweb-info-soft-fg: #fff;
61+
--mitmweb-success-soft-bg: var(--mitmweb-success);
62+
--mitmweb-success-soft-fg: #fff;
63+
--mitmweb-warning-soft-bg: var(--mitmweb-warning);
64+
--mitmweb-warning-soft-fg: #fff;
65+
--mitmweb-danger-soft-bg: var(--mitmweb-danger);
66+
--mitmweb-danger-soft-fg: #fff;
67+
5668
// Highlight (row hover / suggestion selection)
5769
--mitmweb-highlight: hsla(209, 52%, 84%, 0.5);
5870

@@ -75,14 +87,6 @@
7587
--mitmweb-alert-warning-bg: #fcf8e3;
7688
--mitmweb-alert-warning-border: #faebcc;
7789

78-
// Response status codes, by class
79-
--mitmweb-status-1xx: green;
80-
--mitmweb-status-2xx: darkgreen;
81-
--mitmweb-status-3xx: lightblue;
82-
--mitmweb-status-4xx: red;
83-
--mitmweb-status-5xx: red;
84-
--mitmweb-status-other: darkred;
85-
8690
// Drop shadow cast by panel edges (footers)
8791
--mitmweb-shadow: lightgray;
8892

@@ -138,6 +142,18 @@
138142
--mitmweb-text-warning: #d0a95c;
139143
--mitmweb-text-danger: #e07b7b;
140144

145+
// State — soft colors. A solid fill glares when repeated across every row, so it sinks towards the background and the label carries the hue.
146+
--mitmweb-neutral-soft-bg: #3a3a3a;
147+
--mitmweb-neutral-soft-fg: #c8c8c8;
148+
--mitmweb-info-soft-bg: #1e4a5a;
149+
--mitmweb-info-soft-fg: #9fd6e8;
150+
--mitmweb-success-soft-bg: #2c5533;
151+
--mitmweb-success-soft-fg: #9fd3a3;
152+
--mitmweb-warning-soft-bg: #574220;
153+
--mitmweb-warning-soft-fg: #e6c081;
154+
--mitmweb-danger-soft-bg: #5a2b29;
155+
--mitmweb-danger-soft-fg: #eda6a3;
156+
141157
// Highlight (row hover / suggestion selection)
142158
--mitmweb-highlight: hsla(209, 60%, 42%, 0.6);
143159

@@ -160,14 +176,6 @@
160176
--mitmweb-alert-warning-bg: #4d4327;
161177
--mitmweb-alert-warning-border: #6b5d2f;
162178

163-
// Response status codes — the light values are far too dark to read on a dark surface
164-
--mitmweb-status-1xx: #7ec97e;
165-
--mitmweb-status-2xx: #5cd65c;
166-
--mitmweb-status-3xx: #7fc9e8;
167-
--mitmweb-status-4xx: #ff7b7b;
168-
--mitmweb-status-5xx: #ff7b7b;
169-
--mitmweb-status-other: #e07b7b;
170-
171179
// Drop shadow cast by panel edges (footers)
172180
--mitmweb-shadow: #000;
173181

@@ -472,19 +480,22 @@ textarea {
472480
}
473481

474482
.label-default {
475-
background-color: var(--mitmweb-fg-muted);
483+
color: var(--mitmweb-neutral-soft-fg);
484+
background-color: var(--mitmweb-neutral-soft-bg);
476485
}
477486

478487
.label-primary {
479488
background-color: var(--mitmweb-accent);
480489
}
481490

482491
.label-success {
483-
background-color: var(--mitmweb-success);
492+
color: var(--mitmweb-success-soft-fg);
493+
background-color: var(--mitmweb-success-soft-bg);
484494
}
485495

486496
.label-danger {
487-
background-color: var(--mitmweb-danger);
497+
color: var(--mitmweb-danger-soft-fg);
498+
background-color: var(--mitmweb-danger-soft-bg);
488499
}
489500

490501
.alert {

‎web/src/js/__tests__/components/FlowTable/__snapshots__/FlowColumnsSpec.tsx.snap‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,6 @@ exports[`Flowcolumns Components should render pathColumn 1`] = `
237237
class="col-path"
238238
>
239239
<svg
240-
aria-hidden="true"
241240
class="lucide lucide-triangle-alert icon icon-warning float-right"
242241
fill="none"
243242
height="16"
@@ -258,6 +257,9 @@ exports[`Flowcolumns Components should render pathColumn 1`] = `
258257
<path
259258
d="M12 17h.01"
260259
/>
260+
<title>
261+
error
262+
</title>
261263
</svg>
262264
<span
263265
class="marker float-right"
@@ -279,7 +281,6 @@ exports[`Flowcolumns Components should render pathColumn 2`] = `
279281
class="col-path"
280282
>
281283
<svg
282-
aria-hidden="true"
283284
class="lucide lucide-pause icon icon-pause float-right"
284285
fill="none"
285286
height="16"
@@ -305,9 +306,11 @@ exports[`Flowcolumns Components should render pathColumn 2`] = `
305306
x="5"
306307
y="3"
307308
/>
309+
<title>
310+
Intercepted — waiting to resume
311+
</title>
308312
</svg>
309313
<svg
310-
aria-hidden="true"
311314
class="lucide lucide-x icon icon-close float-right"
312315
fill="none"
313316
height="16"
@@ -325,6 +328,9 @@ exports[`Flowcolumns Components should render pathColumn 2`] = `
325328
<path
326329
d="m6 6 12 12"
327330
/>
331+
<title>
332+
Connection killed
333+
</title>
328334
</svg>
329335
<span
330336
class="marker float-right"
@@ -395,7 +401,11 @@ exports[`should render columns: method 1`] = `
395401
<td
396402
class="col-method"
397403
>
398-
WSS
404+
<span
405+
class="badge method-badge"
406+
>
407+
WSS
408+
</span>
399409
</td>
400410
</tr>
401411
</tbody>
@@ -412,7 +422,6 @@ exports[`should render columns: path 1`] = `
412422
class="col-path"
413423
>
414424
<svg
415-
aria-hidden="true"
416425
class="lucide lucide-triangle-alert icon icon-warning float-right"
417426
fill="none"
418427
height="16"
@@ -433,6 +442,9 @@ exports[`should render columns: path 1`] = `
433442
<path
434443
d="M12 17h.01"
435444
/>
445+
<title>
446+
error
447+
</title>
436448
</svg>
437449
<span
438450
class="marker float-right"
@@ -483,7 +495,11 @@ exports[`should render columns: status 1`] = `
483495
<td
484496
class="col-status"
485497
>
486-
200
498+
<span
499+
class="badge status-badge status-2xx"
500+
>
501+
200
502+
</span>
487503
</td>
488504
</tr>
489505
</tbody>
@@ -530,6 +546,7 @@ exports[`should render columns: tls 1`] = `
530546
<tr>
531547
<td
532548
class="col-tls col-tls-https"
549+
title="TLS encrypted"
533550
/>
534551
</tr>
535552
</tbody>

‎web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.tsx.snap‎

Lines changed: 31 additions & 7 deletions

0 commit comments

Comments
 (0)