Page MenuHomePhabricator

[Regression] jquery.ui buttons order reversed in Vector
Closed, ResolvedPublic

Description

As reported there:
http://labs.wikimedia.beta.wmflabs.org/wiki/Problem_reports#Buttons_exchanged_in_Monobook_--_jQuery.ui.dialog

There must be a way to present the buttons in the same order in vector and monobook.


Version: 1.19
Severity: blocker

Details

Reference
bz35046

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 12:17 AM
bzimport set Reference to bz35046.

Giving this to Timo since I think he had an idea for how to fix it.

Is this one actually a regression?

sumanah wrote:

We decided in IRC that this is not a blocker for the 1.19 tarball release. "(at the end of the day, it's an annoyance, not anything broken)" says Reedy. "it is a one line css change" says Krinkle.

The Vector css has this non-standard rule:

.ui-dialog .ui-dialog-buttonpane button { float: right; }

That rule was causing the first button to be on the right, the second button
to be on the left of that and so forth. Per jQuery UI documentation and all
other scripts, plugins and skins ever written by and for jQuery UI, the order
is wrong in Vector, and right in all other skins.

See for example: http://jqueryui.com/demos/dialog/#modal-confirmation

$( "<div>" ).dialog({
height: 140,
buttons: {

		"Delete all items": function() {
			$( this ).dialog( "close" );
		},
		Cancel: function() {
			$( this ).dialog( "close" );
		}

}
});

The "Delete all items" is the first button and "Cancel" to the right of that (as it should be).

That is restored in Vector by removing said css rule from
/resources/jquery.ui/themes/vector/jquery.ui.dialog.css

and instead adding a float rule for the button container, copied from
the default jQuery UI theme:

/resources/jquery.ui/themes/default/jquery.ui.dialog.css : line 18

Other plugins/skins are not affected.

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

I just like to point out that Monobook used the sorting of the Vector skin in 1.18, too before the complete Monobook-jQuery skin was removed (replaced by some default skin in 1.19) and the problem occurred first.

I am sure this change will cause more than one click on the wrong button but there are more serious issues so I am better quiet here and say thanks.