Move "logout" button to bottom of user links menu in modern Vector

For modern Vector, removes the logout link in the user menu and places it
below that menu by appending it to the html-after-portal property of the
skin data.

Also modifies the `.vector-user-menu-login` style to accommodate both the
login and logout button.

bug: T281791
Depends-On: If82a736e37174aaadd0ff07019a1fae3759a9e51
Change-Id: I7675230e09a50eaeab448182329f850ad2689514

includes/Hooks.php

@@ -149,6 +149,8 @@ class Hooks {
 			if ( $sk->loggedin ) {
 				// Remove user page from personal menu dropdown for logged in users.
 				unset( $content_navigation['user-menu']['userpage'] );
+				// Remove logout link from user-menu and recreate it in SkinVector,
+				unset( $content_navigation['user-menu']['logout'] );
 			} else {
 				// Remove "Not logged in" from personal menu dropdown for anon users.
 				unset( $content_navigation['user-menu']['anonuserpage'] );

includes/SkinVector.php

@@ -212,6 +212,25 @@ class SkinVector extends SkinMustache {
 		] );
 	}
 
+	/**
+	 * Returns HTML for the logout button that should be placed in the user (personal) menu
+	 * after the menu itself.
+	 * @return string
+	 */
+	private function getLogoutHTML() {
+		$logoutLinkData = $this->buildLogoutLinkData();
+		$templateParser = $this->getTemplateParser();
+		$logoutLinkData['class'] = [
+			'vector-menu-content-item',
+			'mw-ui-icon mw-ui-icon-before',
+			'mw-ui-icon-wikimedia-logOut'
+		];
+
+		return $templateParser->processTemplate( 'UserLinks__logout', [
+			'htmlLogout' => $this->makeLink( 'logout', $logoutLinkData )
+		] );
+	}
+
 	/**
 	 * Returns template data for UserLinks.mustache
 	 * @param array $menuData existing menu template data to be transformed and copied for UserLinks
@@ -225,6 +244,11 @@ class SkinVector extends SkinMustache {
 		$userMenuData = $menuData[ 'data-user-menu' ];
 		$userMenuData[ 'html-before-portal' ] = $this->getLoginHTML( $returnto, $useCombinedLoginLink );
 
+		if ( !$isAnon ) {
+			// Appending as to not override data potentially set by the onSkinAfterPortlet hook.
+			$userMenuData[ 'html-after-portal' ] .= $this->getLogoutHTML();
+		}
+
 		return [
 			'is-anon' => $isAnon,
 			'html-create-account' => $htmlCreateAccount,

includes/templates/UserLinks__logout.mustache

@@ -0,0 +1,4 @@
+{{!-- The #pt-logout ID is required for the AJAX enabled logout in mediawiki.page.ready to work.}}
+<div id="pt-logout" class="vector-user-menu-login">
+    {{{htmlLogout}}}
+</div>

resources/skins.vector.styles/components/UserLinks.less

@@ -69,26 +69,26 @@
 			font-size: @font-size-tabs;
 		}
 
-		// "Login" link in anonymous user menus
+		// "Login" and "Logout" links in user menu
 		.vector-user-menu-login {
-			border-bottom: 1px solid @border-color-base;
-
 			&:hover {
 				background-color: @background-color-secondary;
 			}
 
+			&:first-child {
+				border-bottom: 1px solid @border-color-base;
+			}
+
+			&:last-child {
+				border-top: 1px solid @border-color-base;
+			}
+
 			a {
 				display: block;
 				color: #000;
 				text-decoration: none;
 			}
 		}
-
-		// "Log out" link in logged in user menus
-		// FIXME: Should not use ID selector. To be fixed as part of T281791.
-		#pt-logout {
-			border-top: 1px solid @border-color-base;
-		}
 	}
 
 	.mw-portlet-notifications {