1619809 - UI glitches in Preferences tab subdialogs

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Alessandro Castellani [:aleca]]

Attachment: font-dialog.png

I stumbled upon a couple of UI glitches in the subdialogs of the Preferences tab on daily.

The Fonts & Encoding subdialog (General > Language & Appereance > Fonts & Colors > Advanced) shows a blown out font size in the first row, and the content doesn't fit in the constraints of the dialog.

The other issue is related to the :focus effect on a richlistbox noticeable in the Daily Language Settings sudialog (General > Language & Appereance > Language > Set Alternatives...). This issue presents itself in other dialogs, but is not always consistent.

Comment 1

[Alessandro Castellani [:aleca]]

Attachment: richilistbox-focus.png

Comment 2

[Richard Marti (:Paenglab)]

Attachment: 1619809-fonts-h2-to-legend.patch

(In reply to Alessandro Castellani (:aleca) from comment #0)

I stumbled upon a couple of UI glitches in the subdialogs of the Preferences tab on daily.

The Fonts & Encoding subdialog (General > Language & Appereance > Fonts & Colors > Advanced) shows a blown out font size in the first row, and the content doesn't fit in the constraints of the dialog.

I fixed the font size. This was missed in bug 1612776.

I don't see the dialog size issue. Maybe this is again a scaling issue.

The other issue is related to the :focus effect on a richlistbox noticeable in the Daily Language Settings sudialog (General > Language & Appereance > Language > Set Alternatives...). This issue presents itself in other dialogs, but is not always consistent.

On Windows, the richlistboxes in the dialogs don't have the focus border. This happens on all richlistboxes in dialogs on Linux and Mac.

Comment 3

[Alessandro Castellani [:aleca]]

Attachment: font-subdialog.gif

Comment 4

[Alessandro Castellani [:aleca]]

Comment on attachment 9130765 [details] [diff] [review]
1619809-fonts-h2-to-legend.patch

Review of attachment 9130765 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks for jumping on this so quickly, but it doesn't completely solve the problem.
The `legend` tag reduces the font size but it's not aligned with the content underneath. Is it possible?

I attached a screen record to show you what happens to the dialog.
It seems like the width of the dialog is calculated before the list of available fonts fills up the menulists, and that causes the content to grow.

Comment 5

[Richard Marti (:Paenglab)]

Have you tried to make the dialog wider then close it and re-open it?

About the aligning: My patch restores only the state pre bug 1612776.

This part is the title for the block below. Aligning it would make the dialog wider on some locales. German has "Schriftarten für". We could also go the FX way with the menulist below the label but this would make the dialog taller as it is already. Perhaps we should move the Font Control and the Text Encoding part into the main page. What do you think?

Comment 6

[Richard Marti (:Paenglab)]

Attachment: 1619809-fonts-h2-to-legend.patch

Alessandro, can you try this patch if it solves the width issue? I'm using in this patch the FX grid implementation.

Comment 7

[Richard Marti (:Paenglab)]

Attachment: 1619809-fonts-h2-to-legend.patch

Used the FX display: grid approach and aligned the legend row with the block below.

Comment 8

[Alessandro Castellani [:aleca]]

Comment on attachment 9130900 [details] [diff] [review]
1619809-fonts-h2-to-legend.patch

Review of attachment 9130900 [details] [diff] [review]:
-----------------------------------------------------------------

This is perfect, thank you so much!
Can you update the commit message to:
"Bug 1619809 - Use display: grid; and replace <html:h2> with <html:legend> in fonts.xhtml. r=aleca"

Comment 9

[Richard Marti (:Paenglab)]

Attachment: 1619809-fonts-h2-to-legend.patch

Updated commit message.

Comment 10

[Magnus Melin [:mkmelin]]

Fixed a linting error, will land soon.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/65c64393ba6d
Use display: grid; and replace <html:h2> with <html:legend> in fonts.xhtml. r=aleca