Page MenuHomePhabricator

[L] [Page Tools] Make the page tools menu pinnable
Open, HighPublic1 Estimated Story PointsOct 10 2022

Description

NOTE: Blocker for this work: T306609

With the new feature flag FEATURE_ARTICLE_TOOLS_MENU in place (T306609) we will begin work on the new page tools feature

The scope of this work is pinning the existing more menu. The pinning/hiding functionality should work similarly to the table of contents. No changes should be made to the contents of the menu.

prototype: https://vector-2022.web.app/Moth

image.png (1×772 px, 108 KB)
image.png (1×876 px, 158 KB)

TODO

  • The pinning mechanism should share the same code as the table of contents so this task should be used to generalize that work.
  • The more menu if empty is not shown

QA steps

Use the page tools feature flag query to test on the beta cluster ('?vectorpagetools=1')

  • When the feature flag is disabled there are no visual changes
  • When the feature flag is enabled, the more menu becomes pinnable to the right side of the screen.
  • When the feature flag is enabled at the top of the menu is the label "pin menu to sidebar".
  • When pinned, the menu appears in the right side of the screen
  • When the main menu or TOC are in the left sidebar, the content should be left-anchored to the left sidebar
  • When the left sidebar is empty and the right sidebar has the page tools menu in it, center the content + right sidebar as a block
  • Landmark regions are preserved and accessible by screenreaders when a menu is pinned and unpinned
  • Contents of pinned menu are immediately follows the menu toggle in the DOM so the contents are accessible to keyboard/screenreader users
  • Ensure brackets in pinnable toggle buttons aren't read out to screenreaders.

QA Results - Beta

QA Results - Prod

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@nray thanks for calling that out.

  • if the main menu or TOC are in the left sidebar it is intentional that the content is not centered (the content should be left-anchored to the left sidebar).
  • if the left sidebar is empty, and the right sidebar has the article tools menu in it: I think it might be better to center the entire block (content + right sidebar), rather than centering the content and anchoring the right sidebar to the right side of it), because then as the screen gets smaller things to seem to work out better:
content + left sidebar centeredcontent centered

does that make sense?

thanks @alexhollender_WMF ! That makes sense and I updated the acceptance criteria to reflect that.

@ovasileva Are there any requirements for how this should behave for users who have turned off javascript? I'm wondering if this needs to be similar to how we setup the TOC for users without javascript?

Just realized I never replied here. Yes, I think it should be the same. Uncollapsed, everything open.

Thank you @ovasileva! The TOC menu also has an interesting behavior (please see video below) where it not only appears without javascript when the user clicks the button in the toolbar, but it also moves to the sidebar when the viewport becomes a larger width and goes back to being under the toolbar when the user shrinks the viewport -- all without javascript. Is this a requirement for the article tools as well?

https://jumpshare.com/v/llsfg2L9VhdBQq0KbeQ5

@nray @Jdlrobson so the way the prototype currently works is: when both the TOC is pinned and the article tools menu is pinned, at 1200px the article tools menu is automatically collapsed, and then at 1000px the TOC is automatically collapsed. However what I realized the other week when talking to a community member at office hours: for people who have manually collapsed the TOC, they are going to want the article tools menu to remain pinned for as long as possible (let's say down to 1000px). Would it be possible to do something like that?

  • if TOC + article tools menu are pinned, collapse tools at 1200px and TOC at 1000px
  • if TOC is collapsed, don't collapse article tools until 1000px

@Jdlrobson @ovasileva discussed at offsite: we might want to hide the Move to sidebar button from logged-out people (i.e. that pin/hide functionality is only available if you're logged-in)

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

[mediawiki/skins/Vector@master] POC: Accessible pinned article tools in right sidebar

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

If the menu is pinned it should automatically collapse at 1200px (the same as the table of contents)

To note about this AC, if we want the ToC and article tools to share the same markup for the pinnable toggle (I assume we would), we probably want to consider doing T318178 and T320451, as they both touch the ToC pinnable toggle and label

nray removed nray as the assignee of this task.Oct 18 2022, 5:07 PM
nray added a subscriber: nray.
LGoto renamed this task from [Article Tools] Make the tools menu pinnable to [L] [Article Tools] Make the tools menu pinnable.Oct 18 2022, 5:14 PM

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

[mediawiki/skins/Vector@master] POC: Generic pinning JS and styles

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

The pinning mechanism should share the same code as the table of contents so this task should be used to generalize that work.

@Jdlrobson I started doing some exploratory work here and I think this AC is quite large on it's own. Would it be possible to pull this into it's own task, as it involves refactoring the TOC code including JS, cached HTML and CSS changes. Even with the feature flag there's a good amount of complexity here.

POC here: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/844527

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

[mediawiki/skins/Vector@master] Update TOC to use PinnableHeader, update 'collapsed' naming convention to 'pinned'

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

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

[mediawiki/skins/Vector@master] POC: Make more menu pinnable

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

(documenting a design decision — prototype & task description have been updated)

originally, in order to avoid a situation where the content is too squished between the TOC and the page tools menu, I thought it would be good to automatically collapse the page tools menu at 1200px:

above 1200px1200–1000pxbelow 1000px
Screen Shot 2022-10-21 at 9.26.14 AM.png (865×1 px, 436 KB)
Screen Shot 2022-10-21 at 9.26.28 AM.png (863×1 px, 369 KB)
Screen Shot 2022-10-21 at 9.26.39 AM.png (866×945 px, 339 KB)

however, after thinking a bit more about this, since the pin-able page tools menu is a power user feature (and we know that some power users use narrow/side-by-side windows), I think it would be best to give as much control as possible to the user. this allows them to achieve more configurations; for example, at 1100px the user can choose to have:

TOC + tools pinnedTOC pinnedtools pinnedneither pinned
Screen Shot 2022-10-21 at 10.02.00 AM.png (880×1 px, 382 KB)
Screen Shot 2022-10-21 at 10.02.15 AM.png (878×1 px, 381 KB)
Screen Shot 2022-10-21 at 10.02.38 AM.png (877×1 px, 400 KB)
Screen Shot 2022-10-21 at 10.02.49 AM.png (878×1 px, 397 KB)

in the future we could even consider not automatically collapsing the page tools menu at all, and leaving that completely up to the user. that would allow people to get this kind of layout, for example (cc @AntiCompositeNumber @Quiddity):

Screen Shot 2022-10-21 at 10.34.07 AM.png (877×822 px, 337 KB)

Change 842506 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Accessible pinned article tools in right sidebar

Reason:

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

Jdlrobson set Due Date to Oct 10 2022, 7:00 AM.Oct 21 2022, 10:56 PM
Jdlrobson changed the subtype of this task from "Task" to "Deadline".Oct 21 2022, 10:59 PM

(documenting a design decision — prototype & task description have been updated)

originally, in order to avoid a situation where the content is too squished between the TOC and the article tools menu, I thought it would be good to automatically collapse the article tools menu at 1200px:

above 1200px1200–1000pxbelow 1000px
Screen Shot 2022-10-21 at 9.26.14 AM.png (865×1 px, 436 KB)
Screen Shot 2022-10-21 at 9.26.28 AM.png (863×1 px, 369 KB)
Screen Shot 2022-10-21 at 9.26.39 AM.png (866×945 px, 339 KB)

however, after thinking a bit more about this, since the pin-able article tools menu is a power user feature (and we know that some power users use narrow/side-by-side windows), I think it would be best to give as much control as possible to the user. this allows them to achieve more configurations; for example, at 1100px the user can choose to have:

TOC + tools pinnedTOC pinnedtools pinnedneither pinned
Screen Shot 2022-10-21 at 10.02.00 AM.png (880×1 px, 382 KB)
Screen Shot 2022-10-21 at 10.02.15 AM.png (878×1 px, 381 KB)
Screen Shot 2022-10-21 at 10.02.38 AM.png (877×1 px, 400 KB)
Screen Shot 2022-10-21 at 10.02.49 AM.png (878×1 px, 397 KB)

in the future we could even consider not automatically collapsing the article tools menu at all, and leaving that completely up to the user. that would allow people to get this kind of layout, for example (cc @AntiCompositeNumber @Quiddity):

Screen Shot 2022-10-21 at 10.34.07 AM.png (877×822 px, 337 KB)

So is automatically collapsing the article tools menu not part of this task then?

alexhollender_WMF renamed this task from [L] [Article Tools] Make the tools menu pinnable to [L] [Page Tools] Make the tools menu pinnable.Oct 25 2022, 7:19 PM
alexhollender_WMF renamed this task from [L] [Page Tools] Make the tools menu pinnable to [L] [Page Tools] Make the page tools menu pinnable.Oct 25 2022, 7:26 PM
alexhollender_WMF updated the task description. (Show Details)

So is automatically collapsing the article tools menu not part of this task then?

Collapsing is not in scope for this ticket. The purpose is to understand what it would take to generalize the table of contents pin functionality. That will be handled in T318168.

following up on my comment above (T317897#8335679), and @bwang's question: we've decided that we won't automatically collapse the page tools menu at all...we'll give full control over to the person using the interface

For logged-out users, the "pin to sidebar" button will not appear (will not be pinnable)
For logged-in users, the menu will be pinned by default

I chatted with @nray about this today, and I believe we cant meet these two AC until T319349 at the minimum, and ideally after T320927. Specifically we cant yet have the page tools menu pinned by default

@ovasileva Based off our convo from task sync yesterday, should we create a new task for automatically unpinning page tools when it reaches a certain viewport? Or are we still going with not auto unpinning per @alexhollender_WMF's comment above?

I updated this ticket to remove the default rendering requirements (whether the menu is in the dropdown vs. end column) as that has now been split off into T322051

Change 844527 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add generic PinnableHeader template, CSS & JS

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

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

[mediawiki/skins/Vector@master] [Technical] Add DropdownContents.mustache

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

Change 853404 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Technical] Add DropdownContents.mustache

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

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

[mediawiki/skins/Vector@master] Replace 'more' menu with page tools pinnable dropdown

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

Change 845062 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add ColumnEnd.mustache and new grid styles to support third column

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

Change 854584 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Replace 'more' menu with page tools pinnable dropdown

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

Change 845059 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update TOC to use PinnableHeader

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

@Edtadros I've updated the description to have QA steps, I basically just moved most of the TODOs into QA, as they seem valid as testing steps to me.

  • The more menu if empty is not shown

@ovasileva One thing to note, this step is not yet complete. I'd recommend this step to be capture in a different ticket, I think it would make the most sense in T320927. Doing it alongside T320927 would simplify things a good bit and allow us to avoid writing code for this multiple times.

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

[mediawiki/skins/Vector@wmf/1.40.0-wmf.10] Update TOC to use PinnableHeader

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

Change 859076 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.40.0-wmf.10] Update TOC to use PinnableHeader

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

Mentioned in SAL (#wikimedia-operations) [2022-11-22T21:52:03Z] <samtar@deploy1002> Started scap: Backport for [[gerrit:859076|Update TOC to use PinnableHeader (T317897)]]

Mentioned in SAL (#wikimedia-operations) [2022-11-22T21:52:24Z] <samtar@deploy1002> samtar and jdlrobson: Backport for [[gerrit:859076|Update TOC to use PinnableHeader (T317897)]] synced to the testservers: mwdebug1001.eqiad.wmnet, mwdebug1002.eqiad.wmnet, mwdebug2002.codfw.wmnet, mwdebug2001.codfw.wmnet

Mentioned in SAL (#wikimedia-operations) [2022-11-22T21:58:15Z] <samtar@deploy1002> Finished scap: Backport for [[gerrit:859076|Update TOC to use PinnableHeader (T317897)]] (duration: 06m 11s)

@Edtadros I've updated the description to have QA steps, I basically just moved most of the TODOs into QA, as they seem valid as testing steps to me.

  • The more menu if empty is not shown

@ovasileva One thing to note, this step is not yet complete. I'd recommend this step to be capture in a different ticket, I think it would make the most sense in T320927. Doing it alongside T320927 would simplify things a good bit and allow us to avoid writing code for this multiple times.

Added to AC in T320927: [L] Create Dropdown and Menu Skin component classes

Edtadros added a subscriber: Edtadros.

@bwang, please see the ❓'s below. see T317897#8429973

Test Result - Beta

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

Test Artifact(s):

QA Steps

Use the page tools feature flag query to test on the beta cluster ('?vectorpagetools=1')
Note: Testing scope is limited to a >1000px.

✅ AC1: When the feature flag is disabled there are no visual changes

Screenshot 2022-11-22 at 4.13.43 PM.png (719×1 px, 292 KB)

✅ AC2: When the feature flag is enabled, the more menu becomes pinnable to the right side of the screen.
I'm assuming it's the tools menu. If that is correct, this is a pass
Screen Recording 2022-11-23 at 12.35.36 PM.mov.gif (718×996 px, 353 KB)

✅ AC3: When the feature flag is enabled at the top of the menu is the label "pin menu to sidebar".
The actual label is move to sidebar which makes sense since it is similar to the TOC link. However, the "Tools" is repeated as the first item. Should this be?
Screenshot 2022-11-23 at 12.39.45 PM.png (137×358 px, 12 KB)

✅ AC4: When pinned, the menu appears in the right side of the screen
Screen Recording 2022-11-23 at 12.35.36 PM.mov.gif (718×996 px, 353 KB)

✅ AC5: When the main menu or TOC are in the left sidebar, the content should be left-anchored to the left sidebar
Screen Recording 2022-11-23 at 12.41.59 PM.mov.gif (718×996 px, 333 KB)

✅ AC6: When the left sidebar is empty and the right sidebar has the page tools menu in it, center the content + right sidebar as a block
Screen Recording 2022-11-23 at 12.43.49 PM.mov.gif (718×996 px, 2 MB)

✅ AC7: Landmark regions are preserved and accessible by screenreaders when a menu is pinned and unpinned
Please see the screen video below and let me know if there is any additional testing required to validate this.
Screen Recording 2022-11-23 at 12.47.57 PM.mov.gif (662×996 px, 870 KB)

✅ AC8: Contents of pinned menu are immediately follows the menu toggle in the DOM so the contents are accessible to keyboard/screenreader users
For screen reader artifact refer to AC7. For keyboard control see below.
Screen Recording 2022-11-23 at 12.55.05 PM.mov.gif (662×996 px, 510 KB)

✅ AC9: Ensure brackets in pinnable toggle buttons aren't read out to screenreaders.
Brackets were not read out loud. See AC7

@Edtadros Those all look like a pass to me, thanks for the videos!

Test Result - Prod

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

Test Artifact(s):

QA Steps

Use the page tools feature flag query to test on the beta cluster ('?vectorpagetools=1')
Note: Testing scope is limited to a >1000px.

✅ AC1: When the feature flag is disabled there are no visual changes

Screenshot 2022-11-30 at 3.55.46 PM.png (668×1 px, 325 KB)

✅ AC2: When the feature flag is enabled, the tools menu becomes pinnable to the right side of the screen.
Screen Recording 2022-11-30 at 3.56.32 PM.mov.gif (662×1 px, 560 KB)

✅ AC3: When the feature flag is enabled at the top of the menu is the label "move to sidebar".
See AC2
✅ AC4: When pinned, the menu appears in the right side of the screen
See AC2
✅ AC5: When the main menu or TOC are in the left sidebar, the content should be left-anchored to the left sidebar
Screen Recording 2022-11-30 at 4.02.28 PM.mov.gif (662×1 px, 433 KB)

✅ AC6: When the left sidebar is empty and the right sidebar has the page tools menu in it, center the content + right sidebar as a block
ezgif.com-gif-maker-4.gif (662×1 px, 2 MB)

✅ AC7: Landmark regions are preserved and accessible by screenreaders when a menu is pinned and unpinned
Screen Recording 2022-11-30 at 4.09.46 PM.mov.gif (662×1 px, 461 KB)

✅ AC8: Contents of pinned menu are immediately follows the menu toggle in the DOM so the contents are accessible to keyboard/screenreader users
For screen reader artifact refer to AC7. For keyboard control see below.
Screen Recording 2022-11-30 at 4.11.46 PM.mov.gif (662×1 px, 504 KB)

✅ AC9: Ensure brackets in pinnable toggle buttons aren't read out to screenreaders.
Brackets were not read out loud. See AC7