Both UserMenu stylesheets should be shipped in modern

Since we have feature flagged the new user menu feature, it is
imperative we load both sets of styles until the feature has
shipped. This allows us to switch seamlessly between the two
without worrying about cached HTML being served with updated CSS.

To do this, we add a new class to both user menu's distinguishing
the legacy version from the modern version. The styles are then
scoped to these new selectors.

This also fixes some regressions with the legacy user menu in
modern Vector when wgVectorConsolidateUserLinks is disabled.

Notes:
* No caching selector is needed for #pt-userpage given it can only
ever be output for logged in users.
* ID selectors in general are bad, so scoping to mw-portlet-personal-user-menu-legacy
isolates the legacy component allowing it to be rendered alongside the modern UserMenu

Bug: T276561
Change-Id: I068c5233bb25a7b141e66a6726b5761841f83eb2

includes/SkinVector.php

@@ -337,12 +337,14 @@ class SkinVector extends SkinMustache {
 		];
 		$portletData['heading-class'] = 'vector-menu-heading';
 		// Add target class to apply different icon to personal menu dropdown for logged in users.
-		if ( $portletData['id'] === 'p-personal' && $this->shouldConsolidateUserLinks() &&
+		if ( $portletData['id'] === 'p-personal' ) {
-			!$this->getUser()->isAnon()
+			if ( $this->shouldConsolidateUserLinks() ) {
-		) {
+				$portletData['class'] .= ' vector-user-menu';
-			$portletData['heading-class'] .= ' mw-portlet-personal-page__heading--auth';
 				// Replace dropdown arrow with ellipsis icon if feature flag is enabled and user is logged in.
 				$portletData['heading-class'] .= ' mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-ellipsis';
+			} else {
+				$portletData['class'] .= ' vector-user-menu-legacy';
+			}
 		}
 		if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) {
 			$portletData = $this->createULSLanguageButton( $portletData );

resources/skins.vector.styles.legacy/components/UserMenu.less

@@ -3,18 +3,24 @@
 // Legacy overrides for the UserMenu
 
 /* Personal Menu */
+.vector-user-menu-legacy li,
+/* FIXME: the following selector is for cached HTML. It can be removed when
+I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production. */
 #p-personal li {
 	font-size: @font-size-nav-personal;
 }
 
 /* Icon for registered user names & anonymous message */
+/* FIXME: the following selector is for cached HTML. It can be removed when
+I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production */
 #pt-anonuserpage,
-#pt-userpage a {
+.vector-user-menu-legacy #pt-anonuserpage,
+.vector-user-menu-legacy #pt-userpage a {
 	background-position: @background-position-nav-personal-icon;
 	padding-top: 0.5em;
 }
 
-#pt-userpage {
+.vector-user-menu-legacy #pt-userpage {
 	padding-top: 0;
 
 	a {
@@ -23,6 +29,9 @@
 }
 
 /* Show anonymous "Not logged in" text in gray */
-#pt-anonuserpage {
+/* FIXME: the following selector is for cached HTML. It can be removed when
+I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production. */
+#pt-anonuserpage,
+.vector-user-menu-legacy #pt-anonuserpage {
 	color: #54595d;
 }

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

@@ -1,12 +1,12 @@
 @import '../../common/variables.less';
 
 // Overrides personal menu styles for consolidated user links.
-.mw-portlet-personal.vector-menu-dropdown h3:after {
+.vector-user-menu.vector-menu-dropdown h3:after {
 	padding: 0.4em 0 0.4em 0;
 	content: none;
 }
 
-#p-personal.vector-menu-dropdown {
+.vector-user-menu.vector-menu-dropdown {
 	.vector-menu-checkbox {
 		&:hover + h3 {
 			background-color: @colorGray14;
@@ -24,7 +24,10 @@
 		justify-content: flex-start;
 
 		li {
-			font-size: 100%;
+			// FIXME: the following font-size rule is for cached HTML. It can be removed when
+			// I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production.
+			// stylelint-disable-next-line declaration-no-important
+			font-size: 100% !important;
 			width: 100%;
 
 			&:hover {
@@ -47,6 +50,8 @@
 
 // Since user-page is pulled out of the personal menu for modern vector,
 // apply styles for the top-level user-page menu.
+// FIXME: This is currently not isolated to the UserMenu component
+// as it is rendered separately outside the `.vector-user-menu` class.
 #p-user-page {
 	li {
 		padding-bottom: 0.5em;

resources/skins.vector.styles/skin.less

@@ -15,6 +15,8 @@
 	@import './components/VueEnhancedSearchBox.less';
 	@import './components/Sidebar.less';
 	@import './components/LanguageButton.less';
+	// This import can be removed when $wgVectorConsolidateUserLinks feature flag is removed.
+	@import '../skins.vector.styles.legacy/components/UserMenu.less';
 	@import './components/UserMenu.less';
 }
 

tests/phpunit/integration/SkinVectorTest.php

@@ -110,7 +110,7 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
 			$actions['class']
 		);
 		$this->assertSame(
-			'mw-portlet mw-portlet-personal vector-menu',
+			'mw-portlet mw-portlet-personal vector-user-menu-legacy vector-menu',
 			$props['data-personal']['class']
 		);
 	}