Page scrolling not disabled by OOUI modal dialog in Vector 2022
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

None

Authored By

	• Esanders
	May 3 2023, 4:05 PM

Description

Steps to replicate the issue

Open an OOUI modal dialog, such as when selecting "insert" -> "template" from VisualEditor.

What happens?:

When an OOUI modal dialog is opened it adds a oo-ui-windowManager-modal-active class to the body, which disables scrolling of the content underneath.
In Vector 2022 this is being overridden by .vector-feature-zebra-design-disabled body which sets overflow-y back to scroll

What should have happened instead?:

The content underneath the modal should not be scrollable.

AC

The user is not able to scroll the content when an OOUI modal dialog is open.

QA Results - Beta

AC	Status	Details
1	✅	T335883#8848574

QA Results - Prod

AC	Status	Details
1	✅	T335883#8871384

Details

	Subject	Repo	Branch	Lines +/-
	Remove scrollbars from body & 100% height	mediawiki/skins/Vector	master	+0 -10

Customize query in gerrit

Related Objects

Mentioned Here: T335625: siteSub went missing due to zebra transition

Event Timeline

• Esanders created this task.May 3 2023, 4:05 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 3 2023, 4:05 PM

I thinks this was caused by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/910097 "Scope styles related to zebra feature flag", which increased the specificity of a lot of core rules.

That seems like a very risky thing to do, and this is unlikely to be the only thing that broke.

CC @Jdrewniak @bwang

In T335883#8824361, @Esanders wrote:

That seems like a very risky thing to do, and this is unlikely to be the only thing that broke.

(It also caused T335625: siteSub went missing due to zebra transition, but that was a trivial change.)

• Esanders triaged this task as High priority.May 4 2023, 3:03 PM

Jdrewniak added a project: Web-Team-Backlog.May 8 2023, 4:22 PM

Jdrewniak edited projects, added Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 3); removed Web-Team-Backlog.May 8 2023, 4:26 PM

LGoto set the point value for this task to 2.May 8 2023, 4:44 PM

LGoto moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 3) board.

Change 917397 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Remove scrollbars from body & 100% height

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

gerritbot added a project: Patch-For-Review.May 8 2023, 6:54 PM

@Esanders thanks for filing this issue. I certainly underestimated the risk of changing specificity when structuring the Zebra module in this way. These unconventional scoped imports were designed to let us ship both the new Zebra update alongside the existing styles to production, allowing us to debug the new design as well as run an AB test. We'll explore different ways of achieving that next time.

However, in regards to this specific issue, I think the scroll-y:scoll is no longer needed in Vector 2022 anyway, so the patch above removes that rule (as well as a related 100% height).

Jdrewniak updated the task description. (Show Details)May 8 2023, 7:13 PM

Jdrewniak moved this task from Ready for Development to Code Review on the Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 3) board.

Change 917397 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove scrollbars from body & 100% height

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

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

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 3) board.May 9 2023, 4:35 PM

Jdlrobson assigned this task to Edtadros.May 9 2023, 4:35 PM

@Jdrewniak can you add some QA steps?

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: The user is not able to scroll the content when an OOUI modal dialog is open.
you probably can't see it...but I'm really doing my best to scroll, but to no avail.

Screen Recording 2023-05-12 at 2.24.54 PM.mov.gif (878×1 px, 588 KB)

Edtadros updated the task description. (Show Details)May 12 2023, 9:27 PM

Jdlrobson claimed this task.May 15 2023, 5:13 PM

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.10; 2023-05-23).May 16 2023, 3:02 PM

LGTM. Let's just verify this in production.

Test Result - Prod

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

Test Artifact(s):

QA Steps

Open an OOUI modal dialog, such as when selecting "insert" -> "template" from VisualEditor.
✅ AC1: The user is not able to scroll the content when an OOUI modal dialog is open.
Again, just as in beta, you probably can't see it...but I'm really doing my best to scroll.

Edtadros updated the task description. (Show Details)May 22 2023, 4:18 PM

	F36994652: Screen Recording 2023-05-12 at 2.24.54 PM.mov.gif
	May 12 2023, 9:26 PM

	F37029145: Screen Recording.gif
	May 22 2023, 4:17 PM

Page scrolling not disabled by OOUI modal dialog in Vector 2022Closed, ResolvedPublic2 Estimated Story PointsActions

Description

AC

QA Results - Beta

QA Results - Prod

Details

Related Objects

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Page scrolling not disabled by OOUI modal dialog in Vector 2022
Closed, ResolvedPublic2 Estimated Story Points
Actions