Page MenuHomePhabricator

Implement redesigned watchstar popover on desktop
Open, In Progress, Needs TriagePublic

Description

To address feedback we received when the watch star popup was temporarily deployed, we want to implement new designs on desktop and mobile. This ticket is scoped to the desktop experience, where we don't need to make significant changes.

Acceptance criteria

  • Clicking the watchstar on an unwatched page:
    • watches the page
    • opens the popover with options to manage expiry and manage labels
  • After the popover is opened:
    • clicking anywhere off of the popover closes it
    • clicking the close icon (X) on the popover closes it
    • a timeout (5s) closes it (clicking on any place inside the popover pauses (and resets) the timeout)
    • hitting Esc key on the keyboard closes it
  • Clicking the watchstar on a watched page:
    • unwatches the page
    • opens the popover with appropriate message an "Undo" button to re-watch the page
  • After the popover is opened:
    • clicking anywhere off of the popover closes it
    • clicking the close icon (X) on the popover closes it
    • a timeout (5s) closes it (clicking on any place inside the popover pauses (and resets) the timeout)
    • hitting Esc key on the keyboard closes it
    • selecting Undo re-watches the page with the same expiry settings and labels as were previously assigned to this page

T415173 - screen mocks.jpg (3,235×2,136 px, 2 MB)

Figma: design

Figma prototype: design

See also: T417847: Add labels field to watchstar popup

Event Timeline

TheresNoTime changed the task status from Open to In Progress.May 12 2026, 11:56 AM

Change #1285807 had a related patch set uploaded (by Samtar; author: Samtar):

[mediawiki/core@master] [WIP] mediawiki.watchstar.popover: redesign

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

Please clarify in the description:

  • The "clicking anywhere off of the popover closes it" means that's it or, for example, clicking on a blank target link outside the popover will close it and also open the link in a new tab.
  • How long are the timeouts.

Thank you.

Please clarify in the description:

  • The "clicking anywhere off of the popover closes it" means that's it or, for example, clicking on a blank target link outside the popover will close it and also open the link in a new tab.
  • How long are the timeouts.

Thank you.

Have updated the description to reflect the timeout of 5 seconds, and I'll get clarification on the desired behaviour wrt. "clicking off" of the popover

Have updated the description to reflect the timeout of 5 seconds

Thanks. As I already said, it's not enough IMHO. So could you instead add to the description that

  • Clicking on any place inside the popover kills the timeout

please? This way if the user needs it, they can "freeze" the popover on the screen and think about the expiration time and the right labels, without being afraid it disappears every moment. Thank you.

Have updated the description to reflect the timeout of 5 seconds

Thanks. As I already said, it's not enough IMHO. So could you instead add to the description that

  • Clicking on any place inside the popover kills the timeout

please? This way if the user needs it, they can "freeze" the popover on the screen and think about the expiration time and the right labels, without being afraid it disappears every moment. Thank you.

Done (I am already building it as to pause the timer during any popover interaction, with the idea that the timer continues once focus is moved off of the popover - does that sound okay?)

I wouldn't do it this way, because it can be accidentally, but I understand why do you want it. Maybe better decision will be restart the timer instead of continuing, so the user would have enough time to pay attention and return inside the popover?

I wouldn't do it this way, because it can be accidentally, but I understand why do you want it. Maybe better decision will be restart the timer instead of continuing, so the user would have enough time to pay attention and return inside the popover?

That makes sense

Change #1287418 had a related patch set uploaded (by Samtar; author: Samtar):

[mediawiki/core@master] mediawiki.watchstar.widgets: Mobile watchstar redesign

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

Samwalton9-WMF renamed this task from Implement redesigned watchstar popover to Implement redesigned watchstar popover on desktop.Fri, May 29, 12:50 PM
Samwalton9-WMF updated the task description. (Show Details)