html icon indicating copy to clipboard operation
html copied to clipboard

dispatch toggleevents for dialog open/close

Open keithamus opened this issue 1 year ago • 7 comments

This attempts to fix https://github.com/whatwg/html/issues/9733 by specifying that:

  • a Dialog's show() steps should dispatch a beforetoggle cancellable event
  • followed by a queuing a non-cancellable toggle event.
  • a Dialog's showModal() steps should dispatch a beforetoggle cancellable event
  • followed by a queuing non-cancellable toggle event.
  • the close the dialog steps should disaptch a non-cancellable beforetoggle event
  • followed by queuing a non-cancellable toggle event.
  • [x] At least two implementers are interested (and none opposed):
    • Chromium: Tentatively interested
    • Gecko: interested. https://github.com/mozilla/standards-positions/issues/1101
  • [x] Tests are written and can be reviewed and commented upon at:
    • https://github.com/web-platform-tests/wpt/pull/44208
  • [x] Implementation bugs are filed:
    • Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1521813
    • Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1876762
    • WebKit: https://bugs.webkit.org/show_bug.cgi?id=268160
    • Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): …
    • Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): …
  • [ ] MDN issue is filed: …
  • [ ] The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)


/interactive-elements.html ( diff )

keithamus avatar Jan 25 '24 16:01 keithamus

I think this needs the "toggle task tracker" concept used in details elements in order to coalesce async toggle events: https://html.spec.whatwg.org/multipage/interactive-elements.html#queue-a-details-toggle-event-task

If you do this and open+close the dialog element synchronously , there should be one "toggle" event with both oldState and newState set to "closed":

dialog.showModal();
dialog.close();

josepharhar avatar Jan 26 '24 23:01 josepharhar

Consider chrome as tentatively interested. I will file an intent to ship to get an official position when this gets a bit more attention from the other browsers, but I don't anticipate objections

josepharhar avatar Jan 29 '24 18:01 josepharhar

Also Gecko is interested assuming the pr follows what was discussed at TPAC.

smaug---- avatar Jan 29 '24 22:01 smaug----

Tests can be added to the OP: https://github.com/web-platform-tests/wpt/pull/44208

josepharhar avatar Feb 08 '24 20:02 josepharhar

Hi, this implementation could help us improve a popup, such as a CMP, for better integration by utilizing native browser APIs, specifically the Popover API, to make everything more robust. This will enable us to further improve the INP impact, as described in my case study here: https://web.dev/case-studies/pubconsent-inp?hl=en. Since the CMP is a predominant component on the web, I believe this kind of implementation should be supported as much as possible. I hope it helps. Thank you

marco-prontera avatar Apr 05 '24 09:04 marco-prontera