Page MenuHomePhabricator

Add ability to refresh via shortcut and UX
Closed, ResolvedPublic3 Estimated Story Points

Description

User story
As a user, I want to be able to *manually* refresh the preview pane so that I can proofread my edits.

Description
Add a floating refresh button on the top right corner of the preview pane on the split-view when real-time preview is enabled.

Other considerations (TBC)
Enabling the floating refresh button to appear on hover (with the entire preview pane as target area), to avoid visual disturbance for editors.
Still under consideration, mainly for tablet/touch devices UX (as hover states are incompatible with capacitive devices).

Visual Reference

Full pageFocus on floating button
refresh_hover.png (2×3 px, 1 MB)
Screen Shot 2022-03-16 at 09.05.47.png (712×772 px, 159 KB)

Relevant Links

Figma Prototype
Real-time preview prototype

Acceptance Criteria

Event Timeline

JMcLeod_WMF set the point value for this task to 3.Mar 24 2022, 5:27 PM

Change 778378 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Realtime Preview: add hover button for reloading

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

Two questions:

  • I'll use 'reload' instead of 'refresh' here, as discussed in T304568.
  • "with the entire preview pane as target area" — Does this mean that clicking anywhere on the preview pane will trigger the reload? That would mean making it no longer possible to click on links etc., is that correct?
  • We talked about the accesskey being a, but that's already used for the 'view the project page' tab. It looks like g might be available (although it is recorded as accesskey-wikibase, I can't actually find that in the code anywhere so I'm not sure it's correct).

Oh, more more question: when there's an accesskey, it's good to show it in a tooltip. Although it's possible to do this without also have any text in the tooltip, it's usually done with some title text. I've added "Reload the realtime preview pane"; is that okay? It displays in English as Reload the realtime preview pane [Alt+Shift+g].

Oh, Wikibase uses the g accesskey: "accesskey-t-wikibase The quick access key for the link to the connected repository item displayed in the client's toolbox."

It looks like every letter of the roman alphabet is taken, we could use ).

Notwithstanding the above questions (the answers to which can be dealt with in a follow-up patch if required), the basic functionality is ready for review: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikiEditor/+/778378

"with the entire preview pane as target area" — Does this mean that clicking anywhere on the preview pane will trigger the reload? That would mean making it no longer possible to click on links etc., is that correct?

It should be only the "Reload" button not the entire preview pane. Good catch. We want them to be able to click on the stuff on the preview.

It looks like g might be available

Let's go with g! Sorry about the hiccup with assuming a was available.

Oh, more more question: when there's an accesskey, it's good to show it in a tooltip. Although it's possible to do this without also have any text in the tooltip, it's usually done with some title text. I've added "Reload the realtime preview pane"; is that okay? It displays in English as Reload the realtime preview pane [Alt+Shift+g].

That's a great addition, good eye I think it's important to be including the shortcut copy in there.

As discussed, I've set the accesskey to blank for now, but left the code in place for adding one later after we've decided what it should be.

For access Key, the ideal shortcut should be:

Cmd + Opt + ↓

If that is unavaible, let's go with the fall-back of:

Cmd + Opt + (

Note: This shortcut should open the Preview window if it is closed.

@Samwilson @NRodriguez I'm testing this in my local and this button is very helpful. I'm wondering if the Reload button should follow the user. For long pages, the user would need to scroll to the top on the right pane in order to see the button when I'm adding a change at the bottom of the page.

@HMonroy Good catch. I'm curious, how would it look if the reload button follow the user? I think the shortcut mitigates that need since folks can learn the shortcut if they don't want to scroll. (And the shortcut copy will appear on tooltip when they hover the first time)

@NRodriguez I was thinking that the button would always be at the right top corner under Preview, even if they scroll down.

Actually, this patch was meant to have the reload button always visible! That feels to me to be the right behaviour. @NRodriguez do you think it should move when scrolling?

As for the access key:

It's not possible to use the down arrow with browser-native accesskey attribute, so let's go with ).

I was thinking about it a bit more the other day, and wondering if perhaps it'd make sense to use the somewhat common ctrl-enter shortcut (e.g. that's what the Wikidata Query Service uses for submitting a query). But that's probably only common for programmers… :)

Change 778378 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Realtime Preview: add hover button for reloading

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

https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Page_Obama&action=edit
Tested on supported browsers

Screen Shot 2022-04-18 at 6.35.38 PM.png (1×2 px, 1 MB)

Dom was able to use the shortcut key, but that did not work for me. I have an apple computer not sure if that's why it is not working. Below is a screen shot of the short keys

Screen Shot 2022-04-19 at 10.19.24 AM.png (1×2 px, 936 KB)

Great work and yes to the follow on scroll. @Samwilson

The shortcut isn't working for me on Mac, any other ideas about how I can test it? @imaigwilo

I was thinking about it a bit more the other day, and wondering if perhaps it'd make sense to use the somewhat common ctrl-enter shortcut (e.g. that's what the Wikidata Query Service uses for submitting a query). But that's probably only common for programmers… :)

I think it makes sense to do that if it would make any other character that isn't P available and if it wouldn't be a giant amount of work

I think the shortcut on Mac is Control+⌥ Option (you mentioned Command+Option above). Does that work?

I think it makes sense to do that if it would make any other character that isn't P available and if it wouldn't be a giant amount of work

It is a bit of work, and as we don't really know yet how often people will need to click/keyboard-shortcut to reload (T306176 will tell us that), I think it's probably best to not do this now.