message boxes visually change when full Codex styles module is loaded
Closed, ResolvedPublic0 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Jdlrobson
	Oct 30 2023, 5:53 PM

Description

NOTE: This existing bug has recurred a few times now (e.g. T348069). On the long term it will be fixed by T353844 and then later T356677

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

Enable the typography beta feature
Visit https://en.wikipedia.org/w/index.php?title=Lussery-Villars&oldid=1191178701&safemode=1

What happens?:
A visual improvement occurs - the icon in the warning box suddenly appears after a few seconds causing the page to reflow.

What should have happened instead?:
The icon should be visible at the start

Explanation

Vector 2022 loads codex-search-styles. This doesn't contain styles for the message box component.
When codex-styles is loaded, this does contain styles for the message box component so the visual change occurs.

QA Results - Prod

AC	Status	Details
1	✅	T350069#9686054

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved	BUG REPORT	ovasileva	T350069 message boxes visually change when full Codex styles module is loaded
Resolved		Catrope	T349423 [EPIC] Implement Codex code splitting in ResourceLoader\CodexModule
Resolved		matmarex	T350040 Review Codex module implementation for ResourceLoader
Declined		None	T350052 Code splitting: @wikimedia/codex collector module (simple version)
Resolved		egardner	T350054 Code splitting: basic support for loading components
Duplicate		None	T350055 Code splitting: style-only support
Resolved		AnneT	T350792 Code splitting: document usage
Resolved		AnneT	T352724 Make CodexModules that use codexComponents automatically add Vue as a dependency
Resolved		tyhopp	T353187 Add custom error message when trying to use a component not listed in codexComponents
Resolved		AnneT	T353191 Don't allow files to be used through codexComponents if they aren't marked as entry points in the manifest
Resolved		tyhopp	T353190 Add all library exports to modular build, not just components
Resolved		Catrope	T352327 Code splitting: announce and advertise
Resolved		Catrope	T355842 Remove themeStyles support from CodexModule
Declined		None	T355841 Remove use of themeStyles in VueTest
Resolved		lwatson	T350058 Code splitting: migrate existing library modules to new system
Resolved		lwatson	T355840 Code splitting: use CodexModule for the full library modules (@wikimedia/codex and codex-styles)
Resolved		AnneT	T356345 CodexModule: Consider warning or error when a CodexModule depends on @wikimedia/codex
Resolved		tyhopp	T357596 Remove codex-search build

Event Timeline

Jdlrobson created this task.Oct 30 2023, 5:53 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 30 2023, 5:53 PM

Jdlrobson added a project: Web-Team-Backlog-Archived (Needs Prioritization (Tech)).Oct 30 2023, 5:53 PM

Jdlrobson mentioned this in T340582: Consider how we should load message box Codex styles on pages that need it.

Jdlrobson added a parent task: T340582: Consider how we should load message box Codex styles on pages that need it.

Jdlrobson updated the task description. (Show Details)

Jdlrobson mentioned this in T348069: Popups should not use mediawiki.ui.checkbox, use Codex instead.Nov 2 2023, 9:51 PM

Jdlrobson moved this task from Backlog to Using Codex in web team products / Skin unification on the Web-Team-Backlog-Archived (Needs Prioritization (Tech)) board.Nov 3 2023, 12:05 AM

Moving to the backlog until we re-evaluate once code splitting is shipped and in use.

Jdlrobson mentioned this in T353071: Zebra causes 3kb CSS spike (@todo) and @wikimedia/codex and codex-styles AND codex-search-styles on page load (now fixed).Dec 8 2023, 8:26 PM

Aklapper added a project: Codex.Jan 1 2024, 3:55 PM

CCiufo-WMF added a subtask: T349423: [EPIC] Implement Codex code splitting in ResourceLoader\CodexModule.Jan 8 2024, 3:13 PM

CCiufo-WMF removed a parent task: T340582: Consider how we should load message box Codex styles on pages that need it.

CCiufo-WMF mentioned this in T358327: Icon added to anonymous editing warning message (by accident?).Feb 23 2024, 4:19 PM

This is stalled (and will be fixed by) T356677

Jdlrobson updated the task description. (Show Details)Mar 13 2024, 3:53 PM

This should now be fixed with the merging of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1010258 and the change will ride next week's train (21st March) so I'm moving this into QA to confirm.

CCiufo-WMF awarded a token.Mar 13 2024, 5:12 PM

Jdlrobson triaged this task as Medium priority.Mar 13 2024, 5:54 PM

Jdlrobson moved this task from Incoming to QA on the Web-Team-Backlog-Archived (FY2023-24 Q3 Sprint 5) board.

@Edtadros - prod QA only for this one.

Jdlrobson added a project: MW-1.42-notes (1.42.0-wmf.23; 2024-03-19).Mar 18 2024, 5:38 PM

ovasileva edited projects, added Web-Team-Backlog-Archived (FY2023-24 Q3 Sprint 6); removed MW-1.42-notes (1.42.0-wmf.23; 2024-03-19), Web-Team-Backlog-Archived (FY2023-24 Q3 Sprint 5).Mar 26 2024, 8:09 AM

ovasileva moved this task from Incoming to QA on the Web-Team-Backlog-Archived (FY2023-24 Q3 Sprint 6) board.

Test Result - Prod

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

Test Artifact(s):

QA Steps

Enable the typography beta feature
Visit https://en.wikipedia.org/w/index.php?title=Lussery-Villars&oldid=1191178701&safemode=1
✅ AC1: The icon in the warning box should be visible at the start

Edtadros updated the task description. (Show Details)Apr 3 2024, 8:43 PM

ovasileva claimed this task.Apr 4 2024, 4:38 PM

ovasileva closed this task as Resolved.Apr 8 2024, 9:25 AM

This needed to be fixed via removing the icon point-blank from that message, not via just always loading the icon. The entire box there is misaligned and the icon just contributes to a worse-looking design:

I am glad the issue with CSS loading was fixed, but who asked for a misaligned icon that makes the entire message box look crooked to be in that notice in the first place?

CCiufo-WMF changed the status of subtask T349423: [EPIC] Implement Codex code splitting in ResourceLoader\CodexModule from In Progress to Open.Jul 4 2024, 5:17 PM

CCiufo-WMF closed subtask T349423: [EPIC] Implement Codex code splitting in ResourceLoader\CodexModule as Resolved.Jul 4 2024, 5:24 PM

	F42599788: Screenshot 2024-03-13 at 8.52.13 AM.png
	Mar 13 2024, 3:53 PM

	F41386170: Screenshot 2023-10-30 at 10.51.54 AM.png
	Oct 30 2023, 5:53 PM

	F41386064: Screenshot 2023-10-30 at 10.51.34 AM.png
	Oct 30 2023, 5:53 PM

	F49317541: image.png
	Apr 29 2024, 5:28 PM

message boxes visually change when full Codex styles module is loadedClosed, ResolvedPublic0 Estimated Story PointsBUG REPORTActions