fix(core): 🐛 apply addDefaultPortlets separately

resources/skins.citizen.preferences/addPortlet.polyfill.js

@@ -40,54 +40,52 @@ function addDefaultPortlet( portlet ) {
 }
 
 /**
- * Polyfill for mw.util.addPortlet for < MW 1.41
- * Creates a detached portlet Element in the skin with no elements.
+ * Polyfill for mw.util.addPortlet for < MW 1.42
  *
- * @param {string} id of the new portlet.
- * @param {string} [label] of the new portlet.
- * @param {string} [before] selector of the element preceding the new portlet. If not passed
- *  the caller is responsible for appending the element to the DOM before using addPortletLink.
- * @return {HTMLElement|null} will be null if it was not possible to create an portlet with
- *  the required information e.g. the selector given in before parameter could not be resolved
- *  to an existing element in the page.
+ * @return {Element}
  */
-function addPortlet( id, label, before ) {
+function addPortlet() {
 	if ( mw.util.addPortlet ) {
-		return addDefaultPortlet( mw.util.addPortlet( id, label, before ) );
+		return mw.util.addPortlet;
 	}
 
-	const portlet = document.createElement( 'div' );
-	portlet.classList.add( 'mw-portlet', 'mw-portlet-' + id, 'emptyPortlet',
-		// Additional class is added to allow skins to track portlets added via this mechanism.
-		'mw-portlet-js'
-	);
-	portlet.id = id;
-	if ( label ) {
-		const labelNode = document.createElement( 'label' );
-		labelNode.textContent = label;
-		portlet.appendChild( labelNode );
-	}
-	const listWrapper = document.createElement( 'div' );
-	const list = document.createElement( 'ul' );
-	listWrapper.appendChild( list );
-	portlet.appendChild( listWrapper );
-	if ( before ) {
-		let referenceNode;
-		try {
-			referenceNode = document.querySelector( before );
-		} catch ( e ) {
-			// CSS selector not supported by browser.
+	return function ( id, label, before ) {
+		const portlet = document.createElement( 'div' );
+		portlet.classList.add( 'mw-portlet', 'mw-portlet-' + id, 'emptyPortlet',
+			// Additional class is added to allow skins to track portlets added via this mechanism.
+			'mw-portlet-js'
+		);
+		portlet.id = id;
+		if ( label ) {
+			const labelNode = document.createElement( 'label' );
+			labelNode.textContent = label;
+			portlet.appendChild( labelNode );
 		}
-		if ( referenceNode ) {
-			const parentNode = referenceNode.parentNode;
-			parentNode.insertBefore( portlet, referenceNode );
-		} else {
-			return null;
+		const listWrapper = document.createElement( 'div' );
+		const list = document.createElement( 'ul' );
+		listWrapper.appendChild( list );
+		portlet.appendChild( listWrapper );
+		if ( before ) {
+			let referenceNode;
+			try {
+				referenceNode = document.querySelector( before );
+			} catch ( e ) {
+				// CSS selector not supported by browser.
+			}
+			if ( referenceNode ) {
+				const parentNode = referenceNode.parentNode;
+				parentNode.insertBefore( portlet, referenceNode );
+			} else {
+				return null;
+			}
 		}
-	}
-	mw.hook( 'util.addPortlet' ).fire( portlet, before );
-	return addDefaultPortlet( portlet );
+		mw.hook( 'util.addPortlet' ).fire( portlet, before );
+		return portlet;
+	};
 }
 
-/** @module addPortlet */
-module.exports = addPortlet;
+/** @module addDefaultPortlet, addPortlet */
+module.exports = {
+	addDefaultPortlet,
+	addPortlet
+};

resources/skins.citizen.preferences/clientPreferences.js

@@ -22,7 +22,7 @@
  * @property {string} value
  */
 
-const addPortlet = require( './addPortlet.polyfill.js' )();
+const portlets = require( './addPortlet.polyfill.js' );
 const clientPrefs = require( './clientPrefs.polyfill.js' )();
 
 /**
@@ -291,7 +291,7 @@ function makeClientPreference( parent, featureName, config ) {
 		return;
 	} else {
 		const id = `skin-client-prefs-${ featureName }`;
-		const portlet = addPortlet( id, labelMsg.text() );
+		const portlet = portlets.addDefaultPortlet( portlets.addPortlet( id, labelMsg.text() ) );
 		const labelElement = portlet.querySelector( 'label' );
 
 		const descriptionMsg = getMessage( `${ featureName }-description` );