[Firefox 73] Infusing a RadioOptionWidget changes first-child alignment
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	• Niedzielski
	Feb 20 2020, 11:52 PM

Description

Repro steps

Login and visit Special:Preferences with JavaScript enabled on Firefox v73.0 for Linux and a window width >= 1053px in Vector.
Open DevTools and infuse the skin group: OO.ui.infuse( $( '#mw-input-wpskin' ) ).

Notes

The issue does not occur in Chrome.
The issue does not occur when margin-top of .oo-ui-radioOptionWidget:first-child is non-negative. This rule style was set to -4 in the Wikimedia UI theme in this patch but not the Apex theme so the issue is not reproducible in Monobook.
Thanks to @Mooeypoo for all the detailed help ^^^

Details

Subject	Repo	Branch	Lines +/-
[Special:Preferences] [PHP] Add skin version user preference and configs	mediawiki/skins/Vector	master	+569 -4
[CSS] [Special:Preferences] Remove redundant OOUI override	mediawiki/core	master	+0 -5
Update OOUI to v0.37.0	mediawiki/core	master	+144 -91
Avoid wrapping problems with negative margins	oojs/ui	master	+4 -6

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved	Goal	ovasileva	T242131 [GOAL] Deploy new header to at least one test wiki
Resolved		Jdlrobson	T240856 [EPIC] New header for desktop improvements project
Resolved		ovasileva	T236176 [EPIC] Build opt-in/opt-out mechanism for desktop improvements project
Resolved		ovasileva	T242381 Add a Vector skin version preference
Resolved	BUG REPORT	matmarex	T245793 [Firefox 73] Infusing a RadioOptionWidget changes first-child alignment

Event Timeline

• Niedzielski created this task.Feb 20 2020, 11:52 PM

Confirmed; on Firefox v73, even on not too large of a screen.

@Volker_E since this is your patch, do you remember what exactly was fixed? While it's true that it only seems to break in Firefox 73 (no idea why, still checking) we also have the demo that intentionally nullifies that margin.

Also, the infusion in this case switches up the widget. The PHP one is a RadioSelectInputWidget with RadioInputWidget, and after infusion, they transform to RadioSelectWidget with RadioOptionWidget. This is a common thing we see in OOUI for the form elements, but it also means that the design between these two (with the LESS rules) is different as well, which seems to be what makes this only happen after infusion at all. We should unify the design of these two, shouldn't we? At least in the level of the margins, I'd imagine?

• Niedzielski mentioned this in T242381: Add a Vector skin version preference.Feb 21 2020, 12:45 AM

Aklapper added a project: Browser-Support-Firefox.Feb 21 2020, 8:01 AM

Change 566881 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@master] [Special:Preferences] [PHP] Add skin version user preference and configs

https://gerrit.wikimedia.org/r/566881

gerritbot added a project: Patch-For-Review.Feb 24 2020, 7:48 PM

This looks like the same issue as T225206: First bullet point of options misaligned under "Appearance" on Special:GlobalPreferences.

Firefox renders it like this because the "Skin" header element (<legend class="oo-ui-fieldsetLayout-header">) has float: left;, so the browser tries to flow the following content around it. Normally the content should be underneath the header so this wouldn't be necessary, but the margin-top: -4px rule which you identified forces it.

For the record, I believe Firefox's rendering is correct here, and Chrome's is incorrect. I also checked this on the Microsoft Edge browsers, and on the old Presto-based Opera, and they both render this the same as Firefox.

matmarex claimed this task.Feb 25 2020, 10:12 PM

Change 574878 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] Avoid wrapping problems with negative margins

https://gerrit.wikimedia.org/r/574878

Turns out the negative margin was just used to cancel out padding… We can do the same more simply by just setting the padding to zero. The result seems to be the same.

matmarex merged a task: T225206: First bullet point of options misaligned under "Appearance" on Special:GlobalPreferences.Feb 25 2020, 10:13 PM

matmarex added a project: MediaWiki-extensions-GlobalPreferences.

matmarex added subscribers: gopalakrishna_a, Reedy.

Restricted Application added a project: Community-Tech. · View Herald TranscriptFeb 25 2020, 10:14 PM

Looks good to me. Thank you for figuring it out, @matmarex !

Change 574878 merged by jenkins-bot:
[oojs/ui@master] Avoid wrapping problems with negative margins

https://gerrit.wikimedia.org/r/574878

Change 575031 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/core@master] [CSS] [Special:Preferences] Remove redundant OOUI override

https://gerrit.wikimedia.org/r/575031

Change 566881 merged by jenkins-bot:
[mediawiki/skins/Vector@master] [Special:Preferences] [PHP] Add skin version user preference and configs

https://gerrit.wikimedia.org/r/566881

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.22; 2020-03-03).Feb 26 2020, 9:00 PM

Volker_E triaged this task as Medium priority.Feb 27 2020, 2:01 AM

Volker_E moved this task from Backlog to OOUI-0.37.0 on the OOUI board.

Volker_E edited projects, added OOUI (OOUI-0.37.0); removed OOUI.

Change 575115 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.37.0

https://gerrit.wikimedia.org/r/575115

Change 575115 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.37.0

https://gerrit.wikimedia.org/r/575115

Change 575031 merged by jenkins-bot:
[mediawiki/core@master] [CSS] [Special:Preferences] Remove redundant OOUI override

https://gerrit.wikimedia.org/r/575031

Verified that it looks fine now, when manually infusing on Special:Preferences, and when using Special:GlobalPreferences (T225206).

matmarex mentioned this in T231718: Radio buttons on Preferences' "Appearance" tab shift to right after selecting "Set a local exception for this global preference".Jan 15 2021, 12:47 AM

matmarex merged a task: T231718: Radio buttons on Preferences' "Appearance" tab shift to right after selecting "Set a local exception for this global preference".

matmarex added subscribers: gh87, Tufor.

	F31624761: Screenshot_2020-02-20 Preferences - Wikipedia.png
	Feb 20 2020, 11:52 PM

	F31624762: Screenshot_2020-02-20 Preferences - Wikipedia(1).png
	Feb 20 2020, 11:52 PM

[Firefox 73] Infusing a RadioOptionWidget changes first-child alignmentClosed, ResolvedPublicBUG REPORTActions