jquery and jquery-ui have been plugins before 1.3.x
https://github.com/mantisbt-plugins/jquery
https://github.com/mantisbt-plugins/jQuery-UI

They have been bundled with MantisBT core to make life of plugin authors a bit easier.

At least this one uses jQuery-UI
https://github.com/mantisbt-plugins/Inline-column-configuration

PR: https://github.com/mantisbt/mantisbt/pull/982

Adding jquery-ui as a plugin creates a conflict with current Ace css.
The Ace css provides jquery-ui style overrides, and adding jquery-ui as part of a plugin results in it being included after the Ace css headers.
This causes the ace styles take precedence over the native jquery-ui ones, which results is in misbehaviour, for example, when the overrides include "!important" modifiers.

The example reproduced is a jquery-ui modal dialog, where the behaviour is to place a translucid overlay over the page, as background for the modal dialog.
The reversed application of styles for .ui-widget-overlay produces a background that is solid grey.
(attached are the styles as seen in chromium inspector)

Previously, as jquery-ui was included as part of mantis, the css was placed in headers before the Ace css, so this probem did not exists.

@vboctor @syncguru unless the conflict with css when including jQuery-UI as a plugin (see cproensa's note 0021881:0054969) introduced by this change can be resolved prior to 2.1.x release, this should be reverted to avoid regression issues.

(setting priority as major so it shows as blocking for the release)

@dregad, @cproensa The are two possible fixes here:

1. Include the plugin css file prior to ace files
2. Remove the jquery-ui styles from ace since we are not using them

1- Include the plugin css file prior to ace files

I didn't test, but I am not sure this would fix the problem.

If my understanding of the CSS spec* is correct, the last style declaration takes precedence over earlier ones. Since the plugin API is including the jQueryUI CSS last, I believe things are as they should be.

Based on what @cproensa said in 0021881:0054969

misbehaviour, for example, when the overrides include "!important" modifiers.

the problem would be Ace template's use of !important. But I'm a bit confused by this statement:

Previously, as jquery-ui was included as part of mantis, the css was placed in headers before the Ace css, so this probem did not exists.

@cproensa are you sure it was working before ?
I would expect that ace's use of !important would override default jQueryUI styles, regardless of whether the latter are linked before or after ace.

Anyway option 2 is probably the only way

2- Remove the jquery-ui styles from ace since we are not using them

Or maybe just remove the !important declaration from conflicting Ace styles ?

@cproensa, is there a public plugin that can be used to reproduce the behavior you described earlier ? If so, could you please provide the details ?

• Note this reference is for CSS 3 candidate recommandation, but it's the same in CSS 2

@cproensa are you sure it was working before ?

If i recall correctly it has been working in v2 before the removal of jquery-ui

if you look at the conflicting properties:
jquery-ui sets the background with solid colour and variable opacity
ace sets it as alpha colour and opacity 1

The result as reported is background solid (from jq-ui), opacity 1 (from ace)

I would expect that ace's use of !important would override default jQueryUI styles, regardless of whether the latter are linked before or after ace.

I think that ace css overrides are designed to work "on top" of jquery-ui styles, regardless of "!important" properties.

1- Include the plugin css file prior to ace files

I'm not sure this may not break other things. Some plugins may need to override mantis default styles, for example.

2- Remove the jquery-ui styles from ace since we are not using them

Are the css templates mantained upstream? This would burden upgradeability.
This would also cause jquery-ui element to have a different style than the general ace design

More options:

3- Revert removal of jquery-ui
If the ace template provide overrides for this library, it may be possible to provide it in a controlled way that matches the intended use by ace template.

4- Make the jquery-ui plugin inject the css file in an alternative way, that gets placed before ace template. This means not using the resources event, but instead trying to hook on require_css on initialization.
I'm not sure it this would work, but minor changes to api could be made to accomodate this scenario.

is there a public plugin that can be used to reproduce the behavior you described earlier ? If so, could you please provide the details ?

This plugin uses query dialog:
https://github.com/mantisbt-plugins/Inline-column-configuration

I specifically use this rewrite:
https://github.com/mantisbt-plugins/Inline-column-configuration/pull/2

jquery-ui plugin updated for v2:
https://github.com/mantisbt-plugins/jQuery-UI/pull/4

@dregad, @cproensa Please try again against this PR: https://github.com/mantisbt/mantisbt/pull/1009
I removed a lot of unused css/js code that was bundled by ace theme. Chances are you won't run into this issue.

@syncguru
With your PR jq-ui styles seems to work better, at least for the case that i found failing.
For the moment i'm ok with it.

Given that we are in agreement that the way the library was removed introduces regressions, I have reverted the change for now (see MantisBT master 1c8c1302), so we don't release 2.1 with a known issue.

I haven't had the time to test the new PR yet.

@dregad Give that v2.1 is out, we should go back to removing jquery-ui along with merging my PR (which is approved) - this should resolve this issue.