-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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.
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
Revamp the popover target attributes #8962
Conversation
9e56fd0
to
e4bb54f
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for speccing this!
Thanks, @domenic care to rubberstamp/review? |
This comment was marked as resolved.
This comment was marked as resolved.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me. One correction.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"limited to only known values" is the biggest question here. I thought that was best practice these days.
source
Outdated
<li><p>An invoking element (e.g. a <code>button</code>) has a <code | ||
data-x="attr-popovertarget">popovertarget</code> attribute pointing to a popover. In this case, | ||
the popover is the "child", and the DOM-contained popover of the invoking element is the | ||
"parent". The invoker must be in a popover and reference an open popover.</p></li> | ||
</ol> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not necessarily related to this PR, but I find this note confusing in how it conflates the concepts of "ancestor" and "parent". Might be good to drive-by fix.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I will push some nits, but I'm not sure how to fix this properly. Maybe you or @josepharhar could push a fixup?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure if the "parent" is really supposed to be the topmost ancestor in this note, I think it's more generally describing how the tree of popovers is created by describing the relationships between two adjacent popovers in the popover tree.
@mfreed7 might have additional thoughts
4075b53
to
2f0b55e
Compare
Instead of popoverhidetarget, popovershowtarget, and popovertoggletarget, we will now have popovertarget and popovertargetaction. The former for targeting an element and the latter for determining what to do with the target. Tests: web-platform-tests/wpt#38701. Fixes #8894.
610363f
to
e66faab
Compare
@mfreed7 @josepharhar @domenic ping. It would be good to get this in given that the specification is out-of-date with respect to implementations. |
https://bugs.webkit.org/show_bug.cgi?id=252078 rdar://105612966 Reviewed by Chris Dumez. This adds support for the popoverTargetElement & popoverTargetAction IDL attributes, which map to popovertarget & popovertargetaction HTML attributes. Spec change is at whatwg/html#8962 , WPT have already been updated by a Chromium commit to match. * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-focus-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-focus-2-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-invoking-attribute-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-light-dismiss-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-stacking-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-target-element-disabled-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-top-layer-combinations-expected.txt: * LayoutTests/platform/glib/imported/w3c/web-platform-tests/html/semantics/popovers/popover-focus-expected.txt: * LayoutTests/platform/glib/imported/w3c/web-platform-tests/html/semantics/popovers/popover-focus-2-expected.txt: * LayoutTests/platform/glib/imported/w3c/web-platform-tests/html/semantics/popovers/popover-light-dismiss-expected.txt: * LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/semantics/popovers/popover-light-dismiss-expected.txt: * LayoutTests/platform/ios/TestExpectations: Rebaseline tests with progressions. Remaining failures are either due to these unimplemented parts: - invoker relationship removal handling (not standardized?) - popover focusing steps (https://bugs.webkit.org/show_bug.cgi?id=253231) - anchor attribute (not standardized) * Source/WebCore/CMakeLists.txt: * Source/WebCore/DerivedSources-input.xcfilelist: * Source/WebCore/DerivedSources-output.xcfilelist: * Source/WebCore/DerivedSources.make: Update list of built files. * Source/WebCore/dom/Document.cpp: (WebCore::Document::handlePopoverLightDismiss): Check for invokers as described in algorithm in: https://html.spec.whatwg.org/#topmost-clicked-popover * Source/WebCore/accessibility/AXObjectCache.cpp: (WebCore::AXObjectCache::addRelations): * Source/WebCore/accessibility/AccessibilityObject.cpp: * Source/WebCore/dom/Element.cpp: (WebCore::Element::isElementReflectionAttribute): (WebCore::Element::isElementsArrayReflectionAttribute): (WebCore::Element::attributeChanged): (WebCore::Element::getElementAttribute const): (WebCore::Element::setElementAttribute): (WebCore::Element::getElementsArrayAttribute const): (WebCore::Element::setElementsArrayAttribute): * Source/WebCore/dom/Element.h: Add IDL element reflection support for popovertarget attribute. Simplified settings checks. * Source/WebCore/dom/PopoverData.h: (WebCore::PopoverData::invoker const): (WebCore::PopoverData::setInvoker): Store invoker in popover data. * Source/WebCore/html/HTMLAttributeNames.in: Define popovertargetAttr & popovertargetActionAttr. * Source/WebCore/html/HTMLButtonElement.cpp: (WebCore::HTMLButtonElement::defaultEventHandler): Invoke popover activation behavior. * Source/WebCore/html/HTMLButtonElement.idl: Use PopoverInvokerElement mixin. * Source/WebCore/html/HTMLElement.cpp: (WebCore::topmostPopoverAncestor): Check for invokers as defined in the spec: https://html.spec.whatwg.org/#topmost-popover-ancestor (WebCore::HTMLElement::hidePopoverInternal): Clear invoker as defined in the spec. * Source/WebCore/html/HTMLFormControlElement.cpp: (WebCore::toggleAtom): (WebCore::showAtom): (WebCore::hideAtom): (WebCore::HTMLFormControlElement::popoverTargetElement const): Implement https://html.spec.whatwg.org/#popover-target-element (WebCore::HTMLFormControlElement::popoverTargetAction const): Implement attribute reflection. (WebCore::HTMLFormControlElement::handlePopoverTargetAction const): Implement activation behavior: https://html.spec.whatwg.org/#popover-target-attribute-activation-behavior * Source/WebCore/html/HTMLFormControlElement.h: (WebCore::HTMLFormControlElement::setPopoverTargetAction): Implement attribute reflection. * Source/WebCore/html/HTMLInputElement.cpp: (WebCore::HTMLInputElement::defaultEventHandler): Invoke popover activation behavior. * Source/WebCore/html/HTMLInputElement.idl: Use PopoverInvokerElement mixin. * Source/WebCore/html/PopoverInvokerElement.idl: Added. Canonical link: https://commits.webkit.org/261346@main
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM with nits
Instead of popoverhidetarget, popovershowtarget, and popovertoggletarget, we will now have popovertarget and popovertargetaction. The former for targeting an element and the latter for determining what to do with the target.
Tests: web-platform-tests/wpt#38701.
Fixes #8894.
(See WHATWG Working Mode: Changes for more details.)
/form-elements.html ( diff )
/indices.html ( diff )
/input.html ( diff )
/popover.html ( diff )