@Sneha For "Watch this article" and "Save this article" in the tool dropdown, we also need to give the user the ability to unwatch the article or remove the article from the reading list.

Would the text be "Remove from Watchlist" and "Remove from Reading List" or "Remove from Bookmarks"? (Note: this text could be very long when translated into other languages)

Currently we use "Add bookmark" and "Remove bookmark" with the reading list icon in the toolbar.

Initial proof of concept patches:

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReadingLists/+/1174760

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1174759

The approach involves adding 2 hooks to the Vector skin to allow other extensions to modify appearance of the watchlist icon/position and items in the tools dropdown menu.

If the approach is okay, then some further changes and cleanup are needed to have this match the requirements + have proper tests and quality standards.

@aude the space required for the remove copy is a good point. I am not sure of using the word "bookmark" as it can be confused with browser bookmark. Let me think about both the wording and text length. Is removing function going to be part of this ticket or a separate task @Jdrewniak

Is removing function going to be part of this ticket or a separate task

Given that both watchlist & readinglist buttons already have functioning "remove" capabilities, I think it would be a regression if those capabilities were removed with this work, so I would include that as part of this task. I think we can iterate on the copy though, and follow-up as needed with different messaging changes.

okay in that case let's just go with "Save article" and "Watch article" as constant state of the copy. The icon state and the toast are enough of an indicator for what is happening. I will update the designs.

and "Remove article" and "Unwatch article" ?

@aude Copy change is not required. The icon state can indicate whether it is in saved or watched list or not. Also this solution in the toolbar may be temporary so we can keep it simple for now.

Also "remove article" can be confusing because it can also be interpreted as removing the article from wikipedia. And the word "unwatch" is not something we commonly use so far for watchlist.

I think "Unwatch" is used in many places (e.g. here in Minerva):

okay thanks for bringing to my attention. It looks like text shows up on very specific screen size as I did not notice it on my phone or tablet (now I notice in landscape).

With that convention we can go with "Unsave" for Save. But both "Unwatch" and Unsave" seem like non-standard english. But could work for experiment. We could then drop the word "article" and just go with Watch/Unwatch and Save/Unsave.

Let me know if any other concerns or if this sounds okay?

@Sneha This sounds good. Thanks.

@Sneha @Jdrewniak For the requirement: "The reading list bookmark icon is in the sticky header " and "The watchlist icon is in the sticky header ", is it part of this task or could it be handled separately in https://phabricator.wikimedia.org/T400946 ?

1. We don't have the codex icon yet https://phabricator.wikimedia.org/T400948
2. From what I see, the Vector 2022 skin does not make it easy to add icons in the sticky header. It is easy to add it to the overflow menu and that was already implemented by Dillon, but not adding it as a sticky icon/item.

With implementing this in a separate task, then that would simplify the changes done in this task for swapping the icons depending on user count.

@aude good point. I separated out the sticky header requirement into T401376

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

[mediawiki/extensions/ReadingLists@master] Move watchlist/reading lists to tools menu depending on edit count

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

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

[mediawiki/skins/Vector@master] Add VectorWatchIcon and VectorPageTools hook

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

@Sneha @bwang We discussed making the watchlist star (and reading list) icons in the tools sidebar / dropdown to match the size of the icon in in the toolbar.

I think the change would need to be done in Vector and for any potential icons displayed in the sidebar, not just reading list and watchlist. Is this something we want in general for Vector? If so, would it be in this task or a separate task?

think the change would be in PageTools.less

// Make sure icons match toolbar icon size
.vector-page-tools .vector-icon {
	width: calc( var( --font-size-medium, 1rem ) );
	height: calc( var( --font-size-medium, 1rem ) );
	mask-size: calc( var( --font-size-medium, 1rem ) );
}

In T400358#11076140, @aude wrote:

think the change would be in PageTools.less

// Make sure icons match toolbar icon size
.vector-page-tools .vector-icon {
	width: calc( var( --font-size-medium, 1rem ) );
	height: calc( var( --font-size-medium, 1rem ) );
	mask-size: calc( var( --font-size-medium, 1rem ) );

Cool! So this provides us with a small sized icon. Given that we cannot fully rule out extensions/tools/gadgets to put a Codex icon there as well and we don't know the context hundred percent sure, it's for me worth a discussion if we put this on vector-icon and not more specific.

}

@Volker_E I have changed the selector to .vector-menu-content .vector-icon so that the size is the same in all menus

// Make sure icons in the menus match toolbar icon size
.vector-menu-content .vector-icon {
	width: calc( var( --font-size-medium, 1rem ) );
	height: calc( var( --font-size-medium, 1rem ) );
	mask-size: calc( var( --font-size-medium, 1rem ) );
}

Happy to discuss this or find another solution.

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

[mediawiki/skins/Vector@master] Tools menu icons to match toolbar icon size

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

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

[mediawiki/skins/Vector@master] Disable the watchstar rotation animation when page tools are unpinned

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

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

[mediawiki/skins/Vector@master] Add VectorMoveItemsToToolbarHook and VectorPageTools hook

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

Discussed this with @aude and @bwang today. We discussed using the existing SkinTemplateNavigation::Universal hook to manipulate these menus. Two questions came out of this for @Sneha :

1. Can we add "watch" to existing "Actions" menu?

@Sneha we currently have an "Actions" menu that has is already used for the watchstar action (when you resize the screen the items collapse here). It already contains "Move" and "Delete" and I would recommend we add this menu item there, rather than make it a standalone link (which is currently not supported by Vector 2022 and would be considerably more work. How does that sound?

2. How important is the icon?
   
   The simplest thing to do here is add no icons. The second simplistic is to add icons to all the items in the actions menu (we have those setup already and can just flick a switch). If it's important that only the watch item has an icon this will be considerably more work.

• I see "Read", "Edit", "View history", "Watch" in the Tools sidebar as well. Do you mean we repeat those options in sidebar as well? If so, That repetition of same actions in multiple palces can be confusing. If you are just playing around and thats not how it is meant to be then ignore my comment.
• Also in the screenshot I see the "bookmark" and "star" icon next to each other which can be very confusing to know what does what for readers.

• From what I understand it seems having some items in Tools menu with icons and some without icon may be problematic from a technical point of view. One thing to note is that this proposed arrangement is only temporary for experiment and not meant to be an eventual solution. So if there is a workaround we can do now we can keep things as specified in the ticket.
• However, if the workaround is not ideal then we can have both Watch and Save in the action bar but with labels to clarify what they mean. (This would remove the need for swapping logic. It may be okay on desktop but it wont scale well on mobile but for our first release which is Desktop only this should be fine.)
  

How important is the icon?
I think pretty important for discovery and recognition of the feature. Since we are swapping them based on edit count it becomes important for them to stay discoverable and icon really helps with that especially when we have a wall of text on the screen.

In T400358#11054166, @Sneha wrote:

@aude Copy change is not required. The icon state can indicate whether it is in saved or watched list or not. Also this solution in the toolbar may be temporary so we can keep it simple for now.

Also "remove article" can be confusing because it can also be interpreted as removing the article from wikipedia. And the word "unwatch" is not something we commonly use so far for watchlist.

I would like to advocate for a copy change for accessibility reasons. For screenreader users, they won't have the affordance to see the icon change. Even if we added an accessible label that says "Unsave article", the "Save" text is still there, which is confusing. It's actually WCAG criteria to have the accessible label match the text. And per @aude's prior comment, we already use the "Unwatch" label in Minerva as well

@bwang thats a good point... we already decided to use the "Unsave" as a label when the article is saved in this comment (which was after the comment above)

Change #1174760 abandoned by Aude:

[mediawiki/extensions/ReadingLists@master] WIP - Move watchlist/reading lists to tools menu depending on edit count

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

Change #1174759 abandoned by Aude:

[mediawiki/skins/Vector@master] WIP - Allow swapping items in views menu (toolbar) and actions menu

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

Change #1178544 abandoned by Aude:

[mediawiki/skins/Vector@master] Disable the watchstar rotation animation when page tools are unpinned

Reason:

We are not (for now) adding icons in the page tools menu. We can always restore this patch later, if needed.

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

Change #1178533 abandoned by Aude:

[mediawiki/skins/Vector@master] Tools menu icons to match toolbar icon size

Reason:

We are not (for now) adding icons in the page tools menu. We can always restore this patch later, if needed.

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