Page MenuHomePhabricator

It should be possible to disable night mode on select pages in Vector 2022
Closed, ResolvedPublic3 Estimated Story Points

Description

NOTE: All subtasks must be resolved before this ticket is ready to work on.

Background

In T355705 we created additional configuration for Minerva to allow us to disable certain pages in night mode. In this ticket we will seek to do the same in the Vector 2022 skin.
Following T359607 we have identified how to approach this on the short term.

User story

As a reader, I want pages that are unreadable in night mode to appear in day mode, so that all parts of the page are readable

Requirements

  • It must be possible for us to share configuration between Minerva and Vector skins. For example the configuration in Vector 2022 should be identical to -Minerva. e.g. $wgMinervaNightModeOptions = $wgVectorNightModeOptions
  • We should minimize duplicated code. In future we may want to modify how this works, and do not want to maintain two versions of the same code.
    • present the options to the team and the associated trade offs (google doc)
    • Facilitate discussion either async in the document or in person
    • Collect a consensus about how we want to approach this.
    • Document decision in an decision record (ADR) in the patch.
  • It is possible to disable night mode on certain pages using $wgVectorNightModeOptions = $wgMinervaNightModeOptions;
  • The skin-night-mode-page-disabled class should be added to the HTML element on pages where night mode has been disabled.

QA steps

For Needs QA: Use https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Banana&vectornightmode=1
For Verified : Use https://test.wikipedia.org/wiki/Banana?vectornightmode=1

NOTE: Vector 2022's night mode currently is broken by design and only changes the background to black. When QAing do not treat this as a failure.
  • Visit desktop site
  • Enable night mode.
  • Go to Banana page.

Expected: The banana page appears in LIGHT mode.

  • Open the edit page in a new window (right click)
  • Click random

Expected: the page appears in night mode.

  • Switch to the history page by clicking the last modified bar are the bottom of the article.

Expected: The history page appears in LIGHT mode.

  • Click a diff.

Expected: The diff page appears in LIGHT mode.

Query string parameters

?vectornightmode=1 should force night mode on. This should work when night mode is disabled by default as well as when it is available in the beta feature sidebar panel.
?vectornightmode=2 should force operating system theme on. This should work when night mode is disabled by default as well as when it is available in the beta feature sidebar panel.

Event Timeline

Jdlrobson renamed this task from [EPIC] It should be possible to disable night mode on select pages in Vector 2022 to It should be possible to disable night mode on select pages in Vector 2022.Mar 8 2024, 12:25 AM
Jdlrobson updated the task description. (Show Details)
Jdlrobson set the point value for this task to 3.

Change #1014628 had a related patch set uploaded (by Stoyofuku-wmf; author: Stoyofuku-wmf):

[mediawiki/skins/Vector@master] Allow disabling of night mode on certain pages via config

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

Change #1014628 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Allow disabling of night mode on certain pages via config

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

It is possible to disable night mode on certain pages using $wgVectorNightModeOptions = $wgMinervaNightModeOptions;

Our site configuration is currently configured to work this way, so if this passes QA then that's enough to tick this box.

@SToyofuku-WMF thinking ahead to T361158 we should also output skin-theme-clientpref-day to the HTML tag in this circumstance. See associated note on T361158#9677981.

Ooh good point - should we do that work in a separate ticket, or one of the two that already exists?

I think we should it this sprint: perhaps (a patch) associated with both tasks?

Gotcha - I can work on doing that in Minerva and Vector after I address the comments on T360098. Feel free to assign this ticket back to me!

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

Thinking through this some more, the class might not be what we need here - this might instead require changes to resources/skins.vector.clientPreferences - perhaps we could support a "default" option which makes the option always show..? Default would then need to be directly read from the cookie just as we do here: https://gerrit.wikimedia.org/g/mediawiki/skins/MinervaNeue/+/ff9b99c0ec4f7bb8ffb2efd0008c1c5e8c0c29c0/resources/skins.minerva.scripts/reportIfNightModeWasDisabledOnPage.js#23

I've added the acceptance criteria to clarify what the outcome is, but I now don't think the class is the way to achieve that!

Jdlrobson lowered the priority of this task from High to Medium.Apr 3 2024, 11:01 AM

Since the main part of this has been done I'm lowering priority to medium. I think if this proves to be non-trivial (eg. you can't work out how to do this by the end of your Wednesday PM, then move this to QA and update the acceptance criteria in T361158 to account for addressing this)

Hope this makes sense @SToyofuku-WMF let me know if it doesn't and I'll give you some feedback late Friday!

Test Result - Beta

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

Test Artifact(s):

QA Steps

For Needs QA: Use https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Banana&vectornightmode=1
For Verified : Use https://test.wikipedia.org/wiki/Banana?vectornightmode=1

NOTE: Vector 2022's night mode currently is broken by design and only changes the background to black. When QAing do not treat this as a failure.

Visit desktop site
Enable night mode.
Go to Banana page.
✅ AC1: Expected: The banana page appears in LIGHT mode.

screenshot 179.png (701×1 px, 322 KB)

Open the edit page in a new window (right click)
Click random
✅ AC2: Expected: the page appears in night mode.
screenshot 180.png (705×1 px, 128 KB)

Switch to the history page by clicking the last modified bar are the bottom of the article.
✅ AC3: Expected: The history page appears in LIGHT mode.
these look like carryover steps from when this was tested in Minerva. I clicked the history icon. I checked a page that can be viewed in night mode as well.
Dog - page that has night mode
screenshot 182.png (699×1 px, 209 KB)

Banana - page that doesn't have night mode
screenshot 181.png (704×1 px, 152 KB)

Banana history page with URL param vectornightmode=1
screenshot 183.png (697×1 px, 166 KB)

Click a diff.
✅ AC4: Expected: The diff page appears in LIGHT mode.

screenshot 184.png (702×1 px, 157 KB)

Test Result - Prod

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

Test Artifact(s):

QA Steps

For Needs QA: Use https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Banana&vectornightmode=1
For Verified : Use https://test.wikipedia.org/wiki/Banana?vectornightmode=1

NOTE: Vector 2022's night mode currently is broken by design and only changes the background to black. When QAing do not treat this as a failure.

Visit desktop site
Enable night mode.
Go to Banana page.
✅ AC1: Expected: The banana page appears in LIGHT mode.

screenshot 185.png (701×1 px, 309 KB)

Open the edit page in a new window (right click)
Click random
✅ AC2: Expected: the page appears in night mode.
screenshot 186.png (701×1 px, 138 KB)

Switch to the history page by clicking the last modified bar are the bottom of the article.
✅ AC3: Expected: The history page appears in LIGHT mode.
these look like carryover steps from when this was tested in Minerva. I clicked the history icon. I checked a page that can be viewed in night mode as well.
Château d'Agassac: Revision history - page that has night mode appears in night mode when the URL param is used.
screenshot 187.png (701×1 px, 220 KB)

Banana history page with URL param vectornightmode=1

screenshot 188.png (701×1 px, 219 KB)

Click a diff.
✅ AC4: Expected: The diff page appears in LIGHT mode.
//https://test.wikipedia.org/w/index.php?title=Anexo%3AElenco_de_Falcon_Crest&diff=546369&oldid=542052?vectornightmode=1//

screenshot 189.png (701×1 px, 182 KB)

I may have tested this too soon. 😬

All good! I haven't had a chance to look into the comment Jon left yet as yesterday was kind of a wash, but good to know the original work passed ☺️

Gonna pass the remaining work for this onto T361158 since I've been running a bit behind on things this week and the sprint is almost over. We talked a fair bit about approaches to this issue that you (Jon) brought up, and I've left some notes in the ticket. Would still be good to get your input, because I think the solution we arrived at is perfect except we forgot about the fact that these are also user-facing classes 🙃

In any case, going to update the description and move this back to QA, but @Edtadros feel free to move it to Ready for signoff since nothing has changed since you last QAed it

QA was done earlier in ticket. Deferring this work to T361158 sounds good to me.