Talk:Community Wishlist/W320

English translation

No machine translation necessary! Here's an English translation of this Norwegian Bokmål wish.

Possibility of adding icons for mobile view through addPortletLink

addPortletLink is a javascript thing that one my use to customize toolbars, including the main menu and the tools menu.

I have occasionally used addPortletLink to add custom links to various menues. As an active contributor and administrator, I have also activated some gadgets that use addPortletLink to add links next to the "Edit" buttons atop an article, that aid me in keeping track of important tasks. A problem with these is that there does not seem to be any way of adding an icon to these, rendering the buttons entirely empty using a mobile view.

My user experience would be improved if it was possible to add an icon that is used when mobile view is also used. It would also be nice in some other menus (such as the one that pops up when you click the user icon in the top right corner).

This would benefit: Contributors with custom toolbars

EdoAug (talk) 00:08, 29 October 2024 (UTC)

Thank you

Hello @EdoAug, thank you for sharing a problem with the Community Wishlist. Also, thank you for offering a translated version. We will get back to you with further questions if need be. –– STei (WMF) (talk) 13:14, 29 October 2024 (UTC)

@STei (WMF)@JWheeler-WMF, could you mark the status this wish as Open so proper translation can proceed? Commander Keane (talk) 07:05, 13 November 2024 (UTC)

Response to the wish

@EdoAug Thank you for submitting your wish! We are working with internal stakeholders to figure out next steps, such as feasibility and prioritization. We’ll keep you posted about it. Sannita (WMF) (talk) 14:36, 27 November 2025 (UTC)

@EdoAug

It might be that this launched since you filed the wish or maybe overlooked the API or have another suggestion?

mw.util.addPortletLink('p-personal','#','text','id-which-creates-icon-if-supported') MikeZ-WMF (talk) 16:34, 13 March 2026 (UTC)

That obviously wouldn't work unless you're specifically replacing an existing portlet link. And I have difficulty imagining why anyone would want to replace an existing portlet link, let alone use addPortletLink() for that (instead of just modifying the DOM directly). Nardog (talk) 13:50, 23 March 2026 (UTC)

@Nardog I don't understand the exact ask here.. addPortletLink is for adding links NOT replacing links.

The wishlist proposal when translated says "I've also enabled some additional features that use addPortletLink to add links next to the "Edit" buttons at the top of an article, which helps me keep track of important tasks." so the specific ask seems to be about using addPortletLink to add menu items.

Perhaps we could ground this into something more concrete. What is your interpretation of this wish - what are you trying to do that cannot be done with addPortletLink?

There are a few areas of improvement in addPorletLink - in that some menus don't support them and

MediaWiki:Sidebar doesn't allow adding them but those don't seem to be what this wish is asking for. Help me understand? Jon (WMF) (talk) 15:05, 30 March 2026 (UTC)

@Jon (WMF): It's pretty clear to me what this wish is asking for: an ability to pass to addPortletLink() the name of an OOUI/Codex icon that appears next to the portlet link being added in Vector 2022 and Minerva. Currently there's no such ability, so if you really wanted it you'd need clumsy CSS that may break any time, especially for Minerva, which shades the icons—see w:MediaWiki:Gadget-dark-mode-toggle-pagestyles.css for an example.

I know addPortletLink is not for replacing links. I pointed out MikeZ's "solution" only works for replacing existing links—as skins do not provide icons for links that do not already come with them, and duplicate IDs are invalid HTML—which as you pointed out is not what addPortletLink is for. Nardog (talk) 09:58, 31 March 2026 (UTC)

It's not clear to me as there are are lot of things at play here.

Since not all skins support icons, addPortletLink doesn't have knowledge of OOUI or Codex. Skins that support icons need to add support for it. Vector 2022 and Minerva DO have support for icons and Codex.

For example the p-views menu does not support icons:

mw.util.addPortletLink('p-views','#','new', 'XYZ')

However I can add an icon to things in the user menu:

mw.util.addPortletLink('p-personal','#','abc', 'ABC')

This creates an icon class ".mw-ui-icon-vector-gadget-ABC" which is compatible with any Codex icon and Extension:Gadgets. For example I can add the following CSS:

const { icon } = require( './icons.json' );
mw.util.addCSS(`.mw-ui-icon-vector-gadget-ABC {
  mask-image: url(data:image/svg+xml,${encodeURIComponent(`<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g>`+icon+'</g></svg>')});
}`);

The reason we tie the icon to the ID is so that icon CSS is unique - we want to avoid situations where icons rely on CSS provided by code not intended to style them.

With the above in mind, what specifically is being asked for here (or is it all of this?):

• Support for skins other than Vector 2022 and Minerva?
• A better way for passing icon CSS from gadgets to their code?
• Support for icons in Vector 2022/Minerva menus that currently don't have it
• The ability to generate custom icon classes? e.g. addPortletLink('p-personal', { iconClass: 'foo' })

My feeling is that the most impactful change here would be in Extension:Gadgets to improve generation of icon CSS? Jon (WMF) (talk) 23:14, 31 March 2026 (UTC)

The last one. If the skin and the menu have icons, and the passed string is the name of an OOUI/Codex icon, the skin should show the icon next to the portlet link being added (in the same color as the rest of the item icons in the menu), and if not, do nothing. Nardog (talk) 01:08, 3 April 2026 (UTC)

It sounds like the following would give you what you need:

1) A ResourceLoader module that allows generation of an image or CSS for any icon e.g. https://en.wikipedia.org/w/load.php?modules=skins.vector.icons.js&image=appearance (or Extension:Gadget support for icons)

2) An update to addPortletLink as documented in phab:T422273

3) A change in Vector 2022 and Minerva to automatically add the CSS when icon option is passed.

The tricky part is going to be #1. We haven't worked out PHP, let alone JavaScript (see phab:T379236 so I think there would be significant work to do here. So I suggest if you want to make progress with this wish that would be the ask.

Note, this is all syntactic sugar. If you just did #1 you'd be able to do what you want.

const icon = 'clock';
const id = 'gadget-link-icon-foo';
mw.util.addPortletLink('p-personal', '#', 'hi', id)
mw.util.addCSS(`#${id} .vector-icon { ${getIconCSS( icon )} }`)
})

Jon (WMF) (talk) 19:00, 3 April 2026 (UTC)

I think the expectation should be that the icon will be shown as long as the corresponding oojs-ui.styles.icons-* module (or whatever is its Codex replacement) is loaded (without the need to add your own CSS). Nardog (talk) 03:37, 6 April 2026 (UTC)

Declined as proposing existing functionality

@MikeZ-WMF: What is the "existing functionality"? Nardog (talk) 13:38, 20 March 2026 (UTC)

@MikeZ-WMF: There's now phab:T422273, which IMO describes the same request (i.e. that Phab task being fulfilled would be this wish being delivered) and was apparently inspired by this wish. Do you still think this should be declined? If so, (for the nth time) what is the existing functionality? Nardog (talk) 03:42, 6 April 2026 (UTC)

Note: not involved in community tech process just offering my input

I suspect "existing functionality" is the approach I described in phab:T422273#11790793.

FWIW I think solving phab:T422273 is a lot of work, hard to maintain, for small gain and I am not sure what advantage it gives over just writing a line of CSS yourself. As a gadget developer myself, I know it's annoying when an icon doesn't show up but I think we just need better documentation to address that and make that easier.

Vector 2022 and Minerva do not use OOUI, so the CSS in those modules are not compatible with OOUI icons out the box. Legacy Vector and Timeless use background images and padding, working differently to Vector 2022 and Minerva. We'd basically need to write this code for every skin based on how they display icons in addition to changes elsewhere.

We are looking at upward of 4+ weeks of wishlist time to replace a single line of CSS. Jon (WMF) (talk) 15:07, 14 April 2026 (UTC)

If that qualified as "existing functionality", it would disqualify most wishes requesting a frontend feature, as many things in JavaScript are technically possible but require a significant amount of code and a long-term commitment to maintain it (e.g. W266: Allow client-side scripts to convert dates in the format used in MediaWiki interface , which was not declined and has been delivered). Also your post is from April 6, whereas the wish was declined on March 20, so even if that were the case it would mean it was declined without adequate explanation (which remains missing). Nardog (talk) 05:34, 16 April 2026 (UTC)