Badges are not compatible with Vector 2022 when ULS is disabled due to assumption around margin
Open, Needs TriagePublic
Actions

Assigned To

None

Authored By

	Jdlrobson
	Jul 13 2021, 8:44 PM

Description

Steps to reproduce:

Open article with badges using vector2022 and safemode (e.g. https://en.wikipedia.org/w/index.php?title=The_Legend_of_Zelda:_Ocarina_of_Time&safemode=1&useskin=vector-2022)
Make sure "Use a compact language list, with languages relevant to you." preference is disabled

Screenshots:

Screen Shot 2021-07-13 at 1.43.24 PM.png (778×1 px, 504 KB)

What happens?

Badges are not visible.

What should have happened instead?

Badges appear next to language links.

See on old Vector:

Screen Shot 2021-07-13 at 1.40.31 PM.png (598×346 px, 40 KB)

Notes:

On new Vector the CSS applies but UL element has a margin of 0.
Instead of using :marker it might make sense to use a pseudo :before element to achieve the same, or explicitly setting a margin on elements where it is required to apply
there is a workaround (see T286612#7210250)

Acceptance criteria:

We understand the problem that leads to this issue.
The problem is solved (or if solving the problem is out of scope, then please create a follow-up task, so we can discuss it).

Related Objects

Mentioned Here: T319690: ULS button shows empty popup when no languages (if compact language selector setting is off)
T310259: Add option to edit interlanguage links as an option on the language selector

Event Timeline

Jdlrobson created this task.Jul 13 2021, 8:44 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 13 2021, 8:44 PM

FYI I've added a temporary workaround to French Wikipedia: https://fr.wikipedia.org/w/index.php?title=MediaWiki%3AVector.css&type=revision&diff=184622499&oldid=183232069

Screen Shot 2021-07-13 at 1.48.25 PM.png (1×798 px, 285 KB)

Screen Shot 2021-07-13 at 1.52.33 PM.png (934×990 px, 127 KB)

Jdlrobson added a subscriber: Tacsipacsi.Jul 13 2021, 8:52 PM

@hoo is this something you could help me get prioritized?

Is the above workaround still needed?

It seems the <ul> is not (or no longer?) displayed directly, but used as source data to generate the widget that is actually displayed.

Jdlrobson added a project: Wikidata-Campsite.Feb 16 2022, 6:00 PM

Maintenance_bot added a project: Wikidata.Feb 16 2022, 6:45 PM

hoo edited projects, added Wikidata-Campsite (Team A Hearth 🏰🔥); removed Wikidata-Campsite.Feb 16 2022, 7:06 PM

hoo added a subscriber: Manuel.

Manuel edited projects, added Wikidata-Campsite; removed Wikidata-Campsite (Team A Hearth 🏰🔥).Aug 2 2022, 9:46 AM

Manuel moved this task from Incoming to Needs Wikidata PM Work on the Wikidata-Campsite board.Aug 3 2022, 7:51 AM

In T286612#7715416, @Od1n wrote:

Is the above workaround still needed?

It seems the <ul> is not (or no longer?) displayed directly, but used as source data to generate the widget that is actually displayed.

Many editors have ULS disabled, since it previously powered compact links, which wasn’t everyone’s cup of tea. So the answer is yes.

Jdlrobson renamed this task from Badges are not compatible with new Vector due to assumption around margin to Badges are not compatible with Vector 2022 due to assumption around margin.Oct 5 2022, 5:48 PM

Jdlrobson merged a task: T319002: WikimediaBadges should support Vector 2022.

Jdlrobson added a subscriber: TheDJ.

Manuel updated the task description. (Show Details)Oct 25 2022, 10:39 AM

Manuel updated the task description. (Show Details)

This seems fixed already (I checked on fr and vi, test looks similar on the first glance).

Is there still something to do here?
If yes, what would be the practical steps for me to test/reproduce this?

Manuel updated the task description. (Show Details)Oct 25 2022, 10:47 AM

In T286612#8341113, @Manuel wrote:

This seems fixed already (I checked on fr and vi, test looks similar on the first glance).

Is there still something to do here?
If yes, what would be the practical steps for me to test/reproduce this?

https://fr.wikipedia.org/wiki/MediaWiki:Vector.css#L-116 has a workaround for this bug. Vietnamese Wikipedia probably has one too. Use ?safemode=1 to actually test how it looks. For example, https://ru.wikipedia.org/wiki/Россия?useskin=vector-2022&safemode=1 shows the bug still present.

Jdlrobson renamed this task from Badges are not compatible with Vector 2022 due to assumption around margin to Badges are not compatible with Vector 2022 when ULS is disabled due to assumption around margin.Oct 25 2022, 3:40 PM

Jdlrobson updated the task description. (Show Details)

Thank you @stjn for the clarification!

Manuel updated the task description. (Show Details)Oct 26 2022, 12:02 PM

Manuel moved this task from Needs Wikidata PM Work to Ready to estimate on the Wikidata-Campsite board.

Manuel added a project: Wikidata Dev Team.Oct 28 2022, 3:08 PM

Manuel moved this task from Incoming to Product Backlog on the Wikidata Dev Team board.

Lucas_Werkmeister_WMDE updated the task description. (Show Details)Nov 1 2022, 10:14 AM

Timeboxed for 0.5 days.

Michael moved this task from Parents/Waiting to Todo/Backlog on the Wikidata Dev Team (Sprint-∞) board.Nov 7 2022, 3:35 PM

Manuel moved this task from Ready to estimate to Doing on the Wikidata-Campsite board.Nov 7 2022, 6:04 PM

@Jdlrobson: Before the Wikidata development team gets started on this, could you please advise if it still makes sense to work on this in the context of the planned changes (e.g. T310259)?

I don’t see any connection between this and T310259. T310259 touches the ULS-based language selector, this task is about the much more usable non-ULS-based one.

Thank you, @Tacsipacsi, I see that now! A word from @Jdlrobson would still help me to understand if this is still needed for some WMF purposes or not.

@Tacsipacsi I believe the maintainers have now made the decision to disable the non-ULS based dropdown. Please see this conversation T319690#8358870.

I believe because of that decision, this bug now only applies to the non-JavaScript version of the page (and presumably if a gadget is created to workaround the decision in T319690#8358870). The language menu also appears in some projects where the language button is not shown e.g. commons.wikimedia.org (i'm not sure if these sites are a problem as I'm not too familiar with the badge functionality).

That said I think the existing use of :marker is problematic is not compatible with how we are building out menus in skins and should be considered technical debt. It may break in other skins (particularly Vector) as the skin system evolves if we don't want this feature to degrade over time.

Thank you for your insight, @Jdlrobson!

Manuel changed the task status from Stalled to Open.Nov 15 2022, 8:04 AM

Manuel added a project: Technical-Debt.

	F34550202: Screen Shot 2021-07-13 at 1.52.33 PM.png
	Jul 13 2021, 8:52 PM

	F34550195: Screen Shot 2021-07-13 at 1.48.25 PM.png
	Jul 13 2021, 8:48 PM

	F34550187: Screen Shot 2021-07-13 at 1.40.31 PM.png
	Jul 13 2021, 8:44 PM

	F34550190: Screen Shot 2021-07-13 at 1.43.24 PM.png
	Jul 13 2021, 8:44 PM

Badges are not compatible with Vector 2022 when ULS is disabled due to assumption around marginOpen, Needs TriagePublicActions

Description

Related Objects

Event Timeline

Badges are not compatible with Vector 2022 when ULS is disabled due to assumption around margin
Open, Needs TriagePublic
Actions