Merge "Remove dancing tabs with CSS only solution"

includes/Hooks.php

@@ -349,9 +349,10 @@ class Hooks implements
 	 * Modifies list item to make it collapsible.
 	 *
 	 * @param array &$item
+	 * @param string $prefix defaults to user-links-
 	 */
-	private static function makeMenuItemCollapsible( array &$item ) {
-		$COLLAPSE_MENU_ITEM_CLASS = 'user-links-collapsible-item';
+	private static function makeMenuItemCollapsible( array &$item, string $prefix = 'user-links-' ) {
+		$COLLAPSE_MENU_ITEM_CLASS = $prefix . 'collapsible-item';
 		self::appendClassToListItem(
 			$item,
 			$COLLAPSE_MENU_ITEM_CLASS
@@ -412,6 +413,33 @@ class Hooks implements
 		}
 	}
 
+	/**
+	 * Vector 2022 only:
+	 * Creates an additional menu that will be injected inside the more (cactions)
+	 * dropdown menu. This menu is a clone of `views` and this menu will only be
+	 * shown at low resolutions (when the `views` menu is hidden).
+	 *
+	 * An additional menu is used instead of adding to the existing cactions menu
+	 * so that the emptyPortlet logic for that menu is preserved and the cactions menu
+	 * is not shown at large resolutions when empty (e.g. all items including collapsed
+	 * items are hidden).
+	 *
+	 * @param array &$content_navigation
+	 */
+	private static function createMoreOverflowMenu( &$content_navigation ) {
+		$clonedViews = [];
+		foreach ( array_keys( $content_navigation['views'] ?? [] ) as $key ) {
+			$newItem = $content_navigation['views'][$key];
+			self::makeMenuItemCollapsible(
+				$newItem,
+				'vector-more-'
+			);
+			$clonedViews['more-' . $key] = $newItem;
+		}
+		// Inject collapsible menu items ahead of existing actions.
+		$content_navigation['views-overflow'] = $clonedViews;
+	}
+
 	/**
 	 * Upgrades Vector's watch action to a watchstar.
 	 * This is invoked inside SkinVector, not via skin registration, as skin hooks
@@ -436,6 +464,9 @@ class Hooks implements
 
 			self::updateUserLinksItems( $sk, $content_navigation );
 		}
+		if ( $skinName === Constants::SKIN_NAME_MODERN ) {
+			self::createMoreOverflowMenu( $content_navigation );
+		}
 	}
 
 	/**

includes/SkinVector22.php

@@ -117,6 +117,21 @@ class SkinVector22 extends SkinVector {
 		return false;
 	}
 
+	/**
+	 * Merges the `view-overflow` menu into the `action` menu.
+	 * This ensures that the previous state of the menu e.g. emptyPortlet class
+	 * is preserved.
+	 * @param array $data
+	 * @return array
+	 */
+	private function mergeViewOverflowIntoActions( $data ) {
+		$portlets = $data['data-portlets'];
+		$actions = $portlets['data-actions'];
+		$overflow = $portlets['data-views-overflow'];
+		$data['data-portlets']['data-actions']['html-items'] = $overflow['html-items'] . $actions['html-items'];
+		return $data;
+	}
+
 	/**
 	 * @return array
 	 */
@@ -129,6 +144,8 @@ class SkinVector22 extends SkinVector {
 		if ( !$this->isTableOfContentsVisibleInSidebar() ) {
 			unset( $parentData['data-toc'] );
 		}
+		$parentData = $this->mergeViewOverflowIntoActions( $parentData );
+
 		return $parentData + [
 			'data-vector-sticky-header' => $featureManager->isFeatureEnabled(
 				Constants::FEATURE_STICKY_HEADER

resources/skins.vector.js/dropdownMenus.js

@@ -63,6 +63,26 @@ function addPortletLinkHandler( item, data ) {
 		'vector-menu-dropdown-noicon'
 	);
 
+	// The views menu has limited space so we need to decide whether there is space
+	// to accomodate the new item and if not to redirect to the more dropdown.
+	/* eslint-disable no-jquery/no-global-selector */
+	if ( $menu.prop( 'id' ) === 'p-views' ) {
+		// @ts-ignore if undefined as NaN will be ignored
+		var availableWidth = $( '.mw-article-toolbar-container' ).width() -
+			// @ts-ignore
+			$( '#p-namespaces' ).width() - $( '#p-variants' ).width() -
+			// @ts-ignore
+			$( '#p-views' ).width() - $( '#p-cactions' ).width();
+		var moreDropdown = document.querySelector( '#p-cactions ul' );
+		// If the screen width is less than 720px then the views menu is hidden
+		if ( moreDropdown && ( availableWidth < 0 || window.innerWidth < 720 ) ) {
+			moreDropdown.appendChild( item );
+			// reveal if hidden
+			mw.util.showPortlet( 'p-cactions' );
+		}
+	}
+	/* eslint-enable no-jquery/no-global-selector */
+
 	if ( isIconCapable && link ) {
 		// If class was previously added this will be a no-op so it is safe to call even
 		// if we've previously enhanced it.

resources/skins.vector.js/skin.js

@@ -1,6 +1,4 @@
-var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.js' ),
-	vector = require( '../skins.vector.legacy.js/vector.js' ),
-	languageButton = require( './languageButton.js' ),
+var languageButton = require( './languageButton.js' ),
 	initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
 	dropdownMenus = require( './dropdownMenus.js' ),
 	sidebar = require( './sidebar.js' );
@@ -43,9 +41,7 @@ function enableCssAnimations( document ) {
  */
 function main( window ) {
 	enableCssAnimations( window.document );
-	collapsibleTabs.init();
 	sidebar.init( window );
-	vector.init();
 	initSearchLoader( document );
 	languageButton();
 	dropdownMenus();

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

@@ -0,0 +1,26 @@
+@import '../../common/variables.less';
+
+.mw-article-toolbar-container {
+	.mw-portlet-views {
+		display: none;
+
+		@media ( min-width: @width-breakpoint-tablet ) {
+			display: block;
+		}
+	}
+
+	.vector-more-collapsible-item {
+		display: none;
+
+		@media ( max-width: @width-breakpoint-tablet ) {
+			display: block;
+		}
+	}
+
+	// Make sure pcactions is displayed (even if .emptyPortlet present)
+	.mw-portlet-cactions {
+		@media ( max-width: @width-breakpoint-tablet ) {
+			display: block;
+		}
+	}
+}

resources/skins.vector.styles/skin.less

@@ -11,6 +11,7 @@
 	@import './layouts/screen.less';
 
 	// Components
+	@import './components/ArticleToolbar.less';
 	@import './components/SearchBoxLoader.less';
 	@import './components/VueEnhancedSearchBox.less';
 	@import './components/Sidebar.less';

skin.json

@@ -316,8 +316,6 @@
 				},
 				"resources/skins.vector.js/dropdownMenus.js",
 				"resources/skins.vector.js/sidebar.js",
-				"resources/skins.vector.legacy.js/collapsibleTabs.js",
-				"resources/skins.vector.legacy.js/vector.js",
 				"resources/skins.vector.js/languageButton.js",
 				"resources/skins.vector.js/searchLoader.js"
 			],