Page MenuHomePhabricator
Create Task
Maniphest T320927

Create Dropdown and Menu Skin component classes
Closed, ResolvedPublic5 Estimated Story Points
Actions

Description

After T319349 is completed, we need to create skin component classes to organize the template data into the nested format required. While not blocking T318434, this would speed things up as well as supporting the upcoming work on T317899.

Benefits

  • Various component data is in the global scope making it harder to reason with templates and easier to break them. For example the input-location template value should be part of data-search-box but isn't.
  • Easier to upstream code from Vector to core and vice versa.
  • Component classes would match template names, making it easier to refer to the data a template has available.

GOALS

  • Removal of SkinVector class will fully isolate old and new Vector
  • Components will scope data to the component they serve
  • Components will provide a language more consistent with Vector's abstraction than MediaWiki core menu API

TODO:

Acceptance criteria:

QA steps

  • If the more menu or page tools menu is empty, the menu should not be shown

Developer notes

Rough proof of concept patches:

Details

SubjectRepoBranchLines +/-
[POC] Vector Components Managementmediawiki/skins/Vectormaster+451 -20
Test MO // Component: UserLinks Simplify the user links component Introduce MenuListItem and IconLink components.mediawiki/skins/Vectormaster+1 -0
Components: Model table of contents in title bar.mediawiki/skins/Vectormaster+105 -65
Dead code elimination: updateDropdownMenuDatamediawiki/skins/Vectormaster+9 -28
Component: UserLinksmediawiki/skins/Vectormaster+345 -195
Fix language button fallbackmediawiki/skins/Vectormaster+84 -52
[Refactor] Rethink Dropdown componentmediawiki/skins/Vectormaster+70 -51
Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
• Mabualruz updated the task description. (Show Details)Oct 17 2022, 8:29 AM
LGoto set the point value for this task to 1.Oct 18 2022, 5:01 PM
ovasileva triaged this task as Low priority.Oct 18 2022, 5:48 PM
Jdlrobson added a comment.Oct 24 2022, 11:17 PM

@Mabualruz can you link this to Phabricator tickets this would help? Is it possible for you to share an early WIP patch to get a sense of what this work would entail before we estimate it?

bwang mentioned this in T319356: Replace custom user menu rendering.Oct 25 2022, 8:48 PM
bwang mentioned this in T317897: [L] [Page Tools] Make the page tools menu pinnable.Oct 27 2022, 8:57 PM
bwang renamed this task from Separate/Create components and mustache templates for menu items in vector to Create Dropdown and Menu Skin component classes, handle compostion.Oct 31 2022, 3:02 PM
bwang raised the priority of this task from Low to High.
bwang updated the task description. (Show Details)
bwang renamed this task from Create Dropdown and Menu Skin component classes, handle compostion to Create Dropdown and Menu Skin component classes, handle composition.Oct 31 2022, 6:48 PM
Jdlrobson added a subscriber: Jdrewniak.Nov 2 2022, 11:23 PM

@bwang @Jdrewniak While analyzing T317899 I wondered if we could handle composition by more simple means?
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/852317 is an example of how we could split the dropdown component into 3 templates to allow us to easily inject different types of content.

ovasileva lowered the priority of this task from High to Medium.Nov 3 2022, 5:29 PM
Jdlrobson claimed this task.Nov 3 2022, 5:30 PM
Jdlrobson renamed this task from Create Dropdown and Menu Skin component classes, handle composition to Create Dropdown and Menu Skin component classes.Nov 3 2022, 9:01 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a parent task: T322089: Vector should encapsulate code inside components.
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 3 2022, 9:04 PM
• Mabualruz claimed this task.Nov 15 2022, 6:07 PM
bwang updated the task description. (Show Details)Nov 15 2022, 6:30 PM
ovasileva added a parent task: T317899: [L] [PageTools] Convert main menu into a dropdown menu.Nov 15 2022, 6:32 PM
LGoto renamed this task from Create Dropdown and Menu Skin component classes to [L] Create Dropdown and Menu Skin component classes.Nov 15 2022, 6:33 PM
LGoto updated the task description. (Show Details)
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.
bwang added a comment.Nov 15 2022, 6:41 PM

@Jdlrobson So the new dropdown component class will be used for both the original "Dropdown.mustache" and "PinnableDropdown.mustache"? i.e. does it need to support two types of dropdown template data? Or should we consider updating the original dropdowns to be in line with our new dropdown data (i.e. 'data-menus')?

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 15 2022, 6:42 PM
bwang updated the task description. (Show Details)Nov 15 2022, 6:46 PM
bwang updated the task description. (Show Details)
gerritbot added a comment.Nov 17 2022, 11:14 PM

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

[mediawiki/skins/Vector@master] [Refactor] Rename Dropdown.mustache to LegacyDropdown.mustache

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

gerritbot added a project: Patch-For-Review.Nov 17 2022, 11:14 PM
Jdlrobson added a comment.EditedNov 17 2022, 11:14 PM

@Jdlrobson So the new dropdown component class will be used for both the original "Dropdown.mustache" and "PinnableDropdown.mustache"? i.e. does it need to support two types of dropdown template data?

I was imagining there would be two classes Dropdown and PinnableDropdown corresponding with those templates with a class inheritance or trait to tie the two (PinnableDropdown is Dropdown + some extra data).

Or should we consider updating the original dropdowns to be in line with our new dropdown data (i.e. 'data-menus')?

I don't think Dropdown needs data-menus. I would prefer us to have a LegacyDropdown class that uses Dropdown and supplies html-before-portlet, html-items and html-after-portal. In my head the Dropdown folder is the component and the existing Dropdown.mustache is a badly named file :-)
Hope https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/858435 is self explanatory and helpful!

bwang added a comment.Nov 18 2022, 8:48 PM

I would prefer us to have a LegacyDropdown class that uses Dropdown and supplies html-before-portlet, html-items and html-after-portal.

@Jdlrobson This part about the LegacyDropdown class, and LegacyDropdown.template in the patch above both makes sense to me

I don't think Dropdown needs data-menus.

However I don't get this part. If we want a Dropdown and PinnableDropdown class that are tied via inheritance or traits, why wouldnt they both have 'data-menus'? I.e. user menu is an example of a Dropdown that would need 'data-menus'.

ovasileva subscribed.Nov 22 2022, 10:56 PM

@Mabualruz, @Jdlrobson, @bwang - I'll go ahead and add the requirements for the empty state of the more menu (details in T317897#8403121) to this ticket. Any concerns?

ovasileva updated the task description. (Show Details)Nov 22 2022, 10:56 PM
bwang added a comment.Nov 28 2022, 5:54 PM

@ovasilvea nope thank you!

gerritbot added a comment.Nov 30 2022, 3:05 AM

Change 858435 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Refactor] Rethink Dropdown component

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

Maintenance_bot removed a project: Patch-For-Review.Nov 30 2022, 3:30 AM
ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.13; 2022-12-05).Nov 30 2022, 4:01 AM
Jdlrobson added a comment.Nov 30 2022, 11:21 PM

I spoke to @Mabualruz today and said he should have a patch by the end of the week.

Jdlrobson mentioned this in T324877: Style the page tools and main menu dropdown feature.Dec 10 2022, 12:01 AM
Jdlrobson updated the task description. (Show Details)Dec 10 2022, 1:06 AM
Jdlrobson added a comment.Dec 10 2022, 1:09 AM

Hi @Mabualruz I hope you are feeling better! Since you were out sick I've been working on some of this with Bernard to unblock certain parts of the minimum viable product.

Next week if you could prioritize getting these three patches merged. Please take over the patches and amend them if needed:

  1. https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/865795
  2. https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/865772
  3. https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/866660

Once those are merged, which are somewhat blocking to the rest of the MVP, please wrap up the remaining parts of this work at your leisure.

Note we should plan for not being able to work on this in 2023, so timebox yourself accordingly!

Jdlrobson claimed this task.Jan 5 2023, 6:03 PM
Jdlrobson updated the task description. (Show Details)Jan 5 2023, 10:39 PM
Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Jan 5 2023, 10:47 PM
gerritbot added a comment.Jan 5 2023, 10:47 PM

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

[mediawiki/skins/Vector@master] Fix language button fallback

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

gerritbot added a project: Patch-For-Review.Jan 5 2023, 10:47 PM
gerritbot added a comment.Jan 6 2023, 1:03 AM

Change 868105 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix language button fallback

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

Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Jan 6 2023, 1:22 AM
gerritbot added a comment.Jan 6 2023, 2:24 AM

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

[mediawiki/skins/Vector@master] Components: Model table of contents in title bar.

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

gerritbot added a comment.Jan 6 2023, 2:24 AM

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

[mediawiki/skins/Vector@master] [WIP] Component: UserLinks

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

Jdlrobson updated the task description. (Show Details)Jan 6 2023, 2:25 AM
Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Jan 6 2023, 10:35 PM
gerritbot added a comment.Jan 6 2023, 11:28 PM

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

[mediawiki/skins/Vector@master] Move methods to legacy skin

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

Jdlrobson reassigned this task from Jdlrobson to • Mabualruz.Jan 9 2023, 6:34 PM
LGoto edited projects, added Web-Team FY2022-23 Q3 Sprint 1; removed Web-Team-Backlog (Kanbanana-2022-23-Q2).Jan 9 2023, 10:20 PM
LGoto moved this task from Incoming to Code Review on the Web-Team FY2022-23 Q3 Sprint 1 board.
gerritbot added a comment.Jan 11 2023, 5:26 PM

Change 879067 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/Vector@master] Test MO // Component: UserLinks Simplify the user links component Introduce MenuListItem and IconLink components.

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

gerritbot added a comment.Jan 11 2023, 5:26 PM

Change 879068 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/Vector@master] Merge remote-tracking branch 'origin/master' into review/jdlrobson/T320927-wip Change-Id: I609a9811340e0b7248cb70b2766e4839b58e3b23

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

gerritbot added a comment.Jan 11 2023, 5:36 PM

Change 879067 abandoned by Mabualruz:

[mediawiki/skins/Vector@master] Test MO // Component: UserLinks Simplify the user links component Introduce MenuListItem and IconLink components.

Reason:

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

Jdlrobson claimed this task.Jan 11 2023, 5:40 PM
Jdlrobson moved this task from Code Review to Doing on the Web-Team FY2022-23 Q3 Sprint 1 board.
gerritbot added a comment.Jan 11 2023, 10:52 PM

Change 876041 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Component: UserLinks

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.19; 2023-01-16); removed MW-1.40-notes (1.40.0-wmf.13; 2022-12-05).Jan 11 2023, 11:00 PM
Jdlrobson reassigned this task from Jdlrobson to • Mabualruz.Jan 11 2023, 11:53 PM
Jdlrobson moved this task from Doing to Code Review on the Web-Team FY2022-23 Q3 Sprint 1 board.

Remaining patches in sequencing order are:

Jdlrobson updated the task description. (Show Details)Jan 11 2023, 11:54 PM
gerritbot added a comment.Jan 12 2023, 6:27 PM

Change 876040 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Components: Model table of contents in title bar.

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

gerritbot added a comment.Jan 12 2023, 6:38 PM

Change 879068 abandoned by Mabualruz:

[mediawiki/skins/Vector@master] Merge remote-tracking branch 'origin/master' into review/jdlrobson/T320927-wip Change-Id: I609a9811340e0b7248cb70b2766e4839b58e3b23

Reason:

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

gerritbot added a comment.Jan 12 2023, 6:41 PM

Change 876262 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Dead code elimination: updateDropdownMenuData

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

Jdlrobson moved this task from Code Review to Doing on the Web-Team FY2022-23 Q3 Sprint 1 board.Jan 12 2023, 10:00 PM
Jdlrobson updated the task description. (Show Details)Jan 12 2023, 10:30 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson merged a task: T322089: Vector should encapsulate code inside components.
Jdlrobson added a subscriber: • nray.
gerritbot added a comment.Jan 16 2023, 1:23 PM

Change 879903 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/Vector@master] Vector Components Management

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

• Mabualruz added a comment.Jan 17 2023, 1:46 PM

@Jdlrobson Can we open a cleanup task, and a component's management task and move this one along?

Jdlrobson moved this task from Doing to Ready for Signoff on the Web-Team FY2022-23 Q3 Sprint 1 board.Jan 17 2023, 5:03 PM

@Mabualruz yes please! Moving to sign off until the new tasks have been created.

Jdlrobson renamed this task from [L] Create Dropdown and Menu Skin component classes to Create Dropdown and Menu Skin component classes.Jan 17 2023, 5:52 PM
Jdlrobson changed the point value for this task from 1 to 5.
• Mabualruz mentioned this in T327914: Cleanup Vector Skin components.Jan 25 2023, 2:38 PM
• Mabualruz mentioned this in T327915: Vector Components Management.Jan 25 2023, 2:46 PM
• Mabualruz added a comment.Jan 25 2023, 2:49 PM

Followup Tasks:

Jdlrobson closed this task as Resolved.Jan 25 2023, 5:29 PM

Awesome! Thanks Mo!

Jdlrobson merged a task: T327914: Cleanup Vector Skin components.Sep 29 2023, 5:15 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL