Better display of Webform fields in select list

When adding a field to a Webform, you choose the field from a select list. However this select list also lets you add other form elements that aren't fields (e.g. hidden, markup, page break, etc.).

I think it'd be easier to use, and look nicer, if the actual fields were somewhat separated from the non-fields. I'm thinking a 'disabled' select option (the unicode example from here). Here's a before and after of what it could look like:

[klonos]

We could use <optgroup>:

<optgroup label="Fields">
  <option value="date">Date</option> 
  <option value="email">E-mail</option>
  ...
</optgroup>
<optgroup label="Special items">
  <option value="fieldset">Fieldset</option> 
  <option value="grid">Grid</option>
  ...
</optgroup>

We are already using that in the User: Permission visibility condition in layouts/blocks for example: