Codex icons in Vector and Minerva are displaying incorrectly
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	DLynch
	Feb 21 2024, 11:44 PM

Description

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

Visit a page on beta
Observe icons being incorrectly rendered (notification icons need to be interacted-with first, but others are broken on pageload like the watch star and TOC carets)

What happens?:

What should have happened instead?:

Investigation revealed that this was introduced in the update to Codex 1.3.3 yesterday.

QA

Vector

Check watchstar

After the Codex update from 1.3.2 to 1.3.3, watchstar icon in Vector is broken.

Screenshot 2024-02-21 at 1.12.12 PM.png (56×131 px, 2 KB)

Check MobileFrontend editor (loading spinner to left of back/close icon)
Check page previews setting cog

1. Minerva
Load notification overlay. Check the loading spinner is not clipped.
Focus the search and check search icon in input
Open the language overlay and focus the search and check search icon in input
Open the editor overlay. Note the ajax loading spinner in the top left.
Popups setting cog

QA Results - Beta

AC	Status	Details
1	✅	T358160#9574094
2	✅	T358160#9574094
3	❓	T358160#9574094
4	✅	T358160#9574094
5	✅	T358160#9574094
6	✅	T358160#9574094
7	✅	T358160#9574094
8	✅	T358160#9574094

QA Results - Prod

AC	Status	Details
1	✅	T358160#9592841
2	✅	T358160#9592841
3	✅	T358160#9592841
4	✅	T358160#9592841
5	✅	T358160#9592841
6	✅	T358160#9592841
7	✅	T358160#9592841
8	✅	T358160#9592841

Details

Subject	Repo	Branch	Lines +/-
Add icon background styles to codex CSS icons	mediawiki/skins/MinervaNeue	master	+8 -0
Fixes alignment of search icon in language searcher	mediawiki/extensions/MobileFrontend	master	+3 -1
Add icon background styles to codex CSS icons	mediawiki/extensions/MobileFrontend	master	+8 -0
icons: restore "background-" CSS rules	mediawiki/skins/Vector	master	+11 -0

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved	Release	dduvall	T354438 1.42.0-wmf.20 deployment blockers
		Resolved	BUG REPORT	ovasileva	T358160 Codex icons in Vector and Minerva are displaying incorrectly

Event Timeline

DLynch created this task.Feb 21 2024, 11:44 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptFeb 21 2024, 11:44 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Jdlrobson triaged this task as High priority.Feb 21 2024, 11:59 PM

Jdlrobson added a project: Web-Team-Backlog (FY2023-24 Q3 Sprint 3).

Change 1005631 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/skins/Vector@master] icons: restore "background-" CSS rules

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

gerritbot added a project: Patch-For-Review.Feb 22 2024, 12:00 AM

I have marked this as a train blocker for next week.

Jdlrobson mentioned this in T344183: Icon: Support a generic class and size classes for CSS only icons.Feb 22 2024, 12:01 AM

Jdlrobson updated the task description. (Show Details)

Jdlrobson merged a task: T358161: Watchstar icon broken in Vector.

Jdlrobson added a subscriber: bwang.

egardner moved this task from Inbox to Following on the Design-System-Team board.Feb 22 2024, 6:01 AM

Trizek-WMF merged a task: T358184: [beta][vector 2022] Clicking on any Notification icon displays multiple icons.Feb 22 2024, 8:30 AM

Trizek-WMF added subscribers: Trizek-WMF, dom_walden.

ovasileva subscribed.Feb 22 2024, 9:24 AM

Change 1005631 merged by jenkins-bot:

[mediawiki/skins/Vector@master] icons: restore "background-" CSS rules

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

Maintenance_bot removed a project: Patch-For-Review.Feb 22 2024, 5:30 PM

ovasileva assigned this task to bwang.Feb 22 2024, 5:39 PM

ovasileva set the point value for this task to 2.

ovasileva moved this task from Incoming to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.20; 2024-02-27).Feb 22 2024, 6:00 PM

Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.Feb 22 2024, 10:19 PM

Jdlrobson renamed this task from Codex icons in Vector are displaying incorrectly to Codex icons in Vector and Minerva are displaying incorrectly.Feb 23 2024, 6:45 PM

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptFeb 23 2024, 6:45 PM

Jdlrobson updated the task description. (Show Details)Feb 23 2024, 6:46 PM

Change 1006061 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@master] Add icon background styles to codex CSS icons

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

gerritbot added a project: Patch-For-Review.Feb 23 2024, 7:23 PM

bwang moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.Feb 23 2024, 7:24 PM

Change 1006064 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/MobileFrontend@master] Add icon background styles to codex CSS icons

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

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

[mediawiki/extensions/MobileFrontend@master] Fixes alignment of search icon in language searcher

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

Jdlrobson reassigned this task from bwang to Edtadros.Feb 23 2024, 7:59 PM

Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.

Jdlrobson moved this task from Ready for Signoff to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.

Jdlrobson updated the task description. (Show Details)Feb 23 2024, 8:20 PM

Change 1006064 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Add icon background styles to codex CSS icons

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

Change 1006071 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Fixes alignment of search icon in language searcher

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

Change 1006061 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add icon background styles to codex CSS icons

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

Maintenance_bot removed a project: Patch-For-Review.Feb 23 2024, 9:30 PM

Test Result - Beta

Status: ✅ PASS / ❓Need More Info
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

NOTE: I'm passing this even though I have a question on AC3.

Vector 2022
✅ AC1: Check watchstar

✅ AC2: Check page previews setting cog

Minerva

NOTE: I had to complete these in night mode because my settings are stuck in that mode

❓ AC3: Check MobileFrontend editor (loading spinner to left of back/close icon)
spinner is to the right, which seems correct.

screenshot 296.mov.gif (844×390 px, 262 KB)

✅ AC4: Load notification overlay. Check the loading spinner is not clipped.

screenshot 297.mov.gif (844×390 px, 632 KB)

✅ AC5: Focus the search and check search icon in input

screenshot 298.mov.gif (844×390 px, 395 KB)

✅ AC6: Open the language overlay and focus the search and check search icon in input

screenshot 299.mov.gif (844×390 px, 248 KB)

✅ AC7: Open the editor overlay. Note the ajax loading spinner in the top left.

screenshot 301.mov.gif (844×390 px, 881 KB)

✅ AC8: Popups setting cog

Edtadros updated the task description. (Show Details)Feb 24 2024, 2:30 AM

All looks good! Resolving

Test Result - Prod

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

Test Artifact(s):

QA Steps

Vector 2022

✅ AC1: Check watchstar

screenshot 305.mov.gif (478×1 px, 711 KB)

screenshot 306.mov.gif (478×1 px, 802 KB)

screenshot 304.mov.gif (478×1 px, 943 KB)

✅ AC2: Check page previews setting cog

Minerva

✅ AC3: Check MobileFrontend editor (loading spinner to right of back/close icon)

screenshot 307.mov.gif (846×388 px, 466 KB)

✅ AC4: Load notification overlay. Check the loading spinner is not clipped.

screenshot 308.mov.gif (846×388 px, 677 KB)

✅ AC5: Focus the search and check search icon in input

✅ AC6: Open the language overlay and focus the search and check search icon in input

✅ AC7: Open the editor overlay. Note the ajax loading spinner in the top left.

screenshot 309.mov.gif (846×388 px, 456 KB)

screenshot 310.mov.gif (846×388 px, 282 KB)

✅ AC8: Popups setting cog

Edtadros updated the task description. (Show Details)Mar 2 2024, 1:54 AM

Edtadros mentioned this in T358383: Verify 1.42.0-wmf.20 deployment.Mar 5 2024, 2:52 PM

I see the same issue with

(The popup says ‘The preview encountered a problem.’) Granted, I have a slightly bigger font set for myself, so that might be what is causing this, but I really don’t get why it’s not just background-sized correctly.

In T358160#9609472, @stjn wrote:

I see the same issue with

(The popup says ‘The preview encountered a problem.’) Granted, I have a slightly bigger font set for myself, so that might be what is causing this, but I really don’t get why it’s not just background-sized correctly.

Hi @stjn thanks for flagging. I can't reproduce on Chrome on https://en.wikipedia.org/w/index.php?title=Alien_(computing)&redirect=no with zooming/or changing default font. Could you open a new bug report with some steps on how to reproduce this?

DLynch mentioned this in T373936: [Regression pre-wmf.21] The Alerts and the Notices icons disappear a while after the page load.Sep 3 2024, 11:57 PM

	F42426074: image.png
	Mar 6 2024, 10:27 PM

	F42311943: screenshot 604.png
	Mar 2 2024, 1:51 AM

	F42311813: screenshot 603.png
	Mar 2 2024, 1:51 AM

	F42311747: screenshot 602.png
	Mar 2 2024, 1:51 AM

Codex icons in Vector and Minerva are displaying incorrectlyClosed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions

Description

QA

Vector

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Vector 2022

Minerva

Codex icons in Vector and Minerva are displaying incorrectly
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Related Objects
Search...