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:

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:

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:

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.

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:

desktop:

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

In T294839#7500493, @thiemowmde wrote:

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

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:

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:

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:

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

These are the messages to be customized on dewiki (as a local override, not as a general translation):

• https://de.wikipedia.org/wiki/MediaWiki:Visualeditor-dialog-transclusion-help-page-help
• https://de.wikipedia.org/wiki/MediaWiki:Visualeditor-dialog-transclusion-help-page-feedback

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