Page MenuHomePhabricator

CU 2.0: Add an overlay to the GuidedTour
Closed, ResolvedPublic2 Estimated Story Points

Description

Acceptance criteria

  • Add an the default overlay to the page when the GuidedTour is active.
  • The user shouldn't be able to interact with any UI element on the page.
  • The tour should be dismiss-able and return control to the user

Event Timeline

Prtksxna created this task.Jul 22 2020, 4:54 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 22 2020, 4:54 PM
ARamirez_WMF set the point value for this task to 2.Jul 23 2020, 3:40 PM
dbarratt claimed this task.Jul 25 2020, 2:38 PM
dbarratt moved this task from Ready to In Progress on the Anti-Harassment (The Letter Song) board.

@Prtksxna

The tour should be dismiss-able and return control to the user

Would it be dismissed by clicking on the overlay or do they have to click on the "X" on the step?

Change 616279 had a related patch set uploaded (by Dbarratt; owner: Dbarratt):
[mediawiki/extensions/CheckUser@master] Enable the overlay for each step in the guided tour

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

@Prtksxna I enabled the overlay for each step and set the opacity to 20% (0% is transparent and 100% is opaque)

What do you think?

@Prtksxna I enabled the overlay for each step and set the opacity to 20% (0% is transparent and 100% is opaque)

20% is looking good 👍🏽

Would it be dismissed by clicking on the overlay or do they have to click on the "X" on the step?

It shouldn't get dismissed by clicking on the overlay. It should only be dismissed if:

  • User clicks on X
  • User hits Esc

@dom_walden Just wanted to point out a small bug that would be quite complex to fix, which you might come across in testing: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CheckUser/+/616279/2/modules/tours/checkuserinvestigate.js#55

@dom_walden Just wanted to point out a small bug that would be quite complex to fix, which you might come across in testing: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CheckUser/+/616279/2/modules/tours/checkuserinvestigate.js#55

Thanks for letting me know.

Change 616279 merged by Dbarratt:
[mediawiki/extensions/CheckUser@master] Enable the overlay for each step in the guided tour

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

  • Add an the default overlay to the page when the GuidedTour is active.
  • The user shouldn't be able to interact with any UI element on the page.

You cannot click on any other part of the page.

As Thalia found, when the tooltip menu is open (during steps 2 and 3) if you click anywhere the menu is dismissed.

You can interact using the keyboard (e.g. you can tab to form fields or other UI elements, press enter to submit, etc.)

Because highlighting is preserved across page refreshes and even new investigations, it is still technically possible to interfere with the Guided Tour (like below). But, as the Tour will appear the first time a user uses Investigate, and cannot be reset once dismissed, I am guessing this is not a possibility at the moment.

Example: The second step of the tour, after the UA was pinned in a previous investigation:

  • The tour should be dismiss-able and return control to the user

Can be dismissed with either the X or the tick at the end of the tour, and does not come back after.

I tested some of the UI elements after dismissing the tour, all worked fine.

I also compared the HTML of the page when the tour was turned off vs. after dimissing the tour. No significant differences.

I mainly tested on Firefox, but briefly tested IE11 on Win10 and Safari on Mac.

@dom_walden, does the tour get dismissed on hitting Esc too?

Also, can you teach me how to restart the tour if I have already gone through it once?

@dom_walden, does the tour get dismissed on hitting Esc too?

Good point. I will check that tomorrow.

Also, can you teach me how to restart the tour if I have already gone through it once?

David provided some JS, which you can run in your browser console on the Special:Investigate page: new mw.Api().saveOptions( { 'checkuser-investigate-tour-seen': null, 'checkuser-investigate-form-tour-seen': null } );

Because highlighting is preserved across page refreshes and even new investigations [...]

Preserving the highlighting across new investigations wasn't intentional. @Prtksxna should we make a task to clear highlighting between investigations?

How to restart: T255644#6303121 (see also the comment below)

dom_walden added a comment.EditedJul 30 2020, 9:21 AM

@dom_walden, does the tour get dismissed on hitting Esc too?

Yes, it does, but it is not dismissed permanently. It comes back next time...

How to restart: T255644#6303121 (see also the comment below)

Good point, when I wrote my original comment I didn't realise we were going to be doing that ticket :)

FYI, I briefly tested this on mobile, just to make sure that the GuidedTour does not interfere with a member of Trust and Safety doing an investigation on the road (as an example use case).

I could not get the tour to work in mobile view (I am assuming the GuidedTour extension does not support mobile frontend). So no chance of interference.

Even if the mobile user is using the desktop version of the site, it was easy enough to dismiss the tour like you would do on a desktop browser.

Devices tested: iPhone 6S and Samsung Galaxy S7 (both emulated).

Niharika closed this task as Resolved.Jul 31 2020, 2:20 AM