Add icons to Special:Preferences mobile layout

Added icons to Special:Preferences' mobile layout sections. Also added a hook so extensions can add their own icons.

Bug: T317419
Change-Id: I6d5730d47e7595b1705787995fe5db2fe734d7f5

includes/Hook/PreferencesGetIconHook.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace MediaWiki\Hook;
+
+/**
+ * This is a hook handler interface, see docs/Hooks.md.
+ * Use the hook name "PreferencesGetIcon" to register handlers implementing this interface.
+ *
+ * @stable to implement
+ * @ingroup Hooks
+ */
+interface PreferencesGetIconHook {
+	/**
+	 * Use the hook to add an icon that will be displayed in the mobile layout of
+	 * Special:Preferences.
+	 *
+	 * @since 1.40
+	 * @param array &$iconNames a key-value array that assigns an icon name to a section name.
+	 * The key is the section name, the value is the icon name.
+	 * You can obtain the icon names from
+	 * https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=desktop
+	 * @return bool|void True or no return value to continue or false to abort
+	 */
+	public function onPreferencesGetIcon( &$iconNames );
+}

includes/HookContainer/HookRunner.php

@@ -304,6 +304,7 @@ class HookRunner implements
 	\MediaWiki\Hook\ParserTestTablesHook,
 	\MediaWiki\Hook\PasswordPoliciesForUserHook,
 	\MediaWiki\Hook\PostLoginRedirectHook,
+	\MediaWiki\Hook\PreferencesGetIconHook,
 	\MediaWiki\Hook\PreferencesGetLayoutHook,
 	\MediaWiki\Hook\PreferencesGetLegendHook,
 	\MediaWiki\Hook\PrefsEmailAuditHook,
@@ -3088,6 +3089,13 @@ class HookRunner implements
 		);
 	}
 
+	public function onPreferencesGetIcon( &$iconNames ) {
+		return $this->container->run(
+			'PreferencesGetIcon',
+			[ &$iconNames ]
+		);
+	}
+
 	public function onPreferencesGetLayout( &$useMobileLayout, $skin ) {
 		return $this->container->run(
 			'PreferencesGetLayout',

includes/specials/forms/PreferencesFormOOUI.php

@@ -213,6 +213,19 @@ class PreferencesFormOOUI extends OOUIHTMLForm {
 	 */
 	private function createMobilePreferencesForm() {
 		$prefPanels = [];
+		$iconNames = [
+			'personal' => 'userAvatar',
+			'rendering' => 'palette',
+			'editing' => 'edit',
+			'rc' => 'recentChanges',
+			'watchlist' => 'watchlist',
+			'searchoptions' => 'search',
+			'misc' => '',
+		];
+		$hookIcons = [];
+		// Get icons from extensions that have their own sections
+		$this->getHookRunner()->onPreferencesGetIcon( $hookIcons );
+		$iconNames += $hookIcons;
 
 		foreach ( $this->mFieldTree as $key => $val ) {
 			if ( !is_array( $val ) ) {
@@ -238,8 +251,20 @@ class PreferencesFormOOUI extends OOUIHTMLForm {
 
 			$iconHeaderDiv = ( new OOUI\Tag( 'div' ) )
 				->addClasses( [ 'mw-prefs-header-container' ] );
-
+			$iconExists = array_key_exists( $key, $iconNames );
+			if ( $iconExists ) {
+				$iconName = $iconNames[ $key ];
+			} else {
+				$iconName = "settings";
+			}
+			$spanIcon = new OOUI\IconWidget( [
+				'icon' => $iconName,
+				'label' => $label,
+				'title' => $label,
+				'classes' => [ 'mw-prefs-icon' ],
+			] );
 			$prefTitle = ( new OOUI\Tag( 'h5' ) )->appendContent( $label )->addClasses( [ 'prefs-title' ] );
+			$iconHeaderDiv->appendContent( $spanIcon );
 			$iconHeaderDiv->appendContent( $prefTitle );
 			$prefPanel->appendContent( $iconHeaderDiv );
 			$prefDescriptionMsg = $this->msg( "prefs-description-" . $key );

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

@@ -2,7 +2,7 @@
  * JavaScript for Special:Preferences: Tab navigation.
  */
 ( function () {
-	var useMobileLayout = mw.config.get( 'wgSpecialPreferencesUseMobileLayout' ) === null ? false : mw.config.get( 'wgSpecialPreferencesUseMobileLayout' );
+	var useMobileLayout = mw.config.get( 'wgSpecialPreferencesUseMobileLayout', false );
 	// New for T311717: Check if a user will display the mobile layout
 	if ( useMobileLayout ) {
 		$( function () {

resources/src/mediawiki.special.preferences.styles.ooui.less

@@ -205,6 +205,13 @@ with params ?useskin=vector&useformat=mobile
 	border-bottom: none; // stylelint-disable-line declaration-property-value-disallowed-list
 }
 
+.oo-ui-iconWidget.mw-prefs-icon {
+	color: @colorGray2;
+	margin: 0.5em 0.5em 0 0.5em;
+	width: 1.25em;
+	height: 1.25em;
+}
+
 .mw-prefs-title {
 	font-weight: normal;
 	font-size: 1em;
@@ -216,6 +223,7 @@ with params ?useskin=vector&useformat=mobile
 	font-weight: normal;
 	font-size: 0.875em;
 	line-height: 1.25em;
+	padding: 0 2.7em;
 	color: @colorGray7;
 	margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -245,3 +253,13 @@ with params ?useskin=vector&useformat=mobile
 .mw-prefs-header-title {
 	display: inline-flex;
 }
+
+// stylelint-disable-next-line selector-class-pattern
+.content p {
+	margin: 0 0 0.75em 0 !important; // stylelint-disable-line declaration-no-important
+}
+
+// stylelint-disable-next-line selector-class-pattern
+.content h5 {
+	padding-bottom: 0.25em !important; // stylelint-disable-line declaration-no-important
+}