960984 - Implement <input type="color">: list attribute

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, enhancement)

Description

[Arnaud Bienner]

There was some ideas about how to implement this in bug 547004 comment 22 (attachment 437584 [details]), bug 547004 comment 70 and bug 547004 comment 71, at the end.

Quoting the (IMO) most interesting parts:

Mounir: "Then the user would click on it, if the list attribute is specified, it will show the colors and let the user choose another one with 'Other' which will show the color picker. Otherwise, it will directly show the color picker.
This is highly inspired from the Google's document."

Arnaud: "I think it will be nice to have something similar to Chrome and Opera: a drop-down list available with the list of colors when |list| attribute is specified.
I prefer the Chrome's one, as it displays the list only when |list| is specified, while Opera always displays it, with a default list of colors if |list| isn't specified, but I'm not sure this is really useful.
Or we can add those colors to the "custom colors" part of the color picker, if it has one?"

Mounir: "The UI you proposed look good to me. We might want to use the XUL color picker (that is basically a list of colors). We should probably involve the UI team though."

Comment 1

[Max]

As per suggestions above, I think there has to be an option to display list colours without 'Other' button too. To suggest only predefined colours to the users. Not sure if it's in par with the specs though.

Comment 2

[Arnaud Bienner]

IIRC the spec, we shouldn't restrict user choice, but only indicate some pre-defined/preferred values (but maybe I'm wrong or it has changed since. If you think it's the case, could you please point me out to the part which part of the spec says this?)

Comment 3

[Max]

I cant point you to any specs to support my opinion. And I agree that by default we should not restrict users choices. However, in my experience I had situations where I had to build a color picker with predefined colors to prevent "colour soup" on site/service/CMS. Something like OSX Maveriks Finder context menu color tags are limited to seven colors only.

Comment 5

[Arnaud Bienner]

Bug 1016715 contains an example of how to use the datalist attribute + how is it rendered in Chrome (attachment 8429661 [details]).

Comment 6

[Sebastian Zartner [:sebo]]

Another solution would be to display the predefined colors above or below the color picker. This avoids having to click twice to get the color picker, though it may require to create a separate color picker instead of using the system's one. Having said that, the Windows color picker already provides a palette of predefined colors in its color picker dialog. Not sure how it is in other systems, though.

Sebastian

Comment 7

[Sebastian Zartner [:sebo]]

Attachment: Custom colors in Windows' color picker dialog

Here's a screenshot of the dialog in Windows. And, of course, I meant custom colors and not predefined colors.

Sebastian

Comment 8

[Karl Dubost💡 :karlcow]

We might see some renewed interest for this in the coming days
https://christianheilmann.com/2020/04/22/limiting-input-type-color-to-a-certain-palette-from-an-image/

Comment 9

[collimarco91]

+1 Please solve this bug.

We were going to use this feature (to let users select a background color) and then noticed that Firefox doesn't support it.

It's important to have predefined choices to let the user restore the color to a sensible value, in case he's not satisfied with his custom choice.

Comment 10

[parsimonhi]

+1 Please solve this bug.

This is not to restrict the user's choice. It is a question of suggestion.

Comment 11

[mathijs]

+1 Please solve this bug.

Comment 12

[Tom S]

Attachment: Bug 960984 - Implement the list attribute for <input type=color>. r?emilio

Comment 13

[Tom S]

Attachment: Windows color picker with custom colors

Comment 14

[Arnaud Bienner]

I'm glad to see someone is taking over this :)

Thanks Tom for your work on this!

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/90c4dc2efa19
Implement the list attribute for <input type=color>. r=emilio,geckoview-reviewers,m_kato

Comment 16

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/90c4dc2efa19

Comment 17

[Ruth John]

MDN work can be tracked here https://github.com/mdn/content/issues/23684

Comment 18

[Dipika]

Attachment: list attribute - firefox110-beta.png

Hello, I am updating the MDN docs. I am not yet seeing the expected change in 110.0b9 beta (or even in nightly 111). This screenshot is on 110 beta. What am I missing to see the fix in Firefox beta? Thanks!

Comment 19

[Tom S]

You are using macOS, see bug 1805397 for that.