UI Concept about mitmweb HOT 4 CLOSED

Here's a quick sketch of my UI proposal, which is largely inspired by the Microsoft Office Ribbon UI. Let me first sketch the goals this should accomplish:

• Ease of Use: One major complaint I get about mitmproxy is that the initial learning curve (installing, setup, ..) is apparently steep. We need to change that!
• Discovereability of Features: I gave a few talks to somewhat regular mitmproxy users, and most were actually unaware that we support stuff such as Server Replay.
• Extensibility: One of mitmproxy's strengths are inline scripts, which make everything customizable. Ultimately, it'd be great if they can hook into some parts of the UI as well.

At the top, we have a few categories that group all actions/options:

• Start: The main category. Start/Stop recording, filters, interception, ...
• Proxy: A menu where you can configure the proxy mode, port, etc.
• Replay: You can enable client/server replay here and set server replay options
• Report: Clicking here replaces the main ui below with the report editor (
• Options: The mitmweb counterpart to mitmproxy's option screen.
• XXX: The very nice part about this structure is that an extension could just hook into that and add its own tab.

Clicking on mitmproxy opens the File menu (as with Office):

Once you select a Flow, a new Ribbon Tab appears for flow editing and other flow-specific actions.

The idea is that this opens automaticall, just as Office does it:

I hope this somehow conveys the idea of what I'd like to build.

@mitmproxy/mitmweb, what are your thoughts on this?

from mitmweb.

I like this. Some rough thoughts:

• For some menu items (e.g. Options) quite a bit of vertical space will be required. We might want to think of a different nav paradigm there - a modal or total-page switch. The ribbon idea is only pleasant if the height of the ribbon stays constant, and I wonder about the usability of a scroll area within the ribbon body.
• We may also want a show/hide ribbon button in the far right.

from mitmweb.

I also like this mockup and I also agree to @cortesi to implement a show/hide ribbon button. @mhils: You want that the ribbon opens automatically (good idea), but this will affect just the "flow" tab. I don't know when the other tabs should be open automatically.

from mitmweb.

@cle1000: Yes - generally speaking, this affects tabs which are only visible in a specific context. For now, this is just the flow tab.

@cortesi: Yes, the ribbon should be fixed-height. For the options form, a total-page switch should do just fine, but we can defer that until we have too many options.

@gzzhanghao, thoughts?

from mitmweb.