The document discusses rendering dropdown menus in the content process. It notes there are performance, styling, and event behavior issues with the current e10s-select approach. An alternative approach called content-select would render the dropdown as normal content in the content process to achieve better performance, stronger style support, and more accurate events without these issues. It provides an example of complex styling that can be applied to options in the dropdown.

1. content-select
rendering the dropdown menu in the content process
Tommy Kuo

2. e10s-select (current)
Rendered by widget

3. e10s-select (current)
Rendered by widget
Content
Parent IPC

4. Issues with e10s-select
• Performance issues (Bug 1118086, Bug 1419800)
• Styling issues (Bug 1409613)
• Mess-up event behavior (Bug 1409645)
• Others (Bug 1154677)

5. content-select
Rendered as a normal content

6. content-select
{
-moz-top-layer: top;
position: absolute;
}

7. Advantages with content-select
• High performance
• Powerful support on styles
• More accurate event behavior

8. iframe issue

9. Demo HTML
<style>
option:nth-child(even) {
background: yellow;
color: red;
font-size: 2em;
text-decoration: line-through;
text-align: right;
}
</style>
<span>There are 3000 options in </span>
<select>
<option>0</option>…<option>2999</option>
</select>

10. https://youtu.be/Hzxnn9sGnp4