Page MenuHomePhabricator

Provide a JS entrypoint to create custom portlets
Open, Needs TriagePublic

Description

Background

Vector is the only WMF skin with native menu functionality. Menus are a nice way to consolidate a collection of links, as opposed to throwing them all into #p-cactions or #p-tb which can quickly become too large. mw.util.addPortletLink exists, but it only lets you add to existing portlets. If you want to create a new one, you must construct the HTML yourself. During the development of Vector-2022, this has caused repeated regressions and breakage in popular gadgets such as Twinkle and MoreMenu. It has even caused breakage in Core, namely Live Preview which also has to construct Vector HTML by hand (T262374, T303676).

There is a clear need for a JS method to create custom porlets. While there may not be a precedent for Core to support them, from which other skins can implement styling, Vector specifically seems to beg for this functionality.

T302073: [EPIC] Article Tools proposes even more radical changes to menus that will break gadgets, possibly in a way that is not backwards-compatible -- meaning that for gadgets used across different deployment groups, there will be a period where they are broken for some but not others. This is what happened on March 10, when gadgets maintainers waited for new HTML changes to arrive to group 2 before deploying the corresponding fixes. Although the fixes were deployed within minutes, it was still long enough to attract a flood of complaints. It would be much more ideal if we didn't have to construct the HTML ourselves and could rely on Vector to do it for us.

Proposal

Add a mw.util.addPortlet( locationId, id, label ) method, where locationId is right-navigation (top-level menus) or mw-panel (sidebar portlets). These are the two areas of the page where folks are tempted to create their own portlets/menus. The proposal is to do this just for Vector, since other skins may not benefit from this and may implement their views in unpredictable ways.

Related conversation with @Jdlrobson at https://github.com/wikimedia-gadgets/MoreMenu/issues/25

Event Timeline

Adding editing team since this also concerns the live edit preview feature.

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

[mediawiki/core@master] POC: mw.util.addPortlet method

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

I like the proposal.

I thought I've seen similar ideas in the past, and I found T25515. It proposed basically the same API, but it was closed in 2018 with the conclusion that the existing portlet HTML structure is the standard, and that it could be a stable enough API. I guess that turned out not to be true.

There was also T42813 (similar idea but for individual links, not whole portlets), which was also closed with the conclusion that it's not necessary in 2018 – this also turned out not to be true, and in 2020, @Jdlrobson implemented the same idea in T253938.

In summary, this sure looks like a good thing to have, or maybe even a necessary thing.


On one of those tasks, I found a link to the addPortlet() method in Twinkle: https://en.wikipedia.org/wiki/MediaWiki:Gadget-Twinkle.js#L-222 – we could use this as an example of what would be useful for gadgets, and we should probably try to write the new API in such a way as to allow that method to be rewritten to use it.

Change 771000 abandoned by Jdlrobson:

[mediawiki/core@master] POC: mw.util.addPortlet method

Reason:

Not working on this right now. Needs more thought before implementation.

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