Drop unsupported skin CSS classes

Drop support for vectorMenu, vectorTabs and
vectorMenuCheckbox, body, menu selectors in preference
for standard selectors.

This change will impact a large amount of user scripts/styles but should
not impact any gadgets.

These classes were kept around for user scripts and styles however are not
needed internally. As we transition to a more maintainable skin menu
system, it is time to lose these selectors even though this will cause
disruption.

Vector now will use the mw-portlet class rather than the vector-menu
class in its own CSS styling, however it keeps the other classes to
allow differentiation of the different types of menu.

Changes to test: Previously the tests assumed all portlets were empty
when checking the classes. This is very rare, so its better to check
the classes of non-empty portlets, so several tests are updated
accordingly to drop the emptyPortlet class.

Bug: T262092
Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101

includes/SkinVector.php

@@ -284,22 +284,15 @@ class SkinVector extends SkinMustache {
 	) : array {
 		$portletData = $this->getPortletData( $label, $urls );
 		$extraClasses = [
-			self::MENU_TYPE_DROPDOWN => 'vector-menu vector-menu-dropdown vectorMenu',
+			self::MENU_TYPE_DROPDOWN => 'vector-menu vector-menu-dropdown',
-			self::MENU_TYPE_TABS => 'vector-menu vector-menu-tabs vectorTabs',
+			self::MENU_TYPE_TABS => 'vector-menu vector-menu-tabs',
 			self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal',
 			self::MENU_TYPE_DEFAULT => 'vector-menu',
 		];
-		// A list of classes to apply the list element and override the default behavior.
-		$listClasses = [
-			// `.menu` is on the portal for historic reasons.
-			// It should not be applied elsewhere per T253329.
-			self::MENU_TYPE_DROPDOWN => 'menu vector-menu-content-list',
-		];
 		$isPortal = $type === self::MENU_TYPE_PORTAL;
 
 		$props = $portletData + [
 			'label-id' => "p-{$label}-label",
-			'list-classes' => $listClasses[$type] ?? 'vector-menu-content-list',
 			'is-dropdown' => $type === self::MENU_TYPE_DROPDOWN,
 		];
 

includes/templates/Menu.mustache

@@ -3,20 +3,16 @@
 }}
 {{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
 <!-- Please do not use role attribute as CSS selector, it is deprecated. -->
-<nav id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{label-id}}" role="navigation" {{{html-tooltip}}}
+<nav id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}}
 	 {{{html-user-language-attributes}}}>
 	{{#is-dropdown}}
-	<input type="checkbox" class="vector-menu-checkbox vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
+	<input type="checkbox" class="vector-menu-checkbox" aria-labelledby="{{id}}-label" />
 	{{/is-dropdown}}
-	<h3 id="{{label-id}}">
+	<h3 id="{{id}}-label">
 		<span>{{label}}</span>
 	</h3>
-	{{! `body` class for backwards compatibility but let editors know not to use
+	<div class="vector-menu-content">
-	 it via HTML comment below: }}
+		<ul class="vector-menu-content-list">{{{html-items}}}</ul>
-	<!-- Please do not use the .body class, it is deprecated. -->
-	<div class="body vector-menu-content">
-		<!-- Please do not use the .menu class, it is deprecated. -->
-		<ul class="{{list-classes}}">{{{html-items}}}</ul>
 		{{{html-after-portal}}}
 	</div>
 </nav>

resources/skins.vector.styles/Menu.less

@@ -2,7 +2,7 @@
 @import 'mediawiki.mixins.less';
 
 /* Personal */
-.vector-menu {
+.mw-portlet {
 	// Hidden by default, but displayed by certain menus
 	// e.g. MenuPortal
 	h3 {

resources/skins.vector.styles/MenuDropdown.less

@@ -115,8 +115,8 @@
 }
 
 // Tab Separators
-// `.vectorTabs`: Outer start border (left in LTR) of tab row.
+// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
-// `.vectorTabs a`: Border between tabs and outer end (right in LTR) border.
+// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
 // `#mw-head .vector-menu-dropdown h3`: // Outer end (right in LTR) border of "Actions" menu.
 .vector-menu-tabs,
 .vector-menu-tabs a,

resources/skins.vector.styles/MenuPortal.less

@@ -22,7 +22,9 @@
 		cursor: default;
 	}
 
-	.body {
+	// FIXME: Remove .body after 1 week
+	.body,
+	.vector-menu-content {
 		margin-left: @margin-start-portal-body;
 		padding-top: 0;
 

resources/skins.vector.styles/legacy/Sidebar.less

@@ -11,7 +11,9 @@
 			display: none;
 		}
 
-		.body {
+		// FIXME: Remove .body after 1 week
+		.body,
+		.vector-menu-content {
 			margin-left: @margin-start-nav-main-body;
 		}
 	}

stories/Menu.stories.data.js

@@ -13,8 +13,6 @@ import { htmlUserLanguageAttributes } from './utils';
 const loggedOut = {
 	id: 'p-personal',
 	class: 'vector-menu',
-	'list-classes': 'vector-menu-content-list',
-	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-user-language-attributes': htmlUserLanguageAttributes,
 	'html-items': `<li id="pt-anonuserpage">Not logged in</li><li id="pt-anontalk"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-anoncontribs"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-createaccount"><a href="/w/index.php?title=Special:CreateAccount&amp;returnto=Main+Page" title="You are encouraged to create an account and log in; however, it is not mandatory">Create account</a></li><li id="pt-login"><a href="/w/index.php?title=Special:UserLogin&amp;returnto=Main+Page" title="You're encouraged to log in; however, it's not mandatory. [⌃⌥o]" accesskey="o">Log in</a></li>`
@@ -26,8 +24,6 @@ const loggedOut = {
 const loggedInWithEcho = {
 	id: 'p-personal',
 	class: 'vector-menu',
-	'list-classes': 'vector-menu-content-list',
-	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-user-language-attributes': htmlUserLanguageAttributes,
 	'html-items': `<li id="pt-userpage"><a href="/wiki/User:Jdlrobson" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a></li><li id="pt-notifications-alert"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts">Alerts (0)</a></li><li id="pt-notifications-notice"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray" data-counter-num="3" data-counter-text="3" title="Your notices">Notices (3)</a></li><li id="pt-mytalk"><a href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-sandbox"><a href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox">Sandbox</a></li><li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li><li id="pt-betafeatures"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features">Beta</a></li><li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l">Watchlist</a></li><li id="pt-mycontris"><a href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>`
@@ -41,8 +37,6 @@ const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">Englis
 const defaultMenu = {
 	id: 'p-generic',
 	class: 'vector-menu',
-	'list-classes': 'vector-menu-content-list',
-	'label-id': 'p-generic-label',
 	label: 'Menu label',
 	'html-user-language-attributes': htmlUserLanguageAttributes,
 	'html-items': `<li><a href='#'>Item 1</a></li>
@@ -56,8 +50,6 @@ const defaultMenu = {
 const loggedInWithULS = {
 	id: 'p-personal',
 	class: 'vector-menu',
-	'list-classes': 'vector-menu-content-list',
-	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-user-language-attributes': htmlUserLanguageAttributes,
 	'html-items': `${ULS_LANGUAGE_SELECTOR}<li id="pt-userpage"><a href="/wiki/User:Jdlrobson" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a></li><li id="pt-notifications-alert"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts">Alerts (0)</a></li><li id="pt-notifications-notice"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray" data-counter-num="3" data-counter-text="3" title="Your notices">Notices (3)</a></li><li id="pt-mytalk"><a href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-sandbox"><a href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox">Sandbox</a></li><li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li><li id="pt-betafeatures"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features">Beta</a></li><li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l">Watchlist</a></li><li id="pt-mycontris"><a href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>`

stories/MenuDropdown.stories.data.js

@@ -13,10 +13,8 @@ export { vectorMenuTemplate };
 export const moreData = {
 	'is-dropdown': true,
 	class: 'vector-menu-dropdown',
-	'list-classes': 'vector-menu-content-list',
 	label: 'More',
 	id: 'p-cactions',
-	'label-id': 'p-cactions-label',
 	'html-user-language-attributes': htmlUserLanguageAttributes,
 	'html-items': `<li id="ca-delete">
 	<a href="/w/index.php?title=Main_Page&amp;action=delete"
@@ -38,10 +36,8 @@ export const moreData = {
 export const variantsData = {
 	'is-dropdown': true,
 	class: 'vector-menu-dropdown',
-	'list-classes': 'vector-menu-content-list',
 	label: '新加坡简体',
 	id: 'p-variants',
-	'label-id': 'p-variants-label',
 	'html-user-language-attributes': htmlUserLanguageAttributes,
 	'html-items': `<li id="ca-varlang-0">
 	<a href="/zh/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD"

stories/MenuPortal.stories.data.js

@@ -36,10 +36,8 @@ export const PORTALS = {
 	example: {
 		id: 'p-example',
 		class: 'vector-menu-portal portal',
-		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'Message tooltip-p-example acts as tooltip',
 		label: 'Portal title',
-		'label-id': 'p-example-label',
 		'html-user-language-attributes': htmlUserLanguageAttributes,
 		'html-items': `
 <li><a href='#'>A list of links</a></li>
@@ -53,10 +51,8 @@ export const PORTALS = {
 	navigation: {
 		id: 'p-navigation',
 		class: 'vector-menu-portal portal portal-first',
-		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'A message tooltip-p-navigation must exist for this to appear',
 		label: 'Navigation',
-		'label-id': 'p-navigation-label',
 		'html-user-language-attributes': htmlUserLanguageAttributes,
 		'html-items': `
 		<li id="n-mainpage-description"><a href="/wiki/Main_Page" title="Visit the main page [⌃⌥z]" accesskey="z">Main page</a></li><li id="n-contents"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia">Contents</a></li><li id="n-featuredcontent"><a href="/wiki/Wikipedia:Featured_content" title="Featured content – the best of Wikipedia">Featured content</a></li><li id="n-currentevents"><a href="/wiki/Portal:Current_events" title="Find background information on current events">Current events</a></li><li id="n-randompage"><a href="/wiki/Special:Random" title="Load a random page [⌃⌥x]" accesskey="x">Random page</a></li><li id="n-sitesupport"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&amp;utm_medium=sidebar&amp;utm_campaign=C13_en.wikipedia.org&amp;uselang=en" title="Support us">Donate</a></li><li id="n-shoplink"><a href="//shop.wikimedia.org" title="Visit the Wikipedia store">Wikipedia store</a></li>
@@ -66,10 +62,8 @@ export const PORTALS = {
 	toolbox: {
 		id: 'p-tb',
 		class: 'vector-menu-portal portal',
-		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'A message tooltip-p-tb must exist for this to appear',
 		label: 'Tools',
-		'label-id': 'p-tb-label',
 		'html-user-language-attributes': htmlUserLanguageAttributes,
 		'html-items': `
 <li id="t-whatlinkshere"><a href="/wiki/Special:WhatLinksHere/Spain" title="A list of all wiki pages that link here [⌃⌥j]" accesskey="j">What links here</a></li><li id="t-recentchangeslinked"><a href="/wiki/Special:RecentChangesLinked/Spain" rel="nofollow" title="Recent changes in pages linked from this page [⌃⌥k]" accesskey="k">Related changes</a></li><li id="t-upload"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [⌃⌥u]" accesskey="u">Upload file</a></li><li id="t-specialpages"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [⌃⌥q]" accesskey="q">Special pages</a></li><li id="t-permalink"><a href="/w/index.php?title=Spain&amp;oldid=935087243" title="Permanent link to this revision of the page">Permanent link</a></li><li id="t-info"><a href="/w/index.php?title=Spain&amp;action=info" title="More information about this page">Page information</a></li><li id="t-wikibase"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q29" title="Link to connected data repository item [⌃⌥g]" accesskey="g">Wikidata item</a></li><li id="t-cite"><a href="/w/index.php?title=Special:CiteThisPage&amp;page=Spain&amp;id=935087243" title="Information on how to cite this page">Cite this page</a></li>
@@ -79,10 +73,8 @@ export const PORTALS = {
 	langlinks: {
 		id: 'p-lang',
 		class: 'vector-menu-portal portal',
-		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'A message tooltip-p-lang must exist for this to appear',
 		label: 'In other languages',
-		'label-id': 'p-lang-label',
 		'html-user-language-attributes': htmlUserLanguageAttributes,
 		'html-items': `
 		<li class="interlanguage-link interwiki-ace">
@@ -98,10 +90,8 @@ ${placeholder( `<p>Further hook output possible (lang)</p>`, 60 )}`
 	otherProjects: {
 		id: 'p-wikibase-otherprojects',
 		class: 'vector-menu-portal portal',
-		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'A message tooltip-p-wikibase-otherprojects must exist for this to appear',
 		label: 'In other projects',
-		'label-id': 'p-wikibase-otherprojects-label',
 		'html-user-language-attributes': htmlUserLanguageAttributes,
 
 		'html-items': `

stories/MenuTabs.stories.data.js

@@ -9,9 +9,7 @@ import { htmlUserLanguageAttributes } from './utils';
  */
 export const pageActionsData = {
 	id: 'p-views',
-	class: 'vector-menu-tabs vectorTabs',
+	class: 'vector-menu-tabs',
-	'list-classes': 'vector-menu-content-list',
-	'label-id': 'p-views-label',
 	label: 'Views',
 	'html-user-language-attributes': htmlUserLanguageAttributes,
 	'html-items': `<li id="ca-view" class="collapsible selected">
@@ -32,9 +30,7 @@ You can view its source [⌃⌥e]" accesskey="e">View source</a></li>
  */
 export const namespaceTabsData = {
 	id: 'p-namespaces',
-	class: 'vector-menu-tabs vectorTabs',
+	class: 'vector-menu-tabs',
-	'list-classes': 'vector-menu-content-list',
-	'label-id': 'p-namespaces-label',
 	label: 'Namespaces',
 	'html-user-language-attributes': htmlUserLanguageAttributes,
 	'html-items': `<li id="ca-nstab-main" class="selected"><a href="/wiki/Main_Page" title="View the content page [⌃⌥c]" accesskey="c">Main page</a></li>

stories/types.js

@@ -52,12 +52,10 @@
 /**
  * @typedef {Object} MenuDefinition
  * @property {string} id
- * @property {string} label-id
  * @property {string} label
  * @property {string} html-items
  * @property {string} [html-tooltip]
  * @property {string} [class] of menu
- * @property {string} list-classes of the unordered list element inside the menu
  * @property {string} [html-user-language-attributes]
  * @property {boolean} [is-dropdown]
  * @property {string} [html-after-portal] Additional HTML specific to portal menus.

tests/phpunit/integration/SkinVectorTest.php

@@ -55,15 +55,23 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
 		$vectorTemplate = $this->provideVectorTemplateObject();
 		$this->setTemporaryHook( 'PersonalUrls', [
 			function ( &$personal_urls, &$title, $skin ) {
-				$personal_urls = [];
+				$personal_urls = [
+					'pt-1' => [ 'text' => 'pt1' ],
+				];
 			}
 		] );
 		$this->setTemporaryHook( 'SkinTemplateNavigation', [
 			function ( &$skinTemplate, &$content_navigation ) {
 				$content_navigation = [
-					'actions' => [],
+					'actions' => [
-					'namespaces' => [],
+						'action-1' => []
-					'variants' => [],
+					],
+					'namespaces' => [
+						'ns-1' => []
+					],
+					'variants' => [
+						'variant-1' => []
+					],
 					'views' => [],
 				];
 			}
@@ -78,15 +86,12 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
 			[
 				// Provided by core
 				'id' => 'p-views',
-				'class' => 'mw-portlet mw-portlet-views emptyPortlet vector-menu vector-menu-tabs vectorTabs',
+				'class' => 'mw-portlet mw-portlet-views emptyPortlet vector-menu vector-menu-tabs',
 				'html-tooltip' => '',
 				'html-items' => '',
 				'html-after-portal' => '',
 				'label' => $context->msg( 'views' )->text(),
-
-				// provided by VECTOR
 				'label-id' => 'p-views-label',
-				'list-classes' => 'vector-menu-content-list',
 				'is-dropdown' => false,
 			],
 			$views
@@ -95,19 +100,19 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
 		$variants = $props['data-variants'];
 		$actions = $props['data-page-actions-more'];
 		$this->assertSame(
-			'mw-portlet mw-portlet-namespaces emptyPortlet vector-menu vector-menu-tabs vectorTabs',
+			'mw-portlet mw-portlet-namespaces vector-menu vector-menu-tabs',
 			$namespaces['class']
 		);
 		$this->assertSame(
-			'mw-portlet mw-portlet-variants emptyPortlet vector-menu vector-menu-dropdown vectorMenu',
+			'mw-portlet mw-portlet-variants vector-menu vector-menu-dropdown',
 			$variants['class']
 		);
 		$this->assertSame(
-			'mw-portlet mw-portlet-cactions emptyPortlet vector-menu vector-menu-dropdown vectorMenu',
+			'mw-portlet mw-portlet-cactions vector-menu vector-menu-dropdown',
 			$actions['class']
 		);
 		$this->assertSame(
-			'mw-portlet mw-portlet-personal emptyPortlet vector-menu',
+			'mw-portlet mw-portlet-personal vector-menu',
 			$props['data-personal-menu']['class']
 		);
 	}