1445061 - [meta] Improvements to the <input type=color> implementation

Status: NEW

(Core :: Layout: Form Controls, enhancement)

Description

[Jonathan Watt [:jwatt]]

Spinning this off from bug 547004 comment 99.

Comment 1

[Chris Mills [:cmills]]

Adding ddn just in case any changes made here require docs changes.

Comment 2

[Kagami Rosylight [:saschanaz] (they/them)]

Can we use the DevTools color picker here? It looks much more modern and better matches the Chromium implementation.

Comment 3

[bcrotty1]

I know this thread has not seen any activity for quite a while, but I would love to see some improvements to the <input type=color> implementation. The UI for the input was not touched during the redesign for version 89 and does not fit with the rest of Firefox. The text inputs (both HSL and RGB) use 0-255 integer scales; that is fine for RGB but it makes HSL pretty tricky. Hue is commonly set in the 0-360 range and saturation and lightness are usually fractional or percentages. Deviating from this expectation makes the HSL input unintuitive and the RGB input is just as unintuitive to use as it always is. The current color input has fallen behind firefox aesthetically and in ease of use.

The DevTools color input suggested above does have the modern, updated look of the rest of Firefox and it also has a much improved visual color selection interface. That said it's not a drop in replacement. It has alpha/opacity selection which is not in the standard and WCAG contrast compliance checks. It also lacks any sort of text input which seems like a barrier to people using screen readers. Both the current color input and the devtools color input do not have a place to copy or paste colors in any format from inside their interface. While not required by the standard, that's a very handy feature. For clarity, here is an image of an implementation of the feature I'm talking about: hex input.

The expanded css color spec in CSS Color Module Level 4 and CSS Color Module Level 5 also inspires some other possible input methods like LAB or LCH, but that's a broader scope than just the color input. I would love to see the color input get some development attention as it can be a useful tool but in it's current state, I shy away from using it out of both aesthetic and ease of use concerns.

Comment 4

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: image.png

This is the current DevTools color picker.

And this seems like the code: https://searchfox.org/mozilla-central/rev/1749ba14c2ebe200855802c478780122135727f2/devtools/client/shared/widgets/Spectrum.js