This issue exists to keep track of progress on #7784. If I missed anything let me know (or update the issue if you have the right permissions to do so)!

---

Checklist

Legend

• = done
• = not done
• [!] = almost done

Features

Content views

• Code editor (codemirror)
• View HTTP message
• Edit HTTP request (e.g. during interception)
• View image
• Content view selector

Additional features

• 'Show all' button on the code editor to show the full message

Flow table

• View flow table
• Sort by clicking on header columns
• Virtualized list (using react-virtuoso instead of a custom implementation)

Additional features

• Configure active web columns (the web_columns option) by right clicking / opening a menu somewhere on the table header itself
• [!] Context menu on flow table rows. This replaces the 'flow menu' component for individual and multiple selected flows.
  • The context menu exists, but is not complete. It currently only supports the 'replay' action for an individual flow.
• Adjustable column width. Would be nice to have a 'drag' handle on the column header to allow users to adjust the width of a column.

Known bugs

• The context menu (i.e. the pop up that shows when the user R mouse clicks on a row) closes itself when a new flow is added to the table.
• Keyboard navigation works, but the list doesn't scroll as you navigate through the items. This is because react-virtuoso expects a specific implementation through the use of ref and scrollToIndex, which is not implemented yet. This can be fixed by excluding the arrow up and down keys from the keyboard component and implementing the keyboard navigation logic according to the react-virtuoso documentation instead.

Performance

Performance is not up to par compared to the current web implementation.

The issue can be best explained by seeing it occur in development mode. Proxy your browser traffic and navigate back and forth different websites quickly. You should see that it looks like the list is 'lagging behind' on the actual requests that are being sent at the moment of navigation.

This issue most likely can't be avoided in development mode because you have a whole dev server running, react strict mode enabled and the redux dev tools integration practically slowing things down on purpose. But, in production it feels like there's still that slight delay as well. It's much less noticeable, but if you compare web with webnext directly to each other you can see it's there. During my experiments, I managed to shave off a couple of milliseconds by removing react-table, at the cost of some really nice features like automatic column resizing and sorting. I also tried the manual approach (ditching react-virtuoso) which also shaved off a couple of milliseconds, but it was a lot more work to get it right and I didn't like the result as much as react-virtuoso. Maybe there's different ways to optimize the performance further, but I haven't found them yet. To be investigated further. I feel like out of all the optimizations that can be done, this is by far the most important one.

Flow details

• View flow details
• Comment
• Connection info
• DNS message
• Error view for failed flows
  • Currently renders nothing (null) on each tab for such flows.
• HTTP message: body, headers, status code, method, URL, protocol version and more (see below)
• Timing info
• TCP message
• UDP message
• WebSocket message

Additional features

• Split request and response view for HTTP flows
• Show HTTP status text ([RFC] Improved Web UI Flow View #7694)
• Colored URL segments
• Query parameters tab
• Cookies tab (request)
• Set-cookie headers tab (response)

Interception filters

• Interception filter with autocomplete
• Working 'accept all' button for intercepted flows

Additional features

• GUI filter builder for noobs

Known bugs

• Some expressions don't pass as valid filters due to a discrepancy between frontend (PEG) and backend (PyParsing) validation libraries
  • As discussed, the old and outdated PEG.js dependency should be removed completely and validation should happen on te backend only. This will also allow us to use the same validation logic for the CLI and webnext, which is a big plus.
• There's no way to 'undo' your changes if you type the wrong filter part using autocomplete. In other words CTRL + Z doesn't always work in the input field for some reason. Second, the autocomplete implementation can be improved further to prevent mistakes in the first place. For example, its intuitive for users to press Enter to 'confirm' their current filter. But if the autocomplete is open, it will insert the currently selected autocomplete suggestion instead of confirming the filter. This is not intuitive and should be changed to allow users to confirm their filter by pressing Enter when the autocomplete is open. The autocomplete should only be inserted when the user presses Tab or clicks on it with the mouse. See the current web implementation for reference.

Search filters

• [!] Search filters with autocomplete
  • This should be replaced by the new filters implementation from the interception filters section above. The new implementation is more powerful and allows for more complex filters to be created, which is a big plus. The current search filters implementation is a bit limited in comparison.

Highlight filters

• Highlight filters with autocomplete
  • Could be integrated into search instead. However, I would suggest moving this to the context menu instead. Users can search for the flows they want and then highlight them all at once using the context menu. This would be a more intuitive way to highlight flows. TBD and worked out further as I haven't put much thought into this yet.

Capture modes

• Capture setup view (the intro screen, first thing you see when you up mitmweb without any recorded flows)
• Capture modes (everything in the 'Capture' tab in mitmweb)

Options dialog

• Functional options dialog

Additional features

• [!] Search options
  • It should return specific options only, based on the search query. Currently, all options withing a category are returned, even if they don't match the search query specifically. For example, searching for 'web_theme' should return only 1 option but instead it returns all options within the 'web' category, even if they don't match the search query exactly.

Miscellaneous

• Connection indicator
• URL state
• Save to / upload from file on computer
• View event log
  • IIRC events are properly received and stored in the redux store, but there is no UI component to render them yet.
  • Should be a button on the footer that opens a panel.
• Command bar
  • Should be a button on the footer that opens a panel. Or, even better if it's applicable, the Command runner component from shadcn/ui.
• Options menu (not to be confused with the options dialog): strip cache headers, ue host header for display, don't verify server certificates etc.
  • My suggestion would be to move this to the options dialog instead. TBD.
• Global mitmproxy crash handler as seen in ProxyApp.tsx
• Export flows
• A clear plan on how to ship to production
  • Currently, the build output is copied via cp -r. Not very cross-platform. Do we settle for Gulp or find a new solution? TBD.

Additional features

• Theme: system, dark and light mode supported
  • System theme decides between dark and light based on the system settings. This should be supported by all recent browsers. Falls back to dark theme if not supported.

Known bugs

• Theme: white 'flash' on startup for dark mode users
  • Classic CSR problem for SPAs before SSR became a thing. The browser shows a white page first, then react initializes and finally the theme is applied. This causes a white 'flash' for dark mode users for a brief moment. To be investigated further to see what the best solutions is.