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

[mediawiki/skins/Vector@master] Inherit font-size for dropdown menus

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

I may be wrong, but I think the issue here is that the markup generated by the server side was changed and the frontend wasn't:
https://github.com/wikimedia/Vector/blob/master/resources/skins.vector.js/dropdownMenus.js#L75

@Jdlrobson you're right. It took me a while to set up ContentTranslation to enable the entrypoint that adds those links (ext.cx.entrypoints.contributionsmenu.js#L124) but it looks like any call to mw.util.addPortlet that targets the personal menu will add a link with a different HTML structure than the server rendered version:

> mw.util.addPortletLink(
  'p-personal',
  '/foo',
  'Link added via JS',
  'cx-language',
  null,
  null,
  null
);

(returns)

<li class="mw-list-item mw-list-item-js" id="cx-language">
  <a href="/foo" class="mw-ui-icon mw-ui-icon-before mw-ui-icon-vector-gadget-cx-language">
    <span>Link added via JS</span>
  </a>
</li>

vs. server rendered HTML

<li class="mw-list-item" id="cx-language">
  <a href="/foo">
    <span class="mw-ui-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions"></span>    
    <span>Link added via JS</span>
  </a>
</li>

During my dropdown refactor, I probably removed a font-size rule that made this difference invisible. The patch above reintroduces the font-size rule, however, a better option might be to make the JS HTML match the server-rendered HTML by editing the addPortletLinkHandler in dropdownMenus.js#L75.

The difference between the two really comes down to the fact that the JS version produces a pseudo-element ::before for the icon using the .mw-ui-icon-before class (which affects the font-size), whereas the server-rendered version uses a <span> with the regular .mw-ui-icon class.

OR... another option might be to switch the server-rendered version to use .mw-ui-icon-before and match the JS version produced by mw.util.addPortlet(). That would give us better compatibility with that API because we could stick to the simple link.classList.add( 'mw-ui-icon', 'mw-ui-icon-before'); modification to support icons, instead of conditionally inserting a <span> element inside the generated link element.

It seems the gadget interface we provide for inserting icons is considered stable, and it does depend on .mw-ui-icon-before too, so it looks to me like the user-links menu is the outlier in this situation.

if ( data.id ) {
  // The following class allows gadgets developers to style or hide an icon.
  // * mw-ui-icon-vector-gadget-<id>
  // The class is considered stable and should not be removed without
  // a #user-notice.
  link.classList.add( 'mw-ui-icon-vector-gadget-' + data.id );
}

however, a better option might be to make the JS HTML match the server-rendered HTML by editing the addPortletLinkHandler in dropdownMenus.js#L75.

I think this is the right fix here. @bwang and I have been trying to deprecate mw-ui-icon-before. The expectation is the markup created by that handler matches the server side. Not sure if there's a way we can add a test to make sure these stay in sync in future.

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

[mediawiki/skins/Vector@master] Append icon to links created via mw.util.addPortletLink

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

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

[mediawiki/skins/Vector@master] Add tests for dropdownMenu.js

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

I'm splitting this into two patches (the tests need more work than the bug fix).

Change 823721 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Append icon to links created via mw.util.addPortletLink

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

@Edtadros thanks for that review!

The font-size in the other dropdown menus (more menu, language variants) remains 14px.
The above remains true for legacy Vector as well.

I think AC 2 and 3 were a little too ambitious for this task. The font-sizes in the other menus is 13px instead of 14px, but that'll be solved in T313828. It looks like the font-size in legacy Vector menus is 12px, but that remains unchanged with this patch, and it'll remain that way.

@Jdlrobson this isn't easily testable because the links in the dropdown were added via JS (mw.util.addPortletLink()) by the ContentTranslation extension. I don't think adding that dependency is suitable for Pixel, but unit tests for the addPortletLink hook are being added.

@Jdlrobson this isn't easily testable because the links in the dropdown were added via JS (mw.util.addPortletLink()) by the ContentTranslation extension. I don't think adding that dependency is suitable for Pixel, but unit tests for the addPortletLink hook are being added.

We could execute mw.util.addPortletLink in one of the regression tests ?

Change 823738 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add tests for dropdownMenu.js

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

Change 821270 abandoned by Jdrewniak:

[mediawiki/skins/Vector@master] Inherit font-size for dropdown menus

Reason:

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