Log font-change event

Change-Id: I093e27d74d047a639082a5da6442944f590c67dc

resources/js/ext.uls.displaysettings.js

@@ -582,6 +582,21 @@
 
 			// Save the preferences
 			mw.webfonts.preferences.save( function ( result ) {
+				var newFonts = mw.webfonts.preferences.registry.fonts || {},
+					oldFonts = displaySettings.savedRegistry.registry.fonts || {};
+
+				if ( newFonts[displaySettings.uiLanguage] !== oldFonts[displaySettings.uiLanguage] ) {
+					mw.hook( 'mw.uls.font.change' ).fire(
+						'interface', displaySettings.uiLanguage, newFonts[displaySettings.uiLanguage]
+					);
+				}
+
+				if ( newFonts[displaySettings.contentLanguage] !== oldFonts[displaySettings.contentLanguage] ) {
+					mw.hook( 'mw.uls.font.change' ).fire(
+						'content', displaySettings.contentLanguage, newFonts[displaySettings.contentLanguage]
+					);
+				}
+
 				// closure for not losing the scope
 				displaySettings.onSave( result );
 				displaySettings.dirty = false;

resources/js/ext.uls.eventlogger.js

@@ -91,6 +91,7 @@
 			mw.hook( 'mw.uls.ime.morelanguages' ).add( $.proxy( this.imeMoreLanguages, this ) );
 			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 ) );
 		},
 
 		/**
@@ -173,6 +174,32 @@
 				action: 'more-languages-access',
 				context: 'interface'
 			} );
+		},
+
+		/**
+		 * Log font preference changes
+		 *
+		 * @param {Object} context Either 'interface' or 'content'
+		 * @param {string} language
+		 * @param {string} font
+		 */
+		fontChange: function ( context, language, font ) {
+			var logParams = {
+				action: 'font-change',
+				context: context
+			};
+
+			if ( context === 'interface' ) {
+				$.extend( logParams, {
+					interfaceFont: font,
+					// Override in case the user changed the ui language but hasn't applied it yet
+					interfaceLanguage: language
+				} );
+			} else {
+				logParams.contentFont = font;
+			}
+
+			this.log( logParams );
 		}
 	};