Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use ToggleEvent for <details> element toggle event #8893

Merged
merged 9 commits into from
Aug 25, 2023
Merged

Use ToggleEvent for <details> element toggle event #8893

Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d88b121
Use ToggleEvent for <details> element toggle event
nt1m Feb 16, 2023
752b8d1
Use task coalescing
sideshowbarker Aug 20, 2023
4e90fc4
Address some review comments (and also apply in popover section)
sideshowbarker Aug 23, 2023
cb117c3
Remove comma per review comments
sideshowbarker Aug 23, 2023
efc6d33
Move ToggleEvent to “Activation behavior of elements” section
sideshowbarker Aug 23, 2023
f3ed332
Remove popover-specific (non-normative) text from ToggleEvent definition
sideshowbarker Aug 23, 2023
55c6d83
Consolidate into a shared “toggle task tracker”
sideshowbarker Aug 23, 2023
47ac7d1
Make it “details toggle task tracker” & “popover toggle task tracker”
sideshowbarker Aug 24, 2023
961f13e
Nit fixes
domenic Aug 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 118 additions & 86 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59788,25 +59788,64 @@ interface <dfn interface>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
exists, user agents can still provide this ability through some other user interface
affordance.</p>

<p>Every <code>details</code> element has a <dfn>details toggle task tracker</dfn>, which is a
sideshowbarker marked this conversation as resolved.
Show resolved Hide resolved
<span>toggle task tracker</span> or null, initially null</p>
sideshowbarker marked this conversation as resolved.
Show resolved Hide resolved

<p>Whenever the <code data-x="attr-details-open">open</code> attribute is added to or removed from
a <code>details</code> element, the user agent must <span>queue an element task</span> on the
<span>DOM manipulation task source</span> given then <code>details</code> element that runs the
following steps, which are known as the <dfn>details notification task steps</dfn>, for this
<code>details</code> element:</p>
a <code>details</code> element, the user agent must run the following steps, which are known as
sideshowbarker marked this conversation as resolved.
Show resolved Hide resolved
sideshowbarker marked this conversation as resolved.
Show resolved Hide resolved
the <dfn>details notification task steps</dfn>, for this <code>details</code> element:</p>

<p class="note">When the <code data-x="attr-details-open">open</code> attribute is toggled several
times in succession, the resulting tasks essentially get coalesced so that only one event is
fired.</p>

<ol>
<li><p>If the <code data-x="attr-details-open">open</code> attribute is added, <span>queue a
details toggle event task</span> given the <code>details</code> element, "<code
data-x="">closed</code>", and "<code data-x="">open</code>".</p></li>

<li><p>Otherwise, <span>queue a details toggle event task</span> given the <code>details</code>
element, "<code data-x="">open</code>", and "<code data-x="">closed</code>".</p></li>

</ol>

<p>To <dfn>queue a details toggle event task</dfn> given a <code>details</code> element
<var>element</var>, a string <var>oldState</var>, and a string <var>newState</var>:

<ol>
<li>
<p>If another <span data-x="concept-task">task</span> has been <span data-x="queue an element
task">queued</span> to run the <span>details notification task steps</span> for this
<code>details</code> element, then return.</p>
<p>If <var>element</var>'s <span>details toggle task tracker</span> is not null, then:</p>

<p class="note">When the <code data-x="attr-details-open">open</code> attribute is toggled
several times in succession, these steps essentially get coalesced so that only one event is
fired.</p>
<ol>
<li><p>Set <var>oldState</var> to <var>element</var>'s <span>details 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>details 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>details toggle task tracker</span> to null.</p></li>
</ol>
</li>

<li><p><span data-x="concept-event-fire">Fire an event</span> named <code
data-x="event-toggle">toggle</code> at the <code>details</code> element.</p></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>details toggle task tracker</span> to null.</p></li>
</ol>
</li>

sideshowbarker marked this conversation as resolved.
Show resolved Hide resolved
<li><p>Set <var>element</var>'s <span>details 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>
sideshowbarker marked this conversation as resolved.
Show resolved Hide resolved
</ol>

<p>The <dfn attribute for="HTMLDetailsElement"><code data-x="dom-details-open">open</code></dfn>
Expand Down Expand Up @@ -77613,6 +77652,53 @@ partial interface <span id="NavigatorUserActivation-partial">Navigator</span> {

</div>

<h4>The <code>ToggleEvent</code> interface</h4>

<pre><code class="idl">[Exposed=Window]
interface <dfn interface>ToggleEvent</dfn> : <span>Event</span> {
constructor(DOMString type, optional <span>ToggleEventInit</span> eventInitDict = {});
readonly attribute DOMString oldState;
readonly attribute DOMString newState;
};

dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
DOMString oldState = "";
DOMString newState = "";
};</code></pre>

<dl class="domintro">
<dt><code data-x=""><var>event</var>.<span subdfn
data-x="dom-ToggleEvent-oldState">oldState</span></code></dt>

<dd>
<p>Set to "<code data-x="">closed</code>" when transitioning from closed to open, or set to
"<code data-x="">open</code>" when transitioning from open to closed.</p>
</dd>

<dt><code data-x=""><var>event</var>.<span subdfn
data-x="dom-ToggleEvent-newState">newState</span></code></dt>

<dd>
<p>Set to "<code data-x="">open</code>" when transitioning from closed to open, or set to "<code
data-x="">closed</code>" when transitioning from open to closed.</p>
</dd>
</dl>

<p>The <dfn attribute for="ToggleEvent"><code
data-x="dom-ToggleEvent-oldState">oldState</code></dfn> and <dfn attribute for="ToggleEvent"><code
data-x="dom-ToggleEvent-newState">newState</code></dfn> attributes must return the values they are
initialized to.</p>

sideshowbarker marked this conversation as resolved.
Show resolved Hide resolved
<p>A <dfn>toggle task tracker</dfn> is a <span>struct</span> which has:</p>

<dl>
<dt><dfn data-x="toggle-task-task">task</dfn></dt>
<dd>A <span data-x="concept-task">task</span> which fires a <code>ToggleEvent</code>.</dd>

<dt><dfn data-x="toggle-task-old-state">old state</dfn></dt>
<dd>A string which represents the <span data-x="toggle-task-task">task</span>'s event's value for
the <code data-x="dom-ToggleEvent-oldState">oldState</code> attribute.</dd>
</dl>


<h3>Focus</h3>
Expand Down Expand Up @@ -82600,17 +82686,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<p>Every <span data-x="HTML elements">HTML element</span> has a <dfn>popover showing or
hiding</dfn>, which is a boolean, initially set to false.</p>

sideshowbarker marked this conversation as resolved.
Show resolved Hide resolved
<p>Every <span data-x="HTML elements">HTML element</span> has a <dfn>popover toggle task</dfn>,
initially null, which is either null or a <span>struct</span> which has:</p>

<dl>
<dt><dfn data-x="popover-toggle-task-task">Task</dfn></dt> <dd>A task which fires a
<code>ToggleEvent</code>.</dd>

<dt><dfn data-x="popover-toggle-task-old-state">Old state</dfn></dt>
<dd>A string which represents the <span data-x="popover-toggle-task-task">task</span>'s event's
value for the <code data-x="dom-ToggleEvent-oldState">oldState</code> attribute.</dd>
</dl>
<p>Every <span data-x="HTML elements">HTML element</span> <dfn>popover toggle task tracker</dfn>,
which is a <span>toggle task tracker</span> or null, initially nul.</p>

<p>The following <span data-x="concept-element-attributes-change-ext">attribute change
steps</span>, given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
Expand Down Expand Up @@ -82776,16 +82853,16 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<ol>
<li>
<p>If <var>element</var>'s <span>popover toggle task</span> is not null, then:</p>
<p>If <var>element</var>'s <span>popover toggle task tracker</span> is not null, then:</p>

<ol>
<li><p>Set <var>oldState</var> to <var>element</var>'s <span>popover toggle task</span>'s
<span data-x="popover-toggle-task-old-state">old state</span>.</p></li>
<li><p>Set <var>oldState</var> to <var>element</var>'s <span>popover 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>popover toggle task</span>'s <span
data-x="popover-toggle-task-task">task</span> from its <span>task queue</span>.</p></li>
<li><p>Remove <var>element</var>'s <span>popover 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>popover toggle task</span> to null.</p></li>
<li><p>Set <var>element</var>'s <span>popover toggle task tracker</span> to null.</p></li>
</ol>
</li>

Expand All @@ -82794,20 +82871,20 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<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>, 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> at <var>element</var>.</p></li>
<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>popover toggle task</span> to null.</p></li>
<li><p>Set <var>element</var>'s <span>popover toggle task tracker</span> to null.</p></li>
</ol>
</li>

<li><p>Set <var>element</var>'s <span>popover toggle task</span> to a struct with <span
data-x="popover-toggle-task-task">task</span> set to the just-queued <span
data-x="concept-task">task</span> and <span data-x="popover-toggle-task-old-state">old
state</span> set to <var>oldState</var>.</p></li>
<li><p>Set <var>element</var>'s <span>popover 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="HTMLElement"><code data-x="dom-hidePopover">hidePopover()</code></dfn>
Expand Down Expand Up @@ -82873,7 +82950,7 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<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>
data-x="">open</code>" and the <code data-x="dom-ToggleEvent-newState">newState</code>
attribute initialized to "<code data-x="">closed</code>" at <var>element</var>.</p></li>

<li>
Expand Down Expand Up @@ -83532,51 +83609,6 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
</li>
</ol>

<h4>The <code>ToggleEvent</code> interface</h4>

<pre><code class="idl">[Exposed=Window]
interface <dfn interface>ToggleEvent</dfn> : <span>Event</span> {
constructor(DOMString type, optional <span>ToggleEventInit</span> eventInitDict = {});
readonly attribute DOMString oldState;
readonly attribute DOMString newState;
};

dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
DOMString oldState = "";
DOMString newState = "";
};</code></pre>

<dl class="domintro">
<dt><code data-x=""><var>event</var>.<span subdfn
data-x="dom-ToggleEvent-oldState">oldState</span></code></dt>

<dd>
<p>Set to "<code data-x="">closed</code>" when transitioning from closed to open, or set to
"<code data-x="">open</code>" when transitioning from open to closed.</p>
</dd>

<dt><code data-x=""><var>event</var>.<span subdfn
data-x="dom-ToggleEvent-newState">newState</span></code></dt>

<dd>
<p>Set to "<code data-x="">open</code>" when transitioning from closed to open, or set to "<code
data-x="">closed</code>" when transitioning from open to closed.</p>
</dd>
</dl>

<p>The <dfn attribute for="ToggleEvent"><code
data-x="dom-ToggleEvent-oldState">oldState</code></dfn> attribute must return the value it
was initialized to. It is initialized to "<code data-x="">open</code>" if the element with the
<code data-x="attr-popover">popover</code> attribute's <span>popover visibility state</span> is
<span data-x="popover-showing-state">showing</span>; otherwise "<code
data-x="">closed</code>".</p>

<p>The <dfn attribute for="ToggleEvent"><code
data-x="dom-ToggleEvent-newState">newState</code></dfn> attribute must return the value it was
initialized to. It is initialized to "<code data-x="">closed</code>" if the element with the <code
data-x="attr-popover">popover</code> attribute's <span>popover visibility state</span> is <span
data-x="popover-showing-state">showing</span>; otherwise "<code data-x="">open</code>".</p>


<h2 split-filename="browsers" id="browsers">Loading web pages</h2>

Expand Down Expand Up @@ -137980,7 +138012,7 @@ INSERT INTERFACES HERE

<tr> <!-- toggle -->
<td> <dfn event for="HTMLElement"><code data-x="event-toggle">toggle</code></dfn>
<td> <code>Event</code> or <code>ToggleEvent</code>
<td> <code>ToggleEvent</code>
<td> <code>details</code> and <span data-x="attr-popover">popover</span> elements
<td> Fired at <code>details</code> elements when they open or close; fired on elements with the
<code data-x="attr-popover">popover</code> attribute when they are transitioning between
Expand Down