Prefix user links menu items with icons

- Add logic in Vector hooks to prefix user menu links with icons.
- Add method for getting icon name based on user menu key.
- Add constant to map user menu keys to associated icon references.
- Include icon treatment for both logged in/out users.

Bug: T276562
Change-Id: Ia69366eb4fbd50b48fe5513ef99048bdc5df64fb

includes/Hooks.php

@@ -23,6 +23,20 @@ use Vector\HTMLForm\Fields\HTMLLegacySkinVersionField;
  * @internal
  */
 class Hooks {
+	/**
+	 * Icon map of user link keys and icon names.
+	 */
+	public const ICON_USER_LINK_MAP = [
+		'mytalk' => 'userTalk',
+		'anontalk' => 'userTalk',
+		'preferences' => 'settings',
+		'betafeatures' => 'labFlask',
+		'watchlist' => 'unStar',
+		'mycontris' => 'userContributions',
+		'anoncontribs' => 'userContributions',
+		'logout' => 'logOut',
+	];
+
 	/**
 	 * Passes config variables to Vector (modern) ResourceLoader module.
 	 * @param ResourceLoaderContext $context
@@ -143,6 +157,39 @@ class Hooks {
 				// "Login" link is handled by UserMenu
 				unset( $content_navigation['user-menu']['login'] );
 			}
+			// Prefix user link items with associated icon.
+			$user_menu = $content_navigation['user-menu'];
+			// Loop through each menu to check/append its link classes.
+			foreach ( $user_menu as $menu_key => $menu_value ) {
+				// Check if the menu has an icon key (provided by extensions). If not, get the icon from the icon map.
+				$icon_name = array_key_exists( 'icon', $menu_value )
+					? $menu_value['icon']
+					: self::getIconFromKey( $menu_key );
+				// Set the default menu icon classes.
+				$menu_icon_classes = [ 'mw-ui-icon', 'mw-ui-icon-before', 'mw-ui-icon-wikimedia-' . $icon_name ];
+
+				// Add the link-class key to the menu and its relevant classes if it doesn't exist.
+				if ( !( array_key_exists( 'class', $menu_value )
+					|| array_key_exists( 'link-class', $menu_value ) )
+				) {
+					$content_navigation['user-menu'][$menu_key]['link-class'] = $menu_icon_classes;
+				} else {
+					// The link-class or class keys do exist, so append the icon classes to them.
+					foreach ( $menu_value as $link_key => $link_value ) {
+						// Add relevant classes whether the link value is an array or a string.
+						switch ( $link_key ) {
+							case 'class':
+							case 'link-class':
+								$prior_link_classes = is_array( $link_value ) ? $link_value : [ $link_value ];
+								$content_navigation['user-menu'][$menu_key][$link_key] = array_merge(
+									$prior_link_classes,
+									$menu_icon_classes
+								);
+								break;
+						}
+					}
+				}
+			}
 		} else {
 			// Remove user page from personal toolbar since it will be inside the personal menu for logged in
 			// users when the feature flag is disabled.
@@ -438,4 +485,17 @@ class Hooks {
 	private static function isSkinVersionLegacy(): bool {
 		return !VectorServices::getFeatureManager()->isFeatureEnabled( Constants::FEATURE_LATEST_SKIN );
 	}
+
+	/**
+	 * Gets the associated icon name for a user link menu item in the personal toolbar.
+	 *
+	 * @param string $key
+	 *
+	 * @return string
+	 */
+	private static function getIconFromKey( string $key ): string {
+		$icon_map = self::ICON_USER_LINK_MAP;
+		return $icon_map[$key] ?? '';
+	}
+
 }

includes/SkinVector.php

@@ -255,7 +255,9 @@ class SkinVector extends SkinMustache {
 			$commonSkinData['data-userlinks'] = [
 				'html-create-account' => $this->makeLink( 'create-account', $createAccountData ),
 
-				'html-login' => $this->makeLink( 'login', $loginData ),
+				'html-login' => $this->makeLink( 'login', $loginData, [
+					'link-class' => 'mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-logIn'
+				] ),
 
 				'html-vector-anon-user-menu-pages-learn' => $this->msg( 'parentheses' )->
 					rawParams( $learnMoreLink )->

skin.json

@@ -146,7 +146,15 @@
 			"variants": [],
 			"icons": [
 				"language",
-				"ellipsis"
+				"ellipsis",
+				"userTalk",
+				"markup",
+				"settings",
+				"labFlask",
+				"unStar",
+				"userContributions",
+				"logIn",
+				"logOut"
 			]
 		},
 		"skins.vector.js": {