Page MenuHomePhabricator

[L] [PageTools] Convert main menu into a dropdown menu
Open, MediumPublic1 Estimated Story PointsNov 7 2022

Description

Blockers 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 main menu is currently a dropdown menu, but behaves differently from other dropdown menus. In this task we'll make it behave like the tools/more menu, the table of contents menu, and the user menu dropdowns

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

default statepinned state
Screen Shot 2022-09-15 at 5.05.40 PM.png (630×540 px, 164 KB)
Screen Shot 2022-09-15 at 5.06.00 PM.png (745×463 px, 174 KB)

Scope

The following is NOT in scope for this ticket.

  • The persistent code should work exactly the same as before. If I open the menu and click a link in the menu, in the next page, the menu should remain open (changing this behaviour is out of scope for this ticket)
  • No changes to the existing contents of the sidebar should be made as part of this ticket. (see T317898)
  • Pinnable behaviour is not part of this change

TODO

  • When feature flag is disabled, no visual changes
  • When feature flag is enabled, the sidebar becomes a dropdown that overlays the content. Clicking (not hovering) the button shows the menu. Clicking it again closes it.
  • The main menu landmark is inside the header, and includes both the main menu button and the main menu dropdown
  • Users can directly tab from the main menu button to the main menu dropdown
  • The language note at the bottom and the main menu and the opt-out link will remain in the main menu

Instrumentation

  • Make sure all menu items have unique event-data-name attributes suffixed with ".dropdown". For example clicking the main menu link currently triggers an event n-mainpage-description, however when clicked inside the dropdown we want that to be n-mainpage-description.dropdown. Use your best judgement on whether to add this in JavaScript or PHP.
  • Once done, mark the appropriate field for that event in the instrumentation spec: https://docs.google.com/spreadsheets/d/18FstayDXt-PKfy7qxL2AQ_dMjn59YdF9d2wHaS1vjTg/edit#gid=0

Open questions

  • Should there be a max height on the menu?
  • What if the menu is larger than the available screen space ? Should there be a scrollbar?
  • Are we dropping the < arrow icon as part of this change? (Yes)

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ovasileva triaged this task as Medium priority.Sep 15 2022, 4:58 PM

@Jdlrobson @ovasileva I think this task might need to be blocked on T317900: [M] [PageTools] Make the new main menu pinnable. Otherwise people might loose the ability to have the main menu pinned open?

No. This is feature flagged so nobody will lose anything until we are ready to release it.

@Jdlrobson
Given the discussion in T314176, can we add an AC to this task for addressing the main menu accessibility issues? i.e.

  • The main menu landmark is moved to the site header, and includes both the main menu button and the main menu dropdown

This AC would fix T314176 and T313447 for the main menu (when the main menu is not pinned)

Jdlrobson changed the subtype of this task from "Task" to "Deadline".
alexhollender_WMF renamed this task from [ArticleTools] Convert main menu into a dropdown menu to [PageTools] Convert main menu into a dropdown menu.Oct 25 2022, 7:27 PM
alexhollender_WMF updated the task description. (Show Details)
Jdlrobson set the point value for this task to 1.Oct 31 2022, 5:40 PM

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

[mediawiki/skins/Vector@master] Page tools: Main menu is a dropdown

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

Had some good fun analyzing this one. I see this as several steps:

  1. Generalizing the dropdown more - currently you can't embed menus within dropdown menu without breaking the checkbox hack display

(https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/853414)
2a Making the menu work:
2a) We'll need to pull out a MainMenuContents partial as the old and new main menu share those links.
2b) We'll update VectorComponentMainMenu.php to make the template get the data it needs.

  1. Styling (didn't analyze this but I don't see many challenges with this part - if anything it means we can move away from #mw-sidebar-button to a more standard icon generation approach.
  2. Instrumentation - not done yet but might be best achieved by some JavaScript that sets data-event-name attributes on the menu items. I don't think the menu API supports this right now.

REMEMBER: Pinning is not in scope for this ticket!

@alexhollender_WMF please see open questions in ticket and edit description if you know the answers.

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/0abe5c20cc/w

LGoto renamed this task from [PageTools] Convert main menu into a dropdown menu to [L] [PageTools] Convert main menu into a dropdown menu.Nov 7 2022, 6:31 PM

Change 853415 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Page tools: Main menu is a dropdown

Reason:

Not working on this right now. Feel free to restore and re-author :-)

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

bwang removed Edtadros as the assignee of this task.
bwang moved this task from QA to Doing on the Readers-Web-Backlog (Kanbanana-2022-23-Q2) board.
bwang added a subscriber: Edtadros.
Jdlrobson raised the priority of this task from Medium to High.Mon, Nov 14, 6:21 PM

Considering this is an L, I'm down to pair with someone else on this as a secondary assignee.

Change 853415 restored by Jdlrobson:

[mediawiki/skins/Vector@master] Page tools: Main menu is a dropdown

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

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

[mediawiki/skins/Vector@master] VectorComponentMainMenuAction: Have class to distinguish between different actions

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

Change 860109 merged by jenkins-bot:

[mediawiki/skins/Vector@master] VectorComponentMainMenuAction: Have class to distinguish between different actions

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

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

[mediawiki/skins/Vector@master] Legacy: Group template/styles together to avoid confusion

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

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

[mediawiki/skins/Vector@master] Page tools: Main menu is a dropdown

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

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

[mediawiki/skins/Vector@master] Page tools: Move styles from PinnableElement to PageTools

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

Change 862398 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Page tools: Move styles from PinnableElement to PageTools

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

Change 862335 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Legacy: Group template/styles together to avoid confusion

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

Jdlrobson lowered the priority of this task from High to Medium.Wed, Dec 7, 8:25 PM

DONE:

  • The menu is converted to a dropdown which unblocks T317900 so I am dropping to normal.

TODO:

  • Styling
  • Instrumentation

Change 862367 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Page tools: Main menu is a dropdown

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