mitmproxy/web
Sleeyax d3df6b9567
mitmweb: use SVG icons for flow table resource types (#8337)
* 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>
2026-08-04 16:29:59 +02:00
..
gen
public/static
src mitmweb: use SVG icons for flow table resource types (#8337) 2026-08-04 16:29:59 +02:00
.editorconfig
.prettierignore
eslint.config.mjs
index.html
jest.config.js
package-lock.json feat(web): add dark theme (#8317) 2026-07-29 07:45:53 +02:00
package.json feat(web): add dark theme (#8317) 2026-07-29 07:45:53 +02:00
README.md
setup-global-jest.js
setup-jest.js feat(web): add dark theme (#8317) 2026-07-29 07:45:53 +02:00
tsconfig.json
vite.config.ts

Quick Start

  • Install mitmproxy as described in ../CONTRIBUTING.md
  • Run node --version to make sure that you have at least Node.js 24 or above.
  • Run cd ./web to change to the directory with package.json.
  • Run npm install to install dependencies.
  • Run uv run mitmweb
  • Run npm start in a separate window to start the Vite development server for the web interface.

Testing

  • Run npm test to run the test suite.

Code formatting

Architecture

There are two components:

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