From:  Markus Stange <>
Date:  07 Mar 2017 00:03:01 Hong Kong Time

Re: Form Autofill Highlight/Preview implementation for "Select"


Ah, I see, thanks for clarifying.

I think the anonymous content solution that you'll be using for <input> will also work for <select>. Only the <select>'s background is drawn by widget; the text is drawn by Gecko on top.


On Mon, Mar 6, 2017 at 1:16 AM, Luke Chang <> wrote:
Hi Markus,

Nice to meet you, too. This is Luke. I'm working on Form Autofill and can help to clarify this problem.

It's not about <menupopup>. In Form Autofill, we're going to implement a feature, which is able to programmatically change a <select> itself's background color (highlight) and the displayed text (preview) so users can preview how many data will be filled in. The challenge here is that we cannot modify any content-perceivable attribute (CSS, placeholder, etc) since we don't want data be leaked before users confirm it. This feature is very similar to Chrome's so I recorded theirs as a reference [1].

This feature also needs to apply to <input> that we intend to do it via AnonymousContent. However, we know the <select> element is rendered by widgets by default and will fallback to gecko styling only when certain styles (e.g. background-color) are set. So there are two questions for now:
  1. If we want to do preview and highlight on <select> with OS native styling, is it possible not to modify the widget code? (Modifying the widget code means we need to modify at least three OS's version, right?)
  2. If we want to use AnonymousContent on <select> as well, does that mean we can only apply it to gecko styling? If so, is there any way to force a <select> to fallback without setting CSS attributes?
It would be very helpful if you can give us some hints or correct me if I misunderstand anything above. Thanks.


2017-03-04 7:55 GMT+08:00 Markus Stange <>:
Hi Vance,

nice to meet you.

I'm not sure I've completely understood the problem, but I'll try to answer anyway.

The menu that we use for <select> menus on Mac is still a regular XUL <menupopup>, even if it looks a lot like a real native menu. The appearance comes from -moz-appearance: menupopup and -moz-appearance: menuitem, and from how those values are handled in and friends.
Menu items are highlighted if menuactive="true" is set on the <menuitem> element, the same as on the other platforms.

Does this help?


On Wed, Mar 1, 2017 at 9:43 AM, Vance Chen <> wrote:
Hi Markus,

This is Vance from Mozilla Taipei office, nice to meet you via email !

I am reaching out to you because now Taipei FE team is working on Form Autofill and there is one feature we might need to consult you.
The feature is about highlight/preview of the Form Autofill, the spec is here(page 11 and page 12). We need to support that not only for the inputs filed but for Select element as well. And for now we have no idea how to do that for Select since the select is done by Widgets. We discussed with Matt(:MattN) and he suggested us to reach out to you, so here I am :). It would be very helpful if you can shed some lights and point us to the right direction regarding how we might be able to do the highlight/preview on Select.



autofill mailing list