Replace 'more' menu with page tools pinnable dropdown

Bug: T317897
Change-Id: Ia94ebc32041bb3c2f86d461b310766b2d14c66a2

i18n/en.json

@@ -50,6 +50,7 @@
 	"vector-toc-menu-tooltip": "Table of Contents",
 	"vector-toc-collapsible-button-label": "Toggle the table of contents",
 	"vector-site-nav-label": "Site",
+	"vector-page-tools-label": "Tools",
 	"vector-2022-prefs-talkpage": "[[mw:Talk:Reading/Web/Desktop_Improvements|Discussion]]",
 	"tooltip-vector-anon-user-menu-title": "More options",
 	"vector-prefs-limited-width": "Enable limited width mode",

i18n/qqq.json

@@ -65,6 +65,7 @@
 	"vector-toc-menu-tooltip": "Used as title attribute for table of contents icon on hover.",
 	"vector-toc-collapsible-button-label": "Used as the label for the table of contents collapsible toggle button",
 	"vector-site-nav-label": "Accessible label for site (main menu) nav landmark",
+	"vector-page-tools-label": "Label for the page tools pinnable dropdown",
 	"vector-2022-prefs-talkpage": "Link to the desktop improvements project talk page which is shown before the preview link in skin preferences. See T307113 for more information.",
 	"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users.",
 	"vector-prefs-limited-width": "Used in [[Special:Preferences]]",

includes/SkinVector22.php

@@ -137,6 +137,48 @@ class SkinVector22 extends SkinVector {
 		] );
 	}
 
+	/**
+	 * Returns pinnable header template data for page tools
+	 *
+	 * @param bool $isPinned
+	 * @return array
+	 */
+	private function getPageToolsPinnableHeaderData( bool $isPinned ): array {
+		return [
+			'is-pinned' => $isPinned,
+			'label' => $this->msg( 'vector-page-tools-label' ),
+			'unpin-label' => $this->msg( 'vector-toc-toggle-position-title' ),
+			'pin-label' => $this->msg( 'vector-toc-toggle-position-sidebar' ),
+			'data-name' => 'vector-page-tools',
+			'data-pinnable-element-id' => 'vector-page-tools-content',
+			'data-unpinned-container-id' => 'vector-page-tools-content-container',
+			'data-pinned-container-id' => 'vector-page-tools-pinned-container'
+		];
+	}
+
+	/**
+	 * @param array $portletData
+	 * @return array
+	 */
+	private function getPageToolsData( array $portletData ): array {
+		$actionsMenu = $portletData[ 'data-actions' ];
+		$menusData = [ $actionsMenu ];
+		// Page Tools is unpinned by default, hardcoded for now
+		$isPageToolsPinned = false;
+
+		$pinnableDropdownData = [
+			'id' => 'vector-page-tools',
+			'class' => 'vector-page-tools',
+			'label' => $this->msg( 'toolbox' ),
+			'is-pinned' => $isPageToolsPinned,
+			// @phan-suppress-next-line PhanSuspiciousValueComparison
+			'has-multiple-menus' => count( $menusData ) > 1,
+			'data-pinnable-header' => $this->getPageToolsPinnableHeaderData( $isPageToolsPinned ),
+			'data-menus' => $menusData
+		];
+		return $pinnableDropdownData;
+	}
+
 	/**
 	 * Merges the `view-overflow` menu into the `action` menu.
 	 * This ensures that the previous state of the menu e.g. emptyPortlet class
@@ -243,6 +285,12 @@ class SkinVector22 extends SkinVector {
 			);
 		}
 
+		$isPageToolsEnabled = $featureManager->isFeatureEnabled( Constants::FEATURE_PAGE_TOOLS );
+		if ( $isPageToolsEnabled ) {
+			$pageToolsData = $this->getPageToolsData( $parentData['data-portlets'] );
+			$parentData['data-portlets']['data-page-tools'] = $pageToolsData;
+		}
+
 		$config = $this->getConfig();
 		$components = [
 			'data-search-box' => new VectorComponentSearchBox(
@@ -296,7 +344,7 @@ class SkinVector22 extends SkinVector {
 					Constants::FEATURE_STICKY_HEADER_EDIT
 				)
 			) : false,
-			'is-page-tools-enabled' => $featureManager->isFeatureEnabled( Constants::FEATURE_PAGE_TOOLS )
+			'is-page-tools-enabled' => $isPageToolsEnabled
 		] );
 	}
 }

includes/templates/ColumnEnd.mustache

@@ -1,5 +1,5 @@
 <div class="vector-column-end">
-	<nav id="vector-column-end-page-tools-container" class="vector-page-tools-landmark" aria-label="{{msg-tooltip-p-cactions}}">
+	<nav id="vector-page-tools-pinned-container" class="vector-page-tools-landmark" aria-label="{{msg-tooltip-p-cactions}}">
 		{{#data-page-tools}}{{>PinnableDropdownContents}}{{/data-page-tools}}
 	</nav>
 </div>

includes/templates/skin.mustache

@@ -50,7 +50,7 @@
 			<main id="content" class="mw-body" role="main">
 				{{>PageTitlebar}}
 				{{>PageToolbar}}
-				{{>ColumnEnd}}
+				{{#is-page-tools-enabled}}{{>ColumnEnd}}{{/is-page-tools-enabled}}
 				<div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container>
 					{{>BeforeContent}}
 					{{! the #contentSub element is currently used by editors, do not hide or remove it

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

@@ -41,3 +41,16 @@
 		color: @color-link;
 	}
 }
+
+.vector-menu-content .vector-dropdown-content {
+	.mw-list-item a,
+	.vector-menu-heading {
+		.mixin-vector-dropdown-menu-item();
+		white-space: nowrap;
+		color: @color-link;
+	}
+
+	.vector-menu-heading {
+		color: @color-base--subtle;
+	}
+}

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

@@ -55,7 +55,7 @@
 	// NOTE: Consider adding a single selector to define both items,
 	// since they both appear beside each other in the article toolbar.
 	& > a,
-	.vector-menu-heading {
+	> .vector-menu-heading {
 		display: inline-flex;
 		position: relative;
 		cursor: pointer;
@@ -66,7 +66,7 @@
 		font-weight: normal;
 	}
 
-	.vector-menu-heading {
+	> .vector-menu-heading {
 		// For better compatibility with gadgets (like Twinkle) that append
 		// <H3> elements as dropdown headings (which was the convention in legacy Vector).
 		font-size: inherit;
@@ -75,7 +75,7 @@
 	/* FIXME: legacy Vector .icon selector can be removed when VisualEnhancementNext is enabled */
 	&.icon > a,
 	&.vector-tab-noicon > a,
-	.vector-menu-heading {
+	> .vector-menu-heading {
 		// Top & bottom padding to increase clickable area.
 		padding: @padding-vertical-tabs;
 		// bottom margin to overlap border with toolbar border.

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

@@ -0,0 +1,25 @@
+// Ensure there is only 1 page tools landmark at anytime
+.vector-page-tools-landmark {
+	.vector-page-tools-pinned #right-navigation &,
+	.vector-page-tools-unpinned .vector-column-end & {
+		display: none;
+	}
+}
+
+// Update page tools styles when pinned
+.vector-column-end {
+	.vector-dropdown-content {
+		padding-left: 45px;
+		width: 140px;
+	}
+
+	.vector-menu-content-list {
+		margin: 12px 0;
+		list-style: none;
+
+		li {
+			padding: 5px 0;
+			margin: 0;
+		}
+	}
+}

resources/skins.vector.styles/skin.less

@@ -23,6 +23,7 @@
 	@import './components/MenuPortal.less';
 	@import './components/PageTitlebar.less';
 	@import './components/PageToolbar.less';
+	@import './components/PageTools.less';
 	@import './components/PinnableHeader.less';
 	@import './components/StickyHeader.less';
 	@import './components/TabWatchstarLink.less';

skin.json

@@ -40,7 +40,8 @@
 					"bodyClasses": [
 						"skin-vector",
 						"skin-vector-search-vue",
-						"vector-toc-not-collapsed"
+						"vector-toc-not-collapsed",
+						"vector-page-tools-unpinned"
 					],
 					"menus": [
 						"user-interface-preferences",