Fix color picker display when updating an environment color

[jgiovaresco]

We were removing the color picker to reset event handlers easily (fix #811).
It is possible to remove the listener quite easily by listening to the change event triggered when the color picker modal is closed.

There was still an issue with the 1st click on Change color. We were adding the input dynamically on the 1st click and we were having some race condition between the click and the appendChild 🤔
To fix that, I've added the input element just before the Color dropdown. Besides, now we can open the color picker modal near the dropdown by making the input element invisible.

Before

After

Closes #2647

[develohpanda]

Seems alright but I'd like to know how it was working before the Electron update or if the logic here changed recently.

[develohpanda]

I've noticed that for any reason calling await this._load(this.state.workspace) just after appending the input element to the body is fixing the display of the color picker.

I'm guessing that adding an await to something after appending the input element, is allowing some background process to complete.

I doesn't feel like forcibly updating the environment color each time we prompt for a new color is fixing the root cause.

I was able to get the same fix working by delaying the element click using setTimeout(() => el.click(), 50);, so needs further investigation to determine and fix the root cause.

Needs further investigation as always updating the environment colour is fixing a symptom and not the root cause.

[develohpanda]

Thanks for updating the description and adding in a gif. Almost there!

[develohpanda]

Nicely done 👏