1510036 - Color Picker - Horizontal color palette does not work properly

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Paul_B]

Attachment: horizontal color palette.mp4

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

STR:

1. Launch Firefox and navigate to a random page (e.g. nytimes.com).
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.


AR:

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.

ER:

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.

Comment 1

[Patrick Brosset <:pbro>]

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).