Network table design refresh

[violasong]

Mockup in progress

[janodvarko]

@violasong This looks awesome!

Note that we also have left side bar (Search + Blocking and later Edit & Resend)

Does the left side bar impacts the column list when opened too?

Honza

[violasong]

@janodvarko

Does the left side bar impacts the column list when opened too?

Good question! I'm not sure. The left sidebar can be smaller, so there's more room for the full table. However, our condensed table is useful enough that maybe we can err on the side of showing it here too. @digitarald - do you have any insights on this?

[janodvarko]

@violasong @digitarald When the (request list) table width goes under certain threshold (e.g. both side panels opened, browser window not too wide) we could switch into a compact "email-like" view where every request is represented by a thick row with condensed info and no columns. Suggested by Harald at some point and I like the idea

Honza

[digitarald]

This also simplifies the table a bit; as we don't have 3 columns (like current mockup) that still act like a table (column headers, customisation, sortable, etc; but like a single-column list. Thinking about the entries as cards, we can get creative about what information to show in a visual hierarchy.

Downside is the visual shifting that table-to-list causes (gmail somewhat suffers from that). But I would not expect the UI to constantly switch between them … either by closing the sidepanel or resizing the viewport.

I do love how this brings us closer to thinking about responsive UI first and really embracing smaller viewports (vs just moving panels around).

[violasong]

Cool, I'd be happy to explore the thick row idea. It would be great for dock-to-side mode. Also it could potentially fit more info than this simplified table 🤔

[violasong]

(Cross-posted from chat)

Took a first try at the 'big row' layout for side-dock https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network-Details-Pane-table-redesign-V?node-id=755%3A0

It gives us extra room if we want to show domain/path or size, but other than that, I don't think it buys us much. For the condensed table MVP, I'd suggest we just stay with 3 column, as it looks fine at this narrow width.