Page MenuHomePhabricator

[GOAL] Move template override styles from Minerva to WikimediaMessages and allow site editors more control
Closed, ResolvedPublic0 Estimated Story Points

Description

NOTE: This task may need breaking down into multiple tickets.

Minerva has various styles which improve user generated content on Wikimedia projects on mobile devices. It was recently expanded to improve display of night mode. These styles can currently be disabled by projects by wgMinervaApplyKnownTemplateHacks. The styles themselves live here: https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/hacks.less

We want to eventually apply these changes to Vector 2022 as we are running up against these same issues now in the Vector 2022 skin. Minerva is no longer a good fit for these.

Sequence of tasks

  • [Sprint 6] T360386: We will create a new module inside WikimediaMessages
  • [Sprint 6] All styles in Minerva files called hacks.less will be moved to WikimediaMessages. As part of this task we will review if any styles inside this module are needed. Any styles that are no longer relevant will not be upstreamed to WikimediaMessages.
  • [Sprint 6] We will remove any styles in hacks.less that are no longer relevant: T360387
  • [Sprint 1] T360388: We will upstream any styles in hacks.less that are useful to desktop too.
  • [Sprint 1] We will migrate Minerva to use the new module. This will involve a configuration change that disables $wgMinervaApplyKnownTemplateHacks and adds minerva to WikimediaStylesSkins.
  • [Sprint 2] We will enable the module to the Vector 2022 skin.
  • [Sprint 2] We will remove wgMinervaApplyKnownTemplateHacks and associated code.
  • [Sprint 2] We will notify communities that they can cherry pick the styles they want by modifying a MediaWiki message. >>> Done in T363932

Sign off

We hope that we can use the night mode project to create inertia for projects to define these styles locally instead of relying on this stylesheet. Create a task to explore if communities want this and what we could do instead.

For example the English Wikipedia created a gadget for Timeless based on these styles, but none for Minerva?
https://en.wikipedia.org/wiki/MediaWiki:Gadget-responsiveContentBaseTimeless.css

Event Timeline

I'm happy to discuss specifics about these blocks, because some of them do strike me as hacks, some of them strike me as, uh, 'featureful' hacks, and some of them as 'why do you have this in here and should be ditched totally'. And there's probably one or two that are in the 'you probably still want this'. That other task is the one I've been meaning to file/discuss, so feel free and I can give feedback.

@Izno totally! I want these conversations! In particular I'd be keen to understand why English Wikipedia hasn't disabled wgMinervaApplyKnownTemplateHacks and copied the ones that matter across to local definitions.

I think right now, the problem we have with non-English Wikipedia projects is some of them don't have any template editors (or very few) so we want to give them as much time they need to transition at their leisure.

Izno renamed this task from Move template override styles from Minerva WikimediaMessages to Move template override styles from Minerva to WikimediaMessages.Feb 21 2024, 1:35 AM

I made T358078: Community discussion about hacks.less for

We hope that we can use the night mode project to create inertia for projects to define these styles locally instead of relying on this stylesheet. Create a task to explore if communities want this and what we could do instead.

Since it said to do that.

Was asked to comment: in an ideal world there should be a finer onwiki config on what kind of hacks are and are not needed. While transferring all the hacks to onwiki TS pages is a doable goal, it’s hard to do it right in every single aspect of those hacks at once. Which is why it is not feasible to remove the variable. The lack of an ability to make render-blocking CSS on mobile is also an issue.

The lack of an ability to make render-blocking CSS on mobile is also an issue.

This is a common misconception. You can ship and are encouraged to ship CSS on mobile via gadgets. Example: NightMode gadget on https://en.wikivoyage.org/wiki/MediaWiki:Gadgets-definition
(The benefit of the gadgets is they are easier for us to understand/limit to specific pages that need them)

Jdlrobson triaged this task as Medium priority.Feb 21 2024, 11:56 PM

Change 1007990 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/WikimediaMessages@master] POC: Introduce SiteAdminHelper to allow site admins to cherry pick styles

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

Jdlrobson renamed this task from Move template override styles from Minerva to WikimediaMessages to Move template override styles from Minerva to WikimediaMessages and allow site editors more control.Mar 7 2024, 4:41 PM
ovasileva raised the priority of this task from Medium to High.Mar 7 2024, 5:06 PM
ovasileva subscribed.

Questions:

  • How will the migration process from Minerva to WikimediaMessages be managed?
  • What guidelines can be provided to communities for effectively cherry-picking styles?
  • Is there specific consideration or limitation when applying this module to the Vector 2022 skin?
Jdlrobson renamed this task from Move template override styles from Minerva to WikimediaMessages and allow site editors more control to [GOAL] Move template override styles from Minerva to WikimediaMessages and allow site editors more control.Mar 18 2024, 11:20 PM
Jdlrobson updated the task description. (Show Details)

How will the migration process from Minerva to WikimediaMessages be managed?

@Mabualruz I've added a sequencing section to describe the work involved here.

What guidelines can be provided to communities for effectively cherry-picking styles?

This can be provided later on in the sequencing, but for now, we need to provide the functionality as described in T360386.

Is there specific consideration or limitation when applying this module to the Vector 2022 skin?

This will be handled in " We will enable the module to the Vector 2022 skin." (ticket to be created after completing previous tasks)

Change #1013408 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Clean up page issues code

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

Change #1013408 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] Clean up page issues code

Reason:

I was mistaken.. these rules likely do need to be upstreamed to WIkimediaMessages.

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

Would be great to develop https://ru.wikipedia.org/wiki/Template:Ambox styling that doesn’t look bad and works with the current MobileFrontend hacks in some manner. https://en.wikipedia.org/wiki/Module:Message_box/ambox.css looks very ugly and hacky, especially with ‘Page issues’ menu added in. (This is the last blocker to TemplateStyles conversion of these templates I am currently doing in Russian Wikipedia.) See the current style in https://en.m.wikipedia.org/wiki/Crocus_City_Hall_attack

I can't see ambox in https://en.m.wikipedia.org/wiki/Crocus_City_Hall_attack ?

@stjn what specifically do you need? Could you create a ticket expressing what you want/need and I'll make sure we take a look.

FWIW https://ru.m.wikipedia.org/wiki/Хроматография looks good to me so not sure exactly what you mean by "doesn't look bad"

Screenshot 2024-04-02 at 5.02.28 PM.png (670×2 px, 146 KB)

See for example in https://en.m.wikipedia.org/?oldid=1215029134

FWIW https://ru.m.wikipedia.org/wiki/Хроматография looks good to me so not sure exactly what you mean by "doesn't look bad"

This is because I added this styling in Russian Wikipedia: https://ru.wikipedia.org/wiki/Модуль:Message_box/ambox.css#L-11

tl;dr if ambox hack is here to stay, we need a way to customise its styling that doesn’t involve overriding !importants or fighting with the styles provided by Minerva.

@sjtn Ah gotcha! You will be able to disable the styles very soon. After T361589 you'll be able to modify MediaWiki:wikimedia-styles-exclude and set it to ambox to disable ambox styling and rely only on https://ru.wikipedia.org/wiki/Модуль:Message_box/ambox.css#L-11. Does that cover what you need?

(You can experiment with https://ru.wikipedia.beta.wmflabs.org/wiki/MediaWiki:Wikimedia-styles-exclude to see how it impacts https://ru.wikipedia.beta.wmflabs.org/w/load.php?modules=ext.wikimediamessages.styles in the mean time)

Jdlrobson triaged this task as High priority.
Jdlrobson updated the task description. (Show Details)
Jdlrobson set the point value for this task to 0.

This task will be completed during this sprint.

Jdlrobson updated the task description. (Show Details)