mirror of
https://github.com/vee1e/mitmproxy.git
synced 2026-09-01 18:27:18 +00:00
* feat(web): replace flow table resource icons with lucide SVGs The resource type icons were 32x32 PNGs, so they could not be recolored and stayed dark against the dark theme's background. The SVG icons inherit currentColor and follow the active theme. getIcon becomes getResourceType and returns a semantic resource type rather than a CSS class name, which keeps the icon choice in the view layer and out of the column's sort key. Removing the last raster icons also drops the Chromium BSD notice that only covered the four DevTools PNGs. * refactor(web): size flow rows from the rowHeight prop Flow rows were 32px tall only as a side effect of the 32x32 icon bitmap, which the virtual scroller's hardcoded rowHeight silently depended on. Pinning the height in CSS would have restated that number in a second place and would still break for any caller overriding the prop, so rows now take their height from rowHeight directly. This also stops rows collapsing when the icon column is hidden via web_columns. * docs(web): drop redundant comments on rowHeight and getResourceType * docs: tighten the changelog entry for the SVG resource icons * [autofix.ci] apply automated fixes --------- 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.