Page MenuHomePhabricator

Resizing WikiEditor dialogs works wrong when using an RTL language
Closed, ResolvedPublic

Description

When editing a page using an RTL language, opening a dialog in the Vector toolbar (like, adding a link), it resizes to the wrong direction.


Version: unspecified
Severity: normal

Details

Reference
bz29002

Event Timeline

bzimport raised the priority of this task from to High.Nov 21 2014, 11:33 PM
bzimport set Reference to bz29002.
bzimport added a subscriber: Unknown Object (MLST).

Can you add a screenshot if the incorrect behaviour?

It's kinda hard to take a screenshot of this. To reproduce, just edit any article in an RTL wiki, click the search and replace button and try to resize the window.

I don't seen the problem using Safari. What browser were you using, perhaps it's browser specific.

There are plenty of rtl alignment issues btw, but those are mostly known I think and most are in the jqueryUI toolkit part.

The behavior on Firefox Aurora, IE8, Chrome 13, Safari 5.1 and Opera 11.50 on Windows XP is the same: I drag the bottom left corner, and what actually moves is the bottom right corner.

Mileage on other operating systems may vary.

Created attachment 8929
Screen recording in Firefox 4/Mac OS X 10.6

Attached:

I suspect that jquery.resize still thinks it's operating on the southeast corner... indeed, it's a .ui-resizable-se.

This bit in jquery.ui.dialog.css:

.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }

is being auto-rewritten by ResourceLoader to:

.ui-dialog .ui-resizable-se {

bottom: 3px;
height: 14px;
left: 3px;
width: 14px;

}

If we actually create the resize handle as the southwest corner for RTL, and have styles for that that won't get flipped, that may resolve it.

So are you just saying that you need the right-left flipping to not happen for that CSS rule, or is there more?

Adding /* @noflip */ before "right: 3px;" moves the corner handle to the southeast corner and makes resizing by dragging the southeast corner work correctly. This is OK - that's the location of the corner handle in LTR wikis and for RTL users it is reasonable. (The X for closing the dialog is also located in northeast, as in LTR wikis, and AFAIK nobody complains.)

However, resizing by dragging the left and right vertical frames drags the opposite frame, so it's not a complete solution.

BTW, it is not actually important to have the ability to resize the dialogs for Links and Search and Replace. Though it's important to properly fix this bug, these dialogs can just be made non-resizable, like the Insert table dialog.

FWIW: The WikiEditor TOC thing, which can be resized by dragging the vertical grip, works correctly.

I tried adding noflip to the jquery's resize css, and it behaves correctly (dragging left => the dialog is wider to left, dragging right=>the dialog is wider to the right).

Please review:
https://gerrit.wikimedia.org/r/#change,6542