(GitHub code colors) change syntax

[jerone]

Hi Mottie. Love your GitHub code colors userscript!

Wondering if it would be possible to add a toggle event to the color preview for changing the color syntax. I'm imagining that everything the color preview is pressed, the color syntax changes to another syntax. For example from hex to rgba, click again to hsl, etc...

[Mottie]

Hi @jerone!

What if we instead add a tooltip with all the color syntax alternatives? That'd be way easier than messing with the DOM and including syntax highlighting.

[jerone]

I should have specified; my main reason was to copy another syntax.

[Mottie]

Ahhh, ok. Let me look into it.

[Mottie]

So, I found a nice color conversion library. I was thinking it might be nice to include other colors like hwb, cmyk, etc. What do you think?

There are a bunch of other color formats, but I think that might be too much:

• hsv
• xyz
• lab
• lch
• ansi16
• ansi256
• hcg

[Mottie]

Also, if a color includes an alpha channel, it adds more definitions:

It's probably OCD of me, but I think I should include a ; after each color...

[Mottie]

I originally was using a details/summary to show the popup, but using the copy code snippet button would include all of the popup content. So now it's a button. The copy code snippet will still include the popup content if the popup is visible.

[jerone]

Awesome work, as always!

But I found two issues:

1. The tooltips won't close by itself. I have to press exactly at the same color preview to close the tooltip. I like that it will stay open, because then I can do the next issue (see 2.).
   

2. It won't allow me to select any of the conversions, so I can copy it.

Tested here: https://github.com/Mottie/GitHub-userscripts/wiki/GitHub-code-colors

It's probably OCD of me, but I think I should include a ; after each color...

:) In the CSS world yes, but it can be used at other places too. Better to leave it as it is now (without).

[Mottie]

Yeah, I didn't know how to get around closing easily. So I made sure pressing Space and Enter will toggle the popup (when focused); you can also use Tab to navigate between swatches. Pressing Esc will close all popups. Update: I've updated the script info with these details.

Text selection should now be fixed.