Performance regression: reflow of section headings
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Jdlrobson
	Aug 9 2023, 6:55 PM

Description

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

Throttle your connection
Visit https://en.m.wikipedia.org/wiki/Strategy_video_game?safemode=1

What happens?:
The section headings are aligned left

After JS kicks in an arrow appears pushing the heading right

What should have happened instead?:
Space for the icon should be reserved.

Software version (skip for WMF-hosted wikis like Wikipedia):

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

Short term solution

If at the half way point in the sprint, the switch to Codex is not likely to happen we should add a temporary style to Minerva to make sure space is allocated

.section-heading .indicator { min-width: 32px; }

QA Results - Prod

AC	Status	Details
1	✅	T343919#9112004

Details

	Subject	Repo	Branch	Lines +/-
	Reserve space for section toggle icon to avoid reflow	mediawiki/extensions/MobileFrontend	master	+8 -0

Customize query in gerrit

Related Objects

Mentioned In: T343920: Minerva Codex migration: Use Codex
Mentioned Here: T343920: Minerva Codex migration: Use Codex
T343053: Use Codex Icon components inside MobileFrontend

Event Timeline

Jdlrobson created this task.Aug 9 2023, 6:55 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 9 2023, 6:55 PM

@bwang this looks like it might relate to T343053.

I think the issue is the icon is using codex-search-styles which is not loaded on page load, so I think this will be fixed when we switch to Minerva.

Jdlrobson mentioned this in T343920: Minerva Codex migration: Use Codex.Aug 9 2023, 7:07 PM

I've confirmed this will be fixed by T343920

Jdlrobson triaged this task as High priority.Aug 9 2023, 9:18 PM

Jdlrobson removed a project: Web-Team-Backlog (Needs Prioritization (Tech)).Aug 10 2023, 5:23 PM

Jdlrobson added a project: Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 4).

Jdlrobson updated the task description. (Show Details)Aug 10 2023, 5:27 PM

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptAug 10 2023, 5:27 PM

ovasileva set the point value for this task to 1.Aug 10 2023, 5:28 PM

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 4) board.

Jdlrobson moved this task from Ready for Development to Incoming on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 4) board.Aug 10 2023, 6:03 PM

Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 4) board.

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

[mediawiki/extensions/MobileFrontend@master] Reserve space for section toggle icon to avoid reflow

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

gerritbot added a project: Patch-For-Review.Aug 11 2023, 5:45 PM

Jdlrobson changed the task status from Stalled to Open.Aug 11 2023, 5:47 PM

Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 4) board.

Change 948173 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Reserve space for section toggle icon to avoid reflow

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

Jdlrobson moved this task from Code Review to QA in Production on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 4) board.Aug 11 2023, 7:41 PM

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.22; 2023-08-15).Aug 11 2023, 8:00 PM

Maintenance_bot removed a project: Patch-For-Review.Aug 11 2023, 8:10 PM

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Throttle your connection
Visit https://en.m.wikipedia.org/wiki/Strategy_video_game?safemode=1
✅ AC1: Space for the icon should be reserved.

Screen Recording 2023-08-22 at 4.56.35 PM.mov.gif (960×1 px, 1 MB)

Edtadros updated the task description. (Show Details)Aug 23 2023, 12:44 AM

Hey @ovasileva, please take a look at T343919#9112004 above. Since I didn't test this in QA I'd like a second pair of eyes on the test results to make sure the testing is being done correctly before signing off.

In T343919#9115460, @Edtadros wrote:

Hey @ovasileva, please take a look at T343919#9112004 above. Since I didn't test this in QA I'd like a second pair of eyes on the test results to make sure the testing is being done correctly before signing off.

@Edtadros - this looks good to me. Resolving.

	F37619143: Screen Recording 2023-08-22 at 4.56.35 PM.mov.gif
	Aug 23 2023, 12:42 AM

	F37381657: Screenshot 2023-08-09 at 11.55.19 AM.png
	Aug 9 2023, 6:55 PM

	F37381649: Screenshot 2023-08-09 at 11.54.54 AM.png
	Aug 9 2023, 6:55 PM

Performance regression: reflow of section headingsClosed, ResolvedPublic1 Estimated Story PointsBUG REPORTActions