Intent to Prototype: HTMLPopupElement - <popup>

[Mason Freed]

Contact emails

mason...@chromium.org, melanie....@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]

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]

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]

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]

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>.

TAG review filed.

 

 

Bye,
   Rego

[Yoav Weiss]

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.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAM%3DNeDg-DZigH%2BWVTGoBT2xqe4JhNYZgZinGuiUJAEOvZCfPhw%40mail.gmail.com.

[Mason Freed]

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]

Very excited about this one!

- Una

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAM%3DNeDhHyWB_wW%3D6E_8OSc%2BgkJqD1JOaesr%2BqLkTSzy8V-JQxg%40mail.gmail.com.

[Noam Rosenthal]

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. 

[Mason Freed]

I'm sending a PSA/update to this (old!) intent to prototype thread. Based on some conversations that we've been having in OpenUI about the shape of the popup API, we've decided to modify the approach. The prior I2P described a new <popup> element. I've updated the chromestatus entry and re-wrote the explainer to describe a `popup` content attribute. This new idea avoids some serious accessibility issues with <popup>, and also enables a more powerful API that can be used for more applications. I plan to implement the new API under a new flag, leaving the HTMLPopupElement flag around in the meantime, because the <selectmenu> prototype depends on that implementation. Once I've migrated <selectmenu> to the new API, I'll remove the old <popup> element implementation.

Let me know if there are concerns with the idea or the approach.

Thanks,

Mason