Allow top layer elements to be nested within popovers #10116
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes whatwg#9998 Implemented in chromium here: https://chromium-review.googlesource.com/c/chromium/src/+/5229300
josepharhar
added a commit
to josepharhar/fullscreen
that referenced
this pull request
Jan 31, 2024
Without this patch, the fullscreening an element inside an open popover will make the fullscreen element display:none. Issue: whatwg/html#9998 Corresponding HTML PR: whatwg/html#10116
5 tasks
mfreed7
approved these changes
Feb 1, 2024
|
Looks like |
domenic
requested changes
Feb 6, 2024
moz-v2v-gh
pushed a commit
to mozilla/gecko-dev
that referenced
this pull request
Feb 6, 2024
…ent. r=smaug
Given some markup like:
```html
<div id=popover popover>
<button id="openDialog">Open Dialog</button>
<dialog id=dialog>
I'm a dialog!
</dialog>
</div>
<button id="openPopover">Open Popover</button>
<button>I do nothing!</button>
```
With some JS like
```js
openDialog.onclick = () => {
dialog.showModal();
}
openPopover.onclick = () => {
popover.showPopover();
}
```
Clicking the "Open Popover" button followed by the "Open Dialog" button results in both the Dialog and Popover being hidden, however the dialog will still be open as modal, rendering the whole page inert, nothing is clickable and there seems to be no way to undo this (unless you use a CloseWatcher gesture such as the Esc key - if you have one available on your device).
It is expected that the popover should not close the dialog, as it causes the invisible Modal Dialog to make the whole page inert, and it is very difficult for users (and developers) to discover how to undo this action (pressing escape).
This was reported in whatwg/html#9998, and WhatWG resolved to fix this, which in whatwg/html#10116.
Differential Revision: https://phabricator.services.mozilla.com/D200686
ErichDonGubler
pushed a commit
to ErichDonGubler/firefox
that referenced
this pull request
Feb 7, 2024
…ent. r=smaug
Given some markup like:
```html
<div id=popover popover>
<button id="openDialog">Open Dialog</button>
<dialog id=dialog>
I'm a dialog!
</dialog>
</div>
<button id="openPopover">Open Popover</button>
<button>I do nothing!</button>
```
With some JS like
```js
openDialog.onclick = () => {
dialog.showModal();
}
openPopover.onclick = () => {
popover.showPopover();
}
```
Clicking the "Open Popover" button followed by the "Open Dialog" button results in both the Dialog and Popover being hidden, however the dialog will still be open as modal, rendering the whole page inert, nothing is clickable and there seems to be no way to undo this (unless you use a CloseWatcher gesture such as the Esc key - if you have one available on your device).
It is expected that the popover should not close the dialog, as it causes the invisible Modal Dialog to make the whole page inert, and it is very difficult for users (and developers) to discover how to undo this action (pressing escape).
This was reported in whatwg/html#9998, and WhatWG resolved to fix this, which in whatwg/html#10116.
Differential Revision: https://phabricator.services.mozilla.com/D200686
gecko-dev-updater
pushed a commit
to marco-c/gecko-dev-wordified-and-comments-removed
that referenced
this pull request
Feb 8, 2024
…ent. r=smaug
Given some markup like:
```html
<div id=popover popover>
<button id="openDialog">Open Dialog</button>
<dialog id=dialog>
I'm a dialog!
</dialog>
</div>
<button id="openPopover">Open Popover</button>
<button>I do nothing!</button>
```
With some JS like
```js
openDialog.onclick = () => {
dialog.showModal();
}
openPopover.onclick = () => {
popover.showPopover();
}
```
Clicking the "Open Popover" button followed by the "Open Dialog" button results in both the Dialog and Popover being hidden, however the dialog will still be open as modal, rendering the whole page inert, nothing is clickable and there seems to be no way to undo this (unless you use a CloseWatcher gesture such as the Esc key - if you have one available on your device).
It is expected that the popover should not close the dialog, as it causes the invisible Modal Dialog to make the whole page inert, and it is very difficult for users (and developers) to discover how to undo this action (pressing escape).
This was reported in whatwg/html#9998, and WhatWG resolved to fix this, which in whatwg/html#10116.
Differential Revision: https://phabricator.services.mozilla.com/D200686
UltraBlame original commit: 52284e30cea2c52ab073310e4010161702dc92e4
gecko-dev-updater
pushed a commit
to marco-c/gecko-dev-comments-removed
that referenced
this pull request
Feb 8, 2024
…ent. r=smaug
Given some markup like:
```html
<div id=popover popover>
<button id="openDialog">Open Dialog</button>
<dialog id=dialog>
I'm a dialog!
</dialog>
</div>
<button id="openPopover">Open Popover</button>
<button>I do nothing!</button>
```
With some JS like
```js
openDialog.onclick = () => {
dialog.showModal();
}
openPopover.onclick = () => {
popover.showPopover();
}
```
Clicking the "Open Popover" button followed by the "Open Dialog" button results in both the Dialog and Popover being hidden, however the dialog will still be open as modal, rendering the whole page inert, nothing is clickable and there seems to be no way to undo this (unless you use a CloseWatcher gesture such as the Esc key - if you have one available on your device).
It is expected that the popover should not close the dialog, as it causes the invisible Modal Dialog to make the whole page inert, and it is very difficult for users (and developers) to discover how to undo this action (pressing escape).
This was reported in whatwg/html#9998, and WhatWG resolved to fix this, which in whatwg/html#10116.
Differential Revision: https://phabricator.services.mozilla.com/D200686
UltraBlame original commit: 52284e30cea2c52ab073310e4010161702dc92e4
gecko-dev-updater
pushed a commit
to marco-c/gecko-dev-wordified
that referenced
this pull request
Feb 8, 2024
…ent. r=smaug
Given some markup like:
```html
<div id=popover popover>
<button id="openDialog">Open Dialog</button>
<dialog id=dialog>
I'm a dialog!
</dialog>
</div>
<button id="openPopover">Open Popover</button>
<button>I do nothing!</button>
```
With some JS like
```js
openDialog.onclick = () => {
dialog.showModal();
}
openPopover.onclick = () => {
popover.showPopover();
}
```
Clicking the "Open Popover" button followed by the "Open Dialog" button results in both the Dialog and Popover being hidden, however the dialog will still be open as modal, rendering the whole page inert, nothing is clickable and there seems to be no way to undo this (unless you use a CloseWatcher gesture such as the Esc key - if you have one available on your device).
It is expected that the popover should not close the dialog, as it causes the invisible Modal Dialog to make the whole page inert, and it is very difficult for users (and developers) to discover how to undo this action (pressing escape).
This was reported in whatwg/html#9998, and WhatWG resolved to fix this, which in whatwg/html#10116.
Differential Revision: https://phabricator.services.mozilla.com/D200686
UltraBlame original commit: 52284e30cea2c52ab073310e4010161702dc92e4
|
FWIW this is now merged in Gecko: https://phabricator.services.mozilla.com/D200686. |
done |
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Feb 10, 2024
Chromestatus: https://chromestatus.com/feature/5149353645965312 Spec PRs: whatwg/html#10116 whatwg/fullscreen#237 I2S: {waiting for spec to land} Fixed: 1520938 Change-Id: I04e5f217155658907988ed0a0557944dbffbf6f2
mfreed7
approved these changes
Mar 4, 2024
|
Is anything missing from this PR? I'd like to ship this in Chrome 124, but that branches in a few weeks. I need the spec to land first. |
|
Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=269928 |
domenic
approved these changes
Mar 5, 2024
Nice, thanks! @josepharhar, mind updating the OP checkboxes? |
keithamus
added a commit
to keithamus/WebKit
that referenced
this pull request
Mar 11, 2024
https://bugs.webkit.org/show_bug.cgi?id=269928 Reviewed by NOBODY (OOPS!). This implements the changes to the spec as defined by whatwg/html#10116 * Source/WebCore/dom/Element.cpp: (WebCore::Element::topmostPopoverAncestor): * Source/WebCore/dom/Element.h: * Source/WebCore/dom/FullscreenManager.cpp: (WebCore::FullscreenManager::willEnterFullscreen): * Source/WebCore/html/HTMLDialogElement.cpp: (WebCore::HTMLDialogElement::show): (WebCore::HTMLDialogElement::showModal): * Source/WebCore/html/HTMLElement.cpp: (WebCore::HTMLElement::showPopover): (WebCore::topmostPopoverAncestor): Deleted.
|
@domenic I updated it, we can merge now |
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Mar 26, 2024
Chromestatus: https://chromestatus.com/feature/5149353645965312 Spec PRs: whatwg/html#10116 whatwg/fullscreen#237 I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/3vIL56MTgvw/m/W4hcWMblBAAJ Fixed: 1520938 Change-Id: I04e5f217155658907988ed0a0557944dbffbf6f2
aarongable
pushed a commit
to chromium/chromium
that referenced
this pull request
Mar 27, 2024
Chromestatus: https://chromestatus.com/feature/5149353645965312 Spec PRs: whatwg/html#10116 whatwg/fullscreen#237 I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/3vIL56MTgvw/m/W4hcWMblBAAJ Fixed: 1520938 Change-Id: I04e5f217155658907988ed0a0557944dbffbf6f2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5255819 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1279321}
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Mar 27, 2024
Chromestatus: https://chromestatus.com/feature/5149353645965312 Spec PRs: whatwg/html#10116 whatwg/fullscreen#237 I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/3vIL56MTgvw/m/W4hcWMblBAAJ Fixed: 1520938 Change-Id: I04e5f217155658907988ed0a0557944dbffbf6f2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5255819 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1279321}
chromium-wpt-export-bot
pushed a commit
to web-platform-tests/wpt
that referenced
this pull request
Mar 28, 2024
Chromestatus: https://chromestatus.com/feature/5149353645965312 Spec PRs: whatwg/html#10116 whatwg/fullscreen#237 I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/3vIL56MTgvw/m/W4hcWMblBAAJ Fixed: 1520938 Change-Id: I04e5f217155658907988ed0a0557944dbffbf6f2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5255819 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1279321}
5 tasks
moz-v2v-gh
pushed a commit
to mozilla/gecko-dev
that referenced
this pull request
Apr 8, 2024
Automatic update from web-platform-tests Ship NestedTopLayerSupport Chromestatus: https://chromestatus.com/feature/5149353645965312 Spec PRs: whatwg/html#10116 whatwg/fullscreen#237 I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/3vIL56MTgvw/m/W4hcWMblBAAJ Fixed: 1520938 Change-Id: I04e5f217155658907988ed0a0557944dbffbf6f2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5255819 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1279321} -- wpt-commits: 5317488d13e2990de35a96e8fc3bf74fa7a2987b wpt-pr: 44339
ErichDonGubler
pushed a commit
to ErichDonGubler/firefox
that referenced
this pull request
Apr 15, 2024
Automatic update from web-platform-tests Ship NestedTopLayerSupport Chromestatus: https://chromestatus.com/feature/5149353645965312 Spec PRs: whatwg/html#10116 whatwg/fullscreen#237 I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/3vIL56MTgvw/m/W4hcWMblBAAJ Fixed: 1520938 Change-Id: I04e5f217155658907988ed0a0557944dbffbf6f2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5255819 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1279321} -- wpt-commits: 5317488d13e2990de35a96e8fc3bf74fa7a2987b wpt-pr: 44339
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This patch makes top layer elements, including the dialog element, to be nested inside of an open popover by not closing the popover when the new top layer element is opened. Without this patch, opening a modal dialog inside of a popover will make the page inert and make the dialog invisible. A separate PR for fullscreen will be made: whatwg/fullscreen#237
Fixes #9998
Implemented in chromium here:
https://chromium-review.googlesource.com/c/chromium/src/+/5229300
(See WHATWG Working Mode: Changes for more details.)
/interactive-elements.html ( diff )
/popover.html ( diff )