Page MenuHomePhabricator
Create Task
Maniphest T331563

Layout shift on small viewports from page tools
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To
None
Authored By
bwang
Mar 8 2023, 7:42 PM
Tags
Referenced Files
F36936629: Screen Recording 2023-04-01 at 3.58.29 PM.mov.gif
Apr 1 2023, 11:02 PM
F36914609: image.png
Mar 16 2023, 3:49 PM
F36914607: image.png
Mar 16 2023, 3:49 PM
F36913814: Screen Recording 2023-03-15 at 6.09.52 PM.mov.gif
Mar 16 2023, 1:27 AM
F36913824: Screen Recording 2023-03-15 at 6.13.55 PM.mov.gif
Mar 16 2023, 1:27 AM
F36913821: Screen Recording 2023-03-15 at 6.13.17 PM.mov.gif
Mar 16 2023, 1:27 AM
F36913816: Screen Recording 2023-03-15 at 6.10.50 PM.mov.gif
Mar 16 2023, 1:27 AM
F36898279: Screenshot 2023-03-08 at 1.25.30 PM.png
Mar 8 2023, 7:42 PM
Subscribers
Aklapper
bwang
Edtadros
Esanders
• nray
ovasileva

Description

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

What happens?:
Page tools menu appears below the page title for an instance, before disappearing, causing a large flash and layout shift

Screenshot 2023-03-08 at 1.25.30 PM.png (678×492 px, 50 KB)

What should have happened instead?:
Page tools is inside the dropdown, no flash

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

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

Developer notes

This is happening because the page tools is shown before JS kicks in and moves it into the dropdown. Related to automatic hiding of pinnable elements on small screens in pinnableElement.js. Should be able to add CSS to hide page tools before the JS takes over, similar to the TOC treatment

QA

  • No flash from reloading the page for logged in users with the main menu pinned by default
  • No flash from reloading the page for logged in users with the page tools pinned by default
  • No flash from reloading the page for logged in users with the TOC pinned by default

QA Results - Beta

ACStatusDetails
1❓T331563#8700701
2❓T331563#8700701
3✅T331563#8700701

QA Results - Prod

ACStatusDetails
1✅T331563#8748123
2✅T331563#8748123
3✅T331563#8748123

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Update how pinnable elements are handled with no-js and gradeC casesmediawiki/skins/Vectormaster+14 -11
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 ResolvedBUG REPORTNoneT331052 Enable page tools for anonymous users
 ResolvedBUG REPORTNoneT331563 Layout shift on small viewports from page tools

Event Timeline

bwang created this task.Mar 8 2023, 7:42 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 8 2023, 7:42 PM
ovasileva triaged this task as High priority.Mar 9 2023, 3:50 PM
ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog-Archived board.
ovasileva set the point value for this task to 2.Mar 9 2023, 6:18 PM
ovasileva edited projects, added Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5); removed Web-Team-Backlog-Archived.Mar 10 2023, 8:16 PM
ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.Mar 10 2023, 8:28 PM
ovasileva added a parent task: T331052: Enable page tools for anonymous users.Mar 13 2023, 5:43 PM
gerritbot added a comment.Mar 13 2023, 8:54 PM

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

[mediawiki/skins/Vector@master] Update how pinnable elements are handled with no-js and gradeC cases

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

gerritbot added a project: Patch-For-Review.Mar 13 2023, 8:54 PM
bwang claimed this task.Mar 13 2023, 8:54 PM
bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.
bwang removed bwang as the assignee of this task.Mar 14 2023, 4:29 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.
ovasileva assigned this task to • nray.Mar 14 2023, 4:33 PM
bwang moved this task from Code Review to Blocked on Others on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.EditedMar 14 2023, 4:37 PM

Easier to test after: https://phabricator.wikimedia.org/T331176 is merged, moving to blocked for now

bwang updated the task description. (Show Details)Mar 14 2023, 4:41 PM
bwang moved this task from Blocked on Others to Code Review on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.Mar 14 2023, 7:32 PM
• nray removed • nray as the assignee of this task.Mar 14 2023, 10:22 PM
• nray moved this task from Code Review to Needs More Work on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.
• nray subscribed.
bwang assigned this task to • nray.Mar 14 2023, 10:38 PM
bwang moved this task from Needs More Work to Code Review on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.
bwang merged a task: T332150: [Page tools] FOUC for logged in users when loading Vector 2022 in narrow mode (<1000px).Mar 15 2023, 5:54 PM
bwang added a subscriber: Esanders.
• nray removed • nray as the assignee of this task.Mar 15 2023, 8:47 PM
• nray claimed this task.
• nray moved this task from Code Review to QA on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.
• nray reassigned this task from • nray to Edtadros.Mar 15 2023, 9:03 PM
gerritbot added a comment.Mar 15 2023, 9:05 PM

Change 897994 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update how pinnable elements are handled with no-js and gradeC cases

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

Maintenance_bot removed a project: Patch-For-Review.Mar 15 2023, 9:10 PM
Edtadros reassigned this task from Edtadros to bwang.Mar 16 2023, 1:27 AM
Edtadros moved this task from QA to Needs More Work on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.
Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

@bwang I was able to recreate the original bug on prod by throttling the network speed and doing a hard reload. The items with a ❓ show the layout shift, but because of the shift I don't really see the flash. I did test it where I scrolled up once it shifted, but no flash. So the flash part seems to work. Also, I don't see this specific layout shift in prod.

❓ AC1: No flash from reloading the page for logged in users with the main menu pinned by default

Screen Recording 2023-03-15 at 6.10.50 PM.mov.gif (988×704 px, 709 KB)

❓ AC2: No flash from reloading the page for logged in users with the page tools pinned by default
Screen Recording 2023-03-15 at 6.13.17 PM.mov.gif (988×694 px, 1 MB)

✅ AC3: No flash from reloading the page for logged in users with the TOC pinned by default
Screen Recording 2023-03-15 at 6.13.55 PM.mov.gif (988×694 px, 506 KB)

❓ All pinned

Screen Recording 2023-03-15 at 6.09.52 PM.mov.gif (988×704 px, 981 KB)

Esanders added a comment.Mar 16 2023, 3:49 PM

There is a still a shift of the site logo to the right as the hamburger menu appears. This is less of an issue than the vertical shift, but should be easy enough to address.

LoadingLoaded
image.png (253×709 px, 36 KB)
image.png (219×702 px, 32 KB)
Esanders added a comment.Mar 16 2023, 3:50 PM

Also the Main Menu is completely unavailable in an noJS environment now (below 1000px) which seems like a regression.

ovasileva moved this task from Needs More Work to Ready for Signoff on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.Mar 16 2023, 5:02 PM
Jdlrobson reassigned this task from bwang to ovasileva.Mar 16 2023, 5:02 PM
bwang added a comment.EditedMar 16 2023, 6:15 PM
In T331563#8702843, @Esanders wrote:

There is a still a shift of the site logo to the right as the hamburger menu appears. This is less of an issue than the vertical shift, but should be easy enough to address.

This was discussed in code review, we said we would track it in another ticket https://phabricator.wikimedia.org/T332343

In T331563#8702855, @Esanders wrote:

Also the Main Menu is completely unavailable in an noJS environment now (below 1000px) which seems like a regression.

This was intentional (more context), though it isnt a great solution and should have been descoped from the patch because it will be worked on under T313066. I was going to remove it from the patch but I didnt get to it before it was merged. I can undo the change and restore the current state (which also looks broken) if folks prefer, what do you think @ovasileva? To note, this only happens for logged in no-js users who have the main menu or page tools in a pinned state on resolutions below 1000px.

bwang mentioned this in T332343: Layout shift in header from main menu button appearing .Mar 16 2023, 6:19 PM
bwang mentioned this in T331168: Inconsistent treatment for pinnable elements at the desktop breakpoint.Mar 16 2023, 6:59 PM
ovasileva moved this task from Ready for Signoff to QA in Production on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.Mar 20 2023, 3:29 PM
ovasileva reassigned this task from ovasileva to Edtadros.Mar 20 2023, 6:03 PM
ovasileva moved this task from QA in Production to Ready for Signoff on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.
ovasileva moved this task from Ready for Signoff to QA in Production on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.
ovasileva subscribed.
Jdrewniak moved this task from QA in Production to Ready for Signoff on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.Mar 23 2023, 5:01 PM
Jdrewniak moved this task from Ready for Signoff to QA in Production on the Web-Team-Backlog-Archived (Web Team FY2022-23 Q3 Sprint 5) board.
Edtadros closed this task as Resolved.Apr 1 2023, 11:02 PM
Edtadros removed Edtadros as the assignee of this task.

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: No flash from reloading the page for logged in users with the main menu pinned by default
✅ AC2: No flash from reloading the page for logged in users with the page tools pinned by default
✅ AC3: No flash from reloading the page for logged in users with the TOC pinned by default
✅ All pinned

Screen Recording 2023-04-01 at 3.58.29 PM.mov.gif (836×878 px, 967 KB)

Edtadros updated the task description. (Show Details)Apr 1 2023, 11:04 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits