Page MenuHomePhabricator

Add watchstar to sticky header
Closed, ResolvedPublic5 Estimated Story Points

Description

Description

Add watchstar icon-button to the sticky header.

Background / motivation

https://phabricator.wikimedia.org/T294759#7474673

Design

the prototype has been updated (remember to log-in): https://di-community-round-2.web.app/Starry_Night_Over_the_Rh%C3%B4ne

Screen Shot 2021-11-01 at 5.22.04 PM.png (757×1 px, 294 KB)

  • Clicking the watch star in the sticky header should behave the same as clicking it in the article toolbar
watchingunwatching
image.png (636×2 px, 391 KB)
image.png (636×2 px, 376 KB)

Acceptance criteria

  • Add watchstar functionality to the sticky header
  • Under 1200px the sticky header should not display (this seems to have regressed at some point)
  • The watchstar in the sticky header state should be in sync with the one outside the sticky header

QA steps

  • Go to a page which is not watched. Confirm the watchstar at the top of the page is not filled.
  • Scroll so the sticky header displays.
  • Click the watchstar in the sticky header
  • Scroll to the top of the page, the watchstar outside the sticky header should be filled.
  • Click the watchstar at the top of the page and scroll down the page to show the sticky header again
  • Confirm the watchstar inside the sticky header is not filled.

QA Results - Beta

ACStatusDetails
1T294759#7595810
2T294759#7595810
3T294759#7595810

QA Results - Prod

ACStatusDetails
1T294759#7621181
2T294759#7621181
3T294759#7621181

Event Timeline

ovasileva created this task.
Jdlrobson added a subscriber: Jdlrobson.

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

Screen Shot 2021-11-01 at 9.41.35 AM.png (276×1 px, 99 KB)

Is it okay as part of this task to increase the threshold in which the sticky header enables
OR do we want to hide the title (or other components) at lower resolutions?

A mock would be useful.

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)

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.

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

Screen Shot 2021-11-01 at 9.41.35 AM.png (276×1 px, 99 KB)

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.

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:

Screen Shot 2021-11-03 at 8.52.31 AM.png (736×2 px, 316 KB)

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:

Screen Shot 2021-11-03 at 8.52.31 AM.png (736×2 px, 316 KB)

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

Jdlrobson added a subscriber: bwang.

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

  1. 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.

cjming added a subscriber: cjming.

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

Tested both approaches -- it appears the solution with the hook works consistently (i.e. when the watchstar is updated in either place, article toolbar or sticky header, the other corresponding watchstar is updated accordingly).

Because we're fast approaching a long holiday weekend, I'm inclined to have someone else verify the core patch introducing the new hook. Related Vector patch lgtm.

bwang assigned this task to Jdlrobson.

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.

Screen Shot 2022-01-04 at 6.01.18 AM.png (2×1 px, 1 MB)
Screen Shot 2022-01-04 at 6.00.20 AM.png (2×1 px, 1 MB)

Scroll so the sticky header displays.
Click the watchstar in the sticky header
✅ AC2: Scroll to the top of the page, the watchstar outside the sticky header should be filled.
Screen Shot 2022-01-04 at 6.02.02 AM.png (2×1 px, 1 MB)

Click the watchstar at the top of the page and scroll down the page to show the sticky header again
✅ AC3: Confirm the watchstar inside the sticky header is not filled.
Screen Shot 2022-01-04 at 6.02.36 AM.png (2×1 px, 1 MB)

Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
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.

Screen Shot 2022-01-13 at 3.07.43 PM.png (304×962 px, 114 KB)
Screen Shot 2022-01-13 at 3.07.58 PM.png (332×962 px, 178 KB)

Scroll so the sticky header displays.
Click the watchstar in the sticky header
✅ AC2: Scroll to the top of the page, the watchstar outside the sticky header should be filled.
Screen Recording 2022-01-13 at 3.08.36 PM.mov.gif (396×974 px, 639 KB)

Click the watchstar at the top of the page and scroll down the page to show the sticky header again
✅ AC3: Confirm the watchstar inside the sticky header is not filled.
Screen Recording 2022-01-13 at 3.08.59 PM.mov.gif (396×974 px, 1 MB)