Page MenuHomePhabricator

jquery.ui.button: Color classes only implemented in jquery.ui vector theme
Closed, DeclinedPublic



There is not color-highlighting of buttons in Monobook-skin. Features should be consistent between different skins.


Version: 1.21.x
Severity: minor



Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 12:23 AM
bzimport set Reference to bz37744.
bzimport added a subscriber: Unknown Object (MLST).

The Vector theme for jQuery UI changes the color from light grey to dark grey on hover for normal buttons. And from blue to darker blue in .ui-button-blue definition.

The Default jQuery UI theme (there is no "Monobook-skin button" there is jQuery UI default's theme from upstream and a custom theme for Vector) does the same, except that it has no ".ui-button-blue" declaration.

The default jQuery UI theme (used in all skins other than Vector) also change the color from light grey to dark grey on hover for normal buttons.

See also

What is the bug?

(In reply to comment #1)
First changing the title of this bug to something different and then asking what the bug is, is inacceptable behaviour.

It was *not* about hovering. It was about the blue color of the button in vector and that this color is not present in other skins.

When you e.g. design JS-applications using vector by default and make a green OK-button and a red cancel-button or similar, as a usability improvement, you are surprised when testing with other skins that there's no such "colour-highlighting". If I would have meant hovering, I would have written so or used the term "onmouseover".

(In reply to comment #2)

(In reply to comment #1)
First changing the title of this bug to something different and then asking
what the bug

Hold your horses. All I did is:

  1. Correct a typo ("query" -> jquery)
  2. Removed incorrect statement ("jquery.ui.button not implemented in monobook"), because it is implemented for a long time and is working fine.
  3. Replaced #2 with an actual problem based on your post ("no highlighting"). I assumed that by color-highlighting you meant highlighting where the color becomes lighter when you hover it. I understand you meant the custom color classes instead (which isn't called "highlighting").

Fixed the title, again.

Now, as for these color classes. The reason they are not in other skins is because they are not standard jQuery UI classes. So jQuery UI themes (including the Default, Sunny, Redmond, Smoothness theme etc.) don't define this class.

Trevor invented it back in 2011 and added[1] it as a hack in the jquery.ui/vector theme directory. We need to either:

  • get it standardised (long term)
  • fork default, add the hack, and apply it to all other skins (short term)


I feel like replacing the default with rectangles. (Taking bug for reals now.)

Apparently I'm not reliable, nevermind. >.<

Rainier, given that Vector is moving towards using these styles:

Should Monobook (and other skins) match that?
or should they use the old/previous jquery.ui.button look?
or should they stick with their current look?

(Sidenote: More details at [[mw:UX standardization]] )

(In reply to Quiddity from comment #6)

Should Monobook (and other skins) match that?

The important thing is that the intentions developers usually had using colors are reflected in all skins. Whether it is the use of colors in these skins or the use of thicker borders, font or any other style - if it fits better into this skin - doesn't matter a lot.

I however can imagine that .ui-button-green and friends have been used not only to signal one discrete intention/meaning. Therefore the easiest option I could imagine would be going with your suggestion #1 - match the .mw-ui* styles.

Jdlrobson added subscribers: Krinkle, Jdlrobson.

@matmarex @Krinkle is this one from 2012 still relevant? I thought we nuked jquery.ui.
I think this should be declined right?

I thought we nuked jquery.ui.

The migration cost for existing scripts to OOUI or native HTML are quite high. I wish it would be easier.

jQuery UI is still in use, for example in the Wikibase "Add links" inteface:

image.png (980×1 px, 274 KB)
image.png (980×1 px, 265 KB)

Volker_E subscribed.

This specific task is irrelevant for future work. We're not going to work on such any time projected because jQuery UI is deprecated and is stated to be replaced. See T100270: Replace use of jQuery UI and MW UI with OOUI across all Wikimedia-deployed extensions and core for more.

This comment was removed by Hyphen.