Table borders in Network's request list

[digitarald]

Came up in https://bugzilla.mozilla.org/show_bug.cgi?id=1416714#c27 with patches attached.

I wanted to file this issue to discuss the border idea as it might be something we want to continue. I find it a bit easier to scan the table on my large 4k screen. Profiler's tables (and Storage) also use the same border pattern.

cc @bomsy @violasong @janodvarko

[fvsch]

Screenshot with the current UI and using a --theme-splitter-color border (at 2x resolution):

I kinda like it.

[janodvarko]

Looks great to me.

Honza

[bomsy]

Same. i like it.

[bomsy]

Tried it with dark theme as well ..

[violasong]

This does look good! Could you try a bit more left/right padding on the columns? I know it takes space to do this, but I still think our horizontal spacing issues should be solved via tighter spacing on the columns with less text.

A tangent, but I was just looking at Finder and Chrome and now I'm wondering if we should be right-aligning our transferred and size columns.

[fvsch]

I opened bug 1614567 and I'll have a patch ready for review shortly.

Screenshots at 2x resolution:

• network-monitor-requests-borders1-dark
• network-monitor-requests-borders1-light
• network-monitor-requests-borders2-dark
• network-monitor-requests-borders2-light
• network-monitor-messages-borders-dark
• network-monitor-messages-borders-light

What I did:

• Border color: I'm using our standard --theme-splitter-color in the headers, but in the table body I'm using a custom variable that is a bit more subtle in the light theme and identical to --theme-splitter-color in the dark theme (because the dark theme splitter color is already very subtle).
• Padding: our current padding is 4px of padding-left (total space between two columns = 4px). I used padding-left: 5px; padding-right: 4px (total space between two columns = 10px with the border), which felt generous and balanced enough.
• Borders are hidden (transparent) for hovered and selected rows. I felt it looked cleaner with the light blue/dark blue backgrounds, and we barely notice it (it's kind of like those visual illusions where our brains fill in the blanks). The borders for the top and bottom rows already suggest the table structure.
• For cached requests, I moved away from td { opacity: 0.7 } because it altered the border color as well. So now cached requests use our standard medium gray text color (the one we use for code comments), and only icons use opacity: 0.7.

[fvsch]

@violasong @digitarald Patch is in good shape and accepted. You can use the screenshots in the previous comment for the UI review.

[digitarald]

@fvsch thanks for working on this and the code polish on top of it! I added my LGTM to the patch.

[violasong]

LGTM as well - thanks!

[fvsch]

Landed in the latest Nightly.