Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Jdlrobson
	Feb 6 2024, 11:13 PM

Description

User story

As a reader, I want all icons to appear in night mode when required, so that I can navigate properly

Background

For performance reasons we use image URLs rather than embedded images for URL. This means they can't be colored in the same way as other icons.

For now, we will use an invert. We will later do a spike to explore better more maintainable options.

Steps to replicate the issue (include links if applicable):

What happens?:
All icons are gray on black:

Screenshot 2024-02-06 at 3.09.02 PM.png (1×1 px, 183 KB)

What should have happened instead?:

Icons should appear white or off-white.

Software version (skip for WMF-hosted wikis like Wikipedia):
The following CSS should be applied in night mode (make sure to workshop this with Justin!)

Proposed fix: Add the skin-invert class to all icons that do not use the Codex mixin.

Other information (browser name/version, screenshots, etc.):

QA

Check icons on following pageS:

Hamburger menu
Page actions under article title (edit pencil)
Section headings
User placeholder icon on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=User:User-0.5677663645738522-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n
Search icon

QA Results - Beta

AC	Status	Details
1	✅	T356822#9614063
2	✅	T356822#9614063
3	✅	T356822#9614063
4	✅	T356822#9614063
5	❌	T356822#9614063

QA Results - Prod

AC	Status	Details
1	✅	T356822#9632570
2	✅	T356822#9632570
3	✅	T356822#9632570
4	✅	T356822#9632570
5	✅	T356822#9632570

Details

Subject	Repo	Branch	Lines +/-
Invert all icons in UI that use background-image	mediawiki/skins/MinervaNeue	master	+12 -0
Invert user placeholder icon in night mode	mediawiki/extensions/MobileFrontend	master	+11 -1
Separate image inversion from widget inversion	mediawiki/skins/MinervaNeue	master	+6 -5

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Resolved		ovasileva	T341632 [EPIC] Palette customizations and dark mode
Resolved		ovasileva	T354835 [epic] Release night mode as a beta feature on desktop and mobile
Resolved		Jdlrobson	T354836 [goal] Allow desktop and mobile page chrome to appear in night mode ahead of beta release
Resolved		ovasileva	T354843 [Night mode] Make all open-by-default global navigation appear in night mode on mobile
Resolved	BUG REPORT	ovasileva	T356822 Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode

Event Timeline

Jdlrobson created this task.Feb 6 2024, 11:13 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptFeb 6 2024, 11:13 PM

Jdlrobson triaged this task as High priority.Feb 6 2024, 11:13 PM

Jdlrobson renamed this task from Minerva icons should be compatible with night mode to Minerva logos and icons should be compatible with night mode.Feb 6 2024, 11:24 PM

Jdlrobson renamed this task from Minerva logos and icons should be compatible with night mode to Minerva icons should be compatible with night mode.

Jdlrobson updated the task description. (Show Details)

Jdlrobson added a subscriber: JScherer-WMF.

Jdlrobson lowered the priority of this task from High to Medium.Feb 8 2024, 7:14 PM

Jdlrobson updated the task description. (Show Details)Feb 12 2024, 7:03 PM

The invert approach should be sufficient for our needs for now, but I think it'll be worth investigating if we can use the mask-image + background-color approach used in the last-edited toolbar for icons more broadly.

Screenshot 2024-02-12 at 2.07.18 PM.png (374×1 px, 125 KB)

That would allow us to use the CSS variable colors for the night mode version of the icons.
(I'll set up a spike around this).

Jdrewniak mentioned this in T357704: [Spike] Investigate night mode approaches for icons.Feb 15 2024, 5:45 PM

ovasileva added a parent task: T354843: [Night mode] Make all open-by-default global navigation appear in night mode on mobile.Feb 15 2024, 6:23 PM

ovasileva added a project: FY2023-24-WE 2.1 Typography and palette customizations.

Jdlrobson renamed this task from Minerva icons should be compatible with night mode to Minerva icons not using embedded data URI rules should be compatible with night mode.Feb 15 2024, 6:24 PM

Jdlrobson updated the task description. (Show Details)

ovasileva raised the priority of this task from Medium to High.Feb 15 2024, 6:29 PM

ovasileva set the point value for this task to 2.

Jdlrobson moved this task from Backlog to Night mode (mobile) on the FY2023-24-WE 2.1 Typography and palette customizations board.Feb 15 2024, 6:34 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 4); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 3).Feb 21 2024, 12:14 AM

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 4) board.Feb 22 2024, 10:17 AM

Jdlrobson renamed this task from Minerva icons not using embedded data URI rules should be compatible with night mode to Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode.Feb 23 2024, 6:51 PM

Jdlrobson updated the task description. (Show Details)

ovasileva updated the task description. (Show Details)Feb 26 2024, 11:01 AM

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 4) board.Feb 27 2024, 6:13 PM

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

[mediawiki/skins/MinervaNeue@master] Separate image inversion from widget inversion

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

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

[mediawiki/skins/MinervaNeue@master] Invert all icons in UI that use background-image

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

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 4) board.Feb 27 2024, 6:40 PM

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

[mediawiki/extensions/MobileFrontend@master] Invert user placeholder icon in night mode

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

Change 1006977 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Separate image inversion from widget inversion

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.21; 2024-03-05).Feb 28 2024, 10:00 PM

One patch remaining: https://gerrit.wikimedia.org/r/1006980

Jdrewniak claimed this task.Feb 29 2024, 5:53 PM

Change 1006980 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Invert user placeholder icon in night mode

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

Jdlrobson reassigned this task from Jdrewniak to Edtadros.Feb 29 2024, 8:43 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 4) board.

https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1006978 also needs review.

Change 1006978 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Invert all icons in UI that use background-image

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

Jdlrobson reassigned this task from bwang to Edtadros.Mar 1 2024, 9:45 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 4) board.

Jdlrobson added a subscriber: bwang.

Maintenance_bot removed a project: Patch-For-Review.Mar 1 2024, 10:31 PM

Jdlrobson lowered the priority of this task from High to Medium.Mar 5 2024, 1:28 AM

Test Result - Beta

Status: ❌ FAIL
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

QA
Check icons on following pageS:

✅ AC1: Hamburger menu

✅ AC2: Page actions under article title (edit pencil)

✅ AC3: Section headings

✅ AC4: User placeholder icon on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=User:User-0.5677663645738522-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n

❌ AC5: Search icon
When you click in the search field the size and color of the magnifying glass changes.

❌ AC5: Search icon

This one is covered by T358904

Looks good, resolving.

Test Result - Prod

Status: ✅ Pass
Environment: enwiki, testwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

QA
Check icons on following pageS:

✅ AC1: Hamburger menu

✅ AC2: Page actions under article title (edit pencil)

✅ AC3: Section headings

✅ AC4: User placeholder icon on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=User:User-0.5677663645738522-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n

✅ AC5: Search icon

Edtadros updated the task description. (Show Details)Mar 14 2024, 9:23 PM

Edtadros mentioned this in T358382: Verify 1.42.0-wmf.21 deployment.Mar 14 2024, 9:27 PM

	F42628558: screenshot 6.png
	Mar 14 2024, 9:21 PM

	F42628555: screenshot 5.png
	Mar 14 2024, 9:21 PM

	F42628551: screenshot 4.png
	Mar 14 2024, 9:21 PM

	F42628547: screenshot 3.png
	Mar 14 2024, 9:21 PM

Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night modeClosed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions

Description

User story

Background

QA

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Related Objects
Search...