We would like to add the ability to watch an article to the sticky header

@ovasileva I would be curious for us to add a bit of background to this requirement around motivation why. In the past I thought that we collected data to show usage of the watchstar was really low amongst most editors so for our own records it would be good to document that.

In T294759#7472512, @Jdlrobson wrote:

Currently the sticky header shows at 720px. The sticky header is a bit cramped as this lower resolutions:

We agreed that the sticky header would be hidden below 1200px (in order to simplify the feature development) — see T289641#7313324. It used to hide below 1200px on Beta, not sure when that changed.

In T294759#7472632, @Jdlrobson wrote:

We would like to add the ability to watch an article to the sticky header

@ovasileva I would be curious for us to add a bit of background to this requirement around motivation why. In the past I thought that we collected data to show usage of the watchstar was really low amongst most editors so for our own records it would be good to document that.

This is correct - in our initial prioritization exercises the watch functionality was further down the list than some of the other elements currently in the sticky header. That said, it was still within the top 10 list. Upon developing, we realized that, however, it would also be the only functionality from the main tabs to be left out of the sticky header, so might not match the user's expectation.

Also how does clicking the watch star behave? Is this the same as currently? If so, the mw.notify function may be a blocker (T260338)

Still need guidance here @alexhollender. In current form, notifications overlap the sticky header like so:

In T294759#7478313, @Jdlrobson wrote:

Also how does clicking the watch star behave? Is this the same as currently? If so, the mw.notify function may be a blocker (T260338)

Still need guidance here @alexhollender. In current form, notifications overlap the sticky header like so:

@Jdlrobson i've added the relevant mocks to the task description

For progressively enhancing the watchstar you can use require( 'mediawiki.page.watch.ajax.js' ).watchstar( )

/**
        * Bind a given watchstar element to make it interactive.
        *
        * NOTE: This is meant to allow binding of watchstars for arbitrary page titles,
        * especially if different from the currently viewed page. As such, this function
        * will *not* synchronise its state with any "Watch this page" checkbox such as
        * found on the "Edit page" and "Publish changes" forms. The caller should either make
        * "current page" watchstars picked up by #init (and not use #watchstar) sync it manually
        * from the callback #watchstar provides.
        *
        * @param {jQuery} $links One or more anchor elements that must have an href
        *  with a url containing a `action=watch` or `action=unwatch` query parameter,
        *  from which the current state will be learned (e.g. link to unwatch is currently watched)
        * @param {string} title Title of page that this watchstar will affect
        * @param {Function} callback Callback to run after the action has been processed and API
        *  request completed. The callback receives two parameters:
        * @param {jQuery} callback.$link The element being manipulated
        * @param {boolean} callback.isWatched Whether the article is now watched
        */
       function watchstar( $links, title, callback ) {

While estimating we realized we want to sync the UI of the sticky header watchstar icon with the one outside the watchstar which is going to be more tricky.

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

[mediawiki/skins/Vector@master] Add watchstar to sticky header without hook

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

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

[mediawiki/skins/Vector@master] Add watchstar to sticky header using new watchlink hook

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

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

[mediawiki/core@master] Update watchlink init to sync with sticky header watchlink

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

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

[mediawiki/core@master] Add mw.page.watch.ajax.update hook to watchstar functions to better support syncronizing watch state

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

For whoever is reviewing, I put up patches for two possible solutions

1. Adds a new hook to sync watchlinks:

https://gerrit.wikimedia.org/r/c/mediawiki/core/+/739589
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/739021

2. Syncs watchlink without the hook:

https://gerrit.wikimedia.org/r/c/mediawiki/core/+/739651
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/739652

I prefer option 1 because it provides a more systematic solution, but I also provided option 2 in case the review process is too slow, or if others have concerns about the new hook.

Change 739652 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] Add watchstar to sticky header without hook

Reason:

abandoning in favor of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/739021

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

Change 739651 abandoned by Bernard Wang:

[mediawiki/core@master] Update watchlink init to sync with sticky header watchlink

Reason:

abandoning in favor of https://gerrit.wikimedia.org/r/c/mediawiki/core/+/739589

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

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

[mediawiki/extensions/MobileFrontend@master] Use wikipage.watchstarUpdate hook to sync mobile search watchstars

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

Change 739589 merged by jenkins-bot:

[mediawiki/core@master] Add new watchlist hook to better support syncing between multiple watchstars

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

Change 745570 had a related patch set uploaded (by Esanders; author: Bernard Wang):

[mediawiki/skins/Vector@master] Add watchstar to sticky header (alternative)

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

Change 745871 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/core@master] Revert \"Add new watchlist hook to better support syncing between multiple watchstars\"

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

Change 739021 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] Add watchstar to sticky header using new watchlink hook

Reason:

abandoning in favor of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/745570

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

Change 745871 merged by jenkins-bot:

[mediawiki/core@master] Revert \"Add new watchlist hook to better support syncing between multiple watchstars\"

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

Change 743507 abandoned by Bernard Wang:

[mediawiki/extensions/MobileFrontend@master] Use watchstar() to sync mobile search watchstars

Reason:

Realized with the recent updates to the core watchstar, no changes are needed in MF

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

Change 745570 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add watchstar to sticky header (alternative)

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Go to a page which is not watched. Confirm the watchstar at the top of the page is not filled.