Problem/Motivation

Libraries in core that are not the latest stable release of the library need to be updated prior to the release of 8.0.0, as per #2203431: [meta] Various asset (JavaScript) libraries have to be updated to a (minified) stable release prior to 8.0.0

This issue is marked as Critical because it is required for the completion of the parent issue, which is also Critical.

Proposed resolution

Update the jQuery UI library to the latest stable release: 1.11.2

Remaining tasks

  • Replace the jQuery UI library files in /core/assets/vendor/jquery.ui/ with the 1.11.2 release from jQuery GitHub repo
  • Update core.libraries.yml
  • Correlate Drupal JavaScript code with jQuery UI release notes to locate possible areas of concern
  • Perform manual testing
  • Fix what broke
  • Minify JS files

User interface changes

None

API changes

  • YAML files that use stylesheets-override or stylesheets-remove to overwrite/remove jQuery UI files will need to be updated to use the new naming scheme (removing the jquery.ui. prefix from the file name)
  • Automated tests that directly refer to jQuery UI library file names/paths will need to be updated to use the new naming scheme

Comments

hampercm’s picture

Issue summary: View changes
StatusFileSize
new3.07 MB

Here's a patch that replaces the jQuery UI files in /core/assets/vendor/jquery.ui with version 1.11.2, and updates core.libraries.yml to match. Some files were renamed or moved between jQuery UI 1.10 and 1.11. jQuery UI 1.11 also includes a new widget named selectmenu, which I've added to core.libraries.yml as well.

No major malfunctions noticed yet.

idebr’s picture

I split the core/core.libraries.yml changes from the jQuery UI to make it easier to review.

idebr’s picture

StatusFileSize
new2.3 MB
hampercm’s picture

Issue summary: View changes
StatusFileSize
new37.71 KB

Good call on splitting out the libraries from the rest.

During testing, I found that the name changes in the jQuery UI files was breaking an override of the jQuery UI CSS by the Seven theme's file /core/themes/seven/css/components/jquery.ui.theme.css. This was breaking the custom theming and making dialogs look very different. This patch moves that file to /core/themes/seven/css/components/jquery.ui/theme.css to fix this, and updates the corresponding YML file. This patch doesn't contain the updated jQueryUI libraries--combine with #3 to get the whole patch.

Dialogs still do look a little different at this point, compared to 8.0.x-dev. I'll continue to explore this and work out a fix.

interdiff was choking on the patches, so unfortunately none included.

hampercm’s picture

I've also explored the Upgrade Guide for 1.11 and Release Notes found on jqueryui.com, and examined the Drupal 8 JavaScript for correlations. It doesn't look like the upgrade to 1.11 has too many changes which will have an impact on Drupal 8.

Here are some potential points of concern I had from the jQuery UI Upgrade Guide. Perhaps some contributors with a fair amount of Drupal-jQueryUI experience will be able to chime in on them:

Also, the change of file names for many jQuery UI files between 1.10 and 1.11 seems to be having some unexpected consequences (see my comment #4).

hampercm’s picture

Assigned: hampercm » Unassigned
Issue summary: View changes
StatusFileSize
new29.31 KB

Belated interdiff for #4.

idebr’s picture

Issue summary: View changes

The final patch should include the minified version of jQuery UI, as noted by _nod in #2393125: Update underscore and backbone library to latest release in #2. I updated the issue summary accordingly.

Can you add the minified version of the file please? We're getting that done while updating libs.

It means there needs to bee a { minified: true } option in the libraries entry, see the ckeditor entry for an example.

nod_’s picture

A bit tricker here because as far as I know, when downloading the production release of jquery ui we get all the scripts in the same file. We do want to keep separate files here.

We may need to manually (or script it) minifiy each file.

hampercm’s picture

Issue summary: View changes

Yes, minification by us will be necessary. I'll go ahead and upload a minified patch shortly. I'm also working on fixing some CSS issues I've identified with dialogs.

hampercm’s picture

I've minified the jQuery UI library files and updated core.libraries.yml to match. This was done using uglifyjs (node-uglify 1.3.4-1) on my local Ubuntu machine.

I also found that the jQuery UI effects in core.libraries.yml hadn't been correctly updated by me previously. Those are also fixed. There are also two new effects: "puff" and "size", which were contained within the "scale" effect in jQuery UI 1.10. I added core.libraries.yml entries for those.

Some changes are also made to the Seven theme to compensate for the new file names in jQuery UI 1.11.

A few questions arose while I was minifying things: the JavaScript in the "external" subdirectories of the jQuery UI library doesn't seem to be used by Drupal 8. Does anyone know if it is actually used? Can the "external" subdirectory be removed from the Drupal 8 repo? Or, should it be left in and minified?

P.S.: The core.libraries.yml portion of the interdiff looks wrong at first glance. This is actually due to the way that git diff is interpreting the changes to that file. I've double checked core.libraries.yml to make sure it is correct.

hampercm’s picture

Issue summary: View changes
Issue tags: +Needs manual testing

I've noticed during manual testing that dialog widgets don't appear to be getting positioned correctly with jQueryUI 1.11.2:

  • Sometimes the dialog appears off-screen due to a large negative value for its "top" CSS property. This occurs most frequently immediately after the cache is rebuilt. Reloading the failed page usually allows the dialog to reappear on-screen.
  • Dialogs also appear in the center of the browser window, even when the admin toolbar is shown. Comparatively, with jQuery UI 1.10.2, dialogs were centered in the portion of the window outside the admin toolbars.
  • When the browser size changes, the dialog is not repositioned to stay centered

I've been attempting to work out what is going wrong, but no success yet...

hampercm’s picture

Assigned: Unassigned » hampercm

I think I've tracked down the source of the problems I'm seeing with dialogs. Working on a patch for it now.

hampercm’s picture

Assigned: hampercm » Unassigned
StatusFileSize
new43.36 KB
new662 bytes

The position object created in resetPosition() in /core/misc/dialog/dialog.position.js was not properly positioning or repositioning the dialog widget. Explicitly setting the position of the dialog relative to $(window) fixes the problem.

nod_’s picture

Status: Active » Needs work

Almost there. I tested the stuff we use jquery ui for: dialog are working. CKEditor admin is working but quickedit is kind of messed up but I don't think it's related to this patch. It uses jQuery UI for positions and that is working fine in quickedit.

  1. You don't need: of: $(window) without the jquery thing that works too: of: window.
  2. External directory can be removed.
  3. This patch is can't be reviewed in dreditor, you don't need to separate patches, please make one patch with lib and code updates.
  4. There is a test to update in Drupal\system\Tests\Ajax\DialogTest line 140, the filename needs a -min added to it.

Great work on updating all that, thanks!

hampercm’s picture

Status: Needs work » Needs review
StatusFileSize
new1.98 MB
new929.57 KB

Thanks @nod_. Made the changes recommended in #14. I also fixed a comment in core/themes/seven/css/components/jquery.ui/theme.css to list the new path.

One more question: Should the JSON files in core/assets/vendor/jquery.ui/ also be removed?

nod_’s picture

Umm no those are OK, might need them for checking dependencies and other things, also there is author information in them so it's good to keep that around.

This is looking good though, thanks!

nod_’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs manual testing

Gave it another spin, everything works and I don't see leftover stuff.

The last submitted patch, 10: update-jquery-ui-libs-only-min-2403269-10.patch, failed testing.

The last submitted patch, 10: update-jquery-ui-no-libs-2403269-10.patch, failed testing.

The last submitted patch, 4: update-jquery-ui-no-libs-2403269.patch, failed testing.

The last submitted patch, 3: jquery-ui-library-only-24033269-1.patch, failed testing.

The last submitted patch, 2: core-libraries-yml-24033269-2.patch, failed testing.

The last submitted patch, 13: update-jquery-ui-no-libs-2403269-13.patch, failed testing.

The last submitted patch, 1: update_jqueryui-2403269-1.patch, failed testing.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

This issue is a critical task and is allowed per https://www.drupal.org/core/beta-changes. Committed c84e90c and pushed to 8.0.x. Thanks!

  • alexpott committed c84e90c on 8.0.x
    Issue #2403269 by hampercm, idebr: Update to jQuery UI 1.11.2
    

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.