View Issue Details

IDProjectCategoryView StatusLast Update
0021881mantisbtjavascriptpublic2017-02-26 21:17
ReportersyncguruAssigned Tosyncguru 
PrioritynormalSeveritymajorReproducibilityhave not tried
Status closedResolutionreopened 
Product Version2.0.0-rc.2 
Target Version2.2.0Fixed in Version2.2.0 
Summary0021881: Remove jquery-ui is not longer used in Modern UI
Description

Looks like there is a very limited use (if any) of jquery-ui. Consider removing it.

TagsNo tags attached.

Relationships

parent of 0022105 closedcproensa Update jQuery-UI plugin for 2.x compatibility 

Activities

atrol

atrol

2016-11-07 10:41

developer   ~0054458

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

syncguru

syncguru

2016-12-28 22:44

developer   ~0054861

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

cproensa

cproensa

2017-01-06 18:28

developer   ~0054969

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.

cproensa

cproensa

2017-01-06 18:29

developer  

Selección_119.png (177,956 bytes)
Selección_119.png (177,956 bytes)
dregad

dregad

2017-01-25 10:37

developer   ~0055325

@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)

syncguru

syncguru

2017-01-26 01:41

developer   ~0055329

Last edited: 2017-01-27 04:30

View 2 revisions

@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
dregad

dregad

2017-01-26 12:33

developer   ~0055341

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

cproensa

2017-01-26 13:39

developer   ~0055342

@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

syncguru

syncguru

2017-01-27 17:47

developer   ~0055378

@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.

cproensa

cproensa

2017-01-29 13:55

developer   ~0055386

@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.

dregad

dregad

2017-01-30 10:59

developer   ~0055399

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.

syncguru

syncguru

2017-02-03 14:01

developer   ~0055480

@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.

Related Changesets

MantisBT: master 14e3d50c

2016-12-28 22:39:06

syncguru


Committer: vboctor Details Diff
Remove jquery_ui due to size & limited use

Fixes: 0021881
mod - core/constant_inc.php Diff File
mod - core/html_api.php Diff File
rm - css/jquery-ui-1.11.4.min.css Diff File
mod - js/common.js Diff File
rm - js/jquery-ui-1.11.4.min.js Diff File

MantisBT: master 6875f993

2016-12-31 01:50:59

syncguru


Committer: vboctor Details Diff
Replace autocomplete with Ace theme bundled typeahead

Fixes: 0021881
mod - bug_report_page.php Diff File
mod - bug_update_page.php Diff File
mod - js/common.js Diff File

MantisBT: master 1c8c1302

2017-01-30 10:46:19

dregad

Details Diff
Revert "Remove jquery_ui due to size & limited use"

This reverts commit 14e3d50c90424dbcf3b89f0d649f0657dc201d29.

Conflicts:
js/common.js

It has been established that removing jQuery-UI introduces regression
issues due to conflicts with Ace css, e.g. with plugins relying on its
functionality. This restores the library, but keeps the 'autocomplete'
switch to 'typeahead' (see 6875f99375b419559a973a5a86320597b6aec70ba).

Following the discussion in issue 0021881, an alternative approach to
cleanly remove the library has been proposed and might be merged in the
future.
mod - core/constant_inc.php Diff File
mod - core/html_api.php Diff File
add - css/jquery-ui-1.11.4.min.css Diff File
mod - js/common.js Diff File
add - js/jquery-ui-1.11.4.min.js Diff File

MantisBT: master 33a5e80f

2017-02-05 05:46:28

dregad

Details Diff
Remove jQuery-UI

This resolves conflicts and reapplies @syncguru's original removal
commit 14e3d50c90424dbcf3b89f0d649f0657dc201d29 following Ace template
adjustments to avoid CSS issues [1].

Fixes 0021881

[1] PR https://github.com/mantisbt/mantisbt/pull/1009
mod - core/constant_inc.php Diff File
mod - core/html_api.php Diff File
rm - css/jquery-ui-1.11.4.min.css Diff File
rm - js/jquery-ui-1.11.4.min.js Diff File

Issue History

Date Modified Username Field Change
2016-11-07 10:26 syncguru New Issue
2016-11-07 10:41 atrol Note Added: 0054458
2016-11-27 08:20 dregad Target Version 2.0.0-rc.2 => 2.0.0
2016-12-28 22:44 syncguru Note Added: 0054861
2016-12-28 22:57 vboctor Assigned To => syncguru
2016-12-28 22:57 vboctor Status new => assigned
2016-12-28 22:57 vboctor Category ui => javascript
2016-12-30 15:56 vboctor Target Version 2.0.0 => 2.0.1
2016-12-30 19:00 dregad Target Version 2.0.1 => 2.1.0
2017-01-03 00:57 vboctor Changeset attached => MantisBT master 14e3d50c
2017-01-03 00:57 vboctor Changeset attached => MantisBT master 6875f993
2017-01-03 00:57 vboctor Assigned To syncguru => vboctor
2017-01-03 00:57 vboctor Status assigned => resolved
2017-01-03 00:57 vboctor Resolution open => fixed
2017-01-03 00:57 vboctor Fixed in Version => 2.1.0
2017-01-03 03:42 dregad Issue cloned: 0022105
2017-01-03 03:42 dregad Relationship added parent of 0022105
2017-01-06 18:28 cproensa Status resolved => feedback
2017-01-06 18:28 cproensa Resolution fixed => reopened
2017-01-06 18:28 cproensa Note Added: 0054969
2017-01-06 18:29 cproensa File Added: Selección_119.png
2017-01-25 10:37 dregad Severity minor => major
2017-01-25 10:37 dregad Note Added: 0055325
2017-01-25 10:37 dregad Fixed in Version 2.1.0 =>
2017-01-26 01:41 syncguru Note Added: 0055329
2017-01-26 01:41 syncguru Status feedback => assigned
2017-01-26 12:33 dregad Note Added: 0055341
2017-01-26 13:39 cproensa Note Added: 0055342
2017-01-27 04:30 vboctor Note Edited: 0055329 View Revisions
2017-01-27 17:47 syncguru Note Added: 0055378
2017-01-29 13:55 cproensa Note Added: 0055386
2017-01-30 10:56 dregad Changeset attached => MantisBT master 1c8c1302
2017-01-30 10:59 dregad Note Added: 0055399
2017-01-31 04:03 vboctor Target Version 2.1.0 => 2.2.0
2017-02-03 14:01 syncguru Note Added: 0055480
2017-02-04 18:08 vboctor Assigned To vboctor => syncguru
2017-02-05 05:48 dregad Changeset attached => MantisBT master 33a5e80f
2017-02-05 05:48 dregad Assigned To syncguru => dregad
2017-02-05 05:48 dregad Status assigned => resolved
2017-02-05 05:48 dregad Fixed in Version => 2.2.0
2017-02-05 05:49 dregad Assigned To dregad => syncguru
2017-02-26 21:17 vboctor Status resolved => closed