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.php

@@ -147,11 +147,16 @@ $wgResourceModules['ext.uls.preferences'] = array(
 $wgResourceModules['ext.uls.webfonts'] = array(
 	'scripts' => 'resources/js/ext.uls.webfonts.js',
 	'dependencies' => array(
-		'jquery.webfonts',
 		'ext.uls.init',
+		'ext.uls.preferences',
+	),
+) + $resourcePaths;
+
+$wgResourceModules['ext.uls.webfonts.fonts'] = array(
+	'dependencies' => array(
+		'jquery.webfonts',
 		'jquery.uls.data',
 		'ext.uls.webfonts.repository',
-		'ext.uls.preferences',
 	),
 ) + $resourcePaths;
 

UniversalLanguageSelector.hooks.php

@@ -35,7 +35,7 @@ class UniversalLanguageSelectorHooks {
 			return false;
 		}
 
-		return $user->getBoolOption( 'uls-enable' );
+		return true;
 	}
 
 	/**
@@ -47,11 +47,6 @@ class UniversalLanguageSelectorHooks {
 	public static function addModules( $out, $skin ) {
 		global $wgULSPosition, $wgULSGeoService, $wgULSEventLogging;
 
-		$user = $out->getUser();
-		if ( !$user->getBoolOption( 'uls-enable') ) {
-			return true;
-		}
-
 		// Load the style for users without JS, to hide the useless links
 		$out->addModuleStyles( 'ext.uls.nojs' );
 
@@ -71,7 +66,7 @@ class UniversalLanguageSelectorHooks {
 			$out->addModules( 'ext.uls.geoclient' );
 		}
 
-		if ( self::isToolbarEnabled( $user ) ) {
+		if ( self::isToolbarEnabled( $out->getUser() ) ) {
 			// Enable UI language selection for the user.
 			$out->addModules( 'ext.uls.interface' );
 		}
@@ -267,7 +262,9 @@ class UniversalLanguageSelectorHooks {
 	 * @return bool
 	 */
 	public static function addConfig( &$vars ) {
-		global $wgULSGeoService, $wgULSIMEEnabled, $wgULSPosition, $wgULSNoWebfontsSelectors,
+		global $wgULSGeoService,
+			$wgULSIMEEnabled, $wgULSWebfontsEnabled,
+			$wgULSPosition, $wgULSNoWebfontsSelectors,
 			$wgULSAnonCanChangeLanguage, $wgULSEventLogging, $wgULSImeSelectors,
 			$wgULSNoImeSelectors, $wgULSFontRepositoryBasePath, $wgExtensionAssetsPath;
 
@@ -275,7 +272,9 @@ class UniversalLanguageSelectorHooks {
 		if ( is_string( $wgULSGeoService ) ) {
 			$vars['wgULSGeoService'] = $wgULSGeoService;
 		}
+
 		$vars['wgULSIMEEnabled'] = $wgULSIMEEnabled;
+		$vars['wgULSWebfontsEnabled'] = $wgULSWebfontsEnabled;
 		$vars['wgULSPosition'] = $wgULSPosition;
 		$vars['wgULSAnonCanChangeLanguage'] = $wgULSAnonCanChangeLanguage;
 		$vars['wgULSEventLogging'] = $wgULSEventLogging;
@@ -311,12 +310,6 @@ class UniversalLanguageSelectorHooks {
 	}
 
 	public static function onGetPreferences( $user, &$preferences ) {
-		$preferences['uls-enable'] = array(
-			'type' => 'toggle',
-			'label-message' => 'uls-preference',
-			'section' => 'personal/i18n',
-		);
-
 		$preferences['uls-preferences'] = array(
 			'type' => 'api',
 		);

UniversalLanguageSelector.i18n.php

@@ -33,7 +33,6 @@ $messages['en'] = array(
 
 	'uls-plang-title-languages' => 'Languages',
 	'uls-ime-helppage' => 'https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Extension:UniversalLanguageSelector/Input_methods/$1',
-	'uls-preference' => 'Enable the [https://www.mediawiki.org/wiki/Special:MyLanguage/Universal_Language_Selector Universal Language Selector]',
 	'ext-uls-select-language-settings-icon-tooltip' => 'Language settings',
 	'ext-uls-undo-language-tooltip-text' => 'Language changed from $1',
 	'ext-uls-language-settings-preferences-link' => 'More language settings',

UniversalLanguageSelector.php

@@ -100,10 +100,17 @@ $GLOBALS['wgULSLanguageDetection'] = true;
 
 /**
  * Enable the input methods feature for all users by default.
- * Can be disabled manually by the user.
+ * Can be controlled by the user.
  */
 $GLOBALS['wgULSIMEEnabled'] = true;
 
+/**
+ * Enable the webfonts feature for all users by default.
+ * Can be controlled by the user.
+ * @since 2013.01
+ */
+$GLOBALS['wgULSWebfontsEnabled'] = true;
+
 /**
  * Set whether webfont support is loaded within the mobile interface (via the
  * MobileFrontend extension).
@@ -195,7 +202,6 @@ $GLOBALS['wgHooks']['SkinTemplateOutputPageBeforeExec'][] =
 $GLOBALS['wgHooks']['EnterMobileMode'][] = 'UniversalLanguageSelectorHooks::onEnterMobileMode';
 
 $GLOBALS['wgDefaultUserOptions']['uls-preferences'] = '';
-$GLOBALS['wgDefaultUserOptions']['uls-enable'] = '';
 $GLOBALS['wgHooks']['GetPreferences'][] = 'UniversalLanguageSelectorHooks::onGetPreferences';
 
 $GLOBALS['wgExtensionFunctions'][] = function () {
@@ -219,7 +225,7 @@ $GLOBALS['wgExtensionFunctions'][] = function () {
 			$wgResourceModules['schema.UniversalLanguageSelector'] = array(
 				'class' => 'ResourceLoaderSchemaModule',
 				'schema' => 'UniversalLanguageSelector',
-				'revision' => 5729800,
+				'revision' => 7327441,
 			);
 		} else {
 			wfWarn( 'UniversalLanguageSelector is configured to use EventLogging, but '

i18n/en.json

@@ -20,6 +20,9 @@
 "ext-uls-display-settings-anon-label": "Display language:",
 "ext-uls-display-settings-anon-same-as-content": "$1 (same as content)",
 "ext-uls-display-settings-anon-log-in-cta": "[[Special:UserLogin|Log in]] to select a different language for menus.",
+"ext-uls-webfonts-settings-title": "Download fonts when needed",
+"ext-uls-webfonts-settings-info": "Download missing fonts automatically and allow selection of preferred fonts.",
+"ext-uls-webfonts-settings-info-link": "More information",
 "ext-uls-webfonts-select-for": "Select font for $1",
 "ext-uls-webfonts-select-for-ui-info": "Font used for user interface",
 "ext-uls-webfonts-select-for-content-info": "Font used for content",

i18n/qqq.json

@@ -24,6 +24,9 @@
     "ext-uls-display-settings-anon-label": "A label that appears to anonymous users before the message {{msg-mw|Jquery-uls-ext-uls-display-settings-anon-same-as-content}}.\n\n{{Identical|Display language}}",
     "ext-uls-display-settings-anon-same-as-content": "Text that appears to anonymous users after the label {{msg-mw|Jquery-uls-ext-uls-display-settings-anon-label}}.\n\nParameters:\n* $1 - ...",
     "ext-uls-display-settings-anon-log-in-cta": "A call to action for an anonymous user to log in.",
+    "ext-uls-webfonts-settings-title": "Short title for enabling webfonts",
+    "ext-uls-webfonts-settings-info": "Webfonts will be downloaded for displaying text in special scripts.",
+    "ext-uls-webfonts-settings-info-link": "More information link text for webfonts\n{{Identical|More information}}",
     "ext-uls-webfonts-select-for": "Label for font selector dropdown. $1 is a language name",
     "ext-uls-webfonts-select-for-ui-info": "Information displayed under font selector",
     "ext-uls-webfonts-select-for-content-info": "Information displayed under font selector",
@@ -50,4 +53,4 @@
     "ext-uls-input-disable-notification-info-interlanguage": "Notification bubble text when input methods are disabled, appears if the ULS is at interlanguage toolbar",
     "ext-uls-language-settings-applying": "Label for apply settings button in language settings screen, while settings being saved. Please keep it short.",
     "ext-uls-language-settings-preferences-link": "Text for the link showin in user preference screen"
-}
+}

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

tests/browser/features/autonym.feature

@@ -22,7 +22,7 @@ Feature: Autonym font
   Scenario: Autonym font is used in the ULS language search dialog for input language selection by logged-in users
     Given I am logged in
       And I open the Universal Language Selector
-      And I open Input panel of language settings
+      And I switch to Input panel of language settings
     When I click the button with the ellipsis
     Then the language list of ULS should use Autonym font
 

tests/browser/features/font_selection.feature

@@ -1,41 +0,0 @@
-@commons.wikimedia.beta.wmflabs.org @login @needs-custom-setup
-Feature: Font selection
-
-  In order to have better using experience,
-  As a reader and writer,
-  I want to change or disable the fonts for interface and content.
-
-  In addition the user is provided live preview feature: changes are applied
-  immediately when selection is made. Changes can either be applied or discarded
-  for easy testing.
-
-  Background:
-    Given I am logged in
-      And I have reset my preferences
-      And I set "German" as the interface language
-      And I open ULS
-      And I open Display panel of language settings
-    When I open Fonts panel of language settings
-
-  Scenario: Font selector appears
-    Then a font selector for interface language appears
-      And a font selector for content language appears
-
-  Scenario: Discarding live preview of content font
-    When I select OpenDyslexic font for the content language for the live preview
-      And I close the panel to discard the changes
-    # System is the default value for English and German
-    Then the selected content font must be "Systemschriftart"
-      And the active content font must be the same as font prior to the preview
-
-  Scenario: Discarding live preview of interface font
-    When I select OpenDyslexic font for the interface language for the live preview
-      And I close the panel to discard the changes
-    Then the active interface font must be the same as font prior to the preview
-      # System is the default value for English and German
-      And the selected interface font must be Systemschriftart
-
-  Scenario: Applying the live preview of interface font
-    When I select OpenDyslexic font for the interface language for the live preview
-      And I apply the changes
-    Then the interface font must be changed to the "OpenDyslexic" font

tests/browser/features/font_selection_default_disabled.feature

@@ -0,0 +1,93 @@
+@commons.wikimedia.beta.wmflabs.org @login @needs-custom-setup
+Feature: Font selection
+
+  In order to have better using experience,
+  As a reader and writer,
+  I want to change or disable the fonts for interface and content.
+
+  In addition the user is provided live preview feature: changes are applied
+  immediately when selection is made. Changes can either be applied or discarded
+  for easy testing.
+
+  This feature is similar to font_selection_default_enabled,
+  but it is targeted at wikis where automatic font downloading
+  is disabled by default ($wgULSWebfontsEnabled = false).
+
+  Background:
+    Given I am logged in
+      And I have reset my preferences
+      And I set "German" as the interface language
+      And I open ULS
+      And I open Display panel of language settings
+    When I open Fonts panel of language settings
+
+  Scenario: Font selector pane appears
+    Then a font selector for interface language doesn't appear
+      And a font selector for content language doesn't appear
+      And the checkbox to enable fonts downloading appears
+      And the checkbox to enable fonts downloading is not checked
+      And webfonts are not applied to body
+
+  Scenario: Enabling fonts downloading with live preview
+    When I click the checkbox to enable fonts downloading
+    Then a font selector for interface language appears
+      And a font selector for content language appears
+      And the checkbox to enable fonts downloading appears
+      And the checkbox to enable fonts downloading is checked
+      And the selected content font must be system
+      And webfonts are applied to body
+
+  Scenario: Enabling fonts downloading without saving the preferences
+    When I click the checkbox to enable fonts downloading
+      And I select OpenDyslexic font for the content language for the live preview
+      And I close the panel to discard the changes
+      And I open Display panel of language settings
+    Then a font selector for interface language doesn't appear
+      And a font selector for content language doesn't appear
+      And the active interface font must be the same as font prior to the preview
+      And the active content font must be the same as font prior to the preview
+
+  Scenario: Enabling fonts downloading and saving the preferences
+    When I click the checkbox to enable fonts downloading
+      And I select OpenDyslexic font for the interface language for the live preview
+      And I apply the changes
+    Then webfonts are applied to body
+      And the interface font is OpenDyslexic
+
+  Scenario: Enabling fonts downloading and going to another page
+    When I click the checkbox to enable fonts downloading
+      And I select OpenDyslexic font for the content language for the live preview
+      And I apply the changes
+      And I am on the main page
+    Then webfonts are applied to body
+      And the content font is OpenDyslexic
+
+  Scenario: Enabling fonts downloading and then disabling them
+    When I click the checkbox to enable fonts downloading
+      And I select OpenDyslexic font for the interface language for the live preview
+      And I apply the changes
+      And I am on the main page
+      And I open ULS
+      And I open Display panel of language settings
+      And I open Fonts panel of language settings
+      And I click the checkbox to disable fonts downloading
+    Then a font selector for interface language doesn't appear
+      And a font selector for content language doesn't appear
+
+  Scenario: Enabling fonts downloading and then disabling them and saving the preferences
+    When I click the checkbox to enable fonts downloading
+      And I select OpenDyslexic font for the interface language for the live preview
+      And I apply the changes
+      And I am on the main page
+      And I open ULS
+      And I open Display panel of language settings
+      And I open Fonts panel of language settings
+      And I click the checkbox to disable fonts downloading
+      And I apply the changes
+      And I am on the main page
+      And I open ULS
+      And I open Display panel of language settings
+    Then a font selector for interface language doesn't appear
+      And a font selector for content language doesn't appear
+      And the checkbox to enable fonts downloading is not checked
+      And webfonts are not applied to body

tests/browser/features/font_selection_default_enabled.feature

@@ -0,0 +1,78 @@
+@commons.wikimedia.beta.wmflabs.org @login @needs-custom-setup
+Feature: Font selection
+
+  In order to have better using experience,
+  As a reader and writer,
+  I want to change or disable the fonts for interface and content.
+
+  In addition the user is provided live preview feature: changes are applied
+  immediately when selection is made. Changes can either be applied or discarded
+  for easy testing.
+
+  This feature is similar to font_selection_default_disabled,
+  but it is targeted at wikis where automatic font downloading
+  is disabled by default ($wgULSWebfontsEnabled = true).
+
+  Background:
+    Given I am logged in
+      And I have reset my preferences
+      And I set "German" as the interface language
+      And I open ULS
+      And I open Display panel of language settings
+    When I open Fonts panel of language settings
+
+  Scenario: Font selector pane appears
+    Then a font selector for interface language appears
+      And a font selector for content language appears
+      And the checkbox to enable fonts downloading appears
+      And the checkbox to enable fonts downloading is checked
+      And webfonts are applied to body
+
+  Scenario: Discarding live preview of content font
+    When I select OpenDyslexic font for the content language for the live preview
+      And I close the panel to discard the changes
+      And I open Display panel of language settings
+    Then the selected content font must be system
+      And the active content font must be the same as font prior to the preview
+
+  Scenario: Discarding live preview of interface font
+    When I select OpenDyslexic font for the interface language for the live preview
+      And I close the panel to discard the changes
+    Then the active interface font must be the same as font prior to the preview
+      And the selected interface font must be Systemschriftart
+
+  Scenario: Applying the live preview of interface font
+    When I select OpenDyslexic font for the interface language for the live preview
+      And I apply the changes
+    Then the interface font is OpenDyslexic
+
+  Scenario: Disabling fonts if they are enabled by default
+    When I click the checkbox to enable fonts downloading
+    Then a font selector for interface language doesn't appear
+      And a font selector for content language doesn't appear
+      And the checkbox to enable fonts downloading is not checked
+
+  Scenario: Disabling fonts when they are enabled by default and going to another page
+    When I click the checkbox to disable fonts downloading
+      And I apply the changes
+      And I am on the main page
+      And I open ULS
+      And I open Display panel of language settings
+    Then a font selector for interface language doesn't appear
+      And a font selector for content language doesn't appear
+      And the checkbox to enable fonts downloading is not checked
+      And webfonts are not applied to body
+
+  Scenario: Disabling fonts, going to another page, and re-enabling fonts
+    When I click the checkbox to disable fonts downloading
+      And I apply the changes
+      And I am on the main page
+      And I open ULS
+      And I open Display panel of language settings
+      And I open Fonts panel of language settings
+      And I click the checkbox to enable fonts downloading
+    Then a font selector for interface language appears
+      And a font selector for content language appears
+      And the checkbox to enable fonts downloading appears
+      And the checkbox to enable fonts downloading is checked
+      And webfonts are applied to body

tests/browser/features/settings_panel.feature

@@ -4,7 +4,8 @@ Feature: Settings panel
   Scenario Outline: Input settings display
     Given I am <user status>
       And I am on a page without interlanguage links
-    When I open "Input" panel of language settings
+    When I open ULS
+      And I switch to Input panel of language settings
     Then I can disable input methods
       And I can enable input methods
 
@@ -15,7 +16,8 @@ Feature: Settings panel
 
   Scenario: How to use link appears in the Input settings panel
     Given I am at random page
-    When I open "Input" panel of language settings
+    When I open ULS
+      And I switch to Input panel of language settings
       And I click the button with the ellipsis
       And in the language filter I type ml
       And I click on the link to select Malayalam
@@ -23,7 +25,8 @@ Feature: Settings panel
 
   Scenario: More languages (input language selection)
     Given I am at random page
-    When I open "Input" panel of language settings
+    When I open ULS
+      And I switch to Input panel of language settings
       And I click the button with the ellipsis
     Then I see Worldwide
       And I see Language Search
@@ -80,9 +83,9 @@ Feature: Settings panel
     Given I am logged in
       And I have reset my preferences
     When I open the Universal Language Selector
-      And I open Input panel of language settings
+      And I switch to Input panel of language settings
       And I click the button with the ellipsis
       And I use the panel to change my input language to "Finnish"
       And I close the panel to discard the changes
-      And I open Input panel of language settings
+      And I switch to Input panel of language settings
     Then I should see English as the selected input language

tests/browser/features/step_definitions/autonym_steps.rb

@@ -2,10 +2,6 @@ When(/^I am on the main page$/) do
 	visit MainPage
 end
 
-Then(/^I open Input panel of language settings$/) do
-	on(PanelPage).panel_input_element.when_visible.click
-end
-
 Then(/^I open Input side panel of language settings$/) do
 	on(PanelPage).panel_side_input_element.when_visible.click
 end

tests/browser/features/step_definitions/font_selection_steps.rb

@@ -1,3 +1,19 @@
+When(/^I click the checkbox to (?:enable|disable) fonts downloading$/) do
+	on(PanelPage).webfonts_enable_checkbox_element.click
+end
+
+Then(/^the checkbox to enable fonts downloading appears$/) do
+	on(PanelPage).webfonts_enable_checkbox_element.should be_visible
+end
+
+Then(/^the checkbox to enable fonts downloading is checked$/) do
+	on(PanelPage).webfonts_enable_checkbox_element.should be_checked
+end
+
+Then(/^the checkbox to enable fonts downloading is not checked$/) do
+	on(PanelPage).webfonts_enable_checkbox_element.should_not be_checked
+end
+
 Given(/^I open ULS$/) do
 	on(PanelPage).trigger_personal_element.when_visible.click
 end
@@ -12,12 +28,22 @@ Then(/^the active interface font must be the same as font prior to the preview$/
 	on(PanelPage).interface_font.should == @original_interface_font
 end
 
-Then(/^the selected content font must be "(.*?)"$/) do |font|
-	step "I open Display panel of language settings"
-	step "I open Fonts panel of language settings"
-	on(PanelPage).selected_content_font.should == font
+Then(/^the selected content font must be (.*?)$/) do |font|
+	on(PanelPage).selected_content_font_element.when_visible.value.should == font
 end
 
-Then(/^the interface font must be changed to the "(.*?)" font$/) do |font|
+Then(/^the interface font is (.*?)$/) do |font|
 	on(PanelPage).interface_font.should match("^#{font}")
 end
+
+Then(/^the content font is (.*?)$/) do |font|
+	on(PanelPage).content_font.should match("^#{font}")
+end
+
+Then(/^webfonts are applied to body$/) do
+	on(PanelPage).webfonts_library_loaded.should be_true
+end
+
+Then(/^webfonts are not applied to body$/) do
+	on(PanelPage).webfonts_library_loaded.should be_false
+end

tests/browser/features/step_definitions/panel_steps.rb

@@ -48,11 +48,19 @@ Then(/^I can enable input methods$/) do
 end
 
 Then(/^a font selector for interface language appears$/) do
-  on(PanelPage).panel_interface_font_selector_element.should be_visible
+	on(PanelPage).panel_interface_font_selector_element.should be_visible
+end
+
+Then(/^a font selector for interface language doesn't appear$/) do
+	on(PanelPage).panel_interface_font_selector_element.should_not be_visible
 end
 
 Then(/^a font selector for content language appears$/) do
-  on(PanelPage).panel_content_font_selector_element.should be_visible
+	on(PanelPage).panel_content_font_selector_element.should be_visible
+end
+
+Then(/^a font selector for content language doesn't appear$/) do
+	on(PanelPage).panel_content_font_selector_element.should_not be_visible
 end
 
 When(/^I use the panel to change my (?:interface|input) language to "(.*?)"$/) do |language|
@@ -68,7 +76,7 @@ Then(/^the panel is in English/) do
 	on(PanelPage).panel_language_element.text.should == "Language"
 end
 
-When(/^I switch to Input panel of language settings/) do
+When(/^I switch to Input panel of language settings$/) do
 	on(PanelPage).panel_side_input_element.click
 end
 

tests/browser/features/support/pages/panel_page.rb

@@ -10,7 +10,6 @@ class PanelPage
 
 	div(:language_settings_dialog, id: "language-settings-dialog")
 	div(:panel_display, id: "display-settings-block")
-	div(:panel_input, id: "input-settings-block")
 	button(:panel_fonts, id: "uls-display-settings-fonts-tab")
 	button(:panel_language, id: "uls-display-settings-language-tab")
 
@@ -24,6 +23,8 @@ class PanelPage
 	button(:panel_disable_input_methods, class: "uls-input-toggle-button")
 	button(:panel_enable_input_methods, class: "uls-input-toggle-button")
 
+	checkbox(:webfonts_enable_checkbox, id: "webfonts-enable-checkbox")
+
 	select_list(:panel_content_font_selector, id: "content-font-selector")
 	select_list(:panel_interface_font_selector, id: "ui-font-selector")
 
@@ -69,6 +70,9 @@ class PanelPage
 			return ( top < viewportBottom && top >= viewportTop )" )
 	end
 
+	def webfonts_library_loaded
+		@browser.execute_script("return( $( 'body' ).data( 'webfonts' ) !== undefined )")
+	end
 
 	private
 	def font(selector)