Page MenuHomePhabricator

Support watchstar for non-JS
Closed, DuplicatePublic

Description

All of our users should be able to use the watchstar functionality.

Current problems:
T141924 is related to the first two points.

  • Users with non-JS browsers are not able to watch an article. The watch icon doesn't show. To reproduce login at https://en.m.wikipedia.org/wiki/Book and make sure you're not watching the page. Then disable JS and reload the page. You'll notice the watchstar icon is gone (the mw-ui-icon-watch class is not added by PHP).
  • Users with non-JS browsers are not able to un-watch an article. The un-watch icon doesn't show. To reproduce login at https://en.m.wikipedia.org/wiki/Book and make sure you are watching the page. Then disable JS and reload the page. You'll notice the watchstar icon is gone (the mw-ui-icon-watched class is not added by PHP).
  • The JS version of the watchstar replaces the PHP rendered markup. This is problematic because:
    • JS and non-JS versions will need to be styled differently.
    • this is an unnecessary DOM manipulation by JS. We should use the existing a element and not replace it with a button element.
    • the new mark-up is different from the one in Vector. We should strive for consistency.

Proposed solutions:
Watchstar works regardless of whether the user's browser supports JS. The JS version uses the PHP rendered mark-up and doesn't reinvent the wheel.

Event Timeline

phuedx subscribed.

This also affects users on slow/lossy connections: the space is reserved for the watchstar but it isn't visible.

@bmansurov: I'm not sure if this is an epic. I think this is something that you could do within the course of a sprint (!).

Regarding T141936#2517942, I guess what would make this an epic would be identifying and fixing other features like the watchstar that weren't progressively enhanced that should be.

Previously, one rationale for removal of menuing chrome, including the watchstar, was the relative difficulty of an unauthenticated-to-authenticated workflow that would carry state and make it obvious that a watched page was watched. In tackling this problem, in the ideal world for the <noscript>/grade C/compression proxy user she should have to do no more than this:

  1. Tap the watchstar
  2. Login
  3. Be returned to the page (or the watchlist, although that's less than ideal because it requires an action to get back to the context of the original page) in a fashion such that it's obvious the page is now watched.

If the user has to re-tap the watchstar to get it to work or has to take further effort to understand the action was applied, that's really too much.

Note that it's likely we'll have concentrated efforts on getting UX for proxy browsers or their kin really well polished. It may make sense to bundle this in with that effort, which is presumably more in Q2 FY 2016-2017. Then again, maybe this is a good time to effectively provide the access and use this as a learning exercise for some of the complications (many of which we know) in developing for this sort of UA.

@Nirzar, is there anything else or different you'd suggest in this workflow?

jhobs renamed this task from Progressively enhanced watchstar to Support watchstar for non-JS and eliminate FOUC.Aug 10 2016, 4:30 PM
jhobs raised the priority of this task from Medium to High.
MBinder_WMF set the point value for this task to 3.Aug 10 2016, 4:33 PM
MBinder_WMF removed the point value for this task.Aug 10 2016, 4:44 PM

Without the suggestion from @dr0ptp4kt, @jhobs and I estimated this task as a 3. @Nirzar what do you think about Adam's suggestion?

T142863 should probably be considered a blocking task if we decide to refactor the workflow as part of this task.

A few things to consider:

https://en.m.wikipedia.org/w/index.php?title=Barack_Obama&action=watch

  • Watchstar usage is incredibly low even for logged in usage
  • We currently don't allow users who do not run JS to login. This would need to be reconsidered.

Screen Shot 2016-08-10 at 1.28.38 PM.png (460×915 px, 48 KB)

  • There is anecdotal evidence that editors do not use the watchstar this way (items are added to watchlist automatically on edit).

FWIW I think there are more higher priority things we should spec out designs for than this. I don't see this as tech debt but a product decision that should be documented with rationale.

We should at least fix the UI. Here is how it looks now:

Screen Shot 2016-08-10 at 16.36.37.png (1×2 px, 1 MB)

Notice the gap between the language and edit icons.

Definitely. Can you open a separate bug for that? That's a clear regression (we used to hide it)

Definitely. Can you open a separate bug for that? That's a clear regression (we used to hide it)

Seems already fixed by https://gerrit.wikimedia.org/r/#/c/304297/.

We discussed this in kick off.
We want to remove the need for an intermediate watch page and make the watch button work like a form to provide a consistent experience with JS users.
Task needs to be rewritten before pushing to triaged but future.

dr0ptp4kt lowered the priority of this task from High to Medium.Aug 31 2016, 3:54 PM
dr0ptp4kt added a subscriber: ovasileva.

@ovasileva plans to review this task further for consideration.

Jdlrobson renamed this task from Support watchstar for non-JS and eliminate FOUC to Support watchstar for non-JS.Jun 20 2017, 11:14 PM
Jdlrobson lowered the priority of this task from Medium to Low.
Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).
Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.
Jdlrobson added a subscriber: Krinkle.

My one concern with this is mobile users accidentally watching pages. Previously we supported watching without js and linked to the action=watch and we purposely removed it because we felt the user experience was bad. I will look for the patch that removed it for more background..

Looks like this was removed by you @bmansurov I43c6e849cadc9c0b43721e627a171c095fc64e69 although sadly I cannot see the context to why this happened. Do you recall?

Unfortunately, I don't recall either. My wild guess is that those things were not working correctly (or required two steps to perform and the design was not ready).

@Nirzar what do you think? Decline?

Clicking the watchstar without JS would take a user to this screen:
https://en.m.wikipedia.org/wiki/Barack_Obama?action=watch

Jdlrobson raised the priority of this task from Low to Medium.Jun 12 2018, 7:37 PM