Add chevron to Safari and Firefox dropdowns

[miguelsolorio]

Related #83556
Fixes #83756

This adds the chevron to all of our dropdowns in Safari/Firefox:

[bpasero]

Moving to November, as I think this is not too critical for now.

Looks very cool! Shouldn't we do this simply for Chrome/Electron as well then?

My only other comment would be that I would rather not have workbench-contribution specific CSS rules (like debug) in the core. Rather move them to debug or their respective area.

[miguelsolorio]

@bpasero moved the styles out to their respective areas (Debug and Panel)

[bpasero]

@misolori any objections using this on Chrome as well?

[miguelsolorio]

@bpasero sorry I missed that part about your comment, I don't see any objections and it makes sense to make it consistent across all of the platforms. I'll update this PR to reflect this.

[bpasero]

Cool.

[bpasero]

@misolori I see a couple of issues:

• you cannot click the arrow to open the dropdown anymore

• the arrow overflows with the content
  

• there is some cheese in the panel (if used in Chrome)

[bpasero]

@misolori I pushed 863defb into your branch to make it a general thing, feel free to revert if you think that does not work

[miguelsolorio]

I've updated the styles so it cleans it up in all browsers/platforms. I also had to set the appearance to none in order to remove the browser dropdown arrows.

FireFox

Chrome

Safari

OSS

[miguelsolorio]

you cannot click the arrow to open the dropdown anymore

I need to look into this more, it seems like in the debug dropdown the selection input doesn't extend out to the icon.

[bpasero]

Ok I can review once you figured that out if possible.

[miguelsolorio]

@bpasero dropdown chevrons should now be clickable

[bpasero]

LGTM with some feedback. Also, I did only test macOS, can you check Windows and Linux too?

[miguelsolorio]

✅ Windows (OSS, Chrome, Firefox)
✅ Linux (OSS, Chrome, Firefox)