Page MenuHomePhabricator

Inform logged-out users of their ability to select page density
Closed, ResolvedPublic5 Estimated Story Points

Description

Background

We would like to build out a way to inform logged-in users of their ability to select the page at full or limited width

Acceptance criteria

  • This has an associated feature flag that allows turning it on or off. This feature flag will be temporary.

On page load for users who have not interacted with the toggle

  • Set up a pointer overlay that highlights the page width toggle.
  • Tooltip copy: "You can toggle between a limited width and full width by clicking this button."
  • Tooltip should show for all logged-out users on page load until dismissed via the "Dismiss" button.

On page load for users who have previously interacted with the toggle to enable full width without realizing what it did

  • Tooltip copy: "You have switched your layout to full width. To go back to limited width, press this button."
  • Tooltip should show for all logged-out users on page load until dismissed via the "Dismiss" button.

Clicking the button

  • Clicking the limited width button will display a secondary tooltip that informs you how to go back to fixed width
  • Tooltip copy: "You have switched your layout to full width. To go back to limited width, press this button."
  • The secondary tooltip should not show if you restore limited width, but should show if you click the button to switch to full width again.
  • When clicking it again (to restore limited width), the tooltip should fade out.

With cookies disabled

  • on page load I do not see a popup
  • on disabling limited width I see the popup

Design

Screenshot 2023-04-03 at 3.14.25 PM.png (220×532 px, 24 KB)

To decide

For users with the default it's unclear how often to show the indicator and when to dismiss it

  • Should this be shown on page load?
  • Should it be sampled / randomized ?
  • Should we only stop showing it, if the user clicks the tooltip to show they have seen it?

Developer notes

To do this we'll need to add a client side cookie that can be read in limitedWidthToggle.js:

  • When the client side cookie is set, the popup notification should not show.
  • When the cookie isn't set, we'll show the popup notification at first opportunity (likely)
  • Depending on behaviour the value of the cookie should either be '1' (in case we want to show it once) or an integer cast to a string (in the case we want to show it X times)

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/905314

QA Results - Beta

QA Results - Prod

ACStatusDetails
T333601#8811594

Event Timeline

ovasileva triaged this task as Medium priority.Mar 30 2023, 8:37 PM
Jdlrobson renamed this task from [SPIKE] Inform logged-out users of their ability to select page density to Inform logged-out users of their ability to select page density.Apr 3 2023, 10:21 PM
Jdlrobson updated the task description. (Show Details)

Change 905314 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Point out the limited width control

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

@Jdlrobson @ovasileva The only behaviour I found odd in the demo was after toggling to full width and getting the “You have switched your layout to full width. To go back to limited width, press this button” message, and then toggling back to limited width, the message still remains.

This results in a message saying you’ve switched to full width when you are actually viewing limited width.

The behaviour I would expect would be for the tooltip to fade out once I had switched back to limited width.

Reviewed the logic in the task description and it makes sense. Maybe we had an issue with the original patchdemo?

ovasileva raised the priority of this task from Medium to High.Apr 6 2023, 4:55 PM

Change 905314 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Point out the limited width control

Reason:

To be worked on next sprint. Feel free to reuse the ideas here.

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

For cleaner stats this could be made symmetric for the two possible states:

On page load for users who have previously interacted with the toggle:

  • "You have set your layout to {full | limited} width. To switch to {limited | full} width, press this button."

Likewise with cookies disabled:

  • Show a popup after interacting with the button regardless of the resulting state.

@Jdrewniak @KSarabia-WMF and I met on Thursday, We think this should be split into multiple tasks as follows:

  1. This task as it is, without addressing server side rendering or performance issues (we already load jQuery and OOUI would not be a big hit especially for a non long lasting feature), for the point of cookies disabled browser local storage might be another option (optional) . and agreed on 5 points
  2. Performance tweaks for on page load OOUI library https://phabricator.wikimedia.org/T334366 Need to vote on the points here
  3. On page load Javascript files load performance Tweaking https://phabricator.wikimedia.org/T334367
  4. OOUI widgets replacements implemented in vector following codex guidelines https://phabricator.wikimedia.org/T334368

The 1st tow covers all we talked about and need for shipping this, the 3rd and 4th are possible followups for more generic use.

Change 905314 restored by Jdlrobson:

[mediawiki/skins/Vector@master] Point out the limited width control

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

@KieranMcCann Design clarification, should the popup have a close button? And should it be dismissed automatically after a certain time or when the users clicks elsewhere similar to the pinnable element notification? This is what it looks like right now in the patchdemo/WIP patch @Jdlrobson put together https://jmp.sh/XHYgx8G5

I've got some preparation patches that need review before I continue: one, two and three

Jdlrobson updated Other Assignee, added: Jdlrobson.

@KieranMcCann Design clarification, should the popup have a close button? And should it be dismissed automatically after a certain time or when the users clicks elsewhere similar to the pinnable element notification? This is what it looks like right now in the patchdemo/WIP patch @Jdlrobson put together https://jmp.sh/XHYgx8G5

the popup should be dismissible (I think a close button is okay, but maybe @KieranMcCann would have to confirm). For the first popup, it would be dismissed when the user clicks somewhere.

Change 907944 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] POC: Add custom limited width popup

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

Relaying a convo I had with @ovasileva, so I believe the expectation is that all the popups should be dismissed when the user clicks elsewhere. For the popups with this text "You have switched your layout to full width...", they will be automatically dismissed after 4 seconds similar to the pinnable element popups.

And I believe the close button is still up to @KieranMcCann?

Relaying a convo I had with @ovasileva, so I believe the expectation is that all the popups should be dismissed when the user clicks elsewhere. For the popups with this text "You have switched your layout to full width...", they will be automatically dismissed after 4 seconds similar to the pinnable element popups.

And I believe the close button is still up to @KieranMcCann?

That all sounds good.

Change 905314 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Point out the limited width control

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

@bwang Sorry just catching up after being on leave. I would be tempted to still include the close button.

Change 909396 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[operations/mediawiki-config@master] [beta cluster] Enable indicators on page load

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

Change 907944 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add custom limited width popup

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

Change 909396 merged by jenkins-bot:

[operations/mediawiki-config@master] [beta cluster] Enable indicators on page load

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

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: On page load for users who have not interacted with the toggle
Set up a pointer overlay that highlights the page width toggle.
Tooltip copy: "You can toggle between a limited width and full width by clicking this button."
Tooltip should show for all logged-out users on page load until dismissed via the "Dismiss" button.

Screenshot 2023-04-19 at 4.00.36 PM.png (900×1 px, 359 KB)

✅ AC2: On page load for users who have previously interacted with the toggle to enable full width without realizing what it did
Tooltip copy: "You have switched your layout to full width. To go back to limited width, press this button."
Tooltip should show for all logged-out users on page load until dismissed via the "Dismiss" button.

Screenshot 2023-04-19 at 4.01.44 PM.png (902×1 px, 356 KB)

✅ AC3: Clicking the button
Clicking the limited width button will display a secondary tooltip that informs you how to go back to fixed width
Tooltip copy: "You have switched your layout to full width. To go back to limited width, press this button."
The secondary tooltip should not show if you restore limited width, but should show if you click the button to switch to full width again.
When clicking it again (to restore limited width), the tooltip should fade out.

Screen Recording 2023-04-19 at 4.03.19 PM.mov.gif (902×1 px, 1 MB)

✅ AC4: With cookies disabled
on page load I do not see a popup
on disabling limited width I see the popup

Screen Recording 2023-04-19 at 4.06.24 PM.mov.gif (902×1 px, 591 KB)

Screen Recording 2023-04-19 at 4.06.01 PM.mov.gif (902×1 px, 1 MB)

Edtadros removed ovasileva as the assignee of this task.

Test Result - Prod

Status: ⬜ not tested
Environment: na
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Prod deployment will be tested in T335307