1633994 - macOS - Preferences Close button for dialogs not properly centered in divs still

Status: VERIFIED FIXED

(Firefox :: Preferences, defect, P5)

Description

[Cristian Fogel, QA [:cfogel]]

Attachment: Screenshot 0002-04-29 at 09.51.04.png

Affected versions

• 76.0, 76.0b8, 77.0a1

Affected platforms

• macOS 10.15.3;

Steps to reproduce

1. Launch Firefox and access about:preferences#privacy
2. Search for Clear Data;
3. Click on the TAB key until the [x] close button is in focus;
4. Hover over the [x] close button;

Expected result

• elements are centered;

Actual result

• [x] close button is not centered in its container;

Regression range

• considering issue from 1521037 as "good" while checking:
• First bad: 2019-10-18
• Last good: 2019-10-17
• Pushlog: URL

Additional notes

• attached screenshot with the issue;
• on Windows 10, Ubuntu 18, this issue appears to not manifest.

Comment 1

[(Away until May 24) Jared Wein [:jaws] (please needinfo? me)]

This looks like a regression from bug 1589129. Itiel, can you investigate?

Comment 2

[Itiel]

Since in bug 1521037 the icon had equal padding on both sides, I think something somewhere is overriding this:
https://searchfox.org/mozilla-central/rev/7fd1c1c34923ece7ad8c822bee062dd0491d64dc/browser/themes/shared/preferences/preferences.inc.css#583
with a padding-inline-end but I'm not sure where and not sure if that's even correct, and I don't have a Mac to debug this.

I can create a patch to make the padding !important but not sure if that'll work because I'm just guessing here.
jaws, would you like me to do that?

Also, Cristian, I'm guessing this issue can be seen in every dialog in about:preferences and not just in the Clear Data dialog, correct?

Comment 3

[Cristian Fogel, QA [:cfogel]]

Yes, should have added at the info as well.
Could encounter this at the other dialogues as well.

Comment 4

[:Gijs (he/him)]

The issue appears to be that the .button-text child is still visible - it's 0x0, but has 3px + 2px inline margin (https://searchfox.org/mozilla-central/rev/3262e013550a0db7c1840a78a3878a929801fe40/toolkit/themes/osx/global/button.css#34-36 ), and the .button-icon which is 20x20px has 1px inline start margin ( from https://searchfox.org/mozilla-central/rev/3262e013550a0db7c1840a78a3878a929801fe40/toolkit/themes/osx/global/button.css#41 ).

Perhaps we should just override the inline margin to 0 in https://searchfox.org/mozilla-central/source/toolkit/themes/shared/close-icon.css#22 , and hide the text portion with display: none ?

Comment 5

[Itiel]

Attachment: Bug 1633994 - Fix focusring for close buttons in macOS r?gijs

Also simplify some padding values in button.css

Comment 6

[Itiel]

(In reply to :Gijs (he/him) from comment #4)

The issue appears to be that the .button-text child is still visible - it's 0x0, but has 3px + 2px inline margin (https://searchfox.org/mozilla-central/rev/3262e013550a0db7c1840a78a3878a929801fe40/toolkit/themes/osx/global/button.css#34-36 ), and the .button-icon which is 20x20px has 1px inline start margin ( from https://searchfox.org/mozilla-central/rev/3262e013550a0db7c1840a78a3878a929801fe40/toolkit/themes/osx/global/button.css#41 ).

Perhaps we should just override the inline margin to 0 in https://searchfox.org/mozilla-central/source/toolkit/themes/shared/close-icon.css#22 , and hide the text portion with display: none ?

Thanks!

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bfc0213871d5
Fix focusring for close buttons in macOS r=dao

Comment 8

[Bogdan Tara[:bogdan_tara | bogdant]]

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

Comment 9

[Cristian Fogel, QA [:cfogel]]

Verified with 81.0, altho a bit late; latest RC version has the focus-ring span over just the button.