[go: nahoru, domu]

Page MenuHomePhabricator

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

Assigned To
Authored By
Cirdan
Jul 31 2018, 6:40 PM
Referenced Files
F24643117: image.png
Aug 7 2018, 11:45 AM
F24643112: image.png
Aug 7 2018, 11:45 AM
F24621589: grafik.png
Aug 7 2018, 4:46 AM
F24368845: image.png
Jul 31 2018, 6:40 PM
F24368769: image.png
Jul 31 2018, 6:40 PM
F24368756: image.png
Jul 31 2018, 6:40 PM
Tokens
"Piece of Eight" token, awarded by RandomDSdevel."100" token, awarded by Liuxinyu970226.

Description

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

image.png (349×481 px, 22 KB)
image.png (424×494 px, 14 KB)

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

image.png (112×435 px, 3 KB)

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

Event Timeline

Deskana edited projects, added OOUI, VisualEditor (Current work); removed VisualEditor.
Deskana subscribed.

That's strange...

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:

grafik.png (527×627 px, 17 KB)

Esanders added a subscriber: matmarex.
Esanders subscribed.

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
image.png (505×512 px, 58 KB)
image.png (505×513 px, 48 KB)
'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.

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
image.png (505×512 px, 58 KB)
image.png (505×513 px, 48 KB)
'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?

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.