wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-27 17:10:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sticky header dropdown should not contain gadgets in personal menu

Browse source 
Bug: T302087
Change-Id: Iae1f42c3c526398d7dea038786ae9001e118307b
This commit is contained in:
Jon Robson 2022-02-18 08:47:44 -08:00 committed by Jdlrobson
parent 08d2ae3171
commit 2dcd99ed21
3 changed files with 85 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
jest.config.js
View file

@ -28,10 +28,10 @@ module.exports = {
// An object that configures minimum threshold enforcement for coverage results
coverageThreshold: {
global: {
branches: 6,
functions: 12,
lines: 8,
statements: 8
branches: 14,
functions: 24,
lines: 22,
statements: 22
}
},

61
resources/skins.vector.es6/stickyHeader.js
View file

@ -112,6 +112,15 @@ function removeClassFromNodes( nodes, className ) {
} );
}
/**
* @param {NodeList} nodes
*/
function removeNodes( nodes ) {
Array.prototype.forEach.call( nodes, function ( node ) {
node.parentNode.removeChild( node );
} );
}
/**
* Ensures a sticky header button has the correct attributes
*
@ -327,6 +336,32 @@ function addVisualEditorHooks( targetIntersection, observer ) {
} );
}
/**
* @param {HTMLElement} userMenu
* @return {HTMLElement} cloned userMenu
*/
function prepareUserMenu( userMenu ) {
const
// Type declaration needed because of https://github.com/Microsoft/TypeScript/issues/3734#issuecomment-118934518
userMenuClone = /** @type {HTMLElement} */( userMenu.cloneNode( true ) ),
userMenuStickyElementsWithIds = userMenuClone.querySelectorAll( '[ id ], [ data-event-name ]' );
// Update all ids of the cloned user menu to make them unique.
makeNodeTrackable( userMenuClone );
userMenuStickyElementsWithIds.forEach( makeNodeTrackable );
// Remove portlet links added by gadgets using mw.util.addPortletLink, T291426
removeNodes( userMenuClone.querySelectorAll( '.mw-list-item-js' ) );
removeClassFromNodes(
userMenuClone.querySelectorAll( '.user-links-collapsible-item' ),
'user-links-collapsible-item'
);
// Prevents user menu from being focusable, T290201
const userMenuCheckbox = userMenuClone.querySelector( 'input' );
if ( userMenuCheckbox ) {
userMenuCheckbox.setAttribute( 'tabindex', '-1' );
}
return userMenuClone;
}
/**
* Makes sticky header functional for modern Vector.
*
@ -344,35 +379,12 @@ function makeStickyHeaderFunctional(
stickyIntersection
) {
const
// Type declaration needed because of https://github.com/Microsoft/TypeScript/issues/3734#issuecomment-118934518
userMenuClone = /** @type {HTMLElement} */( userMenu.cloneNode( true ) ),
userMenuStickyElementsWithIds = userMenuClone.querySelectorAll( '[ id ], [ data-event-name ]' ),
userMenuStickyContainerInner = userMenuStickyContainer
.querySelector( VECTOR_USER_LINKS_SELECTOR );
// Update all ids of the cloned user menu to make them unique.
makeNodeTrackable( userMenuClone );
userMenuStickyElementsWithIds.forEach( makeNodeTrackable );
// Remove portlet links added by gadgets using mw.util.addPortletLink, T291426
const gadgetLinks = userMenuClone.querySelector( 'mw-list-item-js' );
if ( gadgetLinks ) {
gadgetLinks.remove();
}
removeClassFromNodes(
userMenuClone.querySelectorAll( '.user-links-collapsible-item' ),
'user-links-collapsible-item'
);
// Prevents user menu from being focusable, T290201
const userMenuCheckbox = userMenuClone.querySelector( 'input' );
if ( userMenuCheckbox ) {
userMenuCheckbox.setAttribute( 'tabindex', '-1' );
}
// Clone the updated user menu to the sticky header.
if ( userMenuStickyContainerInner ) {
userMenuStickyContainerInner.appendChild( userMenuClone );
userMenuStickyContainerInner.appendChild( prepareUserMenu( userMenu ) );
}
prepareIcons( headerElement,
@ -513,6 +525,7 @@ function initStickyHeader( observer ) {
module.exports = {
show,
hide,
prepareUserMenu,
initStickyHeader,
isStickyHeaderAllowed,
header,

44
tests/jest/stickyHeader.test.js Normal file
View file

@ -0,0 +1,44 @@
const sticky = require( '../../resources/skins.vector.es6/stickyHeader.js' );
describe( 'sticky header', () => {
test( 'prepareUserMenu removes gadgets from dropdown', async () => {
const menu = document.createElement( 'div' );
menu.innerHTML = `<input type="checkbox" id="p-personal-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-personal" class="vector-menu-checkbox" aria-labelledby="p-personal-label" aria-expanded="true">
<h3 id="p-personal-label" aria-label="" class="vector-menu-heading mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-userAvatar" aria-hidden="true">
<span class="vector-menu-heading-label">Personal tools</span>
<span class="vector-menu-checkbox-expanded">expanded</span>
<span class="vector-menu-checkbox-collapsed">collapsed</span>
</h3>
<div class="vector-menu-content">
<ul class="vector-menu-content-list">
<li id="pt-userpage" class="user-links-collapsible-item mw-list-item">
<a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userAvatar" href="/w/index.php?title=Special:Homepage&amp;source=personaltoolslink&amp;namespace=0" dir="auto" title="Your homepage [⌃⌥.]" accesskey="."><span>Jdlrobson</span></a>
</li>
<li id="pt-mytalk" class="mw-list-item">
<a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userTalk" href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n"><span>Talk</span></a>
</li>
<li id="pt-sandbox" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-sandbox" href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox"><span>Sandbox</span></a>
</li>
<li id="pt-preferences" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-settings" href="/wiki/Special:Preferences" title="Your preferences"><span>Preferences</span></a>
</li>
<li id="pt-betafeatures" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-labFlask" href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features"><span>Beta</span></a>
</li>
<li id="pt-watchlist" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-watchlist" href="/wiki/Special:Watchlist" title="The list of pages you are monitoring for changes [⌃⌥L]" accesskey="L"><span>Watchlist</span></a>
</li>
<li id="pt-mycontris" class="mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userContributions" href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y"><span>Contributions</span></a>
</li>
<li class="mw-list-item mw-list-item-js" id="cx-language"><a href="/w/index.php?title=Special:ContentTranslation&amp;campaign=contributionsmenu&amp;to=en" title="Add a new translation" class="mw-ui-icon mw-ui-icon-before mw-ui-icon-vector-gadget-cx-language"><span>Translations</span></a>
</li>
<li class="mw-list-item mw-list-item-js" id="cx-imageGallery"><a href="//commons.wikimedia.org/wiki/Special:MyUploads" title="A list of your uploaded media" class="mw-ui-icon mw-ui-icon-before mw-ui-icon-vector-gadget-cx-imageGallery"><span>Uploaded media</span></a></li>
<li class="mw-list-item mw-list-item-js"><a href="Test"><span>Test</span></a></li>
</ul>
<div id="pt-logout" class="vector-user-menu-logout" title="Log out">
<a data-mw="interface" href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=safemode%3D1" icon="logOut" class="vector-menu-content-item vector-menu-content-item-logout mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-logOut"><span>Log out</span></a>
</div>
</div>`;
const newMenu = sticky.prepareUserMenu( menu );
// check classes have been updated and removed.
expect( newMenu.querySelectorAll( '.user-links-collapsible-item' ).length ).toBe( 0 );
expect( newMenu.querySelectorAll( '.mw-list-item-js' ).length ).toBe( 0 );
} );
} );