From 48b1263533ecc43bc4a5013e2badb767a57da0e3 Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Fri, 7 Jul 2023 08:40:31 -0700
Subject: [PATCH] Performance: Language dropdown menu should be hidden when ULS
 is enabled

The language dropdown currently impacts rendering due to making use of
visibility: hidden as space must be allocated for it on the page.

However when ULS is installed it is never used. As some JS to take
that into account so it doesn't impact the rendering of the page.

Since ULS may not be installed we have to consider that case and
retain the existing behaviour for those wiki (this should only
impact 3rd parties)

Bug: T340715
Change-Id: Ic83eaa34ffa74a42c7cf6df7c0857dd7a9401aba
---
 resources/skins.vector.js/languageButton.js       | 12 ++++++++++++
 .../components/LanguageDropdown.less              | 15 +++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/resources/skins.vector.js/languageButton.js b/resources/skins.vector.js/languageButton.js
index 63ca97f44..d15abb44b 100644
--- a/resources/skins.vector.js/languageButton.js
+++ b/resources/skins.vector.js/languageButton.js
@@ -33,9 +33,21 @@ function addInterwikiLinkToMainMenu() {
 	}
 }
 
+/**
+ * Checks if ULS is disabled, and makes sure the language dropdown continues
+ * to work if it is.
+ */
+function checkIfULSDisabled() {
+	const langModuleState = mw.loader.getState( 'ext.uls.interface' );
+	if ( langModuleState === null || langModuleState === 'registered' ) {
+		document.documentElement.classList.add( 'vector-uls-disabled' );
+	}
+}
+
 /**
  * Initialize the language button.
  */
 module.exports = function () {
+	checkIfULSDisabled();
 	addInterwikiLinkToMainMenu();
 };
diff --git a/resources/skins.vector.styles/components/LanguageDropdown.less b/resources/skins.vector.styles/components/LanguageDropdown.less
index 798f2b510..82f281727 100644
--- a/resources/skins.vector.styles/components/LanguageDropdown.less
+++ b/resources/skins.vector.styles/components/LanguageDropdown.less
@@ -105,6 +105,21 @@
 	display: none;
 }
 
+// IMPORTANT: Since dropdowns are visibility: hidden, it is important if ULS has been enabled
+// and taken over the menu, that we set the dropdown to display none to avoid impacting the
+// initial render. Language lists can be long (on some pages +200 links) so avoid having to
+// consider them in the render at all costs! In future, we may want to reconsider this component
+// and potentially use Minerva's fallback - where languages are inside the footer, but that's
+// a change for another day!
+.client-js .mw-portlet-lang .vector-dropdown-content {
+	display: none;
+
+	// ... since ULS is an optional dependency it may not be installed.
+	.vector-uls-disabled& {
+		display: inherit;
+	}
+}
+
 // Show it on view pages where there are 0 languages so user can add languages (JavaScript required)
 .client-js .action-view .vector-dropdown > .mw-portlet-lang-heading-0 {
 	display: flex;