Page MenuHomePhabricator

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

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

image.png (1×1 px, 613 KB)

Note: icons will be added in a later task

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ovasileva raised the priority of this task from Medium to High.Apr 29 2021, 5:12 PM

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

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

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

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

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

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)

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.

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

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)

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?

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

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

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?

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

cjming claimed this task.

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

Change 685941 merged by jenkins-bot:

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

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

phuedx added subscribers: Edtadros, phuedx.

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

Change 691238 merged by jenkins-bot:

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

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

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

Screen Shot 2021-05-26 at 6.13.32 AM.png (241×1 px, 60 KB)

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

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)

Assigning to you per standup.

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

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.

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.

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

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.