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	Author	Repo	Branch	Lines +/-
Reduce watchstar icon size	Jdlrobson	mediawiki/skins/Vector	wmf/1.47.0-wmf.8	+3 -2
Reduce watchstar icon size	Bernard Wang	mediawiki/skins/Vector	master	+3 -2
Remove unused private functions from Hooks class	Umherirrender	mediawiki/skins/Vector	master	+0 -21
Ensure page tools icons are only shown on small viewports	Jdlrobson	mediawiki/skins/Vector	wmf/1.47.0-wmf.7	+1 -1
Reapply "Create VectorComponentPageToolbar component"	Jdlrobson	mediawiki/skins/Vector	master	+259 -140
Update how icons display in page actions toolbelt	Jdlrobson	mediawiki/skins/Vector	master	+79 -24
Ensure page tools icons are only shown on small viewports	Bernard Wang	mediawiki/skins/Vector	master	+1 -1
Use VectorComponentMenu in PageToolbar component	Jdlrobson	mediawiki/skins/Vector	master	+154 -95
Create VectorComponentPageToolbar component	Jdlrobson	mediawiki/skins/Vector	master	+245 -137
Dynamic collapsing of page tools to avoid overflow	Aude	mediawiki/skins/Vector	master	+272 -8
Design modifications to new watchstar link	Jdlrobson	mediawiki/skins/Vector	master	+22 -5
[cleanup] Delete unused anon user links and more menu code	Bernard Wang	mediawiki/skins/Vector	master	+2 -2
WIP: Update icons so they only display at low resolution	Jdlrobson	mediawiki/skins/Vector	master	+66 -21

Related Objects
Search...

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

Event Timeline

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

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.Jun 5 2026, 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.Jun 8 2026, 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

Per @Sneha I created the following follow up task: T428519: Increase size of bookmark icon to use standard Codex button icon size and T428520: [Design spike] Improve responsive behaviour of Vector 2022 when bookmark functionality enabled

Jdlrobson-WMF mentioned this in T428520: [Design spike] Improve responsive behaviour of Vector 2022 when bookmark functionality enabled.Jun 8 2026, 10:58 PM

Change #1298215 abandoned by Aude:

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

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

Jdlrobson-WMF mentioned this in T426502: Swap icons in preferences.Jun 9 2026, 6:08 PM

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

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

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

Jdlrobson-WMF added a subtask: T428649: [regression] Duplicate p-tb (tools/toolbox) menu in Vector 2022 caused by watchstar/bookmark icon changes.Jun 9 2026, 9:46 PM

Jdlrobson-WMF mentioned this in T428649: [regression] Duplicate p-tb (tools/toolbox) menu in Vector 2022 caused by watchstar/bookmark icon changes.

Change #1299608 merged by jenkins-bot:

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

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

ReleaseTaggerBot edited projects, added: MW-1.47-notes (1.47.0-wmf.7; 2026-06-16); removed: MW-1.47-notes (1.47.0-wmf.6; 2026-06-09).Jun 10 2026, 6:00 PM

Jdlrobson merged a task: T424600: Reading Lists should not delete the watchlist button nor the watchlist star in Vector 2022.Jun 11 2026, 3:05 AM

Jdlrobson added subscribers: Novem_Linguae, Titore, Chipmunkdavis, Chlod.

Jdlrobson-WMF closed subtask T428649: [regression] Duplicate p-tb (tools/toolbox) menu in Vector 2022 caused by watchstar/bookmark icon changes as Resolved.Jun 11 2026, 8:01 PM

Change #1297786 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.Jun 12 2026, 10:30 PM

bwang mentioned this in T429384: [spike] Use codex button styles on watchstar link.Jun 16 2026, 5:45 PM

Jdlrobson-WMF edited projects, added: Reader Experience Team (REx Sprint 23 [Q4 Jun 16-June 30]); removed: Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]).Jun 16 2026, 5:47 PM

Jdlrobson-WMF moved this task from Ready to Needs QA on the Reader Experience Team (REx Sprint 23 [Q4 Jun 16-June 30]) board.Jun 16 2026, 5:48 PM

Jdlrobson-WMF closed this task as Resolved.Jun 16 2026, 10:50 PM

Jdlrobson-WMF moved this task from Needs QA to Sign-off on the Reader Experience Team (REx Sprint 23 [Q4 Jun 16-June 30]) board.

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

Testing this on test.wikipedia.org it seems to have regressed so moving back to ToDo

Screenshot 2026-06-17 at 8.20.23 AM.png (3,238×1,180 px, 517 KB)

Jdlrobson-WMF moved this task from Ready to In progress on the Reader Experience Team (REx Sprint 23 [Q4 Jun 16-June 30]) board.Jun 17 2026, 3:21 PM

Jdlrobson-WMF merged a task: T395624: Bookmark button breaks on Vector responsive design.Jun 17 2026, 4:09 PM

Jdlrobson-WMF added subscribers: Dillon, Tacsipacsi, SToyofuku-WMF and 3 others.

bwang moved this task from In progress to Needs code review on the Reader Experience Team (REx Sprint 23 [Q4 Jun 16-June 30]) board.Jun 17 2026, 6:56 PM

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

[mediawiki/skins/Vector@master] Ensure page tools icons are only shown on small viewports

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

gerritbot added a project: Patch-For-Review.Jun 17 2026, 6:56 PM

Thanks @bwang for the fix. Moving this back to QA.

Change #1303531 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Ensure page tools icons are only shown on small viewports

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

Maintenance_bot removed a project: Patch-For-Review.Jun 17 2026, 9:31 PM

ReleaseTaggerBot edited projects, added: MW-1.47-notes (1.47.0-wmf.8; 2026-06-23); removed: MW-1.47-notes (1.47.0-wmf.7; 2026-06-16).Jun 17 2026, 10:00 PM

DLynch mentioned this in T429633: [qa only] Watchstar is misaligned in toolbar in vector in all browsers other than firefox.Thu, Jun 18, 3:52 PM

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

[mediawiki/skins/Vector@wmf/1.47.0-wmf.7] Ensure page tools icons are only shown on small viewports

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

gerritbot added a project: Patch-For-Review.Thu, Jun 18, 6:43 PM

Change #1304151 abandoned by Jdlrobson:

[mediawiki/skins/Vector@wmf/1.47.0-wmf.7] Ensure page tools icons are only shown on small viewports

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

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

[mediawiki/skins/Vector@master] Remove unused private functions from Hooks class

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

Novem_Linguae unsubscribed.Mon, Jun 22, 5:04 PM

Change #1304151 restored by Jdlrobson:

[mediawiki/skins/Vector@wmf/1.47.0-wmf.7] Ensure page tools icons are only shown on small viewports

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

Change #1304151 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.47.0-wmf.7] Ensure page tools icons are only shown on small viewports

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

Change #1304660 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove unused private functions from Hooks class

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

Mentioned in SAL (#wikimedia-operations) [2026-06-22T23:25:46Z] <jdlrobson@deploy1003> Started scap sync-world: Backport for [[gerrit:1304151|Ensure page tools icons are only shown on small viewports (T426131)]], [[gerrit:1304863|Fix duplicate print and other projects menu links in main menu (T429676)]]

Mentioned in SAL (#wikimedia-operations) [2026-06-22T23:27:46Z] <jdlrobson@deploy1003> jdlrobson: Backport for [[gerrit:1304151|Ensure page tools icons are only shown on small viewports (T426131)]], [[gerrit:1304863|Fix duplicate print and other projects menu links in main menu (T429676)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2026-06-22T23:34:05Z] <jdlrobson@deploy1003> Finished scap sync-world: Backport for [[gerrit:1304151|Ensure page tools icons are only shown on small viewports (T426131)]], [[gerrit:1304863|Fix duplicate print and other projects menu links in main menu (T429676)]] (duration: 08m 18s)

Jdlrobson-WMF reassigned this task from bwang to Sneha.Mon, Jun 22, 11:34 PM

Jdlrobson-WMF added a subscriber: bwang.

ReleaseTaggerBot edited projects, added: MW-1.47-notes (1.47.0-wmf.7; 2026-06-16); removed: MW-1.47-notes (1.47.0-wmf.8; 2026-06-23).Tue, Jun 23, 12:00 AM

I am not sure which ticket should this be part of. But the Watchstar size in nav changed in beta from what is in production currently. The production size is correct.

Jdlrobson-WMF reassigned this task from Sneha to bwang.Tue, Jun 23, 3:29 PM

@Sneha can you share a screenshot of what you mean? im not seeing any difference in prod vs testwiki (which is the same as beta). both icons are 16x16

Screenshot 2026-06-23 at 11.46.16 AM.png (2,280×1,422 px, 526 KB)

Screenshot 2026-06-23 at 11.46.22 AM.png (2,270×1,392 px, 754 KB)

Hmm this is what I am seeing. The alignment of watch label with the rest of the links is fixed but notice the star in beta is bigger.

Screenshot 2026-06-23 at 4.01.33 PM.png (2,020×1,412 px, 221 KB)

In T426131#12048001, @Sneha wrote:

Hmm this is what I am seeing. The alignment of watch label with the rest of the links is fixed but notice the star in beta is bigger.

Confirmed - I was wondering about it too

enwiki beta

Screenshot 2026-06-23 at 4.56.23 PM.png (2,116×912 px, 256 KB)

   .vector-menu-tabs .mw-list-item .cdx-button:not(.cdx-button--icon-only) .vector-icon {
    min-width: 10px;
    min-height: 10px;
    width: var(--font-size-medium, 1rem);
    height: var(--font-size-medium, 1rem);
    display: inline-block;
    vertical-align: text-bottom;
    background-size: calc(max(var(--font-size-medium, 1rem), 14px));
}

Screenshot 2026-06-23 at 4.56.15 PM.png (2,074×758 px, 209 KB)

@Etonkovidova just to clarify that I was wondering about the size of the star in front of the watch label. There is a separate ticket for the bookmark icon resize.

@bwang I think the request here is to restore .vector-menu-tabs .mw-list-item.mw-watchlink .vector-icon { mask-size: var(--font-size-small, 0.875rem); }

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

[mediawiki/skins/Vector@master] Reduce watchstar icon size

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

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

[mediawiki/skins/Vector@wmf/1.47.0-wmf.8] Reduce watchstar icon size

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

Change #1305470 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Reduce watchstar icon size

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

Sneha watchstar icon has now been fixed. Should be visible in around 15m on https://en.wikipedia.beta.wmcloud.org/

ReleaseTaggerBot edited projects, added: MW-1.47-notes (1.47.0-wmf.9; 2026-06-30); removed: MW-1.47-notes (1.47.0-wmf.7; 2026-06-16).Wed, Jun 24, 9:00 PM

Change #1305499 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.47.0-wmf.8] Reduce watchstar icon size

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

Mentioned in SAL (#wikimedia-operations) [2026-06-24T22:59:27Z] <jdlrobson@deploy1003> Started scap sync-world: Backport for [[gerrit:1305191|Restore menu tab underline style (T428519)]], [[gerrit:1305499|Reduce watchstar icon size (T426131)]], [[gerrit:1305444|Replace Tools button with vertical ellipsis (T429258)]]

Stashbot mentioned this in T429258: Replace “tools” text button on article nav with an ellipsis icon..Wed, Jun 24, 10:59 PM

ReleaseTaggerBot edited projects, added: MW-1.47-notes (1.47.0-wmf.8; 2026-06-23); removed: MW-1.47-notes (1.47.0-wmf.9; 2026-06-30).Wed, Jun 24, 11:00 PM

Mentioned in SAL (#wikimedia-operations) [2026-06-24T23:01:38Z] <jdlrobson@deploy1003> jdlrobson: Backport for [[gerrit:1305191|Restore menu tab underline style (T428519)]], [[gerrit:1305499|Reduce watchstar icon size (T426131)]], [[gerrit:1305444|Replace Tools button with vertical ellipsis (T429258)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2026-06-24T23:06:48Z] <jdlrobson@deploy1003> Finished scap sync-world: Backport for [[gerrit:1305191|Restore menu tab underline style (T428519)]], [[gerrit:1305499|Reduce watchstar icon size (T426131)]], [[gerrit:1305444|Replace Tools button with vertical ellipsis (T429258)]] (duration: 07m 21s)

Jdlrobson-WMF moved this task from Incoming to Groomed on the Vector 2022 board.Thu, Jun 25, 3:47 PM

Just checked. Looks good to me now.

Jdlrobson-WMF reassigned this task from Sneha to HFan-WMF.Thu, Jun 25, 9:57 PM

Jdlrobson-WMF moved this task from Needs QA to Sign-off on the Reader Experience Team (REx Sprint 23 [Q4 Jun 16-June 30]) board.

Looks great on production on both Firefox and Chrome.

Test wiki on Patch demo by Jon (WMF) using patch(es) linked to this task was deleted:

~~https://b399a949af.catalyst.wmcloud.org/w/~~

Test wiki on Patch demo by Jon (WMF) using patch(es) linked to this task was deleted:

~~https://e119976ba7.catalyst.wmcloud.org/w/~~

Test wiki on Patch demo by Jon (WMF) using patch(es) linked to this task was deleted:

~~https://dbbbb1445f.catalyst.wmcloud.org/w/~~

Test wiki on Patch demo by Jon (WMF) using patch(es) linked to this task was deleted:

~~https://56516456e2.catalyst.wmcloud.org/w/~~

	F90186447: Screenshot 2026-06-23 at 4.56.15 PM.png
	Tue, Jun 23, 9:00 PM

	F90186352: Screenshot 2026-06-23 at 4.56.23 PM.png
	Tue, Jun 23, 9:00 PM

	F90180578: Screenshot 2026-06-23 at 4.01.33 PM.png
	Tue, Jun 23, 8:07 PM

	F90158505: Screenshot 2026-06-23 at 11.46.22 AM.png
	Tue, Jun 23, 4:47 PM

	F90158504: Screenshot 2026-06-23 at 11.46.16 AM.png
	Tue, Jun 23, 4:47 PM

	F89134366: Screenshot 2026-06-17 at 8.20.23 AM.png
	Jun 17 2026, 3:20 PM

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

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

	Jdlrobson-WMF
	May 12 2026, 10:57 PM

Update tools belt to accommodate watch and bookmark and update page tools to only show icons at lower resolutionsClosed, ResolvedPublic3 Estimated Story PointsActions

Description

Background

User story

Requirements

BDD

Test Steps

Design

Acceptance criteria

Communication criteria - does this need an announcement or discussion?

Rollback plan

Details

Related ObjectsSearch...

Event Timeline

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

Related Objects
Search...