[WebAPI] Implement dialog toggleevents for dialog open/close

[Rumyra]

Acceptance criteria

• The listed features are documented sufficiently on MDN
• BCD is updated
• Interactive example and data repos are updated if appropriate
• The content has been reviewed as needed

For folks helping with Firefox related documentation

• Set bugs to dev-doc-complete
• Add entry to Firefox release notes for enabled/preview features
• Add/remove entry to Firefox experimental features page for preference/released features

Related Gecko bugs

https://bugzilla.mozilla.org/show_bug.cgi?id=1876762

Other

• Check content open issues to see if any pertain to the subject matter. If there are any that can be closed because of the work, do so. If there are any that can be fixed relatively quickly because of the knowledge from completing this issue and you have time, feel free to go ahead and fix them.

[hamishwillee]

I think this adds beforetoggle and toggle to <dialog> element matching the popover behaviour. The problem is the popover behaviour needs a bit of work - it doesn't mention the events in the docs. I also think the <details> is a little different than documented (it just does the toggle). I am confirming all of this in https://bugzilla.mozilla.org/show_bug.cgi?id=1876762#c14

Status:

• BCD
  • HTMLElement toggle and before toggle event subfeatures browser-compat-data#24927
  • Add web tagging for popover/detail/dialog for beforetoggle/toggle events browser-compat-data#25095
• Docs (probably):
  • Ff133 dialog toggle beforetoggle events #36606
    • HTMLElement.beforetoggle and toggle - update to mention that beforetoggle is cancellable. This is important
    • Note that details should be the same toggle event AFAIK - not a custom one on HTMLDetailsElement
  • FF133 Compat data for inherited toggle/beforetoggle to dialog, popover, details APIs #36833
• Release note FF133 Renote: beforetoggle, toggle fire on dialogs #36654
• dev-docs-complete

[keithamus]

Just to clarify here, for better visibility outside of bugzilla:

I think this adds beforetoggle and toggle to <dialog> element matching the popover behaviour.

Correct.

I also think the <details> is a little different than documented (it just does the toggle).

This is correct also. All three will dispatch a toggle event using the ToggleEvent constructor, and have appropriate newState and oldState properties set - but only popover and (now) <dialog> elements will dispatch beforetoggle on show/hide. I will eventually get around to speccing/implementing beforetoggle for <details> but this is still TBD.

Also worth pointing out beforetoggle on show (or open if you prefer that terminology) will be cancelable. beforetoggle on close is not cancelable. The toggle event is not cancelable.

[hamishwillee]

Thank you @keithamus - much appreciated (one thing I don't like about bugzilla is that you can't add an "acknowledged" or "thanks" without adding clutter to the discussion).

I'm working on this in #36606. Its taking a little longer than expected because I want to write a useful example.

[hamishwillee]

@keithamus Do you happen to know if/when these events are expected for Chromium and Safari?

[keithamus]

Flagged in Chrome 131, will ship in 132 https://chromestatus.com/roadmap.

I have a PR for Safari here: WebKit/WebKit#23332 but it needs revisiting. I'll probably get around to it this month, but I don't know what the timelines will look like for Safari.

[keithamus]

Some potentially useful examples:

• Make dialogs part of URL state: on beforetoggle where newState is open, call replaceState() with an anchor of the dialog name, and add the equivalent opening code for onload.
• Animation fixups: add or remove classes to the <dialog> on beforetoggle/toggle which can help with animations.
• Popover fixups: on beforetoggle find all popover=manual and call .hidePopover() on them.
• Form fixups: on toggle where newState is closed, call dialog.querySelector('form').reset() or other state-resetting functionality to ensure when the dialog is re-opened it is set to its initial state.

[hamishwillee]

Thanks @keithamus .

1. I'm not so ambitious in my examples - the main thing I have done is added simple live examples showing how they are called, such as this one: https://pr36606.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLDialogElement#opening_a_modal_dialog
   It would be good to try some of these, but not in this round.

2. I did take those suggestions and make them as examples in the beforetoggle introduction

3. Most of the work has been making the events "not popover centric" and working on how to show them in the docs for the elements they are fired on - since they are inherited that makes them a bit invisible using our normal patterns.