1589961 - Request blocking - align list style with XHR Breakpoints style

Status: VERIFIED FIXED

(DevTools :: Netmonitor, enhancement)

Description

[Florens Verschelde :fvsch]

The spacing in Request blocking is a bit random, we have 26px rows and a bunch of styles like position: relative; bottom: 1px; on checkboxes and some margin-top: 2px on some elements to fake vertical alignment.

The toolbar's bottom border is also hidden because the toolbar ends up being 27px tall but the content is overlaid on top of it and positioned with top: 26px, effectively hiding the border.

My suggestion would be to:

1. Use Flexbox for vertical alignment instead of optical corrections with relative positioning and margin-top.
2. For the request list, adopt the style used in XHR Breakpoints (which implements a design spec by Jaril).

Comment 1

[Florens Verschelde :fvsch]

Other visual polish bugs we could include in a fix:

• Bug 1584960
• Bug 1585621

Comment 2

[Florens Verschelde :fvsch]

Attachment: Bug 1589961 - Improve UI alignment in Request Blocking pane, align with XHR Breakpoints style; r=Honza

Comment 3

[Florens Verschelde :fvsch]

Attachment: request-blocking-spacing-fixes-part1.mov

Here's what it looks like in action.

• Rows are 20px tall.
• The Remove buttons' hitboxes are 20x20, and the visible part is 16x16 as before. Same design, but the hitbox is slightly larger and when you go from button to button vertically there is only one visual change instead of 3 (which makes the UI look jittery or brittle).
• When you double-click to edit a URL, the next rows don't move (the current code is trying to do that but there is a 1px or 2px jump).

Comment 4

[Florens Verschelde :fvsch]

Attachment: request-blocking-spacing-fixes-part2.mov

Second demo, just making sure the scrolling experience is alright.

Since I chose to add a bottom border to the New URL form to make it stand out (bug 1585621), the result when scrolling down is not perfect. Ideally when the container scrolls, we should remove the bottom border, but the ways to do that are maybe a bit hacky or rely on JS so I thought I'd leave it like this for now.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f382b51132cc
Improve UI alignment in Request Blocking pane, align with XHR Breakpoints style; r=Honza

Comment 7

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/f382b51132cc

Comment 8

[Cristian Fogel [:cfogel]]

Verified with 72.0a1 (2019-10-22).
Closing 1584960 as well, since it seems cleaner like this.

Comment 9

[:Harald Kirschner :digitarald]

Comment on attachment 9102831 [details]
Bug 1589961 - Improve UI alignment in Request Blocking pane, align with XHR Breakpoints style; r=Honza

Beta/Release Uplift Approval Request

• User impact if declined: Incorrectly rendered buttons (bug 1590343) would make a new tool look half-baked.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Only adjusted CSS alignment similar to other panels.
• String changes made/needed:

Comment 11

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9102831 [details]
Bug 1589961 - Improve UI alignment in Request Blocking pane, align with XHR Breakpoints style; r=Honza

Low risk polish bug in devtools, verified as fixed on Nightly by QA, uplift approved for 71 beta 4, thanks.

Comment 12

[Oana Pop-Rus]

https://hg.mozilla.org/releases/mozilla-beta/rev/650d0d894300

Comment 13

[Cristian Fogel [:cfogel]]

Verified with 71.0b4 on macOS 10.13, Windows 10, Ubuntu 16.04.