Page MenuHomePhabricator

Watchlist Expiry: Add Half Star Functionality to Pages [medium]
Closed, ResolvedPublic

Description

As a Watchlist Expiry user, I want to see a half star when I watch a page temporarily, so that I can easily & visually distinguish between permanently and temporarily watched pages.

Background: This is specifically the work to add the half star functionality. We are adding the popup to watch pages temporarily in T248496.

Resources:

Acceptance Criteria:

  • When a page is watched temporarily, display the half star.
  • When a temporary page is unwatched, the half star should rotate and then convert to a star with no shading.
  • When a page is being watched permanently, the existing behavior (i.e., full star) should remain.

Visual Examples:

Temporarily watch a page via star, before selection made


Half Star Example: Temporarily watch a page via star, after selection made

Unwatch a page

Event Timeline

ifried created this task.Mar 25 2020, 5:49 PM
Restricted Application added a project: archived--TCB-Team. · View Herald TranscriptMar 25 2020, 5:49 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
ifried renamed this task from Watchlist Expiry: Implement Support for Star Functionality, part 1 to Watchlist Expiry: Add Half Star Functionality to Pages.Mar 25 2020, 6:01 PM
ifried updated the task description. (Show Details)
ifried updated the task description. (Show Details)Mar 31 2020, 6:17 PM
ifried updated the task description. (Show Details)
ifried updated the task description. (Show Details)Mar 31 2020, 6:20 PM
ifried updated the task description. (Show Details)Mar 31 2020, 6:59 PM
ifried updated the task description. (Show Details)Mar 31 2020, 9:47 PM

@Prtksxna Can you provide the star that we should use for this implementation? Thank you!

ARamirez_WMF renamed this task from Watchlist Expiry: Add Half Star Functionality to Pages to Watchlist Expiry: Add Half Star Functionality to Pages [medium].Mar 31 2020, 11:38 PM
ARamirez_WMF moved this task from To Be Estimated/Discussed to Estimated on the Community-Tech board.

@Prtksxna Can you provide the star that we should use for this implementation? Thank you!

This icon is part of the OOUI icons set in the Moderation pack. Its called halfStar. You can find the LTR and RTL versions in that repo.

Restricted Application edited projects, added Community-Tech; removed Community-Tech (Kanban-2019-20-Q4). · View Herald TranscriptApr 6 2020, 5:54 PM

@Prtksxna Can you provide the star that we should use for this implementation? Thank you!

This icon is part of the OOUI icons set in the Moderation pack. Its called halfStar. You can find the LTR and RTL versions in that repo.

These don't appear to match the existing star SVGs used in Vector. Are we trying to change the appearance of the existing star, too? The weirdest part (to me) is the black/white, when currently the stroke colour is blue (#7cb5d1), and the fill colour is a gradient of shades of blues. We also need another SVG for the hover state (stroke colour #c8b250).

Prtksxna added a comment.EditedApr 15 2020, 5:03 AM

You're right @MusikAnimal, we'll be changing the icons from what is currently being used in vector. We'll remove the gradient and the golden outline and move to the standard icons and colors:

StateImage
Unwatched
Unwatched hover
Watched
Watched hover
Temporarily watched
Temporarily watched hover

SVGs here:

@Prtksxna @ifried I'm still not 100% clear if we're supposed to replace the star even if the feature flag is off, but either way I think we may have problems.

The CSS code does some positioning and sizing that applies to all states (unwatched, watching, watched, and hover states). This is done with some Less functions based on variables for the size of the tabs and the browser's font size. I managed to eyeball a solution for the OOUI variants, but frankly it seems like a risky change. This is critical functionality, so we'd need to test back to all grade C browsers that we support. Putting the new stars behind the feature flag seems safer, but I think it will involve some needless hacking to not disrupt the current UI.

To make matters worse, changing any long-standing UI component tends to invite community backlash, regardless of how minuscule it seems. You'd need to at least give prior announcement. I would hate for this to be the barrier to enabling watchlist expiry.

That said, it begs the question of whether this OOUI change should be part of the watchlist expiry project? I wonder if it could be saved for the desktop refresh? Just a thought! We may wish to discuss this more as a team.

Let's discuss this during the next standup. Thanks for the background information, @MusikAnimal!

Here are the temporary watch icons in the Vector style:

StateIcon
Normal
Hover

@MusikAnimal, will we need any other states? I have kept the white background on the half star as a fill for now since that is what Vector icons were doing (OOUI ones keep it transparent). I am guessing it is to block the gradient in the tabs menu. Let me know if any tweaks are required 😊

We have discussed this as a team, and we'll be using the old stars for now (as shown in the comment above). We may later implement the new star in the future, but for now, we will use the old star, so that we can maintain community expectations.

MusikAnimal added a comment.EditedApr 22 2020, 8:50 PM

@Prtksxna It seems these don't match the existing stars. The existing star is 16px in size, while the half star is 15px and it looks like the left and top edges are cut off a tiny bit:

Hopefully an easy fix? I would do it myself if I knew how :) I didn't try the PNGs as I assume we want to be consistent with the existing stars which are SVGs.

Sorry for all the back-and-forth!

@MusikAnimal sorry about that! Something about the way I was exporting these from Sketch. Can you try these:

Change 594261 had a related patch set uploaded (by MusikAnimal; owner: MusikAnimal):
[mediawiki/core@master] Add methods to check if a page is temporarily watched

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

Change 594284 had a related patch set uploaded (by MusikAnimal; owner: MusikAnimal):
[mediawiki/skins/Vector@master] Show half-star when the page is temporarily watched

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

Hey @ovasileva @alexhollender this community tech task has implications on desktop refresh so I want to make sure you are aware of it.

aezell added a subscriber: aezell.May 7 2020, 4:00 PM

We've chosen to avoid changing the existing star implementation as much as possible. That is, we recognize that Desktop Refresh work is happening and we don't want to re-engineer in OOUI an interface which is likely to change. As for the design itself, I'm sure @Prtksxna can give some context about his thinking.

@alexhollender I can take care of the code review on this one, but just doing a design review out of courtesy to show the half star.


ovasileva triaged this task as Medium priority.May 11 2020, 12:00 PM
alexhollender added a subscriber: MusikAnimal.

@alexhollender I can take care of the code review on this one, but just doing a design review out of courtesy to show the half star.

Thanks, it looks great.

Change 594261 merged by jenkins-bot:
[mediawiki/core@master] Add methods to check if a page is temporarily watched

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

Change 594284 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Show half-star when the page is temporarily watched

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

Patches are merged. let me know if web can help with anything else!

Ready for QA! Many thanks to @Jdlrobson and Alex as well :) I'm going to re-assign this to myself as the patch author. I use this to track everything I did (gerrit or elsewhere), hope that's okay! It'd be neat if there could be multiple assignees.

dom_walden added a subscriber: dom_walden.
  • When a page is watched temporarily, display the half star.

True.

  • When a temporary page is unwatched, the half star should rotate and then convert to a star with no shading.

True. Tested a few loops (e.g. watching temp. -> unwatch -> watch permanently -> unwatch...).

  • When a page is being watched permanently, the existing behavior (i.e., full star) should remain.

True.

Tested (most recently) on https://en.wikipedia.beta.wmflabs.org MediaWiki 1.35.0-alpha (f8f2755) 10:56, 20 May 2020.

@MusikAnimal & @dom_walden One question about this: When I tested on beta with the action=watch page, I needed to refresh the page to see the half star (or full star) appear after the selection had been made. However, when I tested the action=watch on production, the proper star behavior displayed without needing to refresh the page. Is this something that would be addressed in this ticket or another ticket?

@MusikAnimal & @dom_walden One question about this: When I tested on beta with the action=watch page, I needed to refresh the page to see the half star (or full star) appear after the selection had been made. However, when I tested the action=watch on production, the proper star behavior displayed without needing to refresh the page. Is this something that would be addressed in this ticket or another ticket?

This is after submitting the form below and getting to the success page?

Yeah, I see the same thing.

I thought it might be because on beta $wgWatchlistExpiry = true and on production $wgWatchlistExpiry = false. But my local environment behaves the same as production, regardless of whether that config variable is true or false.

So I don't know what might be causing the difference. I wonder if it happened before this change? I don't think we can find that out though...

Since the potential star bug is mentioned in another ticket, I'm marking this as done. The half star is now displaying (see screenshot example below):

ifried closed this task as Resolved.Jun 8 2020, 3:25 PM