Page MenuHomePhabricator

Add floating help button
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

Following in the footsteps of the growth team, we will use their in-context help button to link to both the template help page and project discussion page for users to leave feedback as they encounter it.

Phab ticket references
Initial implementation: T206711: [EPIC] Growth: help panel
Updated styling and screenshare showing interaction: T292933#7458162
Open OOUI integration tickets: T280330: Support Floating tools and dialogs at the bottom of the viewport T278134: Capture floating button type in DSG

Requirements

Dialog title: "Template editing support"
Dialog paragraph text: "Templates provide formatting for content. This editor shows what options a template provides on the left and values can then be added to those options on the right."
Note for RTL translators that the right and left need to be switched (can we let them know somehow?)

Nice to haves

  • First time someone opens the new dialog layout, the help pop-up is open. Every time after, the default is closed.
  • Animation matches existing example
  • Dialog doesn't break when user zooms
  • Screenreader label or aria described-by clearly announce what will happen when the button is clicked with text: "Open template editing support dialog"

Mocks

MockSpecs
Collapsed
Collapsed help.png (682×918 px, 112 KB)
Collapsed help_specs.png (682×918 px, 113 KB)
Expanded
Expanded help.png (682×918 px, 123 KB)
Expanded help - specs.png (682×918 px, 123 KB)

Event Timeline

Change 736434 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] [POC] Add floating help button to template dialog

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

I made a quick demo patch that uses a plain OOUI button with a tiny little bit of CSS to make it round. This is what it looks like:

Screenshot from 2021-11-03 11-41-56_.png (204×667 px, 8 KB)

Note that it's a little awkward to position the button correctly. The problem is that there might be scrollbars. But the button must sit on top of the scrolling container where we don't know if scrollbars are present, and how big they are (well, at least not from CSS, but I don't want to add fragile JavaScript code just for that). I moved the button a little bit to the left in the screenshots so it should look fine with and without the scrollbar.

Ah makes sense! Thanks for the screenshot @thiemowmde

I think it's fine if it needs to be moved further in than 16px to account for the scrollbars, but then I would move it an equal amount up from the bottom so that when the scrollbars aren't visible it doesn't look off.

Change 736854 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] [WIP] Implement floating help dialog for templates

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

The proof-of-concept patches are already working quite nicely! Try it at different zoom levels, though:

image.png (345×400 px, 33 KB)

Strangely, the layout is fine if I change zoom level *while* the popup is opened, but if I increase zoom while it's closed and then open it, mayhem ensues.

As you mentioned, narrow mode has issues. Styling is mangled:

image.png (281×465 px, 33 KB)

And I think you were suggesting that the popup disappears when the sidebar is expanded? I'm not sure if that's what we want, maybe @ECohen_WMDE has opinions?

Also, clicking outside the popup should IMO cause it to automatically collapse—PopupWidget takes autoClose: true which might help with that.

From screen reader testing:

There's a text read out, when you focus the question mark to open the dialog. That's generally good, so screen reader users know what's going on. At the moment the text is the same as in the title of the help dialog Editing template support so that's not too helpful. I would suggest having something different here like Open editing template support dialog. or if not as label, at least as aria-describedby. @ECohen_WMDE

Strangely, the layout is fine if I change zoom level *while* the popup is opened, but if I increase zoom while it's closed and then open it, mayhem ensues.

Weird! If this proves tricky maybe zooming smoothly could be broken out into a follow-up ticket with post-deployment clean up?

And I think you were suggesting that the popup disappears when the sidebar is expanded? I'm not sure if that's what we want, maybe @ECohen_WMDE has opinions?

Do you mean that if someone is in narrow mode, then they click the ? button and the popup opens, then they click the Show options button, the pop-up automatically hides and the view switches? Or did you mean that the entire component disappears, including the circular sticky button? My preference would be the first but if needed the second could be fine.

Also, clicking outside the popup should IMO cause it to automatically collapse—PopupWidget takes autoClose: true which might help with that.

Agree, this would be ideal if not much effort. Should we add to nice to haves?

At the moment the text is the same as in the title of the help dialog Editing template support so that's not too helpful. I would suggest having something different here like Open editing template support dialog. or if not as label, at least as aria-describedby

I'm working on finalizing the copy and my current title is Template editing support but I think that has same the issue you mentioned. I think your suggestion of changing the label or adding described-by with the word "Open" sounds good! I do think similar to the zoom stuff though that this could be either a nice to have here or a follow-up/clean-up ticket.

Note in the updated mocks that the second icon is switched to the OOUI icon for 'feedback'

Change 737744 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] [WIP] Use a fullscreen help dialog for templates on mobile

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

Message documentation (qqq) should mention that "right" and "left" are swapped for RTL layouts.

thiemowmde set the point value for this task to 3.Nov 10 2021, 11:13 AM

Change 736854 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Implement floating help dialog for templates

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

Change 738198 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Minor fixes to floating help dialog in desktop mode

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

In the mobile view the closing button is displayed at the left instead of the right.

mobile:

Screenshot from 2021-11-12 15-44-58.png (263×523 px, 28 KB)

desktop:

Screenshot from 2021-11-12 15-45-27.png (256×369 px, 21 KB)

In the mobile view the closing button is displayed at the left instead of the right.

Weird but not a blocker in my opinion. Is this default OOUI behavior?

Also it looks like the feedback icon still hasn't been updated. Did you see the change in the mocks? I learned that there is actually a dedicated OOUI feedback icon and we should use that instead.

Change 738423 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Move misplaced close button back to standard position

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

It's the feedback icon now: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/736854/9/modules/ve-mw/ui/elements/ve.ui.MWFloatingHelpElement.js#23

It turns out the position of the close button is always on the left in OOUI. I had to remove the CSS hack that moved it to the right because that caused other style problems. Notably when the title is longer, which can easily happen in localized versions. Question: Is it ok to have the close button on the left? Note: I tried to move it in a clean way but it appears like OOUI doesn't allow this without manually hacking half a dozen lines of CSS.

Change 737744 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Use a fullscreen help dialog for templates on mobile

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

Change 738198 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Minor fixes to floating help dialog in desktop mode

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

It turns out the position of the close button is always on the left in OOUI. I had to remove the CSS hack that moved it to the right because that caused other style problems.

Removing our CSS overrides for the close box is a good next step, I was seeing glitches as well. The GrowthExperiments popup has the close box on the right, maybe they found an elegant way of accomplishing this?

@ECohen_WMDE just so it isn't buried, this question was for you. We can try to tweak again in a follow-up, of course.

Is it ok to have the close button on the left?

Change 738423 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Move misplaced close button back to standard position

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

@awight @thiemowmde to ensure we get this done today before the cut off - yes, it's fine that the close button is on the left. @ECohen_WMDE if you have concerns about leaving it like this we can discuss a follow up.

Change 738844 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Move floating help dialog close button back to the right

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

Screen Shot 2021-11-15 at 10.26.21.png (136×162 px, 7 KB)

Why did this suddenly change to the wrong icon? Please change this back to the question mark as specified.

Screen Shot 2021-11-15 at 10.28.51.png (106×307 px, 10 KB)

Oh I think I found it - the feedback icon is meant to go in the feedback button. Looks like this is still the edit icon at the moment. See the mocks in the task for the correct icon placements.

Other than the icons, it's looking good!

Change 738882 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Move feedback icon to correct position in template dialog

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

While testing the latest patches, I came across the question if we are ok with the current tab order. Currently the order is:

  1. close button at the top left
  2. ? button at the right bottom corner
  3. first element in the sidebar
  4. ...

See also screencast:

Peek 2021-11-15 15-16.gif (561×918 px, 123 KB)

Is that what we want, @ECohen_WMDE ?

Change 738882 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Move feedback icon to correct position in template dialog

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

Currently the close button is on the left side, following the OOUI standard for this dialog.

[mediawiki/extensions/VisualEditor@master] Move floating help dialog close button back to the right

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

The patch above moves it to the right, as originally intended in this ticket and implemented like it is done in the GrowthExperiments dialog. When we apply this the close button looks slightly weird though:

Feedback Close Right.png (355×427 px, 32 KB)

The patch above moves it to the right, as originally intended in this ticket and implemented like it is done in the GrowthExperiments dialog. When we apply this the close button looks slightly weird though:

Ok maybe we can save working that out for later. Good to know it's possible! But since the left hand side is cleaner for now, let's leave on the left and we can have a follow-up for consistency later if needed.

While testing the latest patches, I came across the question if we are ok with the current tab order. Currently the order is:

Good question @lilients_WMDE Let's leave it as is for now.

I'm happy with leaving the close button on the standard position on the left. But I want to point out that the patch described as "slightly weird" above is in fact consistent. The corresponding GrowthExperiments dialog looks the same:

Screenshot from 2021-11-22 11-56-33.png (667×437 px, 64 KB)

Change 736434 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/VisualEditor@master] [POC] Add floating help button to template dialog

Reason:

Done in Id224b61.

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

Still to do: change the links in the german translation to the links in the requirements

WMDE-Fisch moved this task from Demo to Done on the WMDE-TechWish-Sprint-2021-11-24 board.

Change 738844 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/VisualEditor@master] Move floating help dialog close button back to the right

Reason:

We decided this is to much of a hack and the benefit doesn't justify the tech-debt.

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