User links: Logged-in user links menu treatment without icons (for anonymous users no change)
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	ovasileva
	Mar 5 2021, 1:02 PM

Description

NOTE: This concerns only the logged in treatment. Anonymous treatment will be handled separately as part of T276564. There are thus no caching concerns with this task.

NOTE: Please ignore icons as part of this task. Will be handled in T276562.

Background

This is the first task for the new treatment of user links at the top of the page for the modern version of vector, as a part of T266536: [EPIC] Consolidate user links into a single menu. This task will consolidate the links for logged-in users into a single menu. Icons will be added in a later task

Use case

As a logged-in user, I want quick access to my user links, so that I can reach user-specific pages that I want to visit

Acceptance criteria

Collect the following user links under a single dropdown menu: User page, Talk, Sanbox, Preferences, Beta, Watchlist, Contributions, Log Out
The new treament is feature flagged and disabled by default.
Gadgets that currently add to the personal tools will still work e.g. if I call mw.util.addPortletLink('p-personal', 'foo', 'random gadget') I still get "random gadget" in the menu

QA steps

Any gadgets that traditionally belong to this member (such as a the UTC clock gadget) appearing alongside the user links to the menu should appear inside the dropdown.
When logged in I should not see a login link

Design

Note: icons will be added in a later task

Details

Subject	Repo	Branch	Lines +/-
Ensure login button is only rendered for anon users	mediawiki/skins/Vector	master	+3 -2
Both UserMenu stylesheets should be shipped in modern	mediawiki/skins/Vector	master	+31 -13
Cleanup styles for personal user dropdown menu.	mediawiki/skins/Vector	master	+103 -60
Create buildPersonalPage method for SkinTemplate class, add menu item to personal menu..	mediawiki/core	master	+18 -8
Revert "Create buildPersonalPage method for SkinTemplate class, add menu item to personal menu.."	mediawiki/core	wmf/1.37.0-wmf.5	+8 -18
Revert "Create buildPersonalPage method for SkinTemplate class, add menu item to personal menu.."	mediawiki/core	master	+8 -18
Consolidate user links into personal dropdown menu for logged users.	mediawiki/skins/Vector	master	+166 -6

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T266536 [EPIC] Consolidate user links into a single menu
Resolved		ovasileva	T274428 User Links: Handling of talk page notification
Resolved		ovasileva	T276564 User links: Logged-out user links menu treatment
Resolved		ovasileva	T276562 User links, Skins: Provide generalized way to add icons to user links dropdown menu"
Resolved		ovasileva	T276561 User links: Logged-in user links menu treatment without icons (for anonymous users no change)
Resolved	Feature	ovasileva	T289212 Feature request: Make login button appear besides the create account text outside new compact user menu
Resolved		None	T329463 [Regression] (office wiki) Account login menu missing in Vector 22

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 683774 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/core@master] Create buildPersonalPage method for SkinTemplate class.

https://gerrit.wikimedia.org/r/683774

gerritbot added a project: Patch-For-Review.Apr 30 2021, 2:42 AM

Change 683776 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Consolidate user links into personal dropdown menu for logged users.

https://gerrit.wikimedia.org/r/683776

cjming mentioned this in T281791: User links: Logged-in user links menu need sorting.May 4 2021, 5:29 AM

Change 683774 merged by jenkins-bot:

[mediawiki/core@master] Create buildPersonalPage method for SkinTemplate class, add menu item to personal menu..

https://gerrit.wikimedia.org/r/683774

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.5; 2021-05-11).May 5 2021, 1:00 AM

cjming removed cjming as the assignee of this task.May 5 2021, 3:40 PM

cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

cjming subscribed.

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.May 5 2021, 11:18 PM

cjming moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.May 6 2021, 5:13 PM

Change 683776 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Consolidate user links into personal dropdown menu for logged users.

https://gerrit.wikimedia.org/r/683776

RoySmith unsubscribed.May 6 2021, 8:20 PM

The patch above takes care of the feature flaggin which was a big part of this task.

Now looks like this:

Screen Shot 2021-05-06 at 1.29.39 PM.png (564×388 px, 41 KB)

Follow up changes:

We'll need to modify resources/skins.vector.styles/components/UserMenu.less to add rules for padding, link color
For me the "English" ULS switcher is showing up in the menu. We'll want to unset this, likely as part of a change to UniversalLanguageSelector. I'll probably take care of that bit if that's okay with you @cjming
Echo icon alignment issues (likely needed in the Echo extension)

Screen Shot 2021-05-06 at 1.52.29 PM.png (170×530 px, 8 KB)

Maintenance_bot removed a project: Patch-For-Review.May 6 2021, 9:10 PM

We'll need to modify resources/skins.vector.styles/components/UserMenu.less to add rules for padding, link color

Happy to take this on - just match the mocks more precisely? I can check with @alexhollender about specifics.

For me the "English" ULS switcher is showing up in the menu. We'll want to unset this, likely as part of a change to UniversalLanguageSelector. I'll probably take care of that bit if that's okay with you @cjming

@Jdlrobson no problem

Echo icon alignment issues (likely needed in the Echo extension)

Apologies for my lack of eagle eyes - ~~what's the issue with the alignment of the notification icons? Happy to take this on as well but I'm not clear what needs to be fixed.~~
Thanks to @bwang's comments on the patch I believe I now see the issue lol.

cjming added a subscriber: bwang.May 6 2021, 9:27 PM

Change 685941 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Update styles for personal user dropdown menu.

https://gerrit.wikimedia.org/r/685941

gerritbot added a project: Patch-For-Review.May 6 2021, 10:45 PM

ovasileva mentioned this in T282196: Language button adds itself incorrectly to new user menu on Wikidata and Wikimedia Commons.May 7 2021, 9:21 AM

ovasileva merged a task: T282196: Language button adds itself incorrectly to new user menu on Wikidata and Wikimedia Commons.

hi @alexhollender - Q re: hover/visited states for links in the new personal menu (including the personal page link + icon) -- the mocks in the ticket indicate that the links are all black - are there different colors for hover/active/visited states?

Screen Shot 2021-05-07 at 9.21.42 AM.png (458×527 px, 136 KB)

Also to confirm, the current personal toolbar uses red, blue, and I think a darker blue to distinguish link states (see screenshot below of personal toolbar on prod) -- these presumably should remain the same - should any of these colors carry over to the new personal menu?

Screen Shot 2021-05-07 at 9.23.17 AM.png (366×1 px, 173 KB)

In T276561#7069668, @cjming wrote:

hi @alexhollender - Q re: hover/visited states for links in the new personal menu (including the personal page link + icon) -- the mocks in the ticket indicate that the links are all black - are there different colors for hover/active/visited states?

great question & thanks for asking. For the time being we're adhering as closely as possible to OOUI. So as a general practice one would go to the OOUI documentation (link), find the closest element/component, and replicate the styling. In this case it seems that the Dropdown component is the most similar to the new user menu. Additionally (and I don't mean to put this work on you, but because I'm going to be out for the next week) it would be good to cross-reference the new search component and check the styles for the search results menu/links that appear. There should already be alignment between those and the Dropdown component in OOUI (also I can check that afterwards and we can deal with any discrepancies in a follow-up if needed). cc @Volker_E @RHo for additional clarification while I'm out.

Also to confirm, the current personal toolbar uses red, blue, and I think a darker blue to distinguish link states (see screenshot below of personal toolbar on prod) -- these presumably should remain the same - should any of these colors carry over to the new personal menu?

ah, great catch. I've just opened T282254 to deal with that. Feel free to drop the red link treatment for now.

Legoktm unsubscribed.May 7 2021, 5:25 PM

cjming claimed this task.May 7 2021, 5:34 PM

as a general practice one would go to the OOUI documentation (link), find the closest element/component, and replicate the styling. In this case it seems that the Dropdown component is the most similar to the new user menu.

thanks @alexhollender - so based on the dropdown widget in OOUI:

Screen Shot 2021-05-07 at 11.47.01 AM.png (403×798 px, 52 KB)

Remove all the colors on hover/active/visited including the underline on the hover state, make text black for all states, and grey out the selected item for the full length of the menu width on hover?

In T276561#7070117, @cjming wrote:

Remove all the colors on hover/active/visited including the underline on the hover state, make text black for all states, and grey out the selected item for the full length of the menu width on hover?

yup sounds right

Harej unsubscribed.May 7 2021, 6:08 PM

cjming removed cjming as the assignee of this task.May 7 2021, 8:47 PM

cjming moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

LGoto assigned this task to cjming.May 10 2021, 5:38 PM

cjming removed cjming as the assignee of this task.May 10 2021, 8:13 PM

cjming claimed this task.

cjming moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Change 689065 had a related patch set uploaded (by Legoktm; author: Legoktm):

[mediawiki/core@master] Revert "Create buildPersonalPage method for SkinTemplate class, add menu item to personal menu.."

https://gerrit.wikimedia.org/r/689065

I had to revert the core change because it caused an unannounced breaking change for all skins, see T282646: User page shows up as article tab in MonoBook, Timeless skins. I briefly tested locally and it seems while the Vector patch is listed as depending on the core change it works fine without it so I didn't revert that one.

Change 689065 merged by jenkins-bot:

[mediawiki/core@master] Revert "Create buildPersonalPage method for SkinTemplate class, add menu item to personal menu.."

https://gerrit.wikimedia.org/r/689065

Change 689532 had a related patch set uploaded (by Legoktm; author: Legoktm):

[mediawiki/core@wmf/1.37.0-wmf.5] Revert "Create buildPersonalPage method for SkinTemplate class, add menu item to personal menu.."

https://gerrit.wikimedia.org/r/689532

Change 689532 abandoned by Jdlrobson:

[mediawiki/core@wmf/1.37.0-wmf.5] Revert "Create buildPersonalPage method for SkinTemplate class, add menu item to personal menu.."

Reason:

I will be backporting https://gerrit.wikimedia.org/r/c/mediawiki/core/ /689889 instead

https://gerrit.wikimedia.org/r/689532

cjming removed cjming as the assignee of this task.May 12 2021, 11:17 PM

cjming moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Change 685941 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Cleanup styles for personal user dropdown menu.

https://gerrit.wikimedia.org/r/685941

Maintenance_bot removed a project: Patch-For-Review.May 14 2021, 12:11 AM

ReleaseTaggerBot edited projects, added MW-1.37-notes (1.37.0-wmf.6; 2021-05-18); removed MW-1.37-notes (1.37.0-wmf.5; 2021-05-11).May 14 2021, 1:00 AM

Being bold and moving this to Needs QA as all associated patches have either been merged or abandoned. Please add QA steps to the task's description for @Edtadros.

Do we know if this is available on the beta cluster? I'm not seeing the menu right now, but there some weird behavior with the links

Screen Shot 2021-05-14 at 3.35.49 PM.png (1×2 px, 366 KB)

This is not ready for QA it's either ready for design review or needs more work.

Change 691238 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Both UserMenu stylesheets should be shipped in modern

https://gerrit.wikimedia.org/r/691238

gerritbot added a project: Patch-For-Review.May 14 2021, 3:39 PM

Jdlrobson mentioned this in T282884: UserMenu: Disable red links style: content-links feature creates overly specific styles relating to #p-personal.May 14 2021, 4:26 PM

Change 691238 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Both UserMenu stylesheets should be shipped in modern

https://gerrit.wikimedia.org/r/691238

Maintenance_bot removed a project: Patch-For-Review.May 14 2021, 6:10 PM

cjming assigned this task to Edtadros.May 25 2021, 5:51 PM

cjming moved this task from Needs More Work to QA on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Frostly subscribed.May 25 2021, 6:02 PM

@cjming Is this on beta yet? This is what I'm seeing:

Jdlrobson mentioned this in T257144: Clean up user page link icon positioning in Vector.May 26 2021, 4:13 PM

bwang removed Edtadros as the assignee of this task.Jun 1 2021, 5:03 PM

bwang assigned this task to Edtadros.

bwang moved this task from QA to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

bwang moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Jdlrobson mentioned this in T269093: Deploy new language switching location to test wikis and begin A/B test pt 1.Jun 1 2021, 6:55 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Any gadgets that traditionally belong to this member (such as the UTC clock gadget) appearing alongside the user links to the menu should appear inside the dropdown.

Screen Shot 2021-06-04 at 7.45.22 AM.png (429×1 px, 135 KB)

• alexhollender_WMF mentioned this in T282254: [Design spike] Determine how to treat red links in user tools/menu.Jun 8 2021, 7:07 PM

Assigning to you per standup.

Jdlrobson updated the task description. (Show Details)Jun 14 2021, 10:51 PM

Change 699763 had a related patch set uploaded (by Jdlrobson; author: Bernard Wang):

[mediawiki/skins/Vector@master] Ensure login button is only rendered for anon users

https://gerrit.wikimedia.org/r/699763

gerritbot added a project: Patch-For-Review.Jun 14 2021, 10:51 PM

This can skip QA in production. It can't be tested there until the feature is deployed. We will do that prior to releasing the feature.

Jdlrobson moved this task from Ready for Signoff to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jun 14 2021, 10:54 PM

In T276561#7156694, @gerritbot wrote:

Change 699763 had a related patch set uploaded (by Jdlrobson; author: Bernard Wang):

[mediawiki/skins/Vector@master] Ensure login button is only rendered for anon users

https://gerrit.wikimedia.org/r/699763

@bwang - the "pages for logged-out editors" should also be logged-out only, wasn't sure if it was a part of your patch.

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jun 16 2021, 7:06 PM

Change 699763 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Ensure login button is only rendered for anon users

https://gerrit.wikimedia.org/r/699763

@Edtadros requesting another round of QA for this one given the bug discovered above

ReleaseTaggerBot edited projects, added MW-1.37-notes (1.37.0-wmf.11; 2021-06-21); removed MW-1.37-notes (1.37.0-wmf.6; 2021-05-18).Jun 16 2021, 8:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jun 16 2021, 8:10 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Any gadgets that traditionally belong to this member (such as a the UTC clock gadget) appearing alongside the user links to the menu should appear inside the dropdown.
✅ AC2:When logged in I should not see a login link

Screen Shot 2021-06-16 at 4.47.09 PM.png (904×1 px, 296 KB)

Screen Shot 2021-06-16 at 4.48.17 PM.png (904×1 px, 248 KB)

User Links will be tested in Prod when the feature is turned on.

ovasileva closed this task as Resolved.Jun 28 2021, 2:11 PM

Stang unsubscribed.Nov 3 2021, 3:00 AM

	F34508774: Screen Shot 2021-06-16 at 4.48.17 PM.png
	Jun 16 2021, 11:49 PM

	F34508772: Screen Shot 2021-06-16 at 4.47.09 PM.png
	Jun 16 2021, 11:49 PM

	F34480527: Screen Shot 2021-06-04 at 7.45.22 AM.png
	Jun 4 2021, 2:47 PM

	F34469567: Screen Shot 2021-05-26 at 6.13.32 AM.png
	May 26 2021, 1:13 PM

	F34453946: Screen Shot 2021-05-14 at 3.35.49 PM.png
	May 14 2021, 1:36 PM

	F34445390: Screen Shot 2021-05-07 at 11.47.01 AM.png
	May 7 2021, 5:54 PM

	F34445278: Screen Shot 2021-05-07 at 9.23.17 AM.png
	May 7 2021, 3:32 PM

	F34445276: Screen Shot 2021-05-07 at 9.21.42 AM.png
	May 7 2021, 3:32 PM

User links: Logged-in user links menu treatment without icons (for anonymous users no change)Closed, ResolvedPublic5 Estimated Story PointsActions

Description

Background

Use case

Acceptance criteria

QA steps

Design

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Beta

QA Steps

User links: Logged-in user links menu treatment without icons (for anonymous users no change)
Closed, ResolvedPublic5 Estimated Story Points
Actions

Related Objects
Search...