Open Bug 1510036 Opened 4 years ago Updated 4 years ago

Color Picker - Horizontal color palette does not work properly


(DevTools :: Inspector, defect, P3)

65 Branch


(Not tracked)


(Reporter: paul.boiciuc, Unassigned)



(1 file)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0
Build ID: 20181126100057


1. Launch Firefox and navigate to a random page (e.g.
2. Enable the element inspector (optional: Choose a Flex element and enable the highlighter)
3. Navigate to the Flexbox Inspector or Grid section and select the color picker.
4. Change the color using the horizontal palette bar by dragging the selector near the white end.


The color of the icon that reflects the color selection glitches when the selector approaches the white end. The user can even select a "bright" color if he finds the proper spot on the white end. 

I have attached a short video for better understanding.

Note: While using the dark mode for the inspector, the color of the icon is "transparent" therefor black when the user reaches the white end of the palette, rather than white and this is a little bit confusing.


The user can change the color using the horizontal palette without any issues or UI glitches ( as it does on Release or DevEdition builds where I could not reproduce the same behavior).

*If this is not the proper component, please feel free to change it to a more appropriate one.
This seems to happen with all colorpickers in devtools, and I think is not related to spectrum (the underlying colorpicker lib we use), but rather to some color conversion code in /devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js (perhaps the _toDefaultType function).
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.