Page MenuHomePhabricator

PageTools: Move toolbox from main menu to page tools menu
Closed, ResolvedPublic3 Estimated Story Points

Description

NOTE: Blockers for this work: T306519 , T306609, T319349

With the new feature flag FEATURE_ARTICLE_TOOLS_MENU in place (T306609) we will begin work on the new page tools feature. In T306519 we judged the toolbox to be the least risk to move. See T306519#8007940 for useful background

The scope of this ticket is moving page tools from main menu/sidebar to page tools. Note other menus are out of scope and will be handled in T317898. The intention of limiting this chnage to the page tools is to tease out any additional technical complexity we may have missed.

Prototype

https://vector-2022.web.app/Moth
This ticket is only for the move to the tools (previously named more) menu. Pinnability is tracked elsewhere

TODO

  • When the feature flag is disabled there are no visual changes
  • When the feature flag is enabled, the toolbox should move to the dropdown
  • Existing "More options" landmark name is renamed to "Tools"
  • Add PHPUnit tests for any PHP changes made as part of this work
  • There is a VectorComponentPageTools class

QA steps

  • Check Pixel. There should be no visual changes.
  • When the menu resizes, certain actions e.g. watch, edit should come present
  • When the feature flag is enabled, the more menu label changes to "Tools"
  • When the feature flag is enabled, the tools will not show in the main menu but instead in the new page tools menu
  • When the feature flag is enabled, the toolbox will appear in the more menu. The headings will be retained.
  • When a gadget adds to the toolbox e.g. `mw.util.addPortletLink( 'p-tb', '#', 'purge' ) it should appear inside the new page tools menu. To make this work we must ensure the element #p-tb is present in the DOM.

https://phabricator.wikimedia.org/T318434#8503919
https://phabricator.wikimedia.org/T318434#8515554
https://phabricator.wikimedia.org/T318434#8529871

QA Results - Beta

QA Results - Prod

Event Timeline

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

Change 849113 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [WIP] Create new article tools menu

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

ovasileva renamed this task from [ArticleTools] Move toolbox from main menu to article tools menu to [M] ArticleTools: Move toolbox from main menu to article tools menu.Oct 25 2022, 5:19 PM
alexhollender_WMF renamed this task from [M] ArticleTools: Move toolbox from main menu to article tools menu to [M] PageTools: Move toolbox from main menu to page tools menu.Oct 25 2022, 7:22 PM
alexhollender_WMF updated the task description. (Show Details)

Change 851703 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [WIP] Create new Page Tools menu (feature flagged)

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

Change 849113 abandoned by Jdrewniak:

[mediawiki/skins/Vector@master] [WIP] Create new article tools menu

Reason:

Abandones in favour of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/851703

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

Change 843997 abandoned by Jdrewniak:

[mediawiki/skins/Vector@master] Move the "tools" menu from the sidebar to the article tools menu

Reason:

Abandoned in favour of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/851703

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

Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/308cf818b4/w

@alexhollender_WMF I created a patchdemo of the new functionality.

https://patchdemo.wmflabs.org/wikis/308cf818b4/wiki/Dishwasher%20salmon?useskin=vector-2022

The dropdown headings still need styling, but the new menu is mostly there.

I just wanted to verify a few things.

a. The label for the new Page Tools menu should be "Explore more" instead of "Tools".
b. Functionality at lower resolutions: The Views menu ( "create" "history" etc.) fold into the Page Tools menu as they did with More menu.
Visible when resizing browser with the new dropdown open.
c. The label for the Views menu items at lower resolutions is still 'more'. I assume from the prototype it should be 'views' instead (that could be a little tricky).

Observations:
The new Page Tools menu will basically always be visible, including on special pages which recently had the Page Toolbar hidden (unless pinned to side in future I guess):
https://patchdemo.wmflabs.org/wikis/308cf818b4/wiki/Special:RecentChanges?hidebots=1&limit=50&days=7&enhanced=1&urlversion=2&useskin=vector-2022
On that page, also discovered that the RSS feed link has an orange icon, from core... not sure how to handle that.

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

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

@alexhollender_WMF I created a patchdemo of the new functionality.
https://patchdemo.wmflabs.org/wikis/308cf818b4/wiki/Dishwasher%20salmon?useskin=vector-2022
a. The label for the new Page Tools menu should be "Explore more" instead of "Tools".

the label should be "Tools", apologies for the confusion

b. Functionality at lower resolutions: The Views menu ( "create" "history" etc.) fold into the Page Tools menu as they did with More menu.
Visible when resizing browser with the new dropdown open.

looks correct

c. The label for the Views menu items at lower resolutions is still 'more'. I assume from the prototype it should be 'views' instead (that could be a little tricky).

it can remain "Tools" at all resolutions

Observations:
The new Page Tools menu will basically always be visible, including on special pages which recently had the Page Toolbar hidden (unless pinned to side in future I guess):
https://patchdemo.wmflabs.org/wikis/308cf818b4/wiki/Special:RecentChanges?hidebots=1&limit=50&days=7&enhanced=1&urlversion=2&useskin=vector-2022

oh jeez, that was a massive oversight on my part 🙉. so we did a bunch of work for nothing. dang. I will somehow need to repent for this. cc @ovasileva

On that page, also discovered that the RSS feed link has an orange icon, from core... not sure how to handle that.

not too big a of a deal if it remains

Change 857028 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Moving toolbox menu from the sidebar to the Page Tools menu

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

Change 857959 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Prepare styles for Page Tools menu

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

Change 858358 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Prepare data for Page Tools menu

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

Change 857028 abandoned by Jdrewniak:

[mediawiki/skins/Vector@master] Moving toolbox menu from the sidebar to the Page Tools menu

Reason:

Superseded by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/858358

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

Change 857959 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Prepare styles for Page Tools menu

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

Change 851703 abandoned by Jdrewniak:

[mediawiki/skins/Vector@master] Create new Page Tools menu (feature flagged)

Reason:

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

Jdrewniak subscribed.

Change 862317 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Add ability to unpin pinnable headers at low resolution.

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

@Jdrewniak and @Mabualruz will prioritize getting a version of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/858358/ merged by end of week. We'll then drop the priority of this to normal and Mo will refactor this and create the VectorComponentPageTools component in a follow up before we begin QA.

Change 858358 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Prepare data for Page Tools menu

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

Jdlrobson lowered the priority of this task from High to Medium.Dec 5 2022, 11:00 PM

Dropping to medium since remaining work is code quality not functionality.

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

[mediawiki/skins/Vector@master] MainMenu: Print menu now displays in main menu

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

Change 866495 merged by jenkins-bot:

[mediawiki/skins/Vector@master] MainMenu: Print menu now displays in main menu

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

Change 866614 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Follow-up to c1ebfd58, retrieve first value of array_splice

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

Change 866614 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Follow-up to c1ebfd58, retrieve first value of array_splice

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

The remaining work does not block the MVP, but ideally we should wrap this up before the end of 2022:

  • Existing "More options" landmark name is renamed to "Page tools"
  • Add PHPUnit tests for any PHP changes made as part of this work

Regarding PHPUnit strive for sufficient coverage rather than full coverage given our time constraint :)

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

[mediawiki/skins/Vector@master] Refactor SkinVector22::getTemplateData and add test coverage

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

Jdlrobson updated the task description. (Show Details)

Above patch adds test coverage and completes the A/Cs.

Change 876006 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Refactor SkinVector22::getTemplateData and add test coverage

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Check Pixel. There should be no visual changes.

Screenshot 2023-01-05 at 6.50.58 PM.png (406×1 px, 66 KB)

✅ AC2: When the menu resizes, certain actions e.g. watch, edit should come present

Screen Recording 2023-01-05 at 6.55.55 PM.mov.gif (848×1 px, 724 KB)

Screenshot 2023-01-05 at 6.59.36 PM.png (853×669 px, 238 KB)

@Jdlrobson, I'm assuming this means watch and edit appear in the tools menu when I narrow the page. The concern is that it when the tools menu is not in the sidebar it moves all the way to the left and is above the article. Is this the correct behavior?
✅ AC3: When the feature flag is enabled, the more menu label changes to "Tools"
See Above
❓ AC4: When the feature flag is enabled, the sidebar will not show the toolbox
I'm not sure what this step is asking
✅ AC5: When the feature flag is enabled, the toolbox will appear in the more menu. The headings will be retained.
See AC2.
✅ AC6: When a gadget adds to the toolbox e.g. `mw.util.addPortletLink( 'p-tb', '#', 'purge' ) it should appear inside the new page tools menu. To make this work we must ensure the element #p-tb is present in the DOM.
Screenshot 2023-01-05 at 7.02.54 PM.png (987×1 px, 489 KB)

Screenshot 2023-01-05 at 7.02.43 PM.png (960×900 px, 320 KB)

ovasileva raised the priority of this task from Medium to High.Jan 6 2023, 3:58 PM

@Edtadros

❓ AC4: When the feature flag is enabled, the sidebar will not show the toolbox
I'm not sure what this step is asking

I think it's supposed to say when the feature flag is enabled the tools will not show in the main menu.
Disabled (tools show in main menu)

Screen Shot 2023-01-06 at 10.00.20 AM.png (1×3 px, 3 MB)

Enabled (tools do not show in main menu) {F36014456}

@Edtadros / @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!

Test Result - Beta

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

Test Artifact(s):

QA Steps

Revised QA step per T318434#8505122
✅ AC4: When the feature flag is
Enabled (tools do not show in main menu)

Screenshot 2023-01-10 at 8.29.52 PM.png (841×1 px, 538 KB)

Disabled (tools show in main menu)

Screenshot 2023-01-10 at 8.30.10 PM.png (970×1 px, 551 KB)

Test Result - Prod

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

Test Artifact(s):

QA Steps

⬜ AC1: Check Pixel. There should be no visual changes.
not testable in production
✅ AC2: When the menu resizes, certain actions e.g. watch, edit should come present

Screenshot 2023-01-16 at 6.35.46 PM.png (783×696 px, 67 KB)

Screenshot 2023-01-16 at 6.35.18 PM.png (827×676 px, 213 KB)

✅ AC3: When the feature flag is enabled, the more menu label changes to "Tools"
See Above
✅ AC4: When the feature flag is
Enabled (tools do not show in main menu)
Screenshot 2023-01-16 at 6.37.09 PM.png (715×1 px, 304 KB)

Screenshot 2023-01-16 at 6.37.19 PM.png (736×1 px, 312 KB)

Disabled (tools show in main menu)
Screenshot 2023-01-16 at 7.15.11 PM.png (816×1 px, 341 KB)

✅ AC5: When the feature flag is enabled, the toolbox will appear in the more menu. The headings will be retained.
See AC2.
✅ AC6: When a gadget adds to the toolbox e.g. `mw.util.addPortletLink( 'p-tb', '#', 'purge' ) it should appear inside the new page tools menu. To make this work we must ensure the element #p-tb is present in the DOM.
Screenshot 2023-01-16 at 7.17.23 PM.png (949×1 px, 335 KB)

Screenshot 2023-01-16 at 7.17.12 PM.png (931×1 px, 383 KB)

Jdlrobson renamed this task from [M] PageTools: Move toolbox from main menu to page tools menu to PageTools: Move toolbox from main menu to page tools menu.Jan 17 2023, 5:52 PM
Jdlrobson changed the point value for this task from 1 to 3.

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

https://patchdemo.wmflabs.org/wikis/308cf818b4/w/

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

https://patchdemo.wmflabs.org/wikis/be27ed398a/w/

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

https://patchdemo.wmflabs.org/wikis/d6c637a418/w/