Dispatch beforetoggle & toggle events during dialog open/close/showModal

This attempts to fix #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.

Tests: web-platform-tests/wpt#44208.

Author: keithamus

source

@@ -61734,6 +61734,49 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
 
   <div w-nodev>
 
+  <p>Every <code>dialog</code> element has a <dfn>dialog toggle task tracker</dfn>, which is a
+  <span>toggle task tracker</span> or null, initially null.</p>
+
+  <p>To <dfn>queue a dialog toggle event task</dfn> given a <code>dialog</code> element
+  <var>element</var>, a string <var>oldState</var>, and a string <var>newState</var>:
+
+  <ol>
+   <li>
+    <p>If <var>element</var>'s <span>dialog toggle task tracker</span> is not null, then:</p>
+
+    <ol>
+     <li><p>Set <var>oldState</var> to <var>element</var>'s <span>dialog toggle task
+     tracker</span>'s <span data-x="toggle-task-old-state">old state</span>.</p></li>
+
+     <li><p>Remove <var>element</var>'s <span>dialog toggle task tracker</span>'s <span
+     data-x="toggle-task-task">task</span> from its <span>task queue</span>.</p></li>
+
+     <li><p>Set <var>element</var>'s <span>dialog toggle task tracker</span> to null.</p></li>
+    </ol>
+   </li>
+
+   <li>
+    <p><span>Queue an element task</span> given the <span>DOM manipulation task source</span> and
+    <var>element</var> to run the following steps:</p>
+
+    <ol>
+     <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
+     data-x="event-toggle">toggle</code> at <var>element</var>, using <code>ToggleEvent</code>, with
+     the <code data-x="dom-ToggleEvent-oldState">oldState</code> attribute initialized to
+     <var>oldState</var> and the <code data-x="dom-ToggleEvent-newState">newState</code> attribute
+     initialized to <var>newState</var>.</p></li>
+
+     <li><p>Set <var>element</var>'s <span>dialog toggle task tracker</span> to null.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Set <var>element</var>'s <span>dialog toggle task tracker</span> to a struct with <span
+   data-x="toggle-task-task">task</span> set to the just-queued <span
+   data-x="concept-task">task</span> and <span data-x="toggle-task-old-state">old state</span> set
+   to <var>oldState</var>.</p></li>
+  </ol>
+
+
   <p>The <dfn method for="HTMLDialogElement"><code data-x="dom-dialog-show">show()</code></dfn>
   method steps are:</p>
 
@@ -61744,6 +61787,20 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
    <li><p>If <span>this</span> has an <code data-x="attr-dialog-open">open</code> attribute, then
    throw an <span>"<code>InvalidStateError</code>"</span> <code>DOMException</code>.</p></li>
 
+   <li><p>If the result of <span data-x="concept-event-fire">firing an event</span> named <code
+   data-x="event-beforetoggle">beforetoggle</code>, using <code>ToggleEvent</code>, with the <code
+   data-x="dom-Event-cancelable">cancelable</code> attribute initialized to true, the <code
+   data-x="dom-ToggleEvent-oldState">oldState</code> attribute initialized to "<code
+   data-x="">closed</code>", and the <code data-x="dom-ToggleEvent-newState">newState</code>
+   attribute initialized to "<code data-x="">open</code>" at <var>this</var> is false, then
+   return.</p></li>
+
+   <li><p>If <span>this</span> has an <code data-x="attr-dialog-open">open</code> attribute, then
+   return.</p></li>
+
+   <li><p><span>Queue a dialog toggle event task</span> given <var>subject</var>, "<code
+   data-x="">closed</code>", and "<code data-x="">open</code>".</p></li>
+
    <li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to <span>this</span>, whose
    value is the empty string.</p></li>
 
@@ -61782,6 +61839,25 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
    state</span>, then throw an <span>"<code>InvalidStateError</code>"</span>
    <code>DOMException</code>.</p></li>
 
+   <li><p>If the result of <span data-x="concept-event-fire">firing an event</span> named <code
+   data-x="event-beforetoggle">beforetoggle</code>, using <code>ToggleEvent</code>, with the <code
+   data-x="dom-Event-cancelable">cancelable</code> attribute initialized to true, the <code
+   data-x="dom-ToggleEvent-oldState">oldState</code> attribute initialized to "<code
+   data-x="">closed</code>", and the <code data-x="dom-ToggleEvent-newState">newState</code>
+   attribute initialized to "<code data-x="">open</code>" at <var>this</var> is false, then
+   return.</p></li>
+
+   <li><p>If <span>this</span> has an <code data-x="attr-dialog-open">open</code> attribute,
+   then return.</p></li>
+
+   <li><p>If <span>this</span> is not <span>connected</span>, then return.</p></li>
+
+   <li><p>If <span>this</span> is in the <span data-x="popover-showing-state">popover showing
+   state</span>, then return.</p></li>
+
+   <li><p><span>Queue a dialog toggle event task</span> given <var>subject</var>, "<code
+   data-x="">closed</code>", and "<code data-x="">open</code>".</p></li>
+
    <li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to <span>this</span>, whose
    value is the empty string.</p></li>
 
@@ -61915,6 +61991,18 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
    <li><p>If <var>subject</var> does not have an <code data-x="attr-dialog-open">open</code>
    attribute, then return.</p></li>
 
+   <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
+   data-x="event-beforetoggle">beforetoggle</code>, using <code>ToggleEvent</code>, with the <code
+   data-x="dom-ToggleEvent-oldState">oldState</code> attribute initialized to "<code
+   data-x="">open</code>" and the <code data-x="dom-ToggleEvent-newState">newState</code> attribute
+   initialized to "<code data-x="">closed</code>" at <var>subject</var>.</p></li>
+
+   <li><p>If <var>subject</var> does not have an <code data-x="attr-dialog-open">open</code>
+   attribute, then return.</p></li>
+
+   <li><p><span>Queue a dialog toggle event task</span> given <var>subject</var>, "<code
+   data-x="">open</code>", and "<code data-x="">closed</code>".</p></li>
+
    <li><p>Remove <var>subject</var>'s <code data-x="attr-dialog-open">open</code>
    attribute.</p></li>