Intent to Prototype: HTMLPopupElement - <popup>

961 views
Skip to first unread message

Mason Freed

unread,
Jan 21, 2021, 6:30:25 PMJan 21
to blink-dev

Contact emails

mason...@chromium.orgmelanie....@microsoft.com

Explainer


https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md

Specification

None

Summary

A new HTML element, <popup>, which can be used to build transient user interface (UI) elements that are displayed on top of all other web app UI. These include user-interactive elements like action menus, form element suggestions, content pickers, and teaching UI. This new element is similar to <dialog>, but has several important differences, including light-dismiss behavior, anchoring, and the lack of a "modal" mode.



Blink component

Blink>HTML>Popup

Motivation

When building a web application, there are many cases in which an author needs to create transient user interface (UI) elements that are displayed on top of all other web app UI. These include user-interactive elements like action menus, form element suggestions, content pickers, teaching UI, and the listbox portion of a <select> control. These paradigms will be collectively referred to as popups. For many such use cases, it is incumbent upon the author to handle the popup’s styling, positioning and z-index stacking, focus management, keyboard interactions, and accessibility semantics. Because no platform-native solutions exist to comfortably handle all these use cases, individual authors and framework developers must continuously re-write the same classes of controls. This results in duplicative work for the web development community, and inconsistent experiences for users of these web applications. The web platform can be extended such that authors can get popup interactions and styling “for free”, but have enough flexibility to support their individual use cases.



Initial public proposal

None

TAG review

None

TAG review status

Pending

Risks



Interoperability and Compatibility

None



Gecko: No signal

Edge: No signal

WebKit: No signal

Web developers: No signals


Is this feature fully tested by web-platform-tests?

Eventually.

Tracking bug

https://crbug.com/1168738

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5463833265045504

This intent message was generated by Chrome Platform Status.

Manuel Rego Casasnovas

unread,
Jan 22, 2021, 3:08:24 AMJan 22
to Mason Freed, blink-dev

Exciting work here!

On 22/01/2021 00:30, Mason Freed wrote:
>
> TAG review
>
> None

I know it's early in the process, but adding a new HTML elements looks
like something that would benefit from a TAG review.
So I'd suggest filling the TAG review now, as this usually take a while
and we could iterate on it as things evolve.

Bye,
Rego

Marijn Kruisselbrink

unread,
Jan 22, 2021, 1:33:33 PMJan 22
to Manuel Rego Casasnovas, Mason Freed, blink-dev
FWIW, I just noticed the chromestatus.com doesn't exactly make it easy to enter TAG review information at the intent to prototype stage. While it is included in the intent to prototype email it generates, for whatever reason the form doesn't let you enter information about the TAG review until you get to the Evaluate readiness to ship stage. I filed https://github.com/GoogleChrome/chromium-dashboard/issues/1147, so hopefully somebody can fix this...

 
Bye,
   Rego

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/8109c2ba-c5c1-ae74-ff1a-f083ad8f97a7%40igalia.com.

Mason Freed

unread,
Jan 22, 2021, 2:01:24 PMJan 22
to Manuel Rego Casasnovas, blink-dev
On Fri, Jan 22, 2021 at 12:08 AM Manuel Rego Casasnovas <re...@igalia.com> wrote:

Exciting work here!

I know it's early in the process, but adding a new HTML elements looks
like something that would benefit from a TAG review.
So I'd suggest filling the TAG review now, as this usually take a while
and we could iterate on it as things evolve.

Thanks Rego, that's a very good point. I had planned to file a TAG review soon, but I wanted to get the I2P out first. I will definitely follow up and get a TAG review filed for <popup>.
 
Bye,
   Rego

Mason Freed

unread,
Jan 22, 2021, 2:22:05 PMJan 22
to Manuel Rego Casasnovas, blink-dev
On Fri, Jan 22, 2021 at 11:01 AM Mason Freed <mason...@chromium.org> wrote:
Thanks Rego, that's a very good point. I had planned to file a TAG review soon, but I wanted to get the I2P out first. I will definitely follow up and get a TAG review filed for <popup>.

 

 
Bye,
   Rego

Yoav Weiss

unread,
Jan 24, 2021, 10:09:02 PMJan 24
to Mason Freed, Noam Rosenthal, Manuel Rego Casasnovas, blink-dev
Exciting work!!
+Noam Rosenthal - who presented to the WebPerf WG on the hurdles of creating such a UI in user land. Would be great to work with Wikimedia folks and other developers who have done similar things to validate the work and ensure it covers their use cases.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Mason Freed

unread,
Jan 25, 2021, 1:10:13 PMJan 25
to Yoav Weiss, Noam Rosenthal, Manuel Rego Casasnovas, blink-dev
On Sun, Jan 24, 2021 at 7:08 PM Yoav Weiss <yo...@yoav.ws> wrote:
Exciting work!!
+Noam Rosenthal - who presented to the WebPerf WG on the hurdles of creating such a UI in user land. Would be great to work with Wikimedia folks and other developers who have done similar things to validate the work and ensure it covers their use cases.

Thanks! I'd love to hear any feedback on the proposal, for sure. There are some tricky issues around the light dismiss behavior, and around animations, plus others. There is an issue list here, in case you'd like to add any questions or feedback.

Thanks,
Mason

Una Kravets

unread,
Jan 25, 2021, 3:46:49 PMJan 25
to Mason Freed, Yoav Weiss, Noam Rosenthal, Manuel Rego Casasnovas, blink-dev

Noam Rosenthal

unread,
Jan 26, 2021, 1:01:33 AMJan 26
to Mason Freed, Yoav Weiss, Manuel Rego Casasnovas, blink-dev
On Mon, Jan 25, 2021 at 8:10 PM Mason Freed <mason...@chromium.org> wrote:

On Sun, Jan 24, 2021 at 7:08 PM Yoav Weiss <yo...@yoav.ws> wrote:
Exciting work!!
+Noam Rosenthal - who presented to the WebPerf WG on the hurdles of creating such a UI in user land. Would be great to work with Wikimedia folks and other developers who have done similar things to validate the work and ensure it covers their use cases.

Thanks! I'd love to hear any feedback on the proposal, for sure. There are some tricky issues around the light dismiss behavior, and around animations, plus others. There is an issue list here, in case you'd like to add any questions or feedback.

Very exciting! Long awaited feature. I'm actively going through the list of issues to find how this would work for Wikimedia. 
Reply all
Reply to author
Forward
0 new messages