Page MenuHomePhabricator

Move Watchlist button outside user menu dropdown
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
alexhollender_WMF
Aug 24 2021, 7:44 PM
Referenced Files
F34944867: Screen Shot 2022-02-07 at 2.41.28 PM.png
Feb 7 2022, 10:45 PM
F34944871: Screen Shot 2022-02-07 at 2.41.44 PM.png
Feb 7 2022, 10:45 PM
F34942655: Screen Shot 2022-02-04 at 3.49.11 PM.png
Feb 7 2022, 2:12 AM
F34941832: Screen Shot 2022-02-03 at 2.39.49 PM.png
Feb 7 2022, 2:12 AM
F34943847: Screen Shot 2022-02-06 at 6.10.18 PM.png
Feb 7 2022, 2:12 AM
F34941837: Screen Shot 2022-02-03 at 2.41.47 PM.png
Feb 7 2022, 2:12 AM
F34941840: Screen Shot 2022-02-03 at 2.44.36 PM.png
Feb 7 2022, 2:12 AM
Tokens
"Love" token, awarded by Cirdan.

Description

Description

We recently consolidated user links into a user menu. Based on T288638 and T289574#7462391 we're going to add the watchlist button-icon to the site header.

Design

prototype (remember to log-in): https://di-community-round-2.web.app/Real_tennis

Screen Shot 2021-11-22 at 5.45.12 PM.png (1×2 px, 841 KB)

Icon

Acceptance criteria

  • The watchlist item should be visible alongside notifications and user page link
  • The watchlist item should not be visible in the user dropdown menu in the site header
  • At lower resolutions, the new standalone watchlist icon should collapse into the user dropdown menu
  • The watchlist item HTML should be inside the user dropdown menu (to support lower resolutions and also allow us to compare clicks between the two)
  • The new watchlist item should be tracked with DesktopWebUIClickTracking and have a unique ID
  • The watchlist menu item should appear in the user menu dropdown in the sticky header
  • The watchlist icon should not be associated with a menu, thus it should not be possible to add additional links (easily using mw.util.addPortletLink) to its left or right.
  • The new watchlist icon should also appear in Minerva for design consistency

Developer notes

See very rough POC here: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/740951

After talking to @alexhollender the watchlist menu item can be placed to the right of the user page link if that makes things significantly easier on the technical side

QA Results - Beta

Related Objects

Event Timeline

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

Change 740951 restored by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Add watchlist to header (move out of user menu)

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

Change 740951 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Add watchlist to header (move out of user menu)

Reason:

Whoops

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

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

[mediawiki/core@master] Update watchlist menu item to watchlist from star

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

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

[mediawiki/skins/Vector@master] Add watchlist icon to Vector

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

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

[mediawiki/skins/Vector@master] [Refactor] simplify watchlist link generation and adopt new logo

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

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

[mediawiki/skins/Vector@master] Remove watchlist in user menu feature flag

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

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

[mediawiki/skins/MinervaNeue@master] WIP: Update watchlist menu item icon

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

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

[mediawiki/skins/MinervaNeue@master] Add the watchlist icon to Minerva

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

Change 753590 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Refactor] simplify watchlist link generation and adopt new icon

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

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

[mediawiki/skins/Vector@master] Don't run Vector hook on edit

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

Change 753589 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add watchlist icon to Vector

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

Change 753820 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add the watchlist icon to Minerva

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

Change 753582 merged by jenkins-bot:

[mediawiki/core@master] Update watchlist menu item to watchlist from star

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

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

[mediawiki/skins/MinervaNeue@master] Use new watchlist icon in Minerva

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

Change 754010 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Use new watchlist icon in Minerva

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

For technews:

"Users of the most recent version of the vector skin will be able to access their watchlist from outside of the user menu. The watchlist link will appear alongside user notices and alerts"

Looks cool! I am only missing a tooltip right now, could that still be added?

taavi raised the priority of this task from High to Unbreak Now!.Jan 17 2022, 7:12 PM
taavi subscribed.

(procedurally raising active train blocker to UBN!)

from the blockers task:

I'm off today, but https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/753990 is a blocker (it won't merge due to a CI complaint). I'll check in tomorrow when I'm back.

Jdlrobson lowered the priority of this task from Unbreak Now! to High.Jan 18 2022, 2:35 AM

To avoid confusion with what the real issue is here blocking the train I've opened T299372 as UBN.

Change 753990 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Don't run Vector hook when menu absent from page

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

@ovasileva this is not tech news ready. We need a task to enable the feature. It's currently only enabled on the beta cluster. We used a feature flag here due to the OOUI release being a blocker.

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

[mediawiki/skins/Vector@master] Restore icons to user links dropdown

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

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

[mediawiki/skins/Vector@wmf/1.38.0-wmf.18] Don't run Vector hook when menu absent from page

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

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

[mediawiki/skins/Vector@wmf/1.38.0-wmf.18] Restore icons to user links dropdown

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

Change 755010 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restore icons to user links dropdown

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

Change 754913 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.38.0-wmf.18] Don't run Vector hook when menu absent from page

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

Change 755012 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.38.0-wmf.18] Restore icons to user links dropdown

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

Change 753592 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Drop watchlist in user menu feature flag

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

Due to a mistake on my side, this will go out this week. It's currently live on mediawiki.org
See T289619#7625959 for suggested copy.
Probably also worth mentioning that the new link currently has no tooltip on hover. This will be fixed during next week's deploy.

Urbanecm raised the priority of this task from High to Unbreak Now!.Jan 20 2022, 5:13 PM
Urbanecm subscribed.

marked as blocker => UBN by definition.

Jdlrobson lowered the priority of this task from Unbreak Now! to High.Jan 20 2022, 5:31 PM

I've opened T299671

Re: Tech News -

Due to a mistake on my side, this will go out this week. It's currently live on mediawiki.org

IIUC, that means it will be going out with the Deployment Train, and thus it should be included in the "Changes later this week" section of the newsletter. Please correct me if that's wrong. :)

See T289619#7625959 for suggested copy.

I propose re-phrasing this as:

  • "You can now access your watchlist from outside of the user menu in the new Vector skin. The watchlist link appears next to the notification icons if you are at the top of the page."

(I rephrased it to use 'you can' language, and I added the detail that it is only accessible if you are at the top of the page)
I'll add it as soon as you confirm or correct.

Probably also worth mentioning that the new link currently has no tooltip on hover. This will be fixed during next week's deploy.

I suggest leaving out this detail, especially if it will be fixed by the time everyone sees it on the non-mediawiki.org wikis.

IIUC, that means it will be going out with the Deployment Train, and thus it should be included in the "Changes later this week" section of the newsletter. Please correct me if that's wrong. :)

yes please

I saw this in production on fawiki, so I deleted the Gadget I had created which would bring the Watchlist icon back out of the user dropdown menu. Unsure if other wikis had copied my Gadget too; if yes, they should delete as well.

This comment was removed by Nardog.
Edtadros subscribed.

Test Result - Beta

Status:
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: The watchlist item should be visible alongside notifications and user page link

Screen Shot 2022-02-03 at 2.39.49 PM.png (441×809 px, 114 KB)

❌ AC2: The watchlist item should not be visible in the user dropdown menu in the site header
See image in AC1. Watchlist appears in user dropdown.
✅ AC3: At lower resolutions, the new standalone watchlist icon should collapse into the user dropdown menu
Screen Shot 2022-02-03 at 2.41.47 PM.png (393×694 px, 89 KB)

❓ AC4: The watchlist item HTML should be inside the user dropdown menu (to support lower resolutions and also allow us to compare clicks between the two)
The item is in the HTML inside the user dropdown menu, but that is to be expected. I'm wondering if this is supposed to be the case if AC2 had passed and this was at a higher resolution and the watchlist was not expected int he dropdown?
Screen Shot 2022-02-03 at 2.44.36 PM.png (512×730 px, 141 KB)

❓ AC5: The new watchlist item should be tracked with DesktopWebUIClickTracking and have a unique ID
This is the only event that appears. The action isn't clearly stated in the instructions so I'm not sure if this is what is expected..
Screen Shot 2022-02-03 at 2.53.04 PM.png (387×736 px, 70 KB)

✅ AC6: The watchlist menu item should appear in the user menu dropdown in the sticky header
Screen Shot 2022-02-04 at 3.49.11 PM.png (348×1 px, 145 KB)

❓ AC7: The watchlist icon should not be associated with a menu, thus it should not be possible to add additional links (easily using mw.util.addPortletLink) to its left or right.
@Jdlrobson, I need some more info on which parameters to use to verify this.

✅ AC8: The new watchlist icon should also appear in Minerva for design consistency

Screen Shot 2022-02-06 at 6.10.18 PM.png (384×1 px, 102 KB)

en.m.wikipedia.beta.wmflabs.org_wiki_Dog(iPhone 11 Pro Max).png (2×1 px, 1 MB)

❓ AC4: The watchlist item HTML should be inside the user dropdown menu (to support lower resolutions and also allow us to compare clicks between the two)

The item is in the HTML inside the user dropdown menu, but that is to be expected. I'm wondering if this is supposed to be the case if AC2 had passed and this was at a higher resolution and the watchlist was not expected int he dropdown?

This is a pass.
High res:

Screen Shot 2022-02-07 at 2.41.28 PM.png (232×710 px, 15 KB)

Low res:

Screen Shot 2022-02-07 at 2.41.44 PM.png (520×580 px, 59 KB)

❓ AC5: The new watchlist item should be tracked with DesktopWebUIClickTracking and have a unique ID

Checked in Hue and this is a pass.
For query select count(*) from desktopwebuiactionstracking where year = 2022 AND day = 6 AND month = 2 AND event.name = 'pt-watchlist-2' I see 2947 events (e.g. there were 2947 sampled clicks to this button on the 6th February.

❓ AC7: The watchlist icon should not be associated with a menu, thus it should not be possible to add additional links (easily using mw.util.addPortletLink) to its left or right.

The command is mw.util.addPortletLink('p-personal-more', '#href', 'text').

This appears to fail QA, but I'm not sure if this is okay. @ovasileva how do you feel about this?

Olga said this morning that this is fine so I think this is done.

I saw this in production on fawiki, so I deleted the Gadget I had created which would bring the Watchlist icon back out of the user dropdown menu. Unsure if other wikis had copied my Gadget too; if yes, they should delete as well.

For the record, I have removed the watchlist-icon gadget on French wiki.

I have also updated the gadgets sandbox-icon and contributions-icon, which provide similar functionality for the sandbox and contributions icons, so that they continue to integrate nicely.

About the (conflicting) AC2 and AC4, currently the entry is always present in the dropdown menu, including on large windows when there is also the direct icon.

I would like to know if we can expect it to remain as so?

I hadn't understand AC4 is only about the HTML markup, not at all about the displayed element.

Though, AC2 isn't fulfilled currently and T302084 is valid.