1675389 - Off-center checkboxes on Phabricator if the native theme is disabled

Status: RESOLVED FIXED

(Core :: Widget, defect, P3)

Description

[Markus Stange [:mstange]]

When setting widget.disable-native-theme-for-content to true, the checkboxes on Phabricator no longer look vertically centered.

Reading bug 1617938, this is actually the very first item mentioned in the list there.

Comment 1

[Markus Stange [:mstange]]

Attachment: screenshot with native theme

Comment 2

[Markus Stange [:mstange]]

Attachment: screenshot with non-native (basic) theme

Comment 3

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

The severity field is not set for this bug.
:jimm, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Chris Peterson [:cpeterson]]

Tracking non-native theming bugs for Fission Beta milestone (M7).

Comment 5

[Stephen A Pohl [:spohl]]

(In reply to Markus Stange [:mstange] from comment #0)

When setting widget.disable-native-theme-for-content to true, the checkboxes on Phabricator no longer look vertically centered.

Reading bug 1617938, this is actually the very first item mentioned in the list there.

For clarity, the first item was specifically:

• The increase from 13px to 17px for checkboxes and radio buttons while sticking with vertical-align: baseline harms the layout of the vast majority of uses of checkboxes. I’m immediately seeing all kinds of ugliness all over the place, in addon preference pages, in websites, everywhere that doesn’t basically replace checkboxes.

Emilio, do you have a suggestion how we should be addressing this? My initial instinct was to move the drawing rect down vertically (in the y axis) by 2px. But this might conflict with the expectations of vertical-align: baseline. On the other hand, looking at the screenshot from comment 1, it looks at least on macOS that the native theme made the checkboxes align with the top of capital letters and already draws below what I believe to be the "baseline".

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: test-case

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Right now the minimum size is 14 (while usual is 13). On my Linux machine, native theme sizes the scrollbar at 16px. On Windows, at about 12.7px.

It's not quite clear what you're asking me (sorry, slow today, so bear with me :))

If you're asking me about the non-native theme today, given the issue reproduces on all these platforms, so I think we shouldn't worry too much about this unless I'm missing something obvious.

If you're asking me about whether we could change the size back to 17px and maybe tweak the painting / layout code to center a bit more... I'd say that's a bit risky, but maybe doable? Depends on the specifics.

If we want to tweak the vertical position of checkboxes the right place is nsCheckboxRadioFrame code rather than the widget painting code, probably...

Looking at nsCheckboxRadioFrame::GetLogicalBaseline, it seems like we always return an intrinsic content size of 9, and assume a border size of 2 on Mac at least... So the baseline is a bit lower on mac because of that.

So returning a widget border in the native theme will change the effective baseline we use.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1675389 - Tweak the baseline of checkbox/radio buttons on the non-native theme. r=mstange,spohl

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9206ad22e0e5
Tweak the baseline of checkbox/radio buttons on the non-native theme. r=spohl

Comment 10

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/9206ad22e0e5