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: [GOAL] Page Tools available on all wikis 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