Page MenuHomePhabricator

[L] [PageTools] Convert main menu into a dropdown menu
Closed, ResolvedPublic1 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 with the feature flag disabled. 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 in master
  • When feature flag is enabled, and sidebar button clicked, 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

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)

Descoped

QA Results - Beta

QA Results - Prod

Related Objects

Event Timeline

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

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 Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
bwang added a subscriber: Edtadros.
Jdlrobson raised the priority of this task from Medium to High.Nov 14 2022, 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.Dec 7 2022, 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

After talking to the team today, we reckon this should be blocked on T317900 as this being pinnable is a blocker for deployment of this feature and the pinning has implications on styling.
Someone should feel free to take over this work for me, when I head out on vacation if I haven't got to it.

Jdlrobson updated the task description. (Show Details)

I've split the design portion of this into T324877 given it doesn't make sense to make design changes until https://phabricator.wikimedia.org/T317900 has been completed.

Instrumentation... https://phabricator.wikimedia.org/T324878

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: When feature flag is disabled, no visual changes in master

Screenshot 2022-12-18 at 12.57.21 PM.png (892×1 px, 362 KB)

✅ AC2: When feature flag is enabled, and sidebar button clicked, the sidebar becomes a dropdown that overlays the content. Clicking (not hovering) the button shows the menu. Clicking it again closes it.
Screen Recording 2022-12-18 at 12.58.53 PM.mov.gif (880×1 px, 595 KB)

✅ AC3: The main menu landmark is inside the header, and includes both the main menu button and the main menu dropdown
Screenshot 2022-12-18 at 1.02.15 PM.png (798×662 px, 188 KB)

✅ AC4: Users can directly tab from the main menu button to the main menu dropdown
Screen Recording 2022-12-18 at 1.03.11 PM.mov.gif (372×1 px, 354 KB)

✅ AC5: The language note at the bottom and the main menu and the opt-out link will remain in the main menu
Screenshot 2022-12-18 at 1.05.00 PM.png (799×417 px, 107 KB)

Edtadros removed Edtadros as the assignee of this task.EditedDec 18 2022, 9:31 PM

Test Result - Prod

Status:
Environment: enwiki
OS: macOS Ventura
Browser: Firefox
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: When feature flag is disabled, no visual changes in master

Screenshot 2022-12-18 at 1.09.46 PM.png (1×1 px, 495 KB)

✅ AC2: When feature flag is enabled, and sidebar button clicked, the sidebar becomes a dropdown that overlays the content. Clicking (not hovering) the button shows the menu. Clicking it again closes it.
Screen Recording 2022-12-18 at 1.11.29 PM.mov.gif (916×1 px, 690 KB)

✅ AC3: The main menu landmark is inside the header, and includes both the main menu button and the main menu dropdown
Screenshot 2022-12-18 at 1.16.01 PM.png (1×616 px, 268 KB)

Screenshot 2022-12-18 at 1.16.24 PM.png (1×632 px, 321 KB)

✅ AC4: Users can directly tab from the main menu button to the main menu dropdown
Screen Recording 2022-12-18 at 1.21.33 PM.mov.gif (544×1 px, 517 KB)

❌ AC5: The language note at the bottom and the main menu and the opt-out link will remain in the main menu
Language note is missing.
Screenshot 2022-12-18 at 1.27.37 PM.png (873×316 px, 84 KB)

ovasileva raised the priority of this task from Medium to High.

Test Result - Beta

Status:
Environment: beta
OS: macOS Ventura
Browser: Firefox
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Retesting AC5
✅ AC5: The language note at the bottom and the main menu and the opt-out link will remain in the main menu

Screenshot 2023-01-05 at 7.11.34 PM.png (759×642 px, 174 KB)

Screenshot 2023-01-05 at 7.11.21 PM.png (710×616 px, 164 KB)

Test Result - Prod

Status:
Environment: enwiki
OS: macOS Ventura
Browser: Firefox
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Retesting AC5
✅ AC5: The language note at the bottom and the main menu and the opt-out link will remain in the main menu
@ovasileva, this passes, but the styling is off.

Screenshot 2023-01-08 at 7.27.59 PM.png (690×732 px, 156 KB)

Screenshot 2023-01-08 at 7.28.16 PM.png (828×690 px, 179 KB)

Edtadros updated the task description. (Show Details)

@ovasileva / @Jdlrobson: Hi, the Due Date set for this open task passed a while ago.
Could you please either update or reset the Due Date (by clicking Edit Task), or set the status of this task to resolved in case this task is done? Thanks!

Looks good! Resolving

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/0abe5c20cc/w/