golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

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
This commit is contained in:
jdlrobson 2020-09-04 12:34:05 -07:00 committed by VolkerE
parent 4fad68ed0b
commit 89fee04f0b
12 changed files with 35 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
includes/SkinVector.php
View File

@ -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_TABS => 'vector-menu vector-menu-tabs vectorTabs',
self::MENU_TYPE_DROPDOWN => 'vector-menu vector-menu-dropdown',
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,
];

14
includes/templates/Menu.mustache
View File

@ -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
it via HTML comment below: }}
<!-- 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>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">{{{html-items}}}</ul>
{{{html-after-portal}}}
</div>
</nav>

2
resources/skins.vector.styles/Menu.less
View File

@ -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 {

4
resources/skins.vector.styles/MenuDropdown.less
View File

@ -115,8 +115,8 @@
}
// Tab Separators
// `.vectorTabs`: Outer start border (left in LTR) of tab row.
// `.vectorTabs a`: Border between tabs and outer end (right in LTR) border.
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
// `.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,

4
resources/skins.vector.styles/MenuPortal.less
View File

@ -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;

4
resources/skins.vector.styles/legacy/Sidebar.less
View File

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

8
stories/Menu.stories.data.js
View File

@ -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>`

4
stories/MenuDropdown.stories.data.js
View File

@ -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"

10
stories/MenuPortal.stories.data.js
View File

@ -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': `

8
stories/MenuTabs.stories.data.js
View File

@ -9,9 +9,7 @@ import { htmlUserLanguageAttributes } from './utils';
*/
export const pageActionsData = {
id: 'p-views',
class: 'vector-menu-tabs vectorTabs',
'list-classes': 'vector-menu-content-list',
'label-id': 'p-views-label',
class: 'vector-menu-tabs',
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',
'list-classes': 'vector-menu-content-list',
'label-id': 'p-namespaces-label',
class: 'vector-menu-tabs',
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>

2
stories/types.js
View File

@ -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.

29
tests/phpunit/integration/SkinVectorTest.php
View File

@ -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' => [],
'namespaces' => [],
'variants' => [],
'actions' => [
'action-1' => []
],
'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']
);
}