Modern Vector should be compatible with ULS

Without the following changes the language button shows the
wrong label and opens a dialog with zero languages.

* Don't apply heading change to modern Vector
* Look for the element .mw-portlet-lang as well as #p-lang

Bug: T273232
Bug: T273928
Change-Id: Ic201b1983a17cc37fd1ff7c507aab656ea25f370

resources/js/ext.uls.compactlinks.js

@@ -236,8 +236,8 @@
 			getBabelLanguages,
 			getSitePicks,
 			getCommonLanguages,
-			this.getLangsInText,
-			this.getLangsWithBadges,
+			this.getLangsInText.bind( this ),
+			this.getLangsWithBadges.bind( this ),
 			getExtraCommonLanguages,
 			getFinalFallback
 		];
@@ -300,7 +300,7 @@
 	 */
 	CompactInterlanguageList.prototype.getLangsWithBadges = function () {
 		return Array.prototype.map.call(
-			document.querySelectorAll( '#p-lang [class*="badge"] a.interlanguage-link-target' ),
+			this.listElement.querySelectorAll( '[class*="badge"] a.interlanguage-link-target' ),
 			function ( el ) {
 				return mw.uls.convertMediaWikiLanguageCodeToULS( el.lang );
 			}
@@ -382,9 +382,9 @@
 	 */
 	function createCompactList() {
 		var listElement, compactList;
-		listElement = document.querySelector( '#p-lang ul' );
+		listElement = document.querySelector( '.mw-portlet-lang ul, #p-lang ul' );
 		if ( !listElement ) {
-			// Not all namespaces/pages/actions have #p-lang.
+			// Not all namespaces will have a list of languages.
 			return;
 		}
 		compactList = new CompactInterlanguageList( listElement );

resources/js/ext.uls.interface.js

@@ -236,6 +236,8 @@
 	function initInterface() {
 		var $pLang,
 			clickHandler,
+			// T273928: No change to the heading should be made in modern Vector when the language button is present
+			changeHeadingAllowed = mw.config.get( 'skin' ) !== 'vector' || $( '#p-lang-btn' ).length > 0,
 			$ulsTrigger = $( '.uls-trigger' ),
 			anonMode = ( mw.user.isAnon() &&
 				!mw.config.get( 'wgULSAnonCanChangeLanguage' ) ),
@@ -243,7 +245,7 @@
 
 		if ( ulsPosition === 'interlanguage' ) {
 			// TODO: Refactor this block
-			// The interlanguage links section
+			// The interlanguage links section.
 			$pLang = $( '#p-lang' );
 			// Add an element near the interlanguage links header
 			$ulsTrigger = $( '<button>' )
@@ -253,7 +255,7 @@
 			// Take care of any other elements with this class.
 			$ulsTrigger = $( '.uls-settings-trigger' );
 
-			if ( !$pLang.find( 'div ul' ).children().length ) {
+			if ( !$pLang.find( 'div ul' ).children().length && changeHeadingAllowed ) {
 				// Replace the title of the interlanguage links area
 				// if there are no interlanguage links
 				$pLang.find( 'h3' )
@@ -452,10 +454,11 @@
 		ev.preventDefault();
 		// Load the ULS now.
 		mw.loader.using( 'ext.uls.mediawiki' ).then( function () {
+			var parent = document.querySelectorAll( '.mw-portlet-lang, #p-lang' )[ 0 ];
 			launchULS(
 				$target,
 				mw.uls.getInterlanguageListFromNodes(
-					document.querySelectorAll( '#p-lang .interlanguage-link-target' )
+					parent ? parent.querySelectorAll( '.interlanguage-link-target' ) : []
 				)
 			);
 			$target.trigger( 'click' );