Thanks for your team's work on mw.util.addPortlet().

Is this dropdown ticket planned for soon, or should I start refactoring Twinkle with the assumption that this won't be available for a couple months?

The dropdown ticket is currently planned for September (I'm out for much of August), so I think it would definitely be worth refactoring Twinkle now and very helpful for making sure whatever we come up with serves your needs!

This is somewhat related to this, but how much can we expect the new Vector skin to change its HTML in the meantime? I notice that the Variants dropdown looks like this now:

<div id="p-variants" class="vector-dropdown emptyPortlet">
	<input type="checkbox" id="p-variants-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-variants" class="vector-dropdown-checkbox " aria-label="Изменить вариант языка">
	<label id="p-variants-label" for="p-variants-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true"><span class="vector-dropdown-label-text">русский</span>
	</label>
	<div class="vector-dropdown-content">


					
<div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet">
	<div class="vector-menu-content">
		
		<ul class="vector-menu-content-list">
			
			
		</ul>
		
	</div>
</div>

				
	</div>
</div>

Are any more changes planned (since obviously this mw.util.addPortlet can’t be used for now)? Also, why are the same IDs present twice there?

This is somewhat related to this, but how much can we expect the new Vector skin to change its HTML in the meantime?

Quite likely. There's a lot of work standardizing components across Wikimedia and Vector has slowly been transitioning to Codex markup (https://www.mediawiki.org/wiki/Codex) so it's very possible this may be at some point to moved to a Codex.

Are any more changes planned (since obviously this mw.util.addPortlet can’t be used for now)?

mw.util.addPortlet can be used for use cases such as adding menus to the side bar or the Vector 2022 page tools menu.
The dropdowns are very much a Vector-specific API so that's why we're thinking about it separately and I've left notes on the small amount of code needed to work around that API in the mean time on https://github.com/wikimedia-gadgets/twinkle/issues/1835#issuecomment-1666191717

Also, why are the same IDs present twice there?

Thanks for the report. T343730

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

[mediawiki/skins/Vector@master] Support dropdown creation via addPortlet

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

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

[mediawiki/skins/Vector@master] Vector legacy: Support dropdown creation via addPortlet

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

Next steps:

• Add unit testse
• Fix typescript-related build error
• @Mabualruz to review

Change 967991 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Vector legacy: Support dropdown creation via addPortlet

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

Change 963165 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Vector 2022: Support dropdown creation via addPortlet

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

@Novem_Linguae the API is now everywhere if you need help porting more menu or Twinkle let me know!

Thank you very much for your work on this. Will work on updating Twinkle's code as time permits. Perhaps in December.

I left a code review comment over at https://github.com/wikimedia-gadgets/twinkle/pull/1881. Would be good to figure out how to place the dropdown portlet after the more/tools menu instead of before it.

I notice that patches here make use the nullish coalescing operator (??). In some older browsers, possibly including some browsers of Grade A support, this seems to break most of site JavaScript.

Using Firefox 69 and Vector skin, starting 1.42.0-wmf.3, if I navigate to some Wikipedia page, e.g. this, then site JavaScript is mostly unfunctional, e.g. there are no search suggestions and "Add links" widget is gone.

In browser console I get SyntaxError: expected expression, got '?' load.php:711:475 referencing this line in load.php:

},"resources/skins.vector.js/portlets.js":function(require,module,exports){const dropdownMenus=require('./dropdownMenus.js');function addDefaultPortlet(portlet,isDropdown){const ul=portlet.querySelector('ul');if(!ul){return portlet;}ul.classList.add('vector-menu-content-list');const label=portlet.querySelector('label');if(label){const labelDiv=document.createElement('div');labelDiv.classList.add('vector-menu-heading');if(!isDropdown){labelDiv.innerHTML=label.textContent??'';portlet.insertBefore(labelDiv,label);label.remove();}}let wrapper=portlet.querySelector('div:last-child');if(wrapper){ul.remove();wrapper.appendChild(ul);wrapper.classList.add('vector-menu-content');}else{wrapper=document.createElement('div');wrapper.classList.add('vector-menu-content');ul.remove();wrapper.appendChild(ul);portlet.appendChild(wrapper);}portlet.classList.add('vector-menu');return portlet;}function makeDropdown(content){const id=content.id;const label=content.querySelector('label');if(!content.parentNode||!label){return content;}label.id=`${id}-dropdown-label`;label.

If I switch to Monobook skin then all JavaScript works fine.

This browser is quite old but it passes the ES6 Promise.finally check that was recently added to startup.js. I haven't tested other browsers but the nullish coalescing operator is said to require e.g. Safari 13.1 while in MW browser support matrix it says that Safari 11.1+ is Grade A.

@Jdlrobson: this isn't intentional, right?

@Pikne we're working on a fix in T350519. Hopefully that will be out today. This is definitely not intentional! :)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Run the following code in your developer console for both Vector and Vector 2022:

mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');
mw.util.addPortletLink('p-twinkle','#', 'Hello world');

✅ AC1: Expected: A dropdown menu should appear in both skins.
In Vector 2022 it should work when menus are pinned and unpinned.

Vector	Vector 2002 Pinned	Vector 2022 Unpinned

Change #1025882 had a related patch set uploaded (by Novem Linguae; author: Novem Linguae):

[mediawiki/core@master] addPortlet: improve documentation

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