Page MenuHomePhabricator

When loading template dialog, disable button and change label
Closed, ResolvedPublic1 Estimated Story Points

Description

Background

As a follow up to the work done in T296467: Immediately open template dialog and show progress bar, we decided to go a simpler route, where we show feedback in the button that something is loading and the user needs to wait.

Requirements

  • When the VE template dialog is opened (by clicking the Edit button, by double clicking the template itself, when it's selected and the Enter is pressed on the keyboard), then the Edit button becomes disabled and button label is changed to Loading ...
  • When users press the close button (doesn't apply to save), then they should not see the Loading... button state. This can be accomplished by either resetting the button back to Edit or by closing the context menu when they press close in the dialog.

Note: this is desktop only and does not apply to minerva.

Mocks

Before open

Context menu.png (106×426 px, 9 KB)

After open

Context menu-1.png (106×426 px, 10 KB)

Draft patches

Event Timeline

thiemowmde set the point value for this task to 3.Jan 5 2022, 12:09 PM

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

[mediawiki/extensions/VisualEditor@master] [WIP] Disable edit button while loading template dialog

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

awight moved this task from Doing to Sprint Backlog on the WMDE-TechWish-Sprint-2022-01-05 board.
awight added a subscriber: awight.

Took a light look. There's nothing obvious making it possible to either close the context menu, or get notification back from the template dialog to let us reset the edit button's appearance.

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

[VisualEditor/VisualEditor@master] Fix type hint in ve.ui.Command

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

@ECohen_WMDE @thiemowmde The patch also hides the "Delete" button which seems reasonable. Please let me know whether there's consensus about this?

image.png (106×426 px, 10 KB)

Yea. When the user clicks the delete button while the dialog loads this creates a Schrödinger's cat situation where the template exists and doesn't exist the same time. I can see a few options that might work:

  1. Don't visually change the delete button, but make sure clicking it doesn't do anything. But this doesn't feel right, in my opinion.
  2. Disable the delete button, i.e. make it gray.
  3. Hide it.

I went for option 3 for the moment just so we don't get stuck. It's very easy to change in a separate patch, if needed.

Yea. When the user clicks the delete button while the dialog loads this creates a Schrödinger's cat situation where the template exists and doesn't exist the same time. I can see a few options that might work:

+1, I tried this and indeed you end up editing a template which doesn't exist once the dialog is applied, so something must be done. I like the option you chose because it reduces visual clutter (disabled "Delete" means nothing to me at this point in the workflow).

Hi @awight @thiemowmde - I think the hiding the delete button is the best option! Thanks for catching this.

While testing the current patch (it works fine!) I am wondering, if we should maybe also change the edit button when a user makes a double click? 🤔

Peek 2022-01-12 16-50.gif (732×1 px, 1 MB)

While testing the current patch (it works fine!) I am wondering, if we should maybe also change the edit button when a user makes a double click? 🤔

Peek 2022-01-12 16-50.gif (732×1 px, 1 MB)

Yes, it's mentioned in the task description. Thanks for catching this!

I think we should merge the existing patch as it is, and then move the ticket back to the backlog.

The double click not only skips ve.ui.MWTransclusionContextItem.onEditButtonClick() but skips the ContextItem entirely. Instead it starts at ve.ce.FocusableNode.onFocusableDblClick() and executes the command from a totally different place that doesn't have access to the ContextItem. Not sure how to change this. One idea is to change the double click functionality so it doesn't execute the command itself, but instead asks the ContextItem to do this. It's open anyway after the first click.

I'm not working on this. Please feel free to pick it up!

awight added a subscriber: thiemowmde.

I think we should merge the existing patch as it is, and then move the ticket back to the backlog.

I also briefly looked into this and it seems to be a lot of effort or a very hacky solution to work this out. We might want to give this back to PM/UX to decide if solving only one half should be merged with the risk, that the other half will not be implemented.

I think what we have is better than nothing. The inconsistency is barely recognizable as a bug. I think it's fair to assume that most people don't double click. But sure, this is up to UX to decide.

I think it's fair to assume that most people don't double click.

Why do we assume this? I don't think we've looked at any evidence... The data is available: https://www.mediawiki.org/wiki/VisualEditor/FeatureUse_data_dictionary shows that the two event actions we're interested in are window-open-from-context (content menu edit button) and window-open-from-command (seems to be where double-clicks will fall). We don't distinguish between the two in our report or the derived graph because our focus was on edit vs. insert, but we could certainly extract the relative numbers with little work, if it's helpful.

My +1 is that we've covered the more important case here, since the person who clicks "Edit" is likely to do so again and will benefit from the feedback. One lingering concern is that an editor who gets accustomed to this behavior will be even more surprised to not see the same behavior with other workflows, so it will look even more broken when the button doesn't change and loading takes several seconds.

Change 753419 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Fix type hint in ve.ui.Command

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

Change 754000 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (ad9958477)

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

Change 754000 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (ad9958477)

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

The data is available

Here's an extremely rough data capture, comparing double-click and the "Edit" content button. It shows that the "Edit" button is used roughly 3/4 of the time, and double-clicking 1/4 of the time.

window-open-from-context	9634
window-open-from-command	2914

Query:

SELECT
    event.action,
    count(*)
FROM
    event.VisualEditorFeatureUse
WHERE
    event.feature = 'transclusion'
    and useragent.is_bot = false
    and event.is_oversample = false
    and year = 2021
    and month = 12
    and wiki in ( 'dewiki', 'enwiki', 'trwiki' )
GROUP BY
event.action;

… but we don't know how many of these double clicks are accidental. 😆 https://blog.codinghorror.com/double-click-must-die/

I discussed this with @ECohen_WMDE and while we agree that the inconsistency is not optimal, we think having this feedback only when clicking the edit button is still more helpful than not getting feedback in any situation. Therefore, would recommend going ahead.

I discussed this with @ECohen_WMDE and while we agree that the inconsistency is not optimal, we think having this feedback only when clicking the edit button is still more helpful than not getting feedback in any situation. Therefore, would recommend going ahead.

We'll go ahead and merge the Edit button change--but please also let us know if we should do follow-up work to attempt a double-click patch as well.

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

[mediawiki/extensions/VisualEditor@master] Disable edit button when double clicking transclusion node

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

WMDE-Fisch changed the point value for this task from 3 to 1.Jan 19 2022, 9:11 AM

Change 752144 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Disable edit button while loading template dialog

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

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

[mediawiki/extensions/VisualEditor@master] Fix transclusion node double clicks being tracked differently

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

Change 754985 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Disable edit button when double clicking transclusion node

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

Change 755710 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix transclusion node double clicks being tracked differently

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

thiemowmde claimed this task.
thiemowmde moved this task from Demo to Done on the WMDE-TechWish-Sprint-2022-01-19 board.