search

firefox-devtools / ux

Firefox DevTools UX Community
Mozilla Public License 2.0
103 stars 21 forks source link

Network table design refresh #123

Open violasong opened 4 years ago

violasong commented 4 years ago

Mockup in progress

Screen Shot 2020-04-22 at 9 28 02 AM
janodvarko commented 4 years ago

@violasong This looks awesome!

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

image

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

Honza

violasong commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

(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.