Page MenuHomePhabricator

Create a WikimediaMessages module for sharing styles between Vector 2022 and Minerva
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

Minerva ships various styles that improve templates for mobile-devices and the night mode theme. We want to start using these on Vector 2022.

User story

As an interface admin I want to benefit from styles shipped by the WMF to reduce the amount of work I have to do to maintain my wiki.

Requirements

  • A new ResourceLoader module exists in WikimediaMessages.
  • The module should be associated with a dynamic module SiteAdminHelperModule.php that is inspired by SkinModule in core and allows site admins to disable style packages via a MediaWiki message. This will be done by the message wikimedia-styles-exclude which by default is empty but accepts a pipe separated list of feature names to disable.
  • The initial version should contain all the styles that are currently enabled in Minerva.
  • The module can be added to any skin via a configuration flag.
  • By default the module is not added to any skin (this allows us to migrate this bit by bit) e.g. mw.loader.getState('ext.wikimediamessages.styles') === 'registered'

QA steps

To be tested by a developer.

  • No visual changes expected on Pixel.
  • Initially the module should not be loaded by any skins (deployment will come later)
  • If I edit MediaWiki:wikimedia-styles-exclude and change it to "theme-night|theme-night-mainpage" it should disable all the styles.

In beta

In production:

Communication criteria - does this need an announcement or discussion?

Not yet.

QA Results - Prod

ACStatusDetails
1T360386#9702676
2T360386#9702676

Event Timeline

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

Looks like Jon already has a patch up that accomplishes this - moving to code review but keeping assigned to me as I'll make sure it's driven to resolution while he's out

Mabualruz updated Other Assignee, removed: Mabualruz.
Mabualruz added a subscriber: SToyofuku-WMF.

I am reviewing it, seems ready to merge, just going to try some edge case testing try check styles loading and pixel results. Will probably merge it tomorrow

Mabualruz updated Other Assignee, added: Jdrewniak.

Change #1007990 merged by jenkins-bot:

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

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

I'm calling this a pass. Wasn't able to test on pixel due to issues with the disk space, but I confirmed the new module is not being loaded by either skin, and was able to get MediaWiki:wikimedia-styles-exclude working (although with a bit of difficulty because of the cache). Verified the css is not empty on beta, and it won't reach prod until next week so passing this to signoff

Feel free to move/reassign to me if this doesn't feel like sufficient QA though!

Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: confirm https://en.m.wikipedia.org/w/load.php?modules=ext.wikimediamessages.styles generates a non-empty CSS file

MinervaVector 2022
screenshot 191.png (875×1 px, 474 KB)
screenshot 192.png (897×1 px, 474 KB)

✅ AC2: and is not loaded on an article page. To do this open the sources tab in chrome dev tools then hit cmd+P and search for ext.wikimediamessages.styles. There should not search results.

MinervaVector 2022
this shows a result, but it's just a quirk of the search, you can see it's highlighting the "e"
screenshot 194.png (1×1 px, 364 KB)
screenshot 193.png (1×1 px, 254 KB)

This change should have been communicated. I was very surprised to see such drastic changes to primarily the display of infoboxes on desktop.

We need to consult our own communities first about such a drastic change to primarily the infoboxes, which ignore the community consensus about width. The Dutch Wikipedia currently has the default thumbnail size linked to the size of infoboxes, so a solution should be found for that as well if we want to follow the general Wikimedia styles. Currently I had to disable the infobox part of this change which is not good for our mobile readers, as there is no way to only opt out on desktop.

This change should have been communicated.

Hey @Sjoerddebruin this was communicated in tech news in May (T363932) I'm sorry you didn't get the message.

Currently I had to disable the infobox part of this change which is not good for our mobile readers, as there is no way to only opt out on desktop.

Rather than disable the infobox changes, I would recommend following the guidelines in T363932 and moving them to MediaWiki:Minerva.css to avoid breaking mobile. Let me know if you need help with that.

This change should have been communicated. I was very surprised to see such drastic changes to primarily the display of infoboxes on desktop.

It wasn't really this task that caused the surprise rollout of the styles today, it was moreso T106463: [EPIC] Ready responsive Vector for wider deployment. I filed T367462: Responsive Vector uses hatnote.less and infobox.less at all resolutions for something like your complaint already.

This change should have been communicated.

Hey @Sjoerddebruin this was communicated in tech news in May (T363932) I'm sorry you didn't get the message.

Currently I had to disable the infobox part of this change which is not good for our mobile readers, as there is no way to only opt out on desktop.

Rather than disable the infobox changes, I would recommend following the guidelines in T363932 and moving them to MediaWiki:Minerva.css to avoid breaking mobile. Let me know if you need help with that.

The communication in May didn't say anything about styles of Minerva being pushed to Vector 2022, or the communication wasn't clear enough. A reminder would have been appreciated for communities to prepare. How would editing Minerva.css work? Essentially we don't want our infoboxes wider than usual on desktop and don't want any color adjustments either at the moment.