Merge "Show both Echo icons in desktop Minerva"

includes/Hooks.php

@@ -314,6 +314,8 @@ class Hooks implements
 				SkinOptions::MAIN_MENU_EXPANDED => $featureManager->isFeatureAvailableForCurrentUser(
 					'MinervaAdvancedMainMenu'
 				),
+				// In mobile, always resort to single icon.
+				SkinOptions::SINGLE_ECHO_BUTTON => true,
 				SkinOptions::HISTORY_IN_PAGE_ACTIONS => $isUserPageOrUserTalkPage ?
 					true : $featureManager->isFeatureAvailableForCurrentUser( 'MinervaHistoryInPageActions' ),
 				SkinOptions::TOOLBAR_SUBMENU => $isUserPageOrUserTalkPage ?

includes/SkinOptions.php

@@ -36,6 +36,7 @@ final class SkinOptions {
 	public const MAIN_MENU_EXPANDED = 'mainMenuExpanded';
 	public const PERSONAL_MENU = 'personalMenu';
 	public const SIMPLIFIED_TALK = 'simplifiedTalk';
+	public const SINGLE_ECHO_BUTTON = 'echo';
 
 	/**
 	 * Note stable skin options default to true for desktop-Minerva and are expected to be
@@ -68,6 +69,8 @@ final class SkinOptions {
 		self::MAIN_MENU_EXPANDED => true,
 		/** whether the simplified talk page is eligible to be shown */
 		self::SIMPLIFIED_TALK => false,
+		/** whether Echo should be replaced with a single button */
+		self::SINGLE_ECHO_BUTTON => false,
 	];
 
 	/**

includes/Skins/Header.mustache

@@ -23,7 +23,7 @@
 		<nav class="minerva-user-navigation" aria-label="{{msg-minerva-user-navigation}}">
 			{{^is-anon}}
 					<div class="minerva-user-notifications"
-						id="pt-notifications-alert">
+						{{#is-minerva-echo-single-button}}id="pt-notifications-alert"{{/is-minerva-echo-single-button}}>
 						{{#data-portlets.data-notifications}}
 						<ul>{{{html-items}}}</ul>
 						{{/data-portlets.data-notifications}}

includes/Skins/SkinMinerva.php

@@ -262,12 +262,13 @@ class SkinMinerva extends SkinMustache {
 				$contentNavigationUrls['associated-pages'][ $id ]['rel'] = 'discussion';
 			}
 		}
+		$skinOptions = $this->getSkinOptions();
 		$this->contentNavigationUrls = $contentNavigationUrls;
 		if ( $this->getUser()->isRegistered() ) {
 			if ( count( $contentNavigationUrls['notifications'] ) === 0 ) {
 				// Shown to logged in users when Echo is not installed:
 				$contentNavigationUrls['notifications']['mytalks'] = $this->getNotificationFallbackButton();
-			} else {
+			} elseif ( $skinOptions->get( SkinOptions::SINGLE_ECHO_BUTTON ) ) {
 				// Combine notification icons. Minerva only shows one entry point to notifications.
 				// This can be reconsidered with a solution to https://phabricator.wikimedia.org/T142981
 				$alert = $contentNavigationUrls['notifications']['notifications-alert'] ?? null;
@@ -277,6 +278,19 @@ class SkinMinerva extends SkinMustache {
 					$contentNavigationUrls['notifications']['notifications-alert'] =
 						$this->getCombinedNotificationButton( $alert, $notice );
 				}
+			} else {
+				// Show desktop alert icon.
+				$alert = $contentNavigationUrls['notifications']['notifications-alert'] ?? null;
+				if ( $alert ) {
+					// Correct the icon to be the bell filled rather than the outline to match
+					// Echo's badge.
+					$linkClass = $alert['link-class'] ?? [];
+					$alert['link-class'] = array_map( static function ( $class ) {
+						return $class === 'oo-ui-icon-bellOutline' ?
+							'oo-ui-icon-bell' : $class;
+					}, $linkClass );
+					$contentNavigationUrls['notifications']['notifications-alert'] = $alert;
+				}
 			}
 		}
 	}
@@ -286,6 +300,7 @@ class SkinMinerva extends SkinMustache {
 	 */
 	public function getTemplateData(): array {
 			$data = parent::getTemplateData();
+			$skinOptions = $this->getSkinOptions();
 			// FIXME: Can we use $data instead of calling buildContentNavigationUrls ?
 			$nav = $this->contentNavigationUrls;
 			if ( $nav === null ) {
@@ -323,6 +338,7 @@ class SkinMinerva extends SkinMustache {
 					: '',
 				'html-minerva-user-menu' => $this->getPersonalToolsMenu( $nav['user-menu'] ),
 				'is-minerva-beta' => $this->getSkinOptions()->get( SkinOptions::BETA_MODE ),
+				'is-minerva-echo-single-button' => $skinOptions->get( SkinOptions::SINGLE_ECHO_BUTTON ),
 				'data-minerva-tabs' => $this->getTabsData( $nav ),
 				'data-minerva-page-actions' => $this->getPageActions( $nav ),
 				'data-minerva-secondary-actions' => $this->getSecondaryActions( $nav ),

resources/skins.minerva.base.styles/userMenu.less

@@ -1,4 +1,5 @@
 @import '../../minerva.less/minerva.variables.less';
+// stylelint-disable selector-max-id
 
 // The top level user account button in the upper right near the notifications button.
 .minerva-user-navigation {
@@ -21,6 +22,28 @@
 	& > *:last-child {
 		margin-right: -@icon-padding-md;
 	}
+
+	// desktop mode modifications
+	.minerva-user-notifications {
+		ul {
+			display: flex;
+			align-items: center;
+		}
+
+		#pt-notifications-alert {
+			margin-right: 20px;
+
+			&.mw-echo-ui-notificationBadgeButtonPopupWidget {
+				margin-right: 8px;
+			}
+		}
+
+		li#pt-notifications-notice,
+		li#pt-notifications-alert {
+			display: block;
+			width: 32px;
+		}
+	}
 }
 
 // Different rule for cached HTML