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

In T248495#6017154, @ifried wrote:

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

In T248495#6017380, @Prtksxna wrote:

In T248495#6017154, @ifried wrote:

@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).

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:

State	Image
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:

State	Icon
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.

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

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.

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!

No problem!

• 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?

In T248495#6170794, @ifried wrote:

@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):