Vector 2022 "User menu" should be the same whether it is the initial display or the pinned display
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Jonesey95
	Dec 14 2022, 1:57 AM

Description

Steps to replicate the issue (include links if applicable):

Enable Vector 2022.
Customize your User menu to add, for example, the "Add a clock to the personal toolbar" gadget in Preferences (on en.WP, at least)
Go to a page like https://en.wikipedia.org/wiki/Caribbean_Community
Pop open the User menu (note that the tooltip calls this "User menu"). Observe that the UTC clock gadget is visible.
Scroll down the page until the "pinned" User menu is rendered.
Pop open the User menu (note that the tooltip calls this "User menu"). Observe that the UTC clock gadget is no longer visible.

What happens?:
The "User menu" is rendered differently when the reader is scrolled to the top of the page versus when it is part of the "pinned" banner at the top of a scrolled page, even though the icon and tooltip are identical, a UI indication that they should contain identical content.

Watchlist and a link to my User page also appear in the User menu within the pinned banner, but not in the initial rendered version at the top of the page.

What should have happened instead?:
The "User menu" should render identically whether the reader is at the top of the screen or scrolled down and viewing the User menu from the pinned banner.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Firefox 107 for Mac OS.

Top of page, initial version:

User menu initial 2022-12-14.png (327×445 px, 43 KB)

Scrolled down, pinned version:

User menu pinned 2022-12-14.png (296×382 px, 36 KB)

One other note: I have inserted a link to a "Tools" page in my User space using code in https://en.wikipedia.org/wiki/User:Jonesey95/vector.js. I am glad that the link still appears in Vector 2022, but that link also does not appear in the "pinned" User menu. The menus should be identical.

I looked through the list of open Desktop Improvement bugs and did not see this one. My apologies if it is a duplicate.

Related Objects

Mentioned In: T288913: Change the order of buttons in the new user menu

Event Timeline

Jonesey95 created this task.Dec 14 2022, 1:57 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 14 2022, 1:57 AM

Jonesey95 updated the task description. (Show Details)Dec 14 2022, 1:58 AM

Jonesey95 mentioned this in T288913: Change the order of buttons in the new user menu.Dec 14 2022, 2:04 AM

Based on reviewing the code, this looks to be not in the scope of a fix here and instead needs a fix in the code for the gadget. The method that the gadget uses to add the clock means that it is only selecting the non-sticky dropdown menu.

i.e. for your vector code add the following:

mw.util.addPortletLink('p-personal-sticky-header', mw.util.getUrl('User:Jonesey95/Tools'), 'Tools', 'pt-mytools', 'Go to User:Jonesey95/Tools', null, '#pt-preferences');

and for the gadget I think it would be something like having two separate node variables that are updated at the same time and reference the different variations of menus.

I'm going to close this one as Resolved as it seems that there are solutions for the two problems found and a general solution is to target p-personal-sticky-header when calling mw.util.addPortletLink to add the item to the sticky header.

Unless Vector 2022 can be modified to make the sticky personal menu and normal personal menu be the same element as defined in the HTML, then the two menus cannot have the same ID as HTML spec says IDs must be unique to elements. This means that targeting the menu using an ID provided to addPortletLink can currently only target one HTML element and thus only one menu in this case.

If using p-personal when calling addPortletLink should also update the sticky menu, that change is out of the scope of Vector 2022 and should be instead made to the JavaScript addPortletLink function. However, I'm unsure if this would be a good idea as being able to chose which menu (i.e. sticky or the one at the top) you want to add something to seems to be a potential use case.

Thank you for the detailed fix for my personal situation. That code has added "Tools" to my pinned User menu. I note that the "Tools" link is in a different place (at the bottom) in the sticky menu and it appears at the far left of the menu instead of below the other links (i.e. there is no "blank icon" space as shown in the screen shot). So there is still some inconsistency here.

Bigger than that: there is a fundamental UI issue that has not been resolved here, though. The icon and the tooltip that are shown to the user are the same for the initial menu and the pinned menu, but their contents are different. This is an undesirable Easter Egg–type problem for the user. UI elements that look the same and describe themselves in the same way should behave in the same way.

Hmm. I guess you mean the "Watchlist" and user page link which is shown in the sticky version but not the other version. I think they are added there because the menus are treated a bit like an overflow from the horizontal line of buttons / links. As such, because the watchlist is a button in the not sticky version but isn't in the pinned one, it's added to the pinned menu (otherwise it wouldn't be there).

@Jonesey95 the UTC clock gadget conversation should be continued on https://www.mediawiki.org/wiki/MediaWiki_talk:Gadget-UTCLiveClock.js#Clock_adds_itself_to_dropdown_in_Vector_modern,_Timeless_and_Minerva_Neue_skins

The "User menu" should render identically whether the reader is at the top of the screen or scrolled down and viewing the User menu from the pinned banner.'

They shouldn't. The user menu and sticky header dropdowns were built as different menus which is why their contents differ. The purposes are different - the sticky header menu gives access to elements anywhere in the page so can be thought of as providing quick access to items that you are likely to need during the reading of the page. If there are features missing there that you want to see I suggest creating specific tasks for them e.g. "Add Foo function to sticky header dropdown" and we'll consider them.

Watchlist and a link to my User page also appear in the User menu within the pinned banner, but not in the initial rendered version at the top of the page.

These are collapsed into the sticky header as these functions are not relating directly to the article.

Jdlrobson closed this task as Resolved.Dec 14 2022, 4:36 PM

Jdlrobson claimed this task.

	F35862219: User menu pinned 2022-12-14.png
	Dec 14 2022, 1:57 AM

	F35862217: User menu initial 2022-12-14.png
	Dec 14 2022, 1:57 AM

Vector 2022 "User menu" should be the same whether it is the initial display or the pinned displayClosed, ResolvedPublicBUG REPORTActions

Description

Related Objects

Event Timeline

Vector 2022 "User menu" should be the same whether it is the initial display or the pinned display
Closed, ResolvedPublicBUG REPORT
Actions