[UI] [new] add user menu

Add new user menu. The changes required include:

- Break up AuthMenuEntry into reusable components. They're now simple,
  independent, static functions in AuthUtil that are easy to reason
  about and compose.

  There's lots of verbose code because of the builder and director
  patterns. That is, most of the code is for building the thing we
  actually want to build instead of just building it. It's easy to write
  but no fun to read--even simple configurations are extremely verbose
  expressions that must be threaded through the system.

  These builders are also single purpose and unlikely to be reusable
  unlike a URI builder, for example. As objects, they're not especially
  composable either.

- Similarly, break up Menu/DefaultBuilder into BuilderUtil and ban
  inheritance. Inheritance has not worked well on the frontend of
  MobileFrontend. I don't think it's going to work well here. E.g., I
  could have made changes to the base class' getPersonalTools() method
  such that the client passes a parameter for the advanced config or
  maybe I just override it in the subclass. In either case, I think it
  makes the whole hierarchy nuanced and harder to reason about for
  something that should be simple.

- Add ProfileMenuEntry and LogOutMenuEntry for the user menu.

- Rename insertLogInOutMenuItem() to insertAuthMenuItem() which matches
  the entry name, AuthMenuEntry.

- Extension:SandboxLink is needed to display the sandbox link in the
  user menu.

- Performance note: the toolbar is now processed in MinervaTemplate,
  which corresponds to removing the buildPersonalUrls() override.

- To mimic the design of main menu, the following steps would be
  necessary:

  1. Create a user/Default and user/Advanced user menu builder and also
     a user/IBuilder interface.
  2. Create a user/Director.
  3. Create a service entry for Minerva.Menu.UserDirector in
     ServiceWiring. The Director is actually powerless and doesn't get
     to make any decisions--the appropriate builder is passed in from
     ServiceWiring which checks the mode.
  4. Access the service in SkinMinerva to set a userMenuHTML data member
     on the Minerva QuickTemplate.
  5. In MinervaTemplate, access the userMenuHTML QuickTemplate member
     and do the usual song and dance of inflating a Mustache template.

  This patch does everything except add a service, which was agreed to
  be unnecessary, so that logic is now in SkinMinerva.

- Wrap the existing echo user notifications button and new user menu
  button in a nav element. This seems like a semantic improvement.

- The existing styling and logic for the search bar and search overlay
  are pretty messy and delicate. Changes made to that LESS endeavored to
  be surgical. There's lots of room for improvement in the toolbar but
  it's out of scope.

- Rename logout icon to logOut.

Bug: T214540
Change-Id: Ib517864fcf4e4d611e05525a6358ee6662fe4e05

i18n/en.json

@@ -47,6 +47,7 @@
 	"mobile-frontend-user-page-member-since": "{{GENDER:$2|Joined}} $1",
 	"mobile-frontend-user-page-talk": "Talk",
 	"mobile-frontend-user-page-uploads": "Uploads",
+	"minerva-user-menu-button": "User menu",
 	"minerva-page-actions-overflow": "Secondary page actions submenu",
 	"minerva-page-actions-info": "Page information",
 	"minerva-page-actions-permalink": "Permanent link",

i18n/qqq.json

@@ -56,6 +56,7 @@
 	"mobile-frontend-user-page-member-since": "Message below the heading. $1 is the user registration date. $2 is the gender associated with the user account.",
 	"mobile-frontend-user-page-talk": "Text of the link to the user's talk page\n{{Identical|Talk}}",
 	"mobile-frontend-user-page-uploads": "Text of the link to the user's uploads page\n{{Identical|Upload}}",
+	"minerva-user-menu-button": "Text describing the user menu",
 	"minerva-page-actions-overflow": "Text describing the secondary page menu button's action",
 	"minerva-page-actions-info": "In the secondary page menu, the page information button label",
 	"minerva-page-actions-permalink": "In the secondary page menu, the permanent link button label",

includes/menu/Definitions.php

@@ -24,6 +24,8 @@ use IContextSource;
 use MediaWiki\Special\SpecialPageFactory;
 use MediaWiki\Minerva\Menu\Entries\AuthMenuEntry;
 use MediaWiki\Minerva\Menu\Entries\HomeMenuEntry;
+use MediaWiki\Minerva\Menu\Entries\LogInMenuEntry;
+use MediaWiki\Minerva\Menu\Entries\LogOutMenuEntry;
 use MediaWiki\Minerva\Menu\Entries\SingleMenuEntry;
 use Message;
 use MinervaUI;
@@ -108,6 +110,32 @@ final class Definitions {
 		) );
 	}
 
+	/**
+	 * Creates a log in or log out button.
+	 *
+	 * @param Group $group
+	 * @throws MWException
+	 */
+	public function insertLogInMenuItem( Group $group ) {
+		$group->insertEntry( new LogInMenuEntry(
+			$this->context,
+			$this->newLogInOutQuery( $this->newReturnToQuery() )
+		) );
+	}
+
+	/**
+	 * Creates a log in or log out button.
+	 *
+	 * @param Group $group
+	 * @throws MWException
+	 */
+	public function insertLogOutMenuItem( Group $group ) {
+		$group->insertEntry( new LogOutMenuEntry(
+			$this->context,
+			$this->newLogInOutQuery( $this->newReturnToQuery() )
+		) );
+	}
+
 	/**
 	 * Creates a login or logout button with a profile button.
 	 *

includes/menu/Main/AdvancedBuilder.php

@@ -97,13 +97,6 @@ final class AdvancedBuilder implements IBuilder {
 	private function getPersonalTools(): Group {
 		$group = new Group();
 
-		$this->definitions->insertAuthMenuItem( $group );
-
-		if ( $this->user->isLoggedIn() ) {
-			$this->definitions->insertWatchlistMenuItem( $group );
-			$this->definitions->insertContributionsMenuItem( $group );
-		}
-
 		// Allow other extensions to add or override tools
 		Hooks::run( 'MobileMenu', [ 'personal', &$group ] );
 		return $group;

includes/menu/PageActions/UserNamespaceOverflowBuilder.php

@@ -121,7 +121,7 @@ class UserNamespaceOverflowBuilder implements IOverflowBuilder {
 	 * Build entry based on the $toolbox element
 	 *
 	 * @param string $name
-	 * @param string $icon Wikimedia UI icon name.
+	 * @param string $icon Icon CSS class name.
 	 * @param string $toolboxIdx
 	 * @param array $toolbox An array of common toolbox items from the sidebar menu
 	 * @return PageActionMenuEntry|null

includes/menu/User/AdvancedUserMenuBuilder.php

@@ -0,0 +1,100 @@
+<?php
+/**
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ * http://www.gnu.org/copyleft/gpl.html
+ *
+ * @file
+ */
+namespace MediaWiki\Minerva\Menu\User;
+
+use IContextSource;
+use MediaWiki\Minerva\Menu\Definitions;
+use MediaWiki\Minerva\Menu\Entries\ProfileMenuEntry;
+use MediaWiki\Minerva\Menu\Entries\SingleMenuEntry;
+use MediaWiki\Minerva\Menu\Group;
+use User;
+
+/**
+ * Logged-in, advanced Mobile Contributions user menu config generator.
+ */
+final class AdvancedUserMenuBuilder implements IUserMenuBuilder {
+	/**
+	 * @var IContextSource
+	 */
+	private $context;
+
+	/**
+	 * @var User
+	 */
+	private $user;
+
+	/**
+	 * @var Definitions
+	 */
+	private $definitions;
+
+	/**
+	 * @var array|null
+	 */
+	private $sandbox;
+
+	/**
+	 * @param IContextSource $context
+	 * @param User $user
+	 * @param Definitions $definitions A menu items definitions set
+	 * @param array|null $sandbox
+	 */
+	public function __construct(
+		IContextSource $context, User $user, Definitions $definitions, $sandbox
+	) {
+		$this->context = $context;
+		$this->user = $user;
+		$this->definitions = $definitions;
+		$this->sandbox = $sandbox;
+	}
+
+	/**
+	 * @inheritDoc
+	 * @return Group
+	 */
+	public function getGroup(): Group {
+		$group = new Group();
+		$group->insertEntry( new ProfileMenuEntry( $this->user ) );
+		$group->insertEntry( new SingleMenuEntry(
+			'userTalk',
+			$this->context->msg( 'mobile-frontend-user-page-talk' )->escaped(),
+			$this->user->getUserPage()->getTalkPage()->getLocalURL(),
+			true,
+			null,
+			'before',
+			'wikimedia-ui-userTalk-base20'
+		) );
+		if ( $this->sandbox ) {
+			$group->insertEntry( new SingleMenuEntry(
+				'userSandbox',
+				$this->sandbox['text'],
+				$this->sandbox['href']
+			) );
+		}
+		$this->definitions->insertWatchlistMenuItem( $group );
+		$this->definitions->insertContributionsMenuItem( $group );
+		if ( $this->user->isAnon() ) {
+			$this->definitions->insertLogInMenuItem( $group );
+		} else {
+			$this->definitions->insertLogOutMenuItem( $group );
+		}
+		return $group;
+	}
+}

includes/menu/User/DefaultUserMenuBuilder.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ * http://www.gnu.org/copyleft/gpl.html
+ *
+ * @file
+ */
+namespace MediaWiki\Minerva\Menu\User;
+
+use MediaWiki\Minerva\Menu\Group;
+
+/**
+ * Nonspecific user menu builder.
+ */
+final class DefaultUserMenuBuilder implements IUserMenuBuilder {
+	/**
+	 * @inheritDoc
+	 * @return Group
+	 */
+	public function getGroup(): Group {
+		return new Group();
+	}
+}

includes/menu/User/IUserMenuBuilder.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ * http://www.gnu.org/copyleft/gpl.html
+ *
+ * @file
+ */
+
+namespace MediaWiki\Minerva\Menu\User;
+
+use MediaWiki\Minerva\Menu\Group;
+
+interface IUserMenuBuilder {
+	/**
+	 * @return Group
+	 */
+	public function getGroup(): Group;
+}

includes/menu/User/UserMenuDirector.php

@@ -0,0 +1,77 @@
+<?php
+/**
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ * http://www.gnu.org/copyleft/gpl.html
+ *
+ * @file
+ */
+namespace MediaWiki\Minerva\Menu\User;
+
+use MinervaUI;
+use TemplateParser;
+use MessageLocalizer;
+
+/**
+ * Director responsible for building the user menu.
+ */
+final class UserMenuDirector {
+	/**
+	 * @var IUserMenuBuilder
+	 */
+	private $builder;
+
+	/**
+	 * @var MessageLocalizer
+	 */
+	private $localizer;
+
+	/**
+	 * @param IUserMenuBuilder $builder
+	 * @param MessageLocalizer $localizer
+	 */
+	public function __construct( IUserMenuBuilder $builder, MessageLocalizer $localizer ) {
+		$this->builder = $builder;
+		$this->localizer = $localizer;
+	}
+
+	/**
+	 * Build the menu data array that can be passed to views/javascript
+	 * @return string|null
+	 */
+	public function renderMenuData() {
+		$entries = $this->builder->getGroup()->getEntries();
+
+		foreach ( $entries as &$entry ) {
+			foreach ( $entry['components'] as &$component ) {
+				$component['class'] .= ' toggle-list-item__anchor--menu';
+			}
+		}
+
+		$templateParser = new TemplateParser( __DIR__ . '/../../../components' );
+		return empty( $entries )
+			? null
+			: $templateParser->processTemplate( 'ToggleList', [
+				'class' => 'minerva-user-menu',
+				'checkboxID' => 'minerva-user-menu-checkbox',
+				'toggleID' => 'minerva-user-menu-toggle', // See minerva.mustache too.
+				'toggleClass' => MinervaUI::iconClass(
+					'page-actions-overflow', 'element', 'wikimedia-ui-' . 'userAvatar' . '-base20'
+				),
+				'listClass' => 'minerva-user-menu-list toggle-list__list--drop-down', // See ToggleList/*.less.
+				'text' => $this->localizer->msg( 'minerva-user-menu-button' )->escaped(),
+				'items' => $entries
+			] );
+	}
+}

includes/skins/MinervaTemplate.php

@@ -266,6 +266,7 @@ class MinervaTemplate extends BaseTemplate {
 			'postheadinghtml' => $data['postheadinghtml'] ?? '',
 			'haspageactions' => $hasPageActions,
 			'pageactionshtml' => $hasPageActions ? $this->getPageActionsHtml() : '',
+			'userMenuHTML' => $data['userMenuHTML'],
 			'subtitle' => $data['subtitle'],
 			'contenthtml' => $this->getContentHtml( $data ),
 			'secondaryactionshtml' => $this->getSecondaryActionsHtml(),

includes/skins/SkinMinerva.php

@@ -23,6 +23,10 @@ use MediaWiki\Minerva\Menu\Main\Director as MainMenuDirector;
 use MediaWiki\Minerva\Permissions\IMinervaPagePermissions;
 use MediaWiki\Minerva\SkinOptions;
 use MediaWiki\Minerva\SkinUserPageHelper;
+use MediaWiki\Minerva\Menu\User\UserMenuDirector;
+use MediaWiki\Minerva\Menu\User\AdvancedUserMenuBuilder;
+use MediaWiki\Minerva\Menu\User\DefaultUserMenuBuilder;
+use MediaWiki\Minerva\Menu\Definitions;
 
 /**
  * Minerva: Born from the godhead of Jupiter with weapons!
@@ -89,6 +93,29 @@ class SkinMinerva extends SkinTemplate {
 		return $this->mainMenu;
 	}
 
+	/**
+	 * @param BaseTemplate $tpl
+	 * @return string|null
+	*/
+	private function getUserMenuHTML( BaseTemplate $tpl ) {
+		$services = MediaWikiServices::getInstance();
+		$options = $services->getService( 'Minerva.SkinOptions' );
+		$context = RequestContext::getMain();
+		$definitions = new Definitions( $context, $services->getSpecialPageFactory() );
+		$director = new UserMenuDirector(
+			$options->get( SkinOptions::OPTION_AMC )
+				? new AdvancedUserMenuBuilder(
+					$context,
+					$this->getUser(),
+					$definitions,
+					$tpl->getPersonalTools()['sandbox']['links'][0] ?? null
+				)
+				: new DefaultUserMenuBuilder(),
+				$this
+		);
+		return $director->renderMenuData();
+	}
+
 	/**
 	 * Returns the site name for the footer, either as a text or <img> tag
 	 * @return string
@@ -156,6 +183,9 @@ class SkinMinerva extends SkinTemplate {
 		// Set the links for the main menu
 		$tpl->set( 'mainMenu', $this->getMainMenu()->getMenuData() );
 
+		// Set the links for page secondary actions
+		$tpl->set( 'userMenuHTML', $this->getUserMenuHTML( $tpl ) );
+
 		// Set the links for page secondary actions
 		$tpl->set( 'secondary_actions', $this->getSecondaryActions( $tpl ) );
 
@@ -774,14 +804,6 @@ class SkinMinerva extends SkinTemplate {
 		return [];
 	}
 
-	/**
-	 * Minerva skin do use any of those, there is no need to calculate that
-	 * @return array
-	 */
-	protected function buildPersonalUrls() {
-		return [];
-	}
-
 	/**
 	 * Returns array of config variables that should be added only to this skin
 	 * for use in JavaScript.

includes/skins/minerva.mustache

@@ -18,8 +18,15 @@
 						autocomplete="off" placeholder="{{placeholder}}" aria-label="{{placeholder}}"
 						value="{{search}}">
 				</div>
-				<div>{{{searchButton}}}</div>
-				{{^isAnon}}<div>{{#userNotificationsData}}{{>userNotifications}}{{/userNotificationsData}}</div>{{/isAnon}}
+				<nav class="minerva-user-navigation" aria-labelledby="minerva-user-menu-toggle"> {{! See ToggleList's toggleID. }}
+					<div>{{{searchButton}}}</div>
+					{{^isAnon}}
+							<div class="minerva-user-notifications">
+								{{#userNotificationsData}}{{>userNotifications}}{{/userNotificationsData}}
+							</div>
+					{{/isAnon}}
+					{{#userMenuHTML}}{{{userMenuHTML}}}{{/userMenuHTML}}
+				</nav>
 			</form>
 		</header>
 		<main id="content" class="mw-body">
@@ -56,4 +63,4 @@
 	</div>
 </div>
 <div class="mw-notification-area" data-mw="interface"></div>
-<!-- v:8.1.7 -->
+<!-- v:8.1.8 -->

minerva.less/minerva.variables.less

@@ -34,6 +34,7 @@
 @menuWidthTablet: 600px;
 @rightDrawerWidth: 60%;
 @primaryNavBackgroundColor: @colorGray14;
+@menuButtonIconSize: 3.5em;
 
 // Headings
 @firstHeadingFontSize: 2.6525em; // 42px
@@ -52,7 +53,7 @@
 @searchBoxWidth: 375/16em;
 @iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth;
 @deviceWidthTabletEms: unit( @width-breakpoint-tablet / @fontSizeBrowserDefault, em );
-@brandingBoxWidth: @deviceWidthTabletEms - ( @iconSizeTotal * 3 ) - @searchBoxWidth;
+@brandingBoxWidth: @deviceWidthTabletEms - (3 * @menuButtonIconSize + @iconGutterWidth) - @searchBoxWidth;
 
 @titleSectionSpacingTop: 20px;
 @titleSectionSpacingBottom: 25px;

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

@@ -0,0 +1,11 @@
+@import '../../minerva.less/minerva.variables';
+
+// The list that opens underneath the button.
+.minerva-user-menu-list {
+	top: 100%;
+	right: 0;
+	margin-right: @contentMargin / 2;
+	min-width: 200px;
+	// A variable max-height is set in JavaScript so a minimum height is needed.
+	min-height: 200px;
+}

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

@@ -0,0 +1,26 @@
+@import '../../minerva.less/minerva.variables';
+
+// The top level user account button in the upper right near the notifications button.
+.minerva-user-navigation {
+	display: flex;
+	height: @headerHeight;
+	// Fill empty space left / start so the buttons can stay right / end.
+	width: 100%;
+	// Keep space for at least two buttons.
+	min-width: 2 * @menuButtonIconSize;
+	// Center vertically.
+	align-items: center;
+	// Layout from right / end.
+	justify-content: flex-end;
+	// Show the list relative the button.
+	position: relative;
+
+	.mw-ui-icon-element {
+		display: block;
+	}
+
+	.toggle-list {
+		width: @menuButtonIconSize;
+		display: inline-block;
+	}
+}

resources/skins.minerva.mainMenu.icons/logOut-ltr.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>log out</title><path d="M3 3h8V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8v-2H3z"/><path d="M13 5v4H5v2h8v4l6-5z"/></svg>

resources/skins.minerva.mainMenu.icons/logOut-rtl.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>log out</title><path d="M17 17H9v2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H9v2h8z"/><path d="M7 15v-4h8V9H7V5l-6 5z"/></svg>

resources/skins.minerva.mainMenu.icons/userSandbox.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M6.5 3.5L0 10l1.5 1.5 5 5L8 15l-5-5 5-5-1.5-1.5zm7 0L12 5l5 5-5 5 1.5 1.5L20 10l-6.5-6.5z"/></svg>

resources/skins.minerva.scripts/init.js

@@ -15,6 +15,7 @@
 		TitleUtil = require( './TitleUtil.js' ),
 		issues = require( './page-issues/index.js' ),
 		Toolbar = require( './Toolbar.js' ),
+		ToggleList = require( '../../components/ToggleList/ToggleList.js' ),
 		router = require( 'mediawiki.router' ),
 		CtaDrawer = mobile.CtaDrawer,
 		Button = mobile.Button,
@@ -341,7 +342,8 @@
 
 	$( function () {
 		var $toc,
-			toolbarElement = document.querySelector( Toolbar.selector );
+			toolbarElement = document.querySelector( Toolbar.selector ),
+			userMenu = document.querySelector( '.minerva-user-menu' ); // See UserMenuDirector.
 		// Init:
 		// - main menu closes when you click outside of it
 		// - redirects show a toast.
@@ -363,6 +365,10 @@
 			Toolbar.bind( window, toolbarElement, eventBus );
 			Toolbar.render( window, toolbarElement );
 		}
+		if ( userMenu ) {
+			ToggleList.bind( window, userMenu, eventBus, true );
+			ToggleList.render( userMenu, true );
+		}
 		initRedlinksCta();
 		initUserRedLinks();
 		initTabsScrollPosition();

skin.json

@@ -203,6 +203,7 @@
 				"resources/skins.minerva.base.styles/reset.less",
 				"resources/skins.minerva.base.styles/ui.less",
 				"resources/skins.minerva.base.styles/pageactions.less",
+				"resources/skins.minerva.base.styles/userMenu.less",
 				"resources/skins.minerva.base.styles/common.less",
 				"resources/skins.minerva.base.styles/images.less",
 				"resources/skins.minerva.base.styles/footer.less",
@@ -259,7 +260,8 @@
 				"resources/skins.minerva.amc.styles/index.less",
 				"components/ToggleList/ToggleList.less",
 				"components/ToggleList/DropDownList.less",
-				"components/ToggleList/MenuListItem.less"
+				"components/ToggleList/MenuListItem.less",
+				"resources/skins.minerva.amc.styles/userMenu.less"
 			]
 		},
 		"wikimedia.ui": {
@@ -268,7 +270,7 @@
 			"defaultColor": "#54595d",
 			"class": "ResourceLoaderOOUIIconPackModule",
 			"icons": [ "articleRedirect", "info", "link", "listBullet",
-				"logoWikidata", "logoWikimedia", "quotes", "upload", "userAvatar" ]
+				"logoWikidata", "logoWikimedia", "quotes", "upload", "userAvatar", "userTalk" ]
 		},
 		"skins.minerva.icons.images": {
 			"class": "ResourceLoaderImageModule",
@@ -387,7 +389,12 @@
 			"images": {
 				"login": "resources/skins.minerva.mainMenu.icons/login.svg",
 				"home": "resources/skins.minerva.mainMenu.icons/home.svg",
-				"logout": "resources/skins.minerva.mainMenu.icons/logout.svg",
+				"logout": {
+					"file": {
+						"ltr": "resources/skins.minerva.mainMenu.icons/logOut-ltr.svg",
+						"rtl": "resources/skins.minerva.mainMenu.icons/logOut-rtl.svg"
+					}
+				},
 				"nearby": "resources/skins.minerva.mainMenu.icons/nearby.svg",
 				"random": "resources/skins.minerva.mainMenu.icons/random.svg",
 				"settings": "resources/skins.minerva.mainMenu.icons/settings.svg",
@@ -409,7 +416,8 @@
 						"ltr": "resources/skins.minerva.mainMenu.icons/communityportal-ltr.svg",
 						"rtl": "resources/skins.minerva.mainMenu.icons/communityportal-rtl.svg"
 					}
-				}
+				},
+				"userSandbox": "resources/skins.minerva.mainMenu.icons/userSandbox.svg"
 			}
 		},
 		"skins.minerva.mainMenu.styles": {