dialog.js always aimed at using the HTML5 dialog spec. Chrome just added experimental support for dialogs in it's dev branch: http://demo.agektmr.com/dialog/

We should let chrome use native dialogs when needed, it actually solves a bunch of messy issues, two of which are:
#2072037: Drupal dialog modal background z-index is set too low to reliably occlude core UI components
#1836392: In the Views UI, the interaction pattern of “All displays”/ “Override this display” is confusing

Attached is the patched used to make the following work (minus the scrolling element, that's hardcoded CSS).
views ui with native dialog

What needs to be done is making sure our API can handle native dialogs when available and that pretty much means we need to not use jQuery UI or in a very different way than today to avoid wildly different UX between native and polyfill.

Files: 
CommentFileSizeAuthor
core-js-dialog-WOOT.patch1.68 KBnod_
Drupal-NativeDialog.png52.43 KBnod_

Comments

Wim Leers’s picture

All existing jQuery UI Dialog JS plus its dependencies:

  • jquery.ui.dialog.js: 19,981 bytes
  • jquery.ui.core.js: 8,195 bytes
  • jquery.ui.widget.js: 15,069 bytes
  • jquery.ui.button.js: 11,821 bytes
  • jquery.ui.draggable.js: 31,128 bytes
  • jquery.ui.mouse.js: 4,561 bytes
  • jquery.ui.position.js: 15,676 bytes
  • jquery.ui.resizable.js: 27,400 bytes

For a total of 133,831 bytes or 130.7 KiB.

Then there's the CSS too:

  • jquery.ui.dialog.css: 1,304 bytes
  • jquery.ui.core.css: 1,468 bytes
  • jquery.ui.theme.css: 17,520 bytes
  • jquery.ui.button.css: 2,541 bytes
  • jquery.ui.resizable.css: 1,207 bytes

For a total of 24040 bytes or 23.5 KiB.

That's >150 KiB … for showing a dialog! Note that almost nothing in Drupal core uses jQuery UI, so it's extremely likely that we'd indeed be loading >150 KiB just for showing a dialog. Even if we'd be using it on all pages, 150 KiB is ridiculous. It's not acceptable, performance-wise.

(And note that I'm only looking at the jQuery UI dependencies, there's also the dependencies on jQuery, drupal.js, debounce.js and displace.js, which I'm not even counting because 1) most of those would be loaded already anyway, 2) most of those we'd probably continue to need after implementing nod_'s proposal.)

Wim Leers’s picture

The current patch is incomplete though: it doesn't yet use the polyfill.

We also must ensure that we don't regress in terms of accessibility.

nod_’s picture

As the polyfill is very new and as I am very lazy, I haven't tried to get it used.

As you said, there are outstanding a11y issues and we'll need to deal with the reduced feature set of the native and polyfill implementation compared to jQuery UI.

I'm not too worried about either, there is already a PR to fix a11y issues on the polyfill and we haven't gone mad with dialog features. We should let it sit a while see how much momentum the polyfill will get.

@WimLeers: hopefully that issue will make all your pain with dialogs worth it ;)

Wim Leers’s picture

Addendum for #1: that 150 KiB is uncompressed, of course. Typically that would compress to 25–33% of the original size. That's still ridiculously much.

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.