1560227 - Bottom padding of main content is ignored in about:debugging pages

Status: RESOLVED FIXED

(DevTools :: about:debugging, defect, P3)

Description

[Florens Verschelde :fvsch]

It's probably not a very common use case, but it would be great to better support users who happened to have resized their Firefox window to a small size. For instance, I sometimes use a 13" laptop with Firefox on half the screen and another app (like a code editor) on the other half, so when devtools panels and pages respond well to that it's a nice plus.

For comparison, about:preferences works down to a viewport width of 710px.

The good news is that the way about:preferences is built with CSS variables should make it really easy to tweak those variables on smaller viewports.

Comment 1

[Florens Verschelde :fvsch]

Attachment: Bug 1560227 - Fix clipped bottom padding in aboutdebugging; r=ladybenko

Comment 2

[Florens Verschelde :fvsch]

Attachment: about-debugging-content-padding-bottom.png

In my patch I've also included a fix for two spacing issues:

• The content area's padding-bottom was ignored due to a Gecko bug with padding-bottom in scrolling containers (see the attached screenshot, showing the content area scrolled to the very bottom; the padding-bottom is clipped, it's a 20 year old bug in Gecko :P)
• The margin between the cards on the "Set up" page and the "This [Firefox/Nightly]" page were inconsistent (16px and 24px; I harmonized on 16px).

Comment 3

[Florens Verschelde :fvsch]

At the suggestion of :ladybenko, let's defer the responsive design considerations to bug 1507415, and repurpose this bug for fixing the padding and vertical rhythm issues.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9d7bb1b8ece5
Fix clipped bottom padding in aboutdebugging; r=ladybenko

Comment 5

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/9d7bb1b8ece5