Background
In T289716: Create sticky header skeleton we are building the skeleton for the sticky header. This task will cover adding the user menu to the sticky header
Acceptance criteria
- The user menu is cloned into to the sticky header.
- The sticky header user menu must have unique IDs for all elements to support our ability to click track and distinguish clicks to the original user menu compared with the new user menu. It is suggested that we suffix/prefix with "-sticky" / "sticky-"
-
Any gadgets that load late must also be added to the sticky header via mw.hook( 'util.addPortletLink' ). See QA for edge case this protects against.
Prototype
https://di-community-round-2.web.app/Audre_Lorde
QA
Test 1
- Make sure all items in the sticky header mirror the menu items outside the sticky header. There should be no visual differences between the two
- Enable the clock gadget and make sure it is present in the sticky header.
Test 2 - late loading gadget
Make sure the sticky header is visible.
Run the following code in your JavaScript console.
setTimeout( function () {
mw.util.addPortletLink('p-personal', 'Edward', 'Edward')
}, 10000 )Wait ten seconds, and verify that a new link "Edward" appears in both menus.
Test 3 - verify all click tracking IDs are unique.
Load the sticky header.
Run the following code in your developer console
var keys = Array.from($('nav [id],[data-event-name]').map((i,a) => {return a.getAttribute('data-event-name') || a.getAttribute('id') }));
keys.length === (new Set( keys )).sizeConfirm that it is "true"
Developer notes
A placeholder for the user menu has been provided.
Before the sticky header is displayed inside stickyHeader.js ensure the new user menu is copied across to avoid any visible visual change from the user's perspective
Sign off steps
- A developer should verify that click tracking is working on the new sticky header, e.g. nav a[id] selector contains elements in the sticky header so that https://github.com/wikimedia/mediawiki-extensions-WikimediaEvents/blob/master/modules/ext.wikimediaEvents/desktopWebUIActions.js#L65 works.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | T289816#7387884 changed to PASS per T289816#7388790 | |
| 2 | T289816#7387884 changed to N/A per T289816#7388597 | |
| 3 | ✅ | T289816#7387884 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | T289816#7387887 changed to PASS per T289816#7388790 | |
| 2 | T289816#7387887 changed to N/A per T289816#7388597 | |
| 3 | ✅ | T289816#7387887 |
