Update tools belt to accommodate watch and bookmark and update page tools to only show icons at lower resolutions
Open, HighPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	Jdlrobson-WMF
	Tue, May 12, 10:57 PM

Project Tags

Referenced Files

	F86746381: Screenshot 2026-06-05 at 8.13.26 AM.png
	Fri, Jun 5, 12:15 PM

	F86635212: Screenshot 2026-06-04 at 12.43.47 PM.png
	Thu, Jun 4, 4:44 PM

	F86635110: Screenshot 2026-06-04 at 12.42.58 PM.png
	Thu, Jun 4, 4:44 PM

	F86634217: Screenshot 2026-06-04 at 12.34.05 PM.png
	Thu, Jun 4, 4:36 PM

	F86634262: Screenshot 2026-06-04 at 11.30.20 AM.png
	Thu, Jun 4, 4:36 PM

	F86274297: Screenshot 2026-06-02 at 11.50.42 AM.png
	Tue, Jun 2, 6:51 PM

	F86274296: Screenshot 2026-06-02 at 11.50.50 AM.png
	Tue, Jun 2, 6:51 PM

	F86274295: Screenshot 2026-06-02 at 11.51.07 AM.png
	Tue, Jun 2, 6:51 PM

Subscribers

Description

NOTE: impact is only for logged in users

Background

Following T424571: Temporary watchstar status not reflected in dropdown: Add icon support for toolbox in Vector 2022 we inadvertently removed menu collapsing at low resolutions. Thankfully @Sjoerddebruin reported and provided a fix for T426115: Collapsed views items missing from "more" menu at narrow widths in Vector 2022 to restore the items to the menu. However, this raises the question of whether these menu items should have icons similar to the other items in the menu. In this ticket we'll reconsider the behaviour.

For anonymous users, this meant that editors were unable to see edit icons. It was preferable to restore those via T426115: Collapsed views items missing from "more" menu at narrow widths in Vector 2022 given anonymous users are cached to explore our options.

Screenshot 2026-05-12 at 3.53.45 PM.png (553×744 px, 146 KB)

Currently the impact is mainly for logged in users, all items shown to anonymous users do not have icons:

Screenshot 2026-05-12 at 3.55.59 PM.png (564×596 px, 119 KB)

User story

As an editor I want access to the watch star and the page's current watch status at all times.

Requirements

After talking to @Sneha we landed on the following requirements

The toolbox should show icons at lower resolutions for all items
The toolbox should not show icons at higher resolutions
Going forward both watch and bookmark should always appear uncollaped to the right of the history.
The bookmark icon should be on the far right and styled as a Codex icon button
The watch star should be replaced with a watch link icon for visual cohesion with the rest of the toolbelt.

BDD

For QA engineer to fill out

Test Steps

Visit https://en.wikipedia.org/w/index.php?title=Wikipedia%3AVillage_pump_%28technical%29
Resize the browser until the read / edit / view history tabs disappear
Click "Tools" The items should appear in the dropdown

Design

Screenshot 2026-06-02 at 11.50.58 AM.png (521×831 px, 69 KB)

Screenshot 2026-06-02 at 11.51.07 AM.png (1,913×602 px, 84 KB)

Screenshot 2026-06-02 at 11.50.50 AM.png (1,886×642 px, 110 KB)

Screenshot 2026-06-02 at 11.50.42 AM.png (1,917×691 px, 90 KB)

Acceptance criteria

Add acceptance criteria

Communication criteria - does this need an announcement or discussion?

Add communication criteria

Rollback plan

What is the rollback plan in production for this task if something goes wrong?

This task was created by Version 1.2.0 of the Web team task template using phabulous

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
Use VectorComponentMenu in PageToolbar component	mediawiki/skins/Vector	master	+152 -95
Reapply "Create VectorComponentPageToolbar component"	mediawiki/skins/Vector	master	+259 -140
Create VectorComponentPageToolbar component	mediawiki/skins/Vector	master	+245 -137
Dynamic collapsing of page tools to avoid overflow	mediawiki/skins/Vector	master	+272 -8
Design modifications to new watchstar link	mediawiki/skins/Vector	master	+22 -5
Update how icons display in page actions toolbelt	mediawiki/skins/Vector	master	+79 -24
[cleanup] Delete unused anon user links and more menu code	mediawiki/skins/Vector	master	+2 -2
WIP: Update icons so they only display at low resolution	mediawiki/skins/Vector	master	+66 -21

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		bwang	T426131 Update tools belt to accommodate watch and bookmark and update page tools to only show icons at lower resolutions
		Open	BUG REPORT	None	T428649 [regression] Duplicate p-tb (tools/toolbox) menu in Vector 2022 caused by watchstar/bookmark icon changes

Event Timeline

Jdlrobson-WMF created this task.Tue, May 12, 10:57 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptTue, May 12, 10:57 PM

Jdlrobson-WMF mentioned this in T426115: Collapsed views items missing from "more" menu at narrow widths in Vector 2022.Tue, May 12, 11:01 PM

Hakimi97 subscribed.Tue, May 12, 11:10 PM

Johannnes89 subscribed.Wed, May 13, 6:40 AM

Jdlrobson-WMF mentioned this in T426232: Reading list bookmark icon isnt visible on small viewports.Wed, May 13, 5:22 PM

Any thoughts about this one?

Jdlrobson-WMF added a project: Readers Essential Work (Minerva and Vector work consistently).Tue, May 19, 7:07 PM

Had a discussion about this with @Jdlrobson-WMF

Originally we wanted to add icons to Vector because we had moved Watch into the tools menu for users with 0 edits. Since we are revising to have watch above articles, supporting icons in the tools is not needed. Adding icons on vector (specially when the tools menu) is pinned can create visual clutter on the page. Also it is currently inconsistent that some items have icons and some don't.

To address these issues, the recommendation is to not have any icons in Vector large screen views. And for smaller Vector viewports match the design to that of Minerva which is to have icons for all items.

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

[mediawiki/skins/Vector@master] WIP: Update icons so they only display at low resolution

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

gerritbot added a project: Patch-For-Review.Thu, May 21, 12:22 AM

Change #1290103 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] WIP: Update icons so they only display at low resolution

Reason:

Folded into https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1286498?usp=search

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

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

[mediawiki/skins/Vector@master] Update how icons

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

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
https://a2dd205737.catalyst.wmcloud.org/w/

Important for next iteration of beta feature.

Jdlrobson-WMF updated the task description. (Show Details)Fri, May 22, 7:09 PM

Sneha mentioned this in T427226: [QA] Show both Watch and Save functionality above article on Desktop.Mon, May 25, 7:37 PM

Jdlrobson-WMF mentioned this in T427228: [Reading list beta updates] In Minerva toolbar, change "Watch" to "Subscribe" on Talk pages and move Watch to first item in Tools Menu.Tue, May 26, 5:38 PM

Jdlrobson-WMF updated the task description. (Show Details)

aude set the point value for this task to 3.Mon, Jun 1, 2:56 PM

aude moved this task from Needs refinement to Ready for sprint on the Reader Experience Team board.

aude added a project: FY25-26 Reading Lists (Beta improvements based on feedback).

I was thinking a bit more about this and I think we should revisit the proposal here. There are some things missing here like "Read" or "Edit source" which are desktop specific and don't have distinct icons. Since we are moving Watch outside now I think we can go back to status quo and not have any icons on desktop. And instead work on improving responsiveness of the belt. I am mapping different scenarios and so lets discuss this more before committing.

aude moved this task from Ready for sprint to Needs refinement on the Reader Experience Team board.Mon, Jun 1, 5:33 PM

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
https://e119976ba7.catalyst.wmcloud.org/w/

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
https://b399a949af.catalyst.wmcloud.org/w/

Jdlrobson-WMF moved this task from Needs refinement to Ready for sprint on the Reader Experience Team board.Tue, Jun 2, 5:27 PM

HFan-WMF moved this task from Ready for sprint to REx Sprint 22 [Q4 Jun 2 - Jun 15] on the Reader Experience Team board.Tue, Jun 2, 5:40 PM

HFan-WMF edited projects, added: Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]); removed: Reader Experience Team.

Jdlrobson-WMF moved this task from Ready to In progress on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.Tue, Jun 2, 6:49 PM

Regarding my comment above I spoke with @Jdlrobson-WMF and we have it all cleared up. He will be updating the new screenshots.

Jdlrobson-WMF updated the task description. (Show Details)Tue, Jun 2, 6:51 PM

Sneha awarded a token.Tue, Jun 2, 6:52 PM

HFan-WMF removed Sneha as the assignee of this task.Wed, Jun 3, 6:08 PM

Jdlrobson-WMF moved this task from In progress to Needs code review on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.Wed, Jun 3, 6:10 PM

With the latest patch, the bookmark (save) icon does not have the same vertical alignment as the watchstar:

Screenshot 2026-06-04 at 11.30.20 AM.png (1,276×1,134 px, 104 KB)

Also, Watch / Unwatch and the save icon button wrap to a second line in certain viewport widths:

Screenshot 2026-06-04 at 12.34.05 PM.png (1,296×1,132 px, 156 KB)

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

[mediawiki/skins/Vector@master] Create VectorComponentPageToolbar component

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

When I pin the menu to the sidebar, the icons are black:

Screenshot 2026-06-04 at 12.42.58 PM.png (1,296×1,132 px, 115 KB)

In the dropdown menu, the icons are blue:

Screenshot 2026-06-04 at 12.43.47 PM.png (1,074×1,132 px, 160 KB)

@Jdlrobson-WMF I think this^ might not be the latest. We adjusted the spacing between star and watch earlier which is not reflected here.

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
https://dbbbb1445f.catalyst.wmcloud.org/w/

I've shared the patchdemo to avoid more confusion. @Sneha please confirm the patchdemo matches your expectations.

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

[mediawiki/skins/Vector@master] [cleanup] Delete unused anon user links and more menu code

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

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

[mediawiki/skins/Vector@master] Use VectorComponentMenu in PageToolbar component

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

@Jdlrobson-WMF here's the vertical alignment issue I was talking about. It's only present in Firefox:

Adding align-items: center to .vector-menu-tabs .mw-list-item & > a in MenuTabs.less improves the situation.

Change #1298215 had a related patch set uploaded (by Aude; author: Aude):

[mediawiki/skins/Vector@master] Dynamic collapsing of page tools to avoid overflow

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

Change #1297777 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] [cleanup] Delete unused anon user links and more menu code

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

Change #1286498 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update how icons display in page actions toolbelt

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

ReleaseTaggerBot added a project: MW-1.47-notes (1.47.0-wmf.6; 2026-06-09).Fri, Jun 5, 7:00 PM

Jdlrobson-WMF moved this task from Needs code review to Needs QA on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.Fri, Jun 5, 8:39 PM

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

[mediawiki/skins/Vector@master] WIP: Do not show border bottom on watch star focus

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

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
https://56516456e2.catalyst.wmcloud.org/w/

Reviewed this patch and here are some recommended changes:

Reduce the space between star and watch label. Currently its 4px. Make margin-right: 2px; (make sure its also reflected for unwatch state)
The current size of the bookmark icon is 16px. Please make it 20px.
Add the same hover state "gray box" we have on bookmark icon to the "Watch" button.

Jdlrobson-WMF assigned this task to bwang.Mon, Jun 8, 5:19 PM

Jdlrobson-WMF moved this task from Needs QA to Needs code review on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.

Change #1298365 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Design modifications to new watchstar link

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

Change #1297750 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Create VectorComponentPageToolbar component

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