Page MenuHomePhabricator

Make MediaWiki:Minerva.css render blocking to allow editors to ship styles that fix issues with night mode
Closed, ResolvedPublic2 Estimated Story Points

Description

Background

Editors are unable to fix issues with night mode on a global-level - only on a template per template basis. For night mode, editors will sometimes need to add global CSS rules to make content work. Currently the only way to do this without performance implications is to create a gadget and enable it.

This also provides us an opportunity to align more with how work MediaWiki works. Currently the mobile site loads MediaWiki:Mobile.css instead of MediaWiki:Common.css. This is discouraged and loaded via JavaScript. Once this task is done, the only difference between mobile and desktop will be that it doesn't load MediaWiki:Common.js and MediaWiki:Common.css

While we could enable Mobile.css as render blocking via a configuration change, this would make it difficult to move away from this on the long term and create immediate performance implications that we are not ready to respond to.

User story

As an editor I need to be able to ship styles that impact the site globally.

Technical changes needed

  • Update onResourceLoaderSiteStylesModulePages and remove the following code:
// MediaWiki:<skinname>.css suffers from the same problems as MediaWiki:Common.css
                        // in that it has traditionally been written for desktop skins and is bloated.
                        // We have always removed this on mobile for this reason.
                        // If we loaded this there is absolutely no point in MediaWiki:Mobile.css! (T248415)
                        unset( $pages["MediaWiki:$ucaseSkin.css"] );
  • All other code can stay.

Acceptance criteria

  • MediaWIki:Minerva.css should be render blocking and load on all mobile views.
  • MediaWIki:Minerva.js should load on all mobile views.
  • MediaWiki:Mobile.css will continue to load via JavaScript (on the long term we should plan to remove this once communities have migrated their CSS from here to Minerva.css)
  • MediaWiki:Common.css should continue to not load on mobile
  • MediaWiki:Common.js should continue to not load on mobile

QA steps

Communication criteria - does this need an announcement or discussion?

No this will be done as part of outreach for dark mode.

QA Results - Beta

ACStatusDetails
1T359488#9644040

Event Timeline

Jdlrobson renamed this task from Make MediaWiki:Minerva.css render blocking to Make MediaWiki:Minerva.css render blocking to allow editors to ship styles that fix issues with night mode.Mar 6 2024, 9:18 PM
Jdlrobson triaged this task as High priority.
ovasileva set the point value for this task to 2.Mar 7 2024, 6:48 PM

Change 1010312 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/extensions/MobileFrontend@master] Load MediaWIki:Minerva.css on all mobile views

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

Change 1010312 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Load MediaWIki:Minerva.css on all mobile views

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

Jdlrobson lowered the priority of this task from High to Medium.Mar 18 2024, 5:16 PM
Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930 with JS disabled.
✅ AC1: the logo should have "beta cluster" on it.

screenshot 65.png (674×1 px, 92 KB)

Jdlrobson updated the task description. (Show Details)