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

Assigned To

Authored By

	• alexhollender_WMF
	Aug 24 2021, 7:44 PM

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

watchlist (1).svg222 BDownload

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

AC	Status	Details
1	✅	T289619#7687622
2	❌	T289619#7687622
3	✅	T289619#7687622
4	❓	T289619#7687622
5	❓	T289619#7687622
6	✅	T289619#7687622
7	❓	T289619#7687622
8	✅	T289619#7687622

Details

Subject	Repo	Branch	Lines +/-
Drop watchlist in user menu feature flag	mediawiki/skins/Vector	master	+2 -45
Restore icons to user links dropdown	mediawiki/skins/Vector	master	+20 -7
Don't run Vector hook when menu absent from page	mediawiki/skins/Vector	master	+2 -1
Restore icons to user links dropdown	mediawiki/skins/Vector	wmf/1.38.0-wmf.18	+20 -7
Don't run Vector hook when menu absent from page	mediawiki/skins/Vector	wmf/1.38.0-wmf.18	+2 -1
[Refactor] simplify watchlist link generation and adopt new icon	mediawiki/skins/Vector	master	+48 -42
Use new watchlist icon in Minerva	mediawiki/skins/MinervaNeue	master	+1 -1
Update watchlist menu item to watchlist from star	mediawiki/core	master	+1 -1
Add watchlist icon to Vector	mediawiki/skins/Vector	master	+1 -0
Add the watchlist icon to Minerva	mediawiki/skins/MinervaNeue	master	+2 -1
POC: Add watchlist to header (move out of user menu)	mediawiki/skins/Vector	master	+16 -2
Move watchlist button out of user menu dropdown and adds temporary feature flag	mediawiki/skins/Vector	master	+87 -7
Factor out function for building watchstar data	mediawiki/core	master	+25 -17

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T266536 [EPIC] Consolidate user links into a single menu
Declined	ovasileva	T288638 Do not hide Contributions in user menu in new vector
Resolved	ovasileva	T289574 [User links] How often do various links within desktop navigation get clicked?
Resolved	ovasileva	T289619 Move Watchlist button outside user menu dropdown
Resolved	Volker_E	T297979 Add new watchlist icon, and amend related 'recentChanges' & 'userContributions' icon for DSG, Codex & OOUI
Duplicate	Edtadros	T299372 CI blocking merges in the Vector skin
Open	ovasileva	T291011 Order/rearrange user menu items based on usage and hierarchy

Event Timeline

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

JJMC89 reopened subtask T297979: Add new watchlist icon, and amend related 'recentChanges' & 'userContributions' icon for DSG, Codex & OOUI as Open.Dec 21 2021, 12:15 AM

Jdlrobson moved this task from Blocked on Others to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Jan 12 2022, 8:45 PM

Jdlrobson claimed this task.Jan 12 2022, 11:09 PM

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

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

Jdlrobson added a project: MinervaNeue.Jan 13 2022, 1:17 AM

Jdlrobson updated the task description. (Show Details)

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptJan 13 2022, 1:17 AM

Jdlrobson removed Jdlrobson as the assignee of this task.Jan 13 2022, 6:06 PM

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

LGoto assigned this task to cjming.Jan 13 2022, 6:08 PM

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

ReleaseTaggerBot edited projects, added MW-1.38-notes (1.38.0-wmf.18; 2022-01-17); removed MW-1.38-notes (1.38.0-wmf.16; 2022-01-03).Jan 14 2022, 2:00 AM

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

Jdlrobson reassigned this task from cjming to Edtadros.Jan 14 2022, 8:06 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson added a subscriber: cjming.

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"

ovasileva mentioned this in T288638: Do not hide Contributions in user menu in new vector.Jan 17 2022, 2:54 PM

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

Jdlrobson added a parent task: T293959: 1.38.0-wmf.18 deployment blockers.Jan 17 2022, 7:07 PM

(procedurally raising active train blocker to UBN!)

from the blockers task:

In T293959#7626786, @Jdlrobson wrote:

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.

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

Jdlrobson removed a parent task: T293959: 1.38.0-wmf.18 deployment blockers.Jan 18 2022, 2:36 AM

Jdlrobson added a parent task: T293959: 1.38.0-wmf.18 deployment blockers.

Jdlrobson removed a parent task: T293959: 1.38.0-wmf.18 deployment blockers.Jan 18 2022, 2:39 AM

Jdlrobson mentioned this in T293959: 1.38.0-wmf.18 deployment blockers.Jan 18 2022, 2:43 AM

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

ReleaseTaggerBot edited projects, added MW-1.38-notes (1.38.0-wmf.19; 2022-01-24); removed MW-1.38-notes (1.38.0-wmf.18; 2022-01-17).Jan 18 2022, 9:00 PM

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.

@Jdlrobson Hi! I'm remarking this as a blocker since pages like https://login.wikimedia.org/wiki/Special:Log/block?page=User:Majavah&useskinversion=2&useskin=vector are failing to load, and the stack trace seems related

marked as blocker => UBN by definition.

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.

Quiddity moved this task from Announce in next Tech/News to Already announced/Archive on the User-notice board.Jan 20 2022, 11:37 PM

Quiddity moved this task from Already announced/Archive to In current Tech/News draft on the User-notice board.

Nardog subscribed.Jan 25 2022, 7:12 AM

This comment was removed by Nardog.

MichaelMaggs subscribed.Jan 25 2022, 10:50 AM

Jdlrobson mentioned this in T299980: Missing accesskeys for user links buttons.Jan 26 2022, 8:16 PM

Quiddity moved this task from In current Tech/News draft to Already announced/Archive on the User-notice board.Jan 27 2022, 7:51 PM

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)

Edtadros updated the task description. (Show Details)Feb 7 2022, 2:15 AM

❓ 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?

Jdlrobson reassigned this task from Jdlrobson to ovasileva.Feb 7 2022, 10:45 PM

ovasileva moved this task from Needs More Work to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Feb 8 2022, 6:06 PM

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

ovasileva closed this task as Resolved.Feb 9 2022, 2:57 PM

Volker_E closed subtask T297979: Add new watchlist icon, and amend related 'recentChanges' & 'userContributions' icon for DSG, Codex & OOUI as Resolved.Feb 15 2022, 12:06 PM

In T289619#7638516, @Huji wrote:

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?

Looks like a bug. I've opened T302084

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.

jwang mentioned this in T305454: Data QA of T304366: Ensure all DesktopWebUIActionsTracking events are correctly logged for menus.May 12 2022, 1:57 AM

Jdlrobson mentioned this in T310348: New message alert appears in a new line instead of the same line as user menu.Jun 15 2022, 4:20 PM

Ladsgroup edited projects, added User-notice-archive; removed User-notice.Aug 13 2022, 1:53 PM

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

	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

	F34943848: en.m.wikipedia.beta.wmflabs.org_wiki_Dog(iPhone 11 Pro Max).png
	Feb 7 2022, 2:12 AM

Move Watchlist button outside user menu dropdownClosed, ResolvedPublic3 Estimated Story PointsActions

Description

Description

Design

Icon

Acceptance criteria

Developer notes

QA Results - Beta

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

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

Related Objects
Search...