I stopped counting the issues that complain about weird effects of using drupal_add_library(), specifically regarding jQuery UI.

The problem is that we auto-load the default theme of jQuery UI, which is then applied to all elements using jQuery UI's CSS classes (mostly dynamically generated DOM elements).

Developers now circumvent this issue by not using drupal_add_library() and loading the wanted JavaScript files separately instead. Which entirely defeats the purpose of the library registry.

A quick but totally senseless fix would be to remove or comment out the stylesheet files in system_library() for jQuery UI.

I personally do not understand the jQuery UI theme API yet. However, looking at http://jqueryui.com/docs/Theming/API, I see many similarities to the CSS classes used in Drupal. Even kinda feels like re-inventing the wheel.

Further options:

- Can the CSS classes, jQuery UI uses, be globally defined/altered, so we could just tell to use our class names?

- Can we implement a default theme that implements those classes, but basically is an empty/reset template only, not applying any weird styles?

Files: 
CommentFileSizeAuthor
#19 jqueryuialter.patch28.13 KBRobLoach
#19 images.zip25.68 KBRobLoach
#19 garlandui.png134.22 KBRobLoach
#5 drupal.jquery-ui-theme.patch562 bytessun
Passed: 13684 passes, 0 fails, 0 exceptions View

Comments

sun’s picture

Title: drupal_add_library(), resp. registered libraries, are not usable » drupal_add_library(), resp. registered jQuery UI libraries are not usable
mikehostetler’s picture

Subscribing and notifying the jQuery UI Team.

rdworth’s picture

There are two main parts to a jQuery UI theme that are significant to this issue:
- functional/layout css
- presentational/look-and-feel css

We keep a clean separation between these two. All css required for plugins to function are in individual files:
ui.dialog.css
ui.tabs.css
etc.

All css for colors, borders, font sizes, font faces, background colors, images, etc are in a single file:
ui.theme.css

It would seem this is the one that's causing the most pain for users as it has a default style they either don't want, or want to override completely. If all they've asked for is to include jQuery UI, and you want enough css for the plugins to be functional with the js, you'll want these files:

ui.core.css
ui.accordion.css
ui.datepicker.css
ui.dialog.css
ui.progressbar.css
ui.resizable.css
ui.slider.css
ui.tabs.css

but not
ui.theme.css

rdworth’s picture

You can get that list of files programatically from:
http://jquery-ui.googlecode.com/svn/tags/1.7.2/themes/base/ui.base.css

Notice the contents of ui.all.css:
@import "ui.base.css";
@import "ui.theme.css";

So you only want the base of the base theme.

sun’s picture

Status: Active » Needs review
FileSize
562 bytes
Passed: 13684 passes, 0 fails, 0 exceptions View

Thank you!

Since I don't have any clue about how we want to handle custom jQuery UI themes in Drupal (probably to be investigated in the contributed http://drupal.org/project/jquery_ui module), it seems like this is a one-line fix then. :)

Gábor Hojtsy’s picture

@sun insits on #517688: Initial D7UX admin overlay that we need to use drupal_add_library() to add the JS for the jQuery UI we use (we don't need *any* of the CSS). Obviously we can add any of the CSS and then add as much again to override / clean it up. He says this issue would solve that, but it does not seem so yet. I'm not at all convinced that when we need to cherry-pick from library files, we should use drupal_add_library() anyway. Files added with drupal_add_js() and drupal_add_css() are equally alterable, even if they do not inherit altering of the parent library (which is as far as I understand @sun's main concern).

mattyoung’s picture

.

sun’s picture

Issue tags: +Release blocker

Either this issue gets fixed or we roll back hook_library(). The main reason for having a library registry was jQuery UI in core. Now we have one, but it cannot be used. Tagging as release blocker.

Damien Tournoud’s picture

I don't see any reason to remove the base "theme" (ui.theme.css). This stylesheet can be overridden by the (Drupal) theme if needed. What we need is a way to style differently a particular UI element (ie. the Overlay, which is not *every* dialog).

If I'm not mistaken, we simply have to use the "dialogClass" [1] option to add our own "drupal-overlay" class to the overlay dialog.

[1] http://docs.jquery.com/UI/Dialog#option-dialogClass

RobLoach’s picture

Status: Needs review » Closed (works as designed)
Issue tags: +Libraries

Damien is right. The Overlay's CSS has to build ontop of the existing ui.theme.css rather then implementing its own. If any jQuery UI element is added to the page (an element requiring ui.theme.css), this element will in turn break the Overlay's CSS. To my knowledge the overlay has a .overlay class which we should apply to all the overlay-specific dialog changes. #256 demonstrates building off of ui.theme.css instead of implementing its own that will break other jQuery elements.

So, due to this, I'm setting this issue to "by design". Thanks!

sun’s picture

Status: Closed (works as designed) » Needs review

No, please read the explanations above.

ui.theme.css is a theme. Clashing with Drupal themes.

ui.base.css (resp. the individual files) are base styles required for the functionality.

A way forward is to remove ui.theme.css (this patch) and let jquery_ui module in contrib figure out how to build a connection between Drupal themes and jQuery UI themes.

RobLoach’s picture

hook_library_alter() was made to support switching the theme, possibly with administration through the Color module. The problem is that jQuery UI elements require a theme. If we have any other jQuery UI element added to the page along with a ui.theme.css, it will break the Overlay. We need to work with ui.theme.css, not against it.

sun’s picture

My understanding is that

- Without ui.theme.css, there is almost no theme besides the jQuery UI base styles. A Drupal theme or Drupal module has to cater for applying styles above UI's base styles in appropriate places. That is the default, and that is why we remove ui.theme.css.

- Whatever wants to provide a UI theme has to alter the registered libraries to inject custom UI theme stylesheets. Most likely, this is a Drupal theme.

- Modules should always work with the UI base styles only, so a Drupal theme is always able to apply a consistent UI theme, just like it provides a consistent Drupal module theme.

- No Drupal theme or module wants to load ui.theme.css, because that is a real theme that no one wants to apply to a site that is already using another theme. You also don't want to apply two different Drupal themes at the same time.

sun’s picture

#87994-92: Quit clobbering people's work when they click the filter tips link is another issue that wants to leverage jQuery UI. That one makes it even more apparent that Drupal themes need to implement UI theme styles in case they want to support it.

Damien Tournoud’s picture

Of course, themes will register a ui.theme.css file, that will override the core provided ui.theme.css. I'm not sure I understand what is the problem.

RobLoach’s picture

jQuery UI's ui.theme.css is a CSS Framework with the basic styles to make jQuery UI elements usable. jQuery UI's Smoothness is the equivalent to Drupal's Stark. Stark has enough CSS make Drupal usable, the same goes for jQuery UI's ui.theme.css. Drupal requires a theme to make it usable, jQuery UI requires a ui.theme.css to make it usable.

With #591794: Allow themes to alter forms and page, you'll be able to implement [theme]_library_alter and swap out ui.theme.css with your own theme's ui.theme.css. As I've demonstrated in the latest overlay patch we can work with ui.theme.css and still make the overlay look right because we can add our own class names to the elements. This means that the overlay won't break when other jQuery UI elements are active that require ui.theme.css.

Yes jQuery UI elements work without a ui.theme.css, but they arn't usable. These elements expect those classes to be there.

RobLoach’s picture

Status: Needs review » Needs work

After some discussion, we have a plan of action:

  • Since jQuery UI elements require a ui.theme.css for them to be usable, we provide the stalk jQuery UI theme (misc/ui.theme.css). This can either be provided at modules/system/system.ui.css, or misc/ui.theme.css.
  • Themes will override this ui.theme.css to allow the jQuery UI elements to look more like their theme.
  • Special use cases that deviate from the jQuery UI's themed design will have to work with the provided jQuery UI's CSS. This means the Overlay will have to override the classes provided by ui.theme.css (the latest Overlay patch does this).
  • We provide a themes/garland/ui.theme.css which tries to mimic the Garland look for the jQuery UI elements. Here's a beginning attempt: garland/ui.theme.css. Please help out with this.
  • Bonus Points: We allow Color module to override some of the jQuery UI CSS elements.

An issue blocker for this #591794: Allow themes to alter forms and page.

sun’s picture

Issue tags: +D7 API clean-up

Tagging absolutely critical clean-ups for D7. Do not touch this tag. Please either help with this or one of the other patches having this tag.

RobLoach’s picture

Title: Allow jQuery UI themes to be swappable » drupal_add_library(), resp. registered jQuery UI libraries are not usable
FileSize
134.22 KB
25.68 KB
28.13 KB

This patch demonstrates swapping out ui.theme.css with a new ui.garland.css. Screenshot.

Steps Taken

  1. Apply patch at #591794: Allow themes to alter forms and page
  2. Apply patch at #87994: Quit clobbering people's work when they click the filter tips link
  3. Apply jqueryuialter.patch
  4. Extract images.zip to produce themes/garland/ui/images

The Key

function garland_library_alter(&$libraries, $module) {
  if ($module == 'system') {
    $js = drupal_get_path('theme', 'garland') . '/ui/ui.garland.css';
    $libraries['ui']['css'][$js] = $libraries['ui']['css']['misc/ui/ui.theme.css'];
    unset($libraries['ui']['css']['misc/ui/ui.theme.css']);
  }
}

Where To Now?

This shows that we are on the right track, and what we have had in mind is working. What we should focus on now are:

RobLoach’s picture

Title: drupal_add_library(), resp. registered jQuery UI libraries are not usable » Allow jQuery UI themes to be swappable

Changing the title a bit to match what we want to do :-) .

sun’s picture

Title: drupal_add_library(), resp. registered jQuery UI libraries are not usable » Allow jQuery UI themes to be swappable

@Rob Loach: Thanks for your work on this!

I agree that these are the most reasonable and the only feasible steps that can be done in the remaining time-frame. Although I'd rather like to see misc/ui/ui.theme.css being moved into a custom, stripped down modules/system/ui.theme.css, I can live with this until D8 (when we all will know better).

The first issue on your list is the most critical and also RTBC. The second should almost be ready...

Are the any actionable items for this issue? Or do we simply want to keep it as meta-issue?

The ui.theme.css files for Garland and Seven, we should probably move into separate issues each (and those can happily go in after API freeze).

RobLoach’s picture

I created #606782: Give Garland a nice looking jQuery UI theme. We'll also need one for Seven so that the popup looks nice when embedded in the Overlay (screenshot).

rickvug’s picture

.

RobLoach’s picture

Jacine’s picture

Can someone tell me (or point me to information on) where Drupal 7 is using jQuery UI or any of the styles provided by ui.theme.css? I read #315035: Add jQuery UI elements to core so I am aware of where it "can" be used, but I don't think any of it has actually been done and would like to confirm that.

For the record, this totally goes against the whole "Stark" movement. Smoothness is a full-on theme. It's not at all like Stark in every way that counts. Stark doesn't mess with your fonts, borders, border-radius, background colors, images, etc. Having to essentially create a whole jQuery UI theme on top of a Drupal theme is a burden IMO, but since this looks like it's here to stay it should definitely be stripped down.

2 questions:

  1. Is anything other that the overlay using this right now? If I remove this file in a theme, do I risk breaking anything in core?
  2. What would a stripped own version of ui.theme.css contain in your opinion? Just icons and basic dialog background/borders?
Jacine’s picture

I started to work on a stripped down version of ui.theme.css. I could submit a patch for it, but I'm not sure what you guys are looking to do, if anything. If you're not willing to do anything with it for Drupal 7, please let me know. It could end up being documentation for themers. :)

jensimmons’s picture

sub

markus_petrux’s picture

Thanks a lot! This stuff is looking really great.

Once this is stable for D7, maybe it could be backported to jquery_ui module for D6.

scroogie’s picture

subscribing

mcrittenden’s picture

Sub.

RobLoach’s picture

Jacob found a great link on using multiple jQuery UI themes at once:
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_si...

What this shows us is that it's possible to swap jQuery UI themes out, build ontop of existing ones, and use multiple themes at the same time.

Jacine’s picture

Priority: Critical » Normal

Ideally there should be consistency between the classes that jQuery UI provides and the classes that Drupal provides for common widgets, like tabs, accordions, etc. To me, that means new theme functions for jQuery UI widgets and changes to existing theme functions where applicable.

It's too late for that, but ui.theme.css needs to be default with. Core CSS files are currently being littered with CSS that override overrides ui.theme.css instead of starting fresh with good code. See overlay-parent.css for an example:

.overlay.ui-widget-content, .overlay .ui-widget-header {
  background: none;
  border: none;
}

Why? Because this is what the person writing the CSS has to start with:

.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }

And this is before we even get to the theme layer.

I believe that after Drupal 7 is released, and modules start using it, and writing CSS in the same manner, we are going to see a lot more of this type of messy code, and I think that sucks. While it is easy to say the file should be removed, certain widgets like the slider/dialog/overlay need minimal styling to be functional. I also think the icons are useful. I propose we do a stripped down ui.system.css file: http://bit.ly/4VuCxc (see the ui. stripped.css tab)

Does anyone have any feedback on this?

casey’s picture

Subscribing.

RobLoach’s picture

The CSS files don't look as scary in #679036: Upgrade to jQuery UI 1.8. It's easy to swap out the jQuery UI theme with one from the ThemeRoller using hook_css_alter(). jQuery UI needs a theme for it to be usable. I'd consider this issue fixed.

casey’s picture

Let's continue on #606782: Give Garland a nice looking jQuery UI theme and #614494: Give Seven a nice looking default jQuery UI theme then. If one of those lands we can mark this one fixed.

sun’s picture

Priority: Normal » Critical

Over in #697224: Replace $.viewsUI.tabs with $.ui.tabs, Views tries to remove its own version of jQuery UI tabs and rely on core's instead.

Problem: A bizarre amount of CSS overrides are required to revert what ui.theme.css is doing by default.

casey’s picture

So what needs to be done here?

Jacine’s picture

Well, for one, we need to see if this upgrade changes anything, like Rob says in #34: #679036: Upgrade to jQuery UI 1.8.

If not, giving each theme defaults is not the answer here. It's nice to do, but it's just a band-aid for those themes, and the problems with modules and custom theme having bad default CSS to start with would remain.

RobLoach’s picture

catch’s picture

Priority: Critical » Normal

This is nice to have, not a critical bug.

JoshOrndorff’s picture

I was looking at this queue (all open 7.x issues tagged with "release blocker").

Do we still want that tag on this issue?

nod_’s picture

Version: 7.x-dev » 8.x-dev
RobLoach’s picture

This is already possible with hook_library_info_alter() and hook_library_alter(). Seven got a nice looking jQuery UI theme in #614494: Give Seven a nice looking default jQuery UI theme. Any reason why this issue is still open?

RobLoach’s picture

Status: Needs work » Fixed
sun’s picture

Title: Allow jQuery UI themes to be swappable » jQuery UI libraries are loading too much CSS that needs to be reverted / Allow jQuery UI themes to be swappable
Status: Fixed » Active
Issue tags: -Release blocker, -API clean-up, -D7 API clean-up +Front end, +css cleanup

I think the original issue is still not resolved — which somehow got side-tracked by the swappable themes sub-topic.

@Jacine nicely explained it in #32 once more.

However, it is still not clear whether we're actually going to start to use jQuery UI in Drupal 8 — see #1666920: [meta] Where/when to use jQuery UI

Only in case we will, we need to revisit this issue. Essentially:

jQuery UI's default ui.theme.css is not as "Stark" (minimal) as our defaults are. It contains too much branding and too many styles. The only way to make it as basic as Stark is to develop a stripped-down version, as @Jacine prototyped some time ago. That is, in order to prevent modules and themes from having to override any default styling in jQuery UI's default.

Drupal modules need to be able to load, say the Autocomplete plugin, without automatically loading a shittonne of CSS that suddenly needs to be customized and overridden by themers/site builders. When modules are adding JS plugins, then they only want the behavior/effect, only using the absolute minimum required styles to make the visual interface work. In other words, loading and applying the jQuery UI Autocomplete plugin should actually yield a similar look & feel as our current autocomplete widget; i.e., close to zero styling. As visible in the screenshots in #675446: Use jQuery UI Autocomplete, that is absolutely not the case.

Our current CSS clean-up efforts for D8 are essentially following that: $module.base.css for any required functional styling, $module.theme.css for minimum interface styles. Everything else is left to the Drupal theme — which may want to override/replace $module.theme.css entirely, but there's usually almost no default styling in there anyway.

RobLoach’s picture

jQuery UI requires a theme (jquery.ui.theme.css), just like how Drupal requires a theme (Stark). It can be swapped with hook_library_info_alter(). jquery.ui.theme.css is the base theme that's shipped with jQuery UI. If we have issues with how jQuery UI's base theme looks, then we should work with them to fix it upstream... I'm not sure what the issue here is.

YesCT’s picture

Issue summary: View changes
Issue tags: -Front end +frontend

correcting the tag to the more common one.

nod_’s picture

Component: javascript » CSS

Need input from the CSS folks to know how bad it is to theme jQuery UI stuff. Since we have dialog and autocomplete in core the answer should be easy to get.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.