Making 'custom colour dialog' in Firefox

Question

Hello, I am making a Firefox extension and would like to give my users more control over the look and feel of things. In my extension's preference pane, I would like to achieve something close to this:-

CodeProject: Custom Color Dialog Box

I know I can achieve this by making lots of different divs for as many colours as possible and adding event listeners to see if the user has selected a colour, but that would be too much work and would likely consume too much time. I am wondering if there's an easier way to do this since I guess there must have been someone who have done this before. (Through an XPCOM component maybe?)

Thank you in advance! =)

Answer 1

For the swatches section I would make a little <table> with a unique event handler using event bubbling to figure out which swatch was clicked.

For the custom color chooser, I would place a fixed background image, read the cursor X and Y relative to this image and figure out which color is under the cursor according to X = Hue, Y = Saturation.

For Luminosity, you can do the same with a different technique: a background color (which you change when hue changes) and a graduated transparent overlay on top, from fully opaque to fully transparent. On X axis you should then have Luminosity.

You can convert HLS to RGB on the fly (http://wiki.beyondunreal.com/Legacy:HLS_To_RGB_Conversion)

The rest should be simple enough. Let me know if you need more details :)

Answer 2

Perhaps some of these could work:

http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx

http://developer.yahoo.com/yui/colorpicker/

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_ColorPicker.html

http://moorainbow.woolly-sheep.net