VisualEditor citation template dialog has unnecessarily large input boxes
Closed, ResolvedPublic

Description

In Google Chrome, some text input widgets in the citation template dialog are unnecessarily large:

As soon as I start typing, the input box shrinks to its proper size:

The problem appears to be reproducible in Chrome regardless of whether I'm logged in or not, but does not surface in Firefox.

Cirdan created this task.Jul 31 2018, 6:40 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 31 2018, 6:40 PM
Deskana triaged this task as Normal priority.Jul 31 2018, 6:46 PM
Deskana edited projects, added OOUI, VisualEditor (Current work); removed VisualEditor.
Deskana added a subscriber: Deskana.

That's strange...

Cirdan added a comment.EditedJul 31 2018, 6:55 PM

I investigated this a bit further and it seems that the large boxes only appear once for each type of citation template (cite web/cite book). If I immediately open the dialog again, they are normal from the start. If I then close the VE and re-open it, it's the same thing all over again.

I'm on a mobile connection, so it might be that the problem is related to some JS/CSS not loading in time?

Just occured in Firefox as well, for a newly created reference:

Esanders added a project: Regression.EditedAug 7 2018, 10:59 AM
Esanders added a subscriber: matmarex.
Esanders added a subscriber: Esanders.

Looks like an OOUI regression. I think there are some performance hacks around these textboxes which stops them from all be initialised at once when the dialog opens, this is the likely cause.

Change 450946 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/VisualEditor@master] Template dialog: Lazy resize multiline text inputs on first focus

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

The above patch will cause all multi-line inputs to be collapsed to one line until they are first focused (at which point they will auto-size). This may be considered a UX regression is some instances, but I think it is acceptable, and it also fixes the performance issues of T134814. One could also argue that deliberately collapsing multi-line inputs until they are used is a better UX, as it allows users to more quickly scroll through the list of parameters to find the one they want to edit.

Before this regressionAfter this patch
'Capacity' will autosize on first focus

@iamjessklein What's your opinion on the solution proposed above in T200834#4484213? I'm inclined to go with Ed's patch simply because it fixes the immediate issue, but your opinion would be welcome.

Let's go with the above solution for now, and perhaps iterate later.

Change 450946 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Template dialog: Lazy resize multiline text inputs on first focus

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

The above patch will cause all multi-line inputs to be collapsed to one line until they are first focused (at which point they will auto-size). This may be considered a UX regression is some instances, but I think it is acceptable, and it also fixes the performance issues of T134814. One could also argue that deliberately collapsing multi-line inputs until they are used is a better UX, as it allows users to more quickly scroll through the list of parameters to find the one they want to edit.

Before this regressionAfter this patch
'Capacity' will autosize on first focus

Like this new UX. Makes lot more sense. The first input box will always auto-size immediately right, since it gets focussed immediately after opening the dialog?

Deskana closed this task as Resolved.Sep 2 2018, 2:30 PM
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptSep 2 2018, 2:30 PM

The first input box will always auto-size immediately right, since it gets focussed immediately after opening the dialog?

Yes - first focus happens after the dialog has finished animating open.