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
In Progress		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
Open		None	T356675 Deprecate the codex-search modules and migrate away from them
Resolved		Jdforrester-WMF	T356676 Migrate uses of codex-search in MW core to use CodexModule
Resolved		Jdlrobson	T356677 Migrate uses of codex-search in Vector to use CodexModule
Resolved		Jdrewniak	T356678 Migrate uses of codex-search in MinervaNeue to use CodexModule
Resolved		Jdlrobson	T356688 Migrate uses of codex-search in MobileFrontend to use CodexModule
Resolved		simon04	T356689 Migrate uses of codex-search in MultimediaViewer to use CodexModule
Resolved		Jdlrobson	T356690 Migrate uses of codex-search in Popups to use CodexModule
Open		None	T356691 Migrate uses of codex-search in UniversalLanguageSelector to use CodexModule
Open		None	T360223 Migrate uses of codex-search in ContentTranslation to use CodexModule
Resolved		Jdforrester-WMF	T360221 Codex: Deprecate codex-search and codex-search-styles modules in ResourceLoader
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 (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 (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 (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 (FY2023-24 Q3 Sprint 6); removed MW-1.42-notes (1.42.0-wmf.23; 2024-03-19), Web-Team-Backlog (FY2023-24 Q3 Sprint 5).Mar 26 2024, 8:09 AM

ovasileva moved this task from Incoming to QA on the Web-Team-Backlog (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?

	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
	Mon, Apr 29, 5:28 PM

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