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.

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

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?

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

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 ?

Also simplify some padding values in button.css

(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!

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

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