Lazy-infuse OOUI widgets by tab

Bug: T203838
Change-Id: I43241e0563c62e009c1ad5409bf598b62661483e

includes/specials/forms/PreferencesFormOOUI.php

@@ -213,7 +213,7 @@ class PreferencesFormOOUI extends OOUIHTMLForm {
 				) .
 				Html::rawElement(
 					'div',
-					[ 'class' => 'oo-ui-menuLayout-content' ],
+					[ 'class' => 'oo-ui-menuLayout-content mw-htmlform-autoinfuse-lazy' ],
 					$this->displaySection( $this->mFieldTree, '', 'mw-prefsection-' )
 				)
 			)

resources/src/mediawiki.htmlform/autoinfuse.js

@@ -8,6 +8,11 @@
 		var $oouiNodes, modules, extraModules;
 
 		$oouiNodes = $root.find( '.mw-htmlform-field-autoinfuse' );
+
+		$oouiNodes = $oouiNodes.filter( function () {
+			return !$( this ).closest( '.mw-htmlform-autoinfuse-lazy' ).length;
+		} );
+
 		if ( $oouiNodes.length ) {
 			// The modules are preloaded (added server-side in HTMLFormField, and the individual fields
 			// which need extra ones), but this module doesn't depend on them. Wait until they're loaded.

resources/src/mediawiki.special.preferences.ooui/editfont.js

@@ -1,12 +1,20 @@
 /*!
  * JavaScript for Special:Preferences: editfont field enhancements.
  */
-( function ( mw, $ ) {
-	$( function () {
-		var widget, lastValue;
+( function ( mw ) {
+	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
+		var widget, lastValue,
+			$target = $root.find( '#mw-input-wpeditfont' );
+
+		if (
+			!$target.length ||
+			$target.closest( '.mw-htmlform-autoinfuse-lazy' ).length
+		) {
+			return;
+		}
 
 		try {
-			widget = OO.ui.infuse( $( '#mw-input-wpeditfont' ) );
+			widget = OO.ui.infuse( $target );
 		} catch ( err ) {
 			// This preference could theoretically be disabled ($wgHiddenPrefs)
 			return;
@@ -29,4 +37,4 @@
 		updateLabel( widget.getValue() );
 
 	} );
-}( mediaWiki, jQuery ) );
+}( mediaWiki ) );

resources/src/mediawiki.special.preferences.ooui/tabs.js

@@ -3,7 +3,7 @@
  */
 ( function ( mw, $ ) {
 	$( function () {
-		var $preferences, tabs, wrapper, previousTab;
+		var $preferences, tabs, wrapper, previousTab, switchingNoHash;
 
 		$preferences = $( '#preferences' );
 
@@ -52,8 +52,20 @@
 		$preferences.prepend( wrapper.$element );
 		$( '.mw-prefs-faketabs' ).remove();
 
-		function updateHash( panel ) {
+		function enhancePanel( panel ) {
+			if ( !panel.$element.data( 'mw-section-infused' ) ) {
+				// mw-htmlform-autoinfuse-lazy class has been removed by replacing faketabs
+				mw.hook( 'htmlform.enhance' ).fire( panel.$element );
+				panel.$element.data( 'mw-section-infused', true );
+			}
+		}
+
+		function onTabPanelSet( panel ) {
 			var scrollTop, active;
+
+			if ( switchingNoHash ) {
+				return;
+			}
 			// Handle hash manually to prevent jumping,
 			// therefore save and restore scrollTop to prevent jumping.
 			scrollTop = $( window ).scrollTop();
@@ -67,21 +79,22 @@
 			$( window ).scrollTop( scrollTop );
 		}
 
-		tabs.on( 'set', updateHash );
+		tabs.on( 'set', onTabPanelSet );
 
 		/**
 		 * @ignore
 		 * @param {string} name the name of a tab without the prefix ("mw-prefsection-")
-		 * @param {string} [mode] A hash will be set according to the current
-		 *  open section. Set mode 'noHash' to suppress this.
+		 * @param {boolean} [noHash] A hash will be set according to the current
+		 *  open section. Use this flag to suppress this.
 		 */
-		function switchPrefTab( name, mode ) {
-			if ( mode === 'noHash' ) {
-				tabs.off( 'set', updateHash );
+		function switchPrefTab( name, noHash ) {
+			if ( noHash ) {
+				switchingNoHash = true;
 			}
 			tabs.setTabPanel( name );
-			if ( mode === 'noHash' ) {
-				tabs.on( 'set', updateHash );
+			enhancePanel( tabs.getCurrentTabPanel() );
+			if ( noHash ) {
+				switchingNoHash = false;
 			}
 		}
 
@@ -99,7 +112,7 @@
 				if ( parentSection.length ) {
 					mw.storage.session.remove( 'mwpreferences-prevTab' );
 					// Switch to proper tab and scroll to selected item.
-					switchPrefTab( parentSection.attr( 'id' ).replace( 'mw-prefsection-', '' ), 'noHash' );
+					switchPrefTab( parentSection.attr( 'id' ).replace( 'mw-prefsection-', '' ), true );
 					matchedElement.scrollIntoView();
 				}
 			}
@@ -110,7 +123,7 @@
 			if ( hash.match( /^#mw-[\w-]+/ ) ) {
 				detectHash();
 			} else if ( hash === '' ) {
-				switchPrefTab( 'personal', 'noHash' );
+				switchPrefTab( 'personal', true );
 			}
 		} )
 			// Run the function immediately to select the proper tab on startup.
@@ -119,7 +132,7 @@
 		// Restore the active tab after saving the preferences
 		previousTab = mw.storage.session.get( 'mwpreferences-prevTab' );
 		if ( previousTab ) {
-			switchPrefTab( previousTab, 'noHash' );
+			switchPrefTab( previousTab, true );
 			// Deleting the key, the tab states should be reset until we press Save
 			mw.storage.session.remove( 'mwpreferences-prevTab' );
 		}

resources/src/mediawiki.special.preferences/timezone.js

@@ -2,23 +2,31 @@
  * JavaScript for Special:Preferences: Timezone field enhancements.
  */
 ( function ( mw, $ ) {
-	$( function () {
+	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
 		var $tzSelect, $tzTextbox, timezoneWidget, $localtimeHolder, servertime,
+			$target = $root.find( '#wpTimeCorrection' ),
 			oouiEnabled = $( '#mw-prefs-form' ).hasClass( 'mw-htmlform-ooui' );
 
+		if (
+			!$target.length ||
+			$target.closest( '.mw-htmlform-autoinfuse-lazy' ).length
+		) {
+			return;
+		}
+
 		// Timezone functions.
 		// Guesses Timezone from browser and updates fields onchange.
 
 		if ( oouiEnabled ) {
 			// This is identical to OO.ui.infuse( ... ), but it makes the class name of the result known.
 			try {
-				timezoneWidget = mw.widgets.SelectWithInputWidget.static.infuse( $( '#wpTimeCorrection' ) );
+				timezoneWidget = mw.widgets.SelectWithInputWidget.static.infuse( $target );
 			} catch ( err ) {
 				// This preference could theoretically be disabled ($wgHiddenPrefs)
 				timezoneWidget = null;
 			}
 		} else {
-			$tzSelect = $( '#wpTimeCorrection' );
+			$tzSelect = $target;
 			$tzTextbox = $( '#wpTimeCorrection-other' );
 		}