[L] [PageTools] Convert main menu into a dropdown menu
Closed, ResolvedPublic1 Estimated Story PointsNov 7 2022
Actions

Assigned To

Authored By

	Jdlrobson
	Sep 15 2022, 4:11 PM

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 state	pinned state

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

Design will be done as part of https://phabricator.wikimedia.org/T317900
Instrumentation will be done as part of https://phabricator.wikimedia.org/T324878

QA Results - Beta

AC	Status	Details
1	✅	T317899#8476674
2	✅	T317899#8476674
3	✅	T317899#8476674
4	✅	T317899#8476674
5	✅	T317899#8476674 T317899#8503941

QA Results - Prod

AC	Status	Details
1	✅	T317899#8476704
2	✅	T317899#8476704
3	✅	T317899#8476704
4	✅	T317899#8476704
5	❌ ✅	~~T317899#8476704~~ T317899#8507739

Details

Due Date: Nov 7 2022, 8:00 AM

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
Page tools: Main menu is a dropdown	mediawiki/skins/Vector	master	+170 -41
Legacy: Group template/styles together to avoid confusion	mediawiki/skins/Vector	master	+4 -3
Page tools: Move styles from PinnableElement to PageTools	mediawiki/skins/Vector	master	+13 -14
VectorComponentMainMenuAction: Have class to distinguish between different actions	mediawiki/skins/Vector	master	+9 -4

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T317884 [EPIC] Vector 2022 post-deployment work
Resolved		ovasileva	T302073 [GOAL] Page Tools available on all wikis
Resolved	Nov 7 2022	ovasileva	T317899 [L] [PageTools] Convert main menu into a dropdown menu
Duplicate	BUG REPORT	Jdlrobson	T313611 In vector-2022 the main menu becomes full screen width under 1000px
Resolved		• Mabualruz	T320927 Create Dropdown and Menu Skin component classes

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

gerritbot added a project: Patch-For-Review.Nov 4 2022, 8:20 PM

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

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.

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.
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

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.

Jdlrobson removed Jdlrobson as the assignee of this task.Nov 7 2022, 7:00 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

Maintenance_bot removed a project: Patch-For-Review.Nov 8 2022, 12:30 AM

bwang assigned this task to Edtadros.Nov 11 2022, 5:01 PM

bwang removed Edtadros as the assignee of this task.

bwang moved this task from Ready for Development to QA on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.

bwang moved this task from QA to Doing on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.

bwang moved this task from Doing to Ready for Development 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.

bwang mentioned this in T323141: [Grid] Combine mainMenu and toc grid areas into columnStart grid areas (toc in sidebar overlaps footer).Nov 15 2022, 5:31 PM

ovasileva added a subtask: T320927: Create Dropdown and Menu Skin component classes.Nov 15 2022, 6:32 PM

@bwang I can be the 2nd person.

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Nov 17 2022, 10:51 PM

Change 853415 restored by Jdlrobson:

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

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

gerritbot added a project: Patch-For-Review.Nov 17 2022, 11:15 PM

ovasileva updated the task description. (Show Details)Nov 21 2022, 6:18 PM

Jdlrobson removed Jdlrobson as the assignee of this task.Nov 22 2022, 6:03 PM

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.

LGoto assigned this task to bwang.Nov 22 2022, 6:04 PM

Jdlrobson updated the task description. (Show Details)Nov 22 2022, 7:05 PM

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.13; 2022-12-05).Nov 29 2022, 5:01 PM

Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Nov 30 2022, 6:37 PM

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

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Nov 30 2022, 10:26 PM

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

@Jdrewniak will review https://gerrit.wikimedia.org/r/862398 today.

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

bwang reassigned this task from bwang to Jdlrobson.Dec 5 2022, 9:09 PM

bwang moved this task from Code Review to Needs More Work on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.

Jdlrobson moved this task from Needs More Work to Blocked on Others on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Dec 5 2022, 9:40 PM

Jdlrobson moved this task from Blocked on Others to Doing on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Dec 7 2022, 5:42 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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.14; 2022-12-12); removed MW-1.40-notes (1.40.0-wmf.13; 2022-12-05).Dec 8 2022, 12:00 AM

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)Dec 9 2022, 11:57 PM

Jdlrobson mentioned this in T324877: Style the page tools and main menu dropdown feature.Dec 10 2022, 12:01 AM

Jdlrobson moved this task from Blocked on Others to Doing on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.

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

Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Dec 15 2022, 5:59 PM

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)

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)

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)

Edtadros updated the task description. (Show Details)Dec 18 2022, 9:36 PM

AC5: Can you take another look? It's showing for me!
https://en.wikipedia.beta.wmflabs.org/wiki/Related_test?vectorpagetools=1

ovasileva assigned this task to Edtadros.Jan 5 2023, 6:31 PM

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)Jan 9 2023, 3:31 AM

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

Jdlrobson closed subtask T320927: Create Dropdown and Menu Skin component classes as Resolved.Jan 25 2023, 5:29 PM

Jdlrobson closed subtask T313611: In vector-2022 the main menu becomes full screen width under 1000px as Resolved.Mar 27 2023, 5:40 PM

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

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

	F36061341: Screenshot 2023-01-08 at 7.28.16 PM.png
	Jan 9 2023, 3:30 AM

	F36061340: Screenshot 2023-01-08 at 7.27.59 PM.png
	Jan 9 2023, 3:30 AM

	F36004183: Screenshot 2023-01-05 at 7.11.21 PM.png
	Jan 6 2023, 3:12 AM

	F36004182: Screenshot 2023-01-05 at 7.11.34 PM.png
	Jan 6 2023, 3:12 AM

	F35874720: Screenshot 2022-12-18 at 1.27.37 PM.png
	Dec 18 2022, 9:31 PM

	F35874716: Screen Recording 2022-12-18 at 1.21.33 PM.mov.gif
	Dec 18 2022, 9:31 PM

	F35874709: Screenshot 2022-12-18 at 1.16.24 PM.png
	Dec 18 2022, 9:31 PM

	F35874708: Screenshot 2022-12-18 at 1.16.01 PM.png
	Dec 18 2022, 9:31 PM

[L] [PageTools] Convert main menu into a dropdown menuClosed, ResolvedPublic1 Estimated Story PointsNov 7 2022Actions

Description

Scope

TODO

Open questions

Descoped

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

[L] [PageTools] Convert main menu into a dropdown menu
Closed, ResolvedPublic1 Estimated Story PointsNov 7 2022
Actions

Related Objects
Search...