Color picker improvements

[LaCuneta]

The integration of new color picker has some improvements we've already identified. If any of these wind up being bigger issues, we can split them out of here to handle separately.

• Publish the color picker to the npm registry to consume as a normal package here. Alternatively, change it to be a git submodule if we decide that's easier.
• The color picker dialog should have a "Close/X" button at the top that raises a cancel event...
• ...and the dialog should close when hitting ESC.
• The white title bar of the color picker is barely distinguishable from the white background behind it
• The color picker dialog sizing is clunky. It can take up too much screen space when opened so the OK and Cancel buttons aren't visible.
• The dialog had scroll bars in both directions (it should have none)
• When it has a scroll bar, it overlaps with the "resize grabber" in the bottom-right in an aesthetically displeasing way
• You can use said grabber to made the dialog unusably small. Maybe just give it a min size?
• We're parsing the value returned by the color picker to determine its type; it seems like the color picker can pass back a flag identifying which type of color was chosen.

[TheBizzle]

In doing some testing with c288c28 rebased onto 9eafa81:

the dialog should close when hitting ESC.

Despite c288c28, this still seems buggy. If I press Esc right away, yes, it works. But if I click from "Simple" to "Advanced" (or vice versa), Esc no longer has an effect.

Which is maybe covered by Omar's commit submessage: "Doesn't work if iframe is focused"

The white title bar of the color picker is barely distinguishable from the white background behind it

The situation is better now.

Issues I reported elsewhere by saying:

the invisibility thing [...] that's bug #1.

That's fixed.

Bug #2 is that the color picker for the text should have alpha enabled, just like the one for the background color currently does.

Fixed.

Bug #3 is that, when you try to click and drag the "Edit" dialog for the invisi-text Note widgets, the dialogs cannot be moved.

Omar says that he can't reproduce it, but it's still happening reliably for me on Firefox.

It also seems like, after opening a color picker, Esc is no longer capable of closing any "Edit" dialogs.

[omargfh]

• Publish the color picker to the npm registry to consume as a normal package here. Alternatively, change it to be a git submodule if we decide that's easier.
  Used a submodule since it doesn't have an initializer.

Submodule: https://github.com/NetLogo/ColorPicker/tree/build
Deploy script: https://github.com/NetLogo/ColorPicker/blob/vite/deploy.js (run npm run deploy)
Commit: 6d8f260

Despite c288c28, this still seems buggy. If I press Esc right away, yes, it works. But if I click from "Simple" to "Advanced" (or vice versa), Esc no longer has an effect.

It also seems like, after opening a color picker, Esc is no longer capable of closing any "Edit" dialogs.

Fixed, fixed and fixed. The color picker now fires a cancel event from the iframe when Esc is pressed in iframe context. Teardown is fixed as well in this commit.

[omargfh]

@TheBizzle

The dialog had scroll bars in both directions (it should have none)

Could not recreate this on MacOS (Chrome, Firefox) or Ubuntu (Firefox).

[omargfh]

The color picker dialog should have a "Close/X" button at the top that raises a cancel event...

Added the traffic light commit again. Seems to be working as expected on Chromium/Firefox on Ubuntu/MacOS.