Add dialog light dismiss behavior #10737

mfreed7 · 2024-10-31T23:17:09Z

This adds a few things:

A closedby attribute that can be used to control the light dismiss behavior of dialogs:
1. <dialog closedby=none> - no user-triggered closing of dialogs at all.
2. <dialog closedby=closerequest> - user pressing ESC (or other close trigger) closes the dialog
3. <dialog closedby=any> - user clicking outside the dialog, or pressing ESC, closes the dialog. Akin to popover=auto behavior.
4. <dialog> - i.e. no closedby attribute - default/old behavior. Behaves like closedby=closerequest.
This PR also (per the request) adds a dialog.requestClose() which fires the cancel event, and then (if that isn't cancelled) fires the close event and closes the dialog.
I also consolidated the "light dismiss" activities into one algorithm, which will need to be called by Add popover light dismiss integration w3c/pointerevents#460 if that ever gets some attention.

Some interesting related links:

WIP dialog closedby attribute spec #10157 - much of this PR was lifted from @lukewarlow's PR
Add light dismiss functionality to <dialog> #9373 - the WHATWG discussion
Bikeshed a name for "light dismiss for dialog" openui/open-ui#834 - the OpenUI discussion
Naming for the *attribute* to enable "light dismiss for dialog" openui/open-ui#960 - naming discussion to get to closedby
Naming for the *value* for the attribute that means "just close with ESC" openui/open-ui#961 - naming discussion to get to closerequest

Closes #9373

At least two implementers are interested (and none opposed):
- Chromium
- …
Tests are written and can be reviewed and commented upon at:
- …
Implementation bugs are filed:
- Chromium: https://crbug.com/376516550
- Gecko: …
- WebKit: …
MDN issue is filed: …
The top of this comment includes a clear commit message to use.

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

/index.html ( diff )
/interaction.html ( diff )
/interactive-elements.html ( diff )
/popover.html ( diff )

First commit is pulled from whatwg#10157

domenic · 2024-11-01T08:14:59Z

This is exciting! Unfortunately I am going OOO for a week starting ~now, so won't get a chance to review too soon. Hopefully others will be able to help with some reviews, but I would like to get a chance to carefully review the close watcher integration, etc. before this lands.

Would you mind commenting on what approach you took to the mutability of the closedby attribute? We discussed that a bit in #9373, and I think we came up with a tentative proposal, but I'm not sure it was battle-tested.

keithamus · 2024-11-01T12:03:59Z

Would you mind commenting on what approach you took to the mutability of the closedby attribute? We discussed that a bit in #9373, and I think we came up with a tentative proposal, but I'm not sure it was battle-tested.

Looks like CloseWatchers get a mutable enabled value, which is toggled whenever closedby is set to the applicable values - when false it skips the events and returns early. IMO this seems to nicely side-skirt the stacking issues around mutation of the attribute without adding lots of complexity in either the consuming elements and/or having some messy algorithms to insert mid-way into a stack.

keithamus

This looks great to me!

source

mfreed7 · 2024-11-01T16:07:01Z

This is exciting! Unfortunately I am going OOO for a week starting ~now, so won't get a chance to review too soon. Hopefully others will be able to help with some reviews, but I would like to get a chance to carefully review the close watcher integration, etc. before this lands.

That's totally fine - no rush. I did this one in the opposite order that I usually do: spec first, prototype after. So I'm moving on to prototype it now, which might reveal other flaws. But I thought since @lukewarlow had gotten the spec into such decent shape, that I'd clean it up and open the PR in case folks saw other flaws there that I could address in the prototype.

Would you mind commenting on what approach you took to the mutability of the closedby attribute? We discussed that a bit in #9373, and I think we came up with a tentative proposal, but I'm not sure it was battle-tested.

As @keithamus said, I just kept what @lukewarlow did in the original PR, and used a new enabled state on CloseWatcher. I haven't implemented that yet, but it seems reasonably straightforward. But let me know if you see any flaws.

annevk · 2024-11-05T09:53:34Z

source

-  <p class="XXX"><span>Light dismiss open popovers</span> will be called by the <a
-  href="https://github.com/w3c/pointerevents/pull/460">Pointer Events spec</a> when the user clicks
-  or touches anywhere on the page.</p>
-


This should be restored.

You'd prefer it to exist in two places? (I moved it up next to the (one) place where the pointer events spec will call into, at <dfn>run light dismiss activities</dfn>.)

I can add it here also, just double-checking.

No that works. Thanks!

annevk · 2024-11-05T09:59:35Z

source

+  <p>The <code data-x="attr-dialog-closedby">closedby</code> attribute's <i data-x="invalid value
+  default">invalid value default</i> and <i data-x="missing value default">missing value
+  default</i> are both the <dfn data-x="attr-closedby-auto-state">Auto</dfn> state. The <span
+  data-x="attr-closedby-auto-state">auto</span> state matches <span
+  data-x="attr-closedby-closerequest-state">closerequest</span> when the element is modal;
+  otherwise <span data-x="attr-closedby-none-state">none</span>.</p>


There's very inconsistent spelling of states here. They should match the capitalization and words of how they are introduced. And should typically be followed by the word state (though that's not linked).

Also, perhaps the statement of fact is better as a note?

There's very inconsistent spelling of states here. They should match the capitalization and words of how they are introduced. And should typically be followed by the word state (though that's not linked).

Yep, I agree. I fixed them all up, I think. Please let me know if you see any others I missed. All are now lowercase.

Also, perhaps the statement of fact is better as a note?

Sorry - can you help me understand this? Which "statement of fact"?

This CL puts the feature flag in place, adds (flag guarded) closedBy and requestClose() methods to <dialog>, connects the pointer events handling to a new dialog light dismiss method, and adds a basic set of tests. None of the actual functionality is here yet, this is just a shell. Subsequent CLs will flesh out the behavior. See spec PR for details: whatwg/html#10737 Here's the chromestatus: https://chromestatus.com/feature/5097714453577728 Bug: 376516550 Change-Id: I3727ca21476a2a3340fd18597970395d64ef7176

This CL puts the feature flag in place, adds (flag guarded) closedBy and requestClose() methods to <dialog>, connects the pointer events handling to a new dialog light dismiss method, and adds a basic set of tests. None of the actual functionality is here yet, this is just a shell. Subsequent CLs will flesh out the behavior. See spec PR for details: whatwg/html#10737 Here's the chromestatus: https://chromestatus.com/feature/5097714453577728 Bug: 376516550 Change-Id: I3727ca21476a2a3340fd18597970395d64ef7176 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5985491 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1378633}

This implements reflection of `closedBy` including the "limited to known values" behavior. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iddefd573fe19fd39f4b3aebe13390235fea969b9

This implements reflection of `closedBy` including the "limited to known values" behavior. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iddefd573fe19fd39f4b3aebe13390235fea969b9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5988652 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1379228}

This enables `closedby=none` to *stop* the dialog from closing when the ESC key (or other close signal) is received. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: I0bf7fc7a50acaffb89e183fe6e19f411de4da576 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5990171 Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1379279}

…ht dismiss [1/N], a=testonly Automatic update from web-platform-tests Implement basic structure for dialog light dismiss [1/N] This CL puts the feature flag in place, adds (flag guarded) closedBy and requestClose() methods to <dialog>, connects the pointer events handling to a new dialog light dismiss method, and adds a basic set of tests. None of the actual functionality is here yet, this is just a shell. Subsequent CLs will flesh out the behavior. See spec PR for details: whatwg/html#10737 Here's the chromestatus: https://chromestatus.com/feature/5097714453577728 Bug: 376516550 Change-Id: I3727ca21476a2a3340fd18597970395d64ef7176 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5985491 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1378633} -- wpt-commits: 1d5037cc3ff4524fd5d9f1a461afd20aebbb0839 wpt-pr: 48976

…alog closedBy [2/N], a=testonly Automatic update from web-platform-tests Add attribute reflection behavior for dialog closedBy [2/N] This implements reflection of `closedBy` including the "limited to known values" behavior. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iddefd573fe19fd39f4b3aebe13390235fea969b9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5988652 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1379228} -- wpt-commits: 28946b88d5b2e037bb2506ae4984e8725ba5560b wpt-pr: 48989

This implements dialog.requestClose() and adds a test. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iaac3d89c28844d2b54ff5b1a7b68dc356d1fd172

annevk · 2024-11-08T14:37:15Z

source

+  default</i> are both the <dfn data-x="attr-closedby-auto-state">auto</dfn> state. The <span
+  data-x="attr-closedby-auto-state">auto</span> state matches <span
+  data-x="attr-closedby-closerequest-state">close request</span> state when the element is modal;
+  otherwise the <span data-x="attr-closedby-none-state">none</span> state.</p>


This statement about the auto state is better done as a note I think. At least presumably the actual requirements that lead to this are elsewhere.

annevk · 2024-11-08T14:39:54Z

source

+     data-x="attr-closedby-any-state">Any</span> or <span
+     data-x="attr-closedby-closerequest-state">Close Request</span>; otherwise false.</p></li>


You didn't change the casing consistently it seems. I have to say I actually prefer this casing as it makes it clearer what the states are relative to the values.

annevk · 2024-11-08T14:43:16Z

source

+   return.</p></li>
+
+   <li><p>If <var>oldValue</var> and <var>value</var> are in the same <span
+   data-x="attr-dialog-closedby">state</span>, then return.</p></li>


This reads a little weird. Could you file a follow-up issue to improve this as it's not immediately clear to me what the correct wording would be and it does seem like we want to be able to do this.

annevk · 2024-11-08T14:45:03Z

source

+   <li><p><span>Assert</span>: <var>element</var>'s <span data-x="dialog-close-watcher">close
+   watcher</span> is not null.</p></li>
+
+   <li><p>If <var>value</var> is in the <span data-x="attr-closedby-any-state">Any</span> state,


Here I think we can talk about the state of element's closedby attribute, no?

annevk · 2024-11-08T14:46:06Z

source

@@ -62046,7 +62167,134 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
 &lt;/dialog></code></pre>
  </div>

+  <h4><dfn>Dialog light dismiss</dfn></h4>
+
+  <p class="note">"Light dismiss" means that clicking outside of a dialog whose <code


dialog element* (also needs code)

annevk · 2024-11-08T14:46:43Z

source

+
+   <li><p>Let <var>document</var> be <var>target</var>'s <span>node document</span>.</p></li>
+
+   <li><p>If <var>document</var>'s <span>light dismissible dialog list</span> is empty, then


xref is empty

annevk · 2024-11-08T14:52:12Z

source

+   <li><p>Let <var>dialogs</var> be « ».</p></li>
+
+   <li><p><span data-x="list iterate">For each</span> <code>Element</code> <var>element</var> in
+   <var>document</var>: if <var>element</var> is a <code data-x="HTMLDialogElement">dialog element</code>,


Order? I'm also not sure if "element in document" works. "element in document's descendants" maybe?

annevk · 2024-11-08T14:53:34Z

source

+     return <var>currentNode</var>.</p></li>
+
+     <li><p>Set <var>currentNode</var> to <var>currentNode</var>'s parent in the <span>flat
+     tree</span>.</p></li>


Should this use the flat tree or the composed tree?

annevk · 2024-11-08T14:54:33Z

source

-  <p class="XXX"><span>Light dismiss open popovers</span> will be called by the <a
-  href="https://github.com/w3c/pointerevents/pull/460">Pointer Events spec</a> when the user clicks
-  or touches anywhere on the page.</p>
-


No that works. Thanks!

This implements dialog.requestClose() and adds a test. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iaac3d89c28844d2b54ff5b1a7b68dc356d1fd172

This implements dialog.requestClose() and adds a test. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iaac3d89c28844d2b54ff5b1a7b68dc356d1fd172 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5991017 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1380450}

annevk

I also just noticed you forgot to update the indexes. There's a checklist at the top of source for what to change when you add a new attribute.

annevk · 2024-11-08T17:34:17Z

source

+     <th>Brief description
+   <tbody>
+    <tr>
+     <td><dfn attr-value for="dialog/closedby"><code data-x="attr-closedby-any">any</code></dfn>


This should be attr-dialog-closedby- here and elsewhere.

This implements dialog.requestClose() and adds a test. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iaac3d89c28844d2b54ff5b1a7b68dc356d1fd172 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5991017 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1380450}

…ht dismiss [1/N], a=testonly Automatic update from web-platform-tests Implement basic structure for dialog light dismiss [1/N] This CL puts the feature flag in place, adds (flag guarded) closedBy and requestClose() methods to <dialog>, connects the pointer events handling to a new dialog light dismiss method, and adds a basic set of tests. None of the actual functionality is here yet, this is just a shell. Subsequent CLs will flesh out the behavior. See spec PR for details: whatwg/html#10737 Here's the chromestatus: https://chromestatus.com/feature/5097714453577728 Bug: 376516550 Change-Id: I3727ca21476a2a3340fd18597970395d64ef7176 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5985491 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1378633} -- wpt-commits: 1d5037cc3ff4524fd5d9f1a461afd20aebbb0839 wpt-pr: 48976

…alog closedBy [2/N], a=testonly Automatic update from web-platform-tests Add attribute reflection behavior for dialog closedBy [2/N] This implements reflection of `closedBy` including the "limited to known values" behavior. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iddefd573fe19fd39f4b3aebe13390235fea969b9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5988652 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1379228} -- wpt-commits: 28946b88d5b2e037bb2506ae4984e8725ba5560b wpt-pr: 48989

…=testonly Automatic update from web-platform-tests Implement dialog.requestClose() [4/N] This implements dialog.requestClose() and adds a test. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iaac3d89c28844d2b54ff5b1a7b68dc356d1fd172 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5991017 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1380450} -- wpt-commits: 97a34c26ea3a3bfeacc0f40fc733d464c3f4d377 wpt-pr: 49050

mfreed7 added 4 commits October 31, 2024 10:49

Add closedby attribute to <dialog>

ad9d00f

First commit is pulled from whatwg#10157

Small tweaks

b058a2c

Add requestClose()

34dd8cf

Fix tag nesting

a1f962d

keithamus reviewed Nov 1, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

Move note out of OL

ef73d72

mfreed7 mentioned this pull request Nov 1, 2024

Support disabling CloseWatcher integration in <dialog> #10592

Open

annevk added addition/proposal New features or enhancements needs implementer interest Moving the issue forward requires implementers to express interest needs tests Moving the issue forward requires someone to write tests topic: dialog The <dialog> element labels Nov 5, 2024

annevk reviewed Nov 5, 2024

View reviewed changes

mfreed7 mentioned this pull request Nov 5, 2024

Add light dismiss functionality to <dialog> #9373

Open

chromium-wpt-export-bot mentioned this pull request Nov 5, 2024

Implement basic structure for dialog light dismiss [1/N] web-platform-tests/wpt#48976

Merged

chromium-wpt-export-bot mentioned this pull request Nov 5, 2024

Add attribute reflection behavior for dialog closedBy [2/N] web-platform-tests/wpt#48989

Merged

mfreed7 added 2 commits November 7, 2024 17:34

Address comments

cc9598c

Check for open attribute

c458c23

chromium-wpt-export-bot mentioned this pull request Nov 8, 2024

Implement dialog.requestClose() [4/N] web-platform-tests/wpt#49050

Merged

annevk reviewed Nov 8, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dialog light dismiss behavior #10737

Add dialog light dismiss behavior #10737

mfreed7 commented Oct 31, 2024 •

edited by pr-preview bot

Loading

domenic commented Nov 1, 2024

keithamus commented Nov 1, 2024

keithamus left a comment

mfreed7 commented Nov 1, 2024

annevk Nov 5, 2024

mfreed7 Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 5, 2024

annevk Nov 5, 2024

mfreed7 Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk left a comment

annevk Nov 8, 2024

		data-x="attr-closedby-any-state">Any</span> or <span
		data-x="attr-closedby-closerequest-state">Close Request</span>; otherwise false.</p></li>


		<li><p>Let <var>document</var> be <var>target</var>'s <span>node document</span>.</p></li>

		<li><p>If <var>document</var>'s <span>light dismissible dialog list</span> is empty, then

Add dialog light dismiss behavior #10737

Are you sure you want to change the base?

Add dialog light dismiss behavior #10737

Conversation

mfreed7 commented Oct 31, 2024 • edited by pr-preview bot Loading

domenic commented Nov 1, 2024

keithamus commented Nov 1, 2024

keithamus left a comment

Choose a reason for hiding this comment

mfreed7 commented Nov 1, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annevk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mfreed7 commented Oct 31, 2024 •

edited by pr-preview bot

Loading