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
This commit is contained in:
Jon Robson 2023-07-07 08:40:31 -07:00 committed by Jdlrobson
parent 7b7f5267c2
commit 48b1263533
2 changed files with 27 additions and 0 deletions

View file

@ -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();
};

View file

@ -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;