Restore enableWebfonts pref and remove uls-enable

This patch restores the enableWebfonts preference, stored inside
the uls-preferences blob. It existed as 'enable-webfonts' in
the past and was removed in
If735a733717596fae03042c5e277bd538bd8501f

Each wiki can be configured to load the fonts by default
using the new global variable $wgULSWebfontsEnabled.
Its default value is true (to load fonts).

This also removes the preference 'uls-enable', recently added in
I71b70d8ee7c3cad7f49b32e5dc494ef4fc1bdb2f

The initialization of ext.uls.webfonts.js is changed as well,
so that minimal webfonts JS library code is loaded,
and the rest is loaded only if a user requests it.

Bug: 60304
Change-Id: I49e812eae32266f165591c75fd67b86ca06b13f0

resources/js/ext.uls.displaysettings.js

@@ -77,6 +77,18 @@
 
 		+ '</div>' // End font selectors
 
+		// Webfonts enabling checkbox with label
+		+ '<div class="row">'
+		+ '<div class="eleven columns">'
+		+ '<label class="checkbox">'
+		+ '<input type="checkbox" id="webfonts-enable-checkbox" />'
+		+ '<strong data-i18n="ext-uls-webfonts-settings-title"></strong> '
+		+ '<span data-i18n="ext-uls-webfonts-settings-info"></span> '
+		+ '<a target="_blank" href="https://www.mediawiki.org/wiki/Universal_Language_Selector/WebFonts" data-i18n="ext-uls-webfonts-settings-info-link"></a>'
+		+ '</label>'
+		+ '</div>'
+		+ '</div>'
+
 		+ '</div>'; // End font settings section
 
 	function DisplaySettings( $parent ) {
@@ -104,6 +116,7 @@
 			this.prepareLanguages();
 			this.prepareUIFonts();
 			this.prepareContentFonts();
+			this.prepareWebfontsCheckbox();
 
 			// Usually this is already loaded, but when changing language it
 			// might not be.
@@ -112,6 +125,20 @@
 			this.dirty = false;
 		},
 
+		prepareWebfontsCheckbox: function () {
+			var webFontsEnabled = this.isWebFontsEnabled();
+
+			if ( !webFontsEnabled ) {
+				$( '#uls-display-settings-font-selectors' ).addClass( 'hide' );
+			}
+
+			$( '#webfonts-enable-checkbox' ).prop( 'checked', webFontsEnabled );
+		},
+
+		isWebFontsEnabled: function () {
+			return mw.webfonts.preferences.isEnabled();
+		},
+
 		/**
 		 * Prepare the UI language selector
 		 */
@@ -343,7 +370,9 @@
 			$.i18n().locale = language;
 			mw.uls.loadLocalization( language ).done( function () {
 				displaySettings.i18n();
-				displaySettings.$webfonts.refresh();
+				if ( displaySettings.$webfonts ) {
+					displaySettings.$webfonts.refresh();
+				}
 			} );
 		},
 
@@ -383,7 +412,11 @@
 			// Get the language code from the right property -
 			// uiLanguage or contentLanguage
 			language = this[ target + 'Language' ];
-			fonts = this.$webfonts.list( language );
+			if ( this.isWebFontsEnabled() ) {
+				fonts = this.$webfonts.list( language );
+			} else {
+				fonts = [];
+			}
 
 			// Possible classes:
 			// uls-ui-fonts
@@ -418,6 +451,8 @@
 				}
 			} );
 
+			$fontSelector.prop( 'disabled', !this.isWebFontsEnabled() );
+
 			// Using attr() instead of data() because jquery.i18n doesn't
 			// currently see latter.
 			$systemFont = $( '<option>' )
@@ -488,7 +523,41 @@
 				$uiFontSelector = this.$template.find( '#ui-font-selector' ),
 				$tabButtons = displaySettings.$template.find( '.uls-display-settings-tab-switcher button' );
 
-			// TODO all these repeated selectors can be placed in object constructor.
+			$( '#webfonts-enable-checkbox' ).on( 'click', function () {
+				var $fontSelectors = $( '#uls-display-settings-font-selectors' );
+
+				displaySettings.markDirty();
+
+				if ( this.checked ) {
+					mw.loader.using( 'ext.uls.webfonts.fonts', function () {
+						mw.webfonts.setup();
+
+						// Allow the webfonts library to finish loading
+						setTimeout( function() {
+							displaySettings.$webfonts = $( 'body' ).data( 'webfonts' );
+
+							mw.webfonts.preferences.enable();
+
+							displaySettings.prepareContentFonts();
+							displaySettings.prepareUIFonts();
+
+							displaySettings.i18n();
+							displaySettings.$webfonts.apply( $uiFontSelector.find( 'option:selected' ) );
+							displaySettings.$webfonts.refresh();
+
+							$fontSelectors.removeClass( 'hide' );
+						}, 1 );
+					} );
+				} else {
+					$fontSelectors.addClass( 'hide' );
+					mw.webfonts.preferences.disable();
+					mw.webfonts.preferences.setFont( displaySettings.uiLanguage, 'system' );
+					displaySettings.$webfonts.refresh();
+
+					$contentFontSelector.prop( 'disabled', true );
+					$uiFontSelector.prop( 'disabled', true );
+				}
+			} );
 
 			$uiFontSelector.on( 'change', function () {
 				displaySettings.markDirty();
@@ -577,8 +646,24 @@
 			displaySettings.$parent.setBusy( true );
 			// Save the preferences
 			mw.webfonts.preferences.save( function ( result ) {
-				var newFonts = mw.webfonts.preferences.registry.fonts || {},
-					oldFonts = displaySettings.savedRegistry.registry.fonts || {};
+				var newWebfontsEnable, oldWebfontsEnable, webfontsEvent,
+					newRegistry = mw.webfonts.preferences.registry,
+					oldRegistry = displaySettings.savedRegistry.registry,
+					newFonts = newRegistry.fonts || {},
+					oldFonts = oldRegistry.fonts || {};
+
+				newWebfontsEnable = newRegistry.webfontsEnabled;
+				oldWebfontsEnable = oldRegistry.webfontsEnabled;
+				if ( oldWebfontsEnable === undefined ) {
+					oldWebfontsEnable = mw.config.get( 'wgULSWebfontsEnabled' );
+				}
+
+				if ( newWebfontsEnable !== oldWebfontsEnable ) {
+					webfontsEvent = newWebfontsEnable ?
+						'mw.uls.webfonts.enable' :
+						'mw.uls.webfonts.disable';
+					mw.hook( webfontsEvent ).fire( 'displaysettings' );
+				}
 
 				if ( newFonts[displaySettings.uiLanguage] !== oldFonts[displaySettings.uiLanguage] ) {
 					mw.hook( 'mw.uls.font.change' ).fire(

resources/js/ext.uls.eventlogger.js

@@ -83,6 +83,9 @@
 			mw.hook( 'mw.uls.interface.morelanguages' ).add( $.proxy( this.interfaceMoreLanguages, this ) );
 			mw.hook( 'mw.uls.interface.language.change' ).add( $.proxy( this.interfaceLanguageChange, this ) );
 			mw.hook( 'mw.uls.font.change' ).add( $.proxy( this.fontChange, this ) );
+			mw.hook( 'mw.uls.webfonts.enable' ).add( $.proxy( this.enableWebfonts, this ) );
+			mw.hook( 'mw.uls.webfonts.disable' ).add( $.proxy( this.disableWebfonts, this ) );
+
 			$( 'body' ).on( 'noresults.uls', '.uls-menu .languagefilter',
 				$.proxy( this.noSearchResults, this )
 			);
@@ -208,6 +211,22 @@
 			this.log( logParams );
 		},
 
+		/**
+		 * Log webfonts disabling
+		 * @param {string} context Where the setting was changed.
+		 */
+		disableWebfonts: function ( context ) {
+			this.log( { action: 'webfonts-disable', context: context } );
+		},
+
+		/**
+		 * Log webfonts enabling
+		 * @param {string} context Where the setting was changed.
+		 */
+		enableWebfonts: function ( context ) {
+			this.log( { action: 'webfonts-enable', context: context } );
+		},
+
 		/**
 		 * Log search strings which produce no search results.
 		 * @param {jQuery.event} event The orignal event

resources/js/ext.uls.ime.js

@@ -150,8 +150,11 @@
 			e.stopPropagation();
 		} );
 
-		// apply fonts to this
-		imeselector.$menu.webfonts();
+		// If the webfonts are loaded, apply webfonts to the selector
+		if ( $.fn.webfonts ) {
+			imeselector.$menu.webfonts();
+		}
+
 		return $( '<div>' )
 			.addClass( 'uls-ime-menu-settings-item' )
 			.append( $disableInputToolsLink, $moreSettingsLink );

resources/js/ext.uls.inputsettings.js

@@ -75,7 +75,9 @@
 		 * Render the module into a given target
 		 */
 		render: function () {
-			var $enabledOnly;
+			var $enabledOnly,
+				webfonts = $( 'body' ).data( 'webfonts' );
+
 			this.dirty = false;
 			this.$parent.$settingsPanel.empty();
 			this.$imes = $( 'body' ).data( 'ime' );
@@ -91,7 +93,11 @@
 			this.prepareLanguages();
 			this.prepareToggleButton();
 			this.$parent.i18n();
-			$( 'body' ).data( 'webfonts' ).refresh();
+
+			if ( webfonts ) {
+				webfonts.refresh();
+			}
+
 			this.listen();
 		},
 

resources/js/ext.uls.webfonts.js

@@ -18,8 +18,7 @@
  */
 ( function ( $, mw ) {
 	'use strict';
-
-	var mediawikiFontRepository, ulsPreferences,
+	var ulsPreferences,
 		// Text to prepend the sample text. 0D00 is an unassigned unicode point.
 		tofuSalt = '\u0D00',
 		// cache languages with tofu.
@@ -29,7 +28,20 @@
 	ulsPreferences = mw.uls.preferences();
 	mw.webfonts.preferences = {
 		registry: {
-			fonts: {}
+			fonts: {},
+			webfontsEnabled: mw.config.get( 'wgULSWebfontsEnabled' )
+		},
+
+		isEnabled: function () {
+			return this.registry.webfontsEnabled;
+		},
+
+		enable: function () {
+			this.registry.webfontsEnabled = true;
+		},
+
+		disable: function () {
+			this.registry.webfontsEnabled = false;
 		},
 
 		setFont: function ( language, font ) {
@@ -53,7 +65,6 @@
 		}
 	};
 
-
 	/**
 	 * Detect tofu
 	 *
@@ -108,11 +119,19 @@
 		return detected;
 	}
 
-	mediawikiFontRepository = $.webfonts.repository;
-	mediawikiFontRepository.base = mw.config.get( 'wgULSFontRepositoryBasePath' );
-
 	mw.webfonts.setup = function () {
 		// Initialize webfonts
+		var mediawikiFontRepository = $.webfonts.repository;
+
+		mediawikiFontRepository.base = mw.config.get( 'wgULSFontRepositoryBasePath' );
+
+		// MediaWiki specific overrides for jquery.webfonts
+		$.extend( $.fn.webfonts.defaults, {
+			repository: mediawikiFontRepository,
+			fontStack: $( 'body' ).css( 'font-family' ).split( /, /g ),
+			exclude: mw.config.get( 'wgULSNoWebfontsSelectors' ).join( ', ' )
+		} );
+
 		$.fn.webfonts.defaults = $.extend( $.fn.webfonts.defaults, {
 			 /**
 			  * Font selector - depending the language and optionally
@@ -200,16 +219,11 @@
 
 	$( document ).ready( function () {
 		mw.uls.init( function () {
-
-			// MediaWiki specific overrides for jquery.webfonts
-			$.extend( $.fn.webfonts.defaults, {
-				repository: mediawikiFontRepository,
-				fontStack: $( 'body' ).css( 'font-family' ).split( /, /g ),
-				exclude: mw.config.get( 'wgULSNoWebfontsSelectors' ).join( ', ' )
-			} );
-
 			mw.webfonts.preferences.load();
-			mw.webfonts.setup();
+
+			if ( mw.webfonts.preferences.isEnabled() ) {
+				mw.loader.using( 'ext.uls.webfonts.fonts', mw.webfonts.setup );
+			}
 		} );
 	} );
 }( jQuery, mediaWiki ) );