mirror of
https://github.com/vee1e/mitmproxy.git
synced 2026-09-02 10:47:14 +00:00
4c018bb9d4
* 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> |
||
|---|---|---|
| .. | ||
| gen | ||
| public/static | ||
| src | ||
| .editorconfig | ||
| .prettierignore | ||
| eslint.config.mjs | ||
| index.html | ||
| jest.config.js | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| setup-global-jest.js | ||
| setup-jest.js | ||
| tsconfig.json | ||
| vite.config.ts | ||
Quick Start
- Install mitmproxy as described in
../CONTRIBUTING.md - Run
node --versionto make sure that you have at least Node.js 24 or above. - Run
cd ./webto change to the directory with package.json. - Run
npm installto install dependencies. - Run
uv run mitmweb - Run
npm startin a separate window to start the Vite development server for the web interface.
Testing
- Run
npm testto run the test suite.
Code formatting
- Run
npm run prettierto format your code. You can also integrate prettier into your editor, see https://prettier.io/docs/en/editors.html
Architecture
There are two components:
-
Server:
mitmproxy/tools/web -
Client:
web
Contributing
We very much appreciate any (small) improvements to mitmweb. Please do not include the compiled assets in
mitmproxy/tools/web/static
in your pull request. Refreshing them on every commit would massively increase repository size. We will update these
files before every release.
Developer Tools
- You can debug application state using the React DevTools and Redux DevTools browser extensions.