Refactor pinnableElements to support clearing column layout via hook
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	bwang
	Feb 27 2026, 4:36 PM

Project Tags

Referenced Files

None

Subscribers

Description

Background

As part of https://phabricator.wikimedia.org/T379444, we want to refactor pinnableElement.js to make it easier for the hooks to clear pinnable elements from columns. This requires improving the TOC pinning behavior, as it is the one edge case not handled by pinnableElement.js now.

Requirements

TOC uses pinnableElements.js for pinning/unpinning behavior rather than custom code in setupIntersectionHandlers
unneeded methods in pinnableElements.js are combined or deleted for maintainabliity

Acceptance criteria

No changes in behavior. All pinnable menus can be pinned and unpinned, except on small viewports
The TOC can continue to be pinned to the sticky header

Details

Related Changes in Gerrit:

	Subject	Author	Repo	Branch	Lines +/-
	Refactor pinnable elements to remove TOC edge case, improve code reuse, and rename methods for clarity	Bernard Wang	mediawiki/skins/Vector	master	+266 -331

Customize query in gerrit

Related Objects

Mentioned Here: T379444: Update Vector 2022 to support disabling right rail for certain editor workflows

Event Timeline

bwang created this task.Feb 27 2026, 4:36 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 27 2026, 4:36 PM

bwang moved this task from Incoming to REx Sprint 15 [Q3 Feb 24 - Mar 9] on the Reader Experience Team board.Feb 27 2026, 4:36 PM

bwang edited projects, added: Reader Experience Team (REx Sprint 15 [Q3 Feb 24 - Mar 9]); removed: Reader Experience Team.

bwang renamed this task from Refactor pinnable element code to support clearing column layout to Fix focus handling of pinnable elements.Feb 27 2026, 4:47 PM

bwang renamed this task from Fix focus handling of pinnable elements to Refactor pinnableElements to support clearing column layout via hook.

bwang updated the task description. (Show Details)

bwang set the point value for this task to 1.

bwang updated the task description. (Show Details)

bwang changed the point value for this task from 1 to 3.

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

[mediawiki/skins/Vector@master] Refactor pinnable elements to remove TOC edge case, improve code reuse, and rename methods for clarity

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

gerritbot added a project: Patch-For-Review.Feb 27 2026, 5:04 PM

ppelberg subscribed.Feb 27 2026, 10:15 PM

Medium in the context of this sprint - will raise in priority proportional to the proximity to March 15th

SToyofuku-WMF moved this task from Ready to Needs code review on the Reader Experience Team (REx Sprint 15 [Q3 Feb 24 - Mar 9]) board.Mar 2 2026, 6:06 PM

Change #1244703 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Refactor pinnable elements to remove TOC edge case, improve code reuse, and rename methods for clarity

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

Maintenance_bot removed a project: Patch-For-Review.Mar 3 2026, 5:31 PM

LMora-WMF moved this task from Needs code review to Needs QA on the Reader Experience Team (REx Sprint 15 [Q3 Feb 24 - Mar 9]) board.Mar 3 2026, 5:59 PM

SToyofuku-WMF raised the priority of this task from Medium to High.Mar 3 2026, 7:16 PM

Checked n enwiki beta - no changes in the UI behavior, as expected.

@bwang - the Console error is dispalyed when a page with ?mpo=mobile-toc-abc:treatment1 is loaded/re-loaded:

https://en.wikipedia.beta.wmcloud.org/wiki/Roman_Empire?mpo=mobile-toc-abc:treatment1

Roman_Empire?mpo=mob…-abc:treatment Uncaught TypeError: Cannot read properties of undefined (reading 'add')
    at window.mfTempScrollHandler (Roman_Empire?mpo=mob…:treatment)
window.mfTempScrollHandler	@	Roman_Empire?mpo=mob…-abc:treatment

I did not see that error in prod (enwiki wmf.17). Probably the error is not related to the patch?

Etonkovidova moved this task from Needs QA to Sign-off on the Reader Experience Team (REx Sprint 15 [Q3 Feb 24 - Mar 9]) board.Mar 4 2026, 3:29 PM

@Etonkovidova that looks like an unrelated error thank you for asking

HFan-WMF closed this task as Resolved.Mar 20 2026, 4:43 PM

HFan-WMF claimed this task.

Refactor pinnableElements to support clearing column layout via hookClosed, ResolvedPublic3 Estimated Story PointsActions