1884672 - Font styling changes to about:config warning page's header make the uneven spacing between lines look increasingly jarring

Status: NEW

(Toolkit :: Themes, defect, P2)

Description

[aoia7rz7l]

Tested on 115.8.0esr, 123.0.1, and Nightly 125.0a1.

Not sure how I should put this but I think my eyes try to focus on somewhere along the "Changing..." line whenever I open the about:config warning page, and recent changes to the header is making me increasingly aware of the uneven spacing between the three lines. I believe these changes are

Last good revision: 0c6d0f8aa20d250dcd1a3169f8926c33b95851f8
First bad revision: 77fcb77e6acc925c7607c4bf3f7e84ca6962ed9e
Pushlog: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=0c6d0f8aa20d250dcd1a3169f8926c33b95851f8&tochange=77fcb77e6acc925c7607c4bf3f7e84ca6962ed9e

and

Last good revision: 7b309c3e6627f8e663b6cfa0f5954632eedc9a4c
First bad revision: b69dab8abba58f9c27a9881a77d14451a122ae0f
Pushlog: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=7b309c3e6627f8e663b6cfa0f5954632eedc9a4c&tochange=b69dab8abba58f9c27a9881a77d14451a122ae0f

Just wanted to check if this was intentional or to be expected.

Comment 1

[Mark Striemer [:mstriemer]]

What OS are you on? This doesn't appear like a regression on macOS since the text is in the same place--although it could be more noticeable that it's in a weird place.

Quite possible that there are different outcomes on different platforms though as the font will be different

Comment 2

[aoia7rz7l]

(In reply to Mark Striemer [:mstriemer] from comment #1)

What OS are you on?

Windows 7/10 and Linux.

This doesn't appear like a regression on macOS since the text is in the same place--although it could be more noticeable that it's in a weird place.

I do agree that this is more of a perception thing. This is more of a "question" bug anyway, feel free to close as INVALID/WONTFIX.

Comment 3

[Jules Simplicio [:jules]]

Hey there,
I agree that perhaps there is too much of a gap between the body of text and the heading. I think the recent work on the bolding of headings made that stand out a bit more, but as you mentioned, this feels like a perception issue.

We could remove the extra padding on that heading. I believe it's currently using the default margin from the user agent stylesheet plus some padding coming from a .title-text class. Or we could make sure it relies on the exact spacing we want, and get rid of the existing default margin as well.

This isn't a regression of the work on bolding the headings nor a defect per se, though, so I'm removing those regressions. Either way, I am happy to open up a patch to address this visual gap.

Comment 4

[aoia7rz7l]

Looks like this was caused by the removal of margin: 0; and margin-bottom: .5em; for html|h1 in common-shared.css in bug 1838939 after all. When I disabled those rules in ESR115's devtools, the spacing in about:config's warning page looked pretty much identical to that in 123.0.1 and 125.0a1.

Removing padding-bottom: 0.4em; from .title-text is probably not a good idea because this seems to crop the warning icon.

Comment 5

[Alex Cornestean]

Tested on the latest Nightly (125.0a1/20240312214346), Beta (124.0/20240311145044), Release (123.0.1/20240304104836) and ESR (115.8.0esr/20240212204114) under Windows 10 x64 and Ubuntu 22.04 LTS and observed the following:

Windows:

• on Nightly and Beta, the heading is bolded and the strings have the same spacing
• on Release the heading is not bolded, but the strings have the same spacing as on Nightly and Beta
• on ESR the heading is also not bolded but the string spacing is tighter than on the above versions

Linux:

• on Nightly and Beta, the heading is bolded and the strings have the same spacing
• on Release, the heading is not bolded but is still more emphasized compared to ESR and the strings are spaced further apart as compared to Nightly or Beta
• on ESR the heading is also not bolded but the string spacing is a lot tighter than on the above versions

See the attached screenshots for more details.

So, there is clearly a difference between the different browser versions. Based on https://bugzilla.mozilla.org/show_bug.cgi?id=1875396, the changes will soon be in Release and that leads me to think that this report is mainly about ESR which I will mark as affected.
However, in case of error, feel free to mark the affected versions accordingly.

Comment 6

[Alex Cornestean]

Attachment: 1_linux_nightly.png

Comment 7

[Alex Cornestean]

Attachment: 2_linux_beta.png

Comment 8

[Alex Cornestean]

Attachment: 3_linux_release.png

Comment 9

[Alex Cornestean]

Attachment: 4_linux_esr.png

Comment 10

[Alex Cornestean]

Attachment: 1_win_nightly.png

Comment 11

[Alex Cornestean]

Attachment: 2_win_beta.png

Comment 12

[Alex Cornestean]

Attachment: 3_win_release.png

Comment 13

[Alex Cornestean]

Attachment: 4_win_esr.png

Comment 14

[aoia7rz7l]

Sorry for the ambiguity but it's the other way round (firefox-esr115 is unaffected, the rest are).

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

This bug has been marked as a regression. Setting status flag for Nightly to affected.

Comment 16

[Jules Simplicio [:jules]]

Hey again, sorry for the delay replying, I was out on vacation.
Thank you for the reply about the margin removal there; I had done that work a while back and must not have noticed info pages got affected.

Since this is technically a regression I can bring the margin logic back. If I bring back this margin though, the difference looks quite minute to me so perhaps that's why I never noticed a difference to begin with. Ultimately, I don't think bringing the margin logic back actually solves the uneven spacing here, but would love to hear what you think, as this could all be subjective.

In general, since the main issue is uneven spacing in this info page, I think we need to re-think the layout of info pages. On the older layout that we can still see in ESR, as you mentioned, the heading uses a combination of margin and padding. I recommend we templatize the layout of info pages, and standardize how we handle spacing between all of the elements included, potentially just relying on gap and/or avoiding stacking margins and paddings. This will also help the different info pages implementations we have today and the lack of a standard.

FWIW, I also feel the way the warning icon is implemented in about:config and the bad cert pages can be improved with flexbox. We could avoid the whole background image relying on a padding that if it gets tweaked will cut the icon.

Comment 17

[aoia7rz7l]

(In reply to Jules Simplicio [:jules] from comment #16)

If I bring back this margin though, the difference looks quite minute to me so perhaps that's why I never noticed a difference to begin with.

My viewport is usually much smaller because I am usually inside a non-maximized RFP window, perhaps that (and flipping between different versions of Firefox while testing) might have contributed to me noticing these changes.

I also feel like the spacing difference is less noticeable when in dark themes.

Ultimately, I don't think bringing the margin logic back actually solves the uneven spacing here, but would love to hear what you think, as this could all be subjective.

In general, since the main issue is uneven spacing in this info page,

I still feel like this is more of a perception issue. FWIW, the warning in the old XUL/XHTML version of about:config (available by default in FF70 and before) is probably even more "uneven" with its two lines of description, and yet I don't recall feeling that it looked unnatural to me.

And if I replace the text in the current warning page with those from the old one ("This might void your warranty!" and "Changing these advanced settings can be harmful to the stability, security, and performance of this application. You should only continue if you are sure of what you are doing."), I am not even noticing the spacing anymore and it just looks like... normal markdown? (Not that I am advocating for a string change here)