From 6998c536d4dcaf21a26735250fb6e1f1c01a0eed Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Fri, 14 May 2021 08:25:48 -0700 Subject: [PATCH] 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 | 14 ++++++++------ .../components/UserMenu.less | 15 ++++++++++++--- .../skins.vector.styles/components/UserMenu.less | 11 ++++++++--- resources/skins.vector.styles/skin.less | 2 ++ tests/phpunit/integration/SkinVectorTest.php | 2 +- 5 files changed, 31 insertions(+), 13 deletions(-) diff --git a/includes/SkinVector.php b/includes/SkinVector.php index 729741c25..1d1f004e8 100644 --- a/includes/SkinVector.php +++ b/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() && - !$this->getUser()->isAnon() - ) { - $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'; + if ( $portletData['id'] === 'p-personal' ) { + if ( $this->shouldConsolidateUserLinks() ) { + $portletData['class'] .= ' vector-user-menu'; + // 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 ); diff --git a/resources/skins.vector.styles.legacy/components/UserMenu.less b/resources/skins.vector.styles.legacy/components/UserMenu.less index 4a87023f3..c72d33545 100644 --- a/resources/skins.vector.styles.legacy/components/UserMenu.less +++ b/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; } diff --git a/resources/skins.vector.styles/components/UserMenu.less b/resources/skins.vector.styles/components/UserMenu.less index 36b3e4227..b5ea6b823 100644 --- a/resources/skins.vector.styles/components/UserMenu.less +++ b/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; diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less index 18f403059..212946a66 100644 --- a/resources/skins.vector.styles/skin.less +++ b/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'; } diff --git a/tests/phpunit/integration/SkinVectorTest.php b/tests/phpunit/integration/SkinVectorTest.php index 0c56a77b0..9189de621 100644 --- a/tests/phpunit/integration/SkinVectorTest.php +++ b/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'] ); }