The HTML structure of menus is changing and this will impact various gadgets. For example, dropdowns in Vector e.g. more menu currently apply a .menu class. This will soon no longer the case. After the change has applied, a new class .mw-portlet will be available. With time this class will be used across all skins, making HTML more predictable and maintainable and thus making gadget development easier.
ACTION REQUIRED: Please review the following user scripts to use nav ul instead, or .vector-menu ul / .vector-menu / .vector-menu-tabs if targetting Vector only.
Examples of selectors that will no longer work:
#p-cactions > .menu > ul div.vectorMenu .vectorTabs
Example
Before HTML:
<nav id="p-cactions" class="vector-menu-empty vector-menu vector-menu-dropdown vectorMenu" aria-labelledby="p-cactions-label" role="navigation" style="margin-right: initial;"> <input type="checkbox" class="vector-menu-checkbox vectorMenuCheckbox" aria-labelledby="p-cactions-label"> <h3 id="p-cactions-label"> <span>More</span> </h3> <!-- 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="menu vector-menu-content-list"><li id="ca-purge"><a href="/w/index.php?title=Main_Page&action=purge" title="Purge the server cache of this page [⌃⌥*]" accesskey="*">Purge</a></li></ul> </div> </nav>
After HTML:
<nav id="p-cactions" class="vector-menu-empty vector-menu vector-menu-dropdown" aria-labelledby="p-cactions-label" role="navigation" style="margin-right: initial;"> <input type="checkbox" class="vector-menu-checkbox" aria-labelledby="p-cactions-label"> <h3 id="p-cactions-label"> <span>More</span> </h3> <!-- Please do not use the .body class, it is deprecated. --> <div class="vector-menu-content"> <!-- Please do not use the .menu class, it is deprecated. --> <ul class="vector-menu-content-list"><li id="ca-purge"><a href="/w/index.php?title=Main_Page&action=purge" title="Purge the server cache of this page [⌃⌥*]" accesskey="*">Purge</a></li></ul> </div> </nav>
Compatibility script
JS Gadgets can prepend the following to their code to maintain compatibility as they migrate:
$('.vector-menu-tabs').addClass( 'vectorTabs' );
$('.vector-menu-content').addClass('body');
$('.vector-menu-checkbox').addClass('vectorMenuCheckbox');
$('.vector-menu-dropdown').addClass('vectorMenu');
$('.vector-menu-content-list').addClass('menu');Scripts should update their selectors
Impacted
Only Vector will be impacted by this change.
Suspected to impact < 3000 pages
https://global-search.toolforge.org/?q=(\.vectorMenu|\.vectorTabs)®ex=1&namespaces=&title=.*/.*(js|css)