Closed Bug 1919718 Opened 1 year ago Closed 21 days ago

Enhance <input type=color> with alpha and colorspace=display-p3

Categories

(Core :: DOM: Forms, enhancement)

enhancement

Tracking

()

RESOLVED FIXED
149 Branch
Size Estimate S
Tracking Status
relnote-firefox --- nightly+
firefox149 --- fixed

People

(Reporter: annevk, Assigned: saschanaz)

References

(Blocks 5 open bugs, )

Details

(Keywords: dev-doc-needed, parity-safari, Whiteboard: [platform-feature][webcompat:risk-low], [wptsync upstream])

Attachments

(4 files, 1 obsolete file)

The spec PR has been merged.

This is needed to be able to pick display-p3 colors with the eyedropper as <input> proposal.

Blocks: 1445061
Depends on: 1796343
Depends on: 1965029
Blocks: 1965920

:hsinyi, do you have any idea when this feature will be available ?

Flags: needinfo?(htsai)
Depends on: 1626624
Flags: needinfo?(htsai)

We need bug 1629388 to have some control over color picker.

Depends on: 1629388

(I didn't mean to clear my NI)

Flags: needinfo?(htsai)

Bug 1629388 is in progress.

Flags: needinfo?(htsai)
Size Estimate: --- → S

Removing some dependencies:

  1. The graphic dependency is about picker but we can still implement the attribute without actually having P3 picker. We can convert sRGB value from picker to P3 representation to fulfill the spec requirements. Users would still be only able to choose within sRGB range though. Using P3 for the picker is straightforward but right now doing so is no-op, as it turns out that we don't do color mapping - gradient in P3 white-to-red looks exactly same to sRGB white-to-red even on MacBook P3 display.
  2. In the same way, technically we don't have to fix the Android color picker to implement this. Alpha should be disabled until Android gets the picker support though, for feature detection purpose. The Android work would need some actual Android person to take. (gamut detection is possible through matchMedia("(color-gamut: p3)").matches.)
No longer depends on: 1626624, 1796343
Attachment #9535668 - Attachment description: WIP: Bug 1919718 - Part 1: Add HTMLInputElement.colorSpace → WIP: Bug 1919718 - Part 1: Implement HTMLInputElement.colorSpace
Assignee: nobody → krosylight
Attachment #9535668 - Attachment description: WIP: Bug 1919718 - Part 1: Implement HTMLInputElement.colorSpace → Bug 1919718 - Part 1: Implement HTMLInputElement.colorSpace r=emilio
Status: NEW → ASSIGNED
Attachment #9536380 - Attachment description: WIP: Bug 1919718 - Part 2: Implement HTMLInputElement.alpha → Bug 1919718 - Part 2: Implement HTMLInputElement.alpha r=emilio
Attachment #9536380 - Attachment description: Bug 1919718 - Part 2: Implement HTMLInputElement.alpha r=emilio → WIP: Bug 1919718 - Part 2: Implement HTMLInputElement.alpha r=emilio
Attachment #9536380 - Attachment description: WIP: Bug 1919718 - Part 2: Implement HTMLInputElement.alpha r=emilio → Bug 1919718 - Part 2: Implement HTMLInputElement.alpha r=emilio

note: there should be tests to ensure that setting colorspace/alpha HTML attributes via setAttribute also runs value sanitization.

Flags: needinfo?(krosylight)

I realized that this should not be specific to IDL setter.

Flags: needinfo?(krosylight)
Keywords: dev-doc-needed
OS: Unspecified → All
Hardware: Unspecified → All

Release Note Request (optional, but appreciated)
[Why is this notable]: Implementing extra attributes for input element
[Affects Firefox for Android]: Yes
[Suggested wording]: Adding colorspace HTML attributes for <input type=color> elements will now affect the value to be expressed in the requested colorspace and/or with alpha. They do not affect the color picker behavior yet, but it's coming in bug 2007532. alpha is Nightly only for now.
[Links (documentation, blog post, etc)]:

relnote-firefox: --- → ?

For MDN/BCD purpose, we currently mark it incomplete for color() syntax support in HTML input element. We can mark it complete. The alpha value will be filtered out until it's enabled in stable...

Whiteboard: [platform-feature][webcompat:risk-low] → [platform-feature][webcompat:risk-low], [wptsync upstream]

Backed out for causing reftest failures @transformations-1.html.

Flags: needinfo?(krosylight)

Huh? How come is this Android specific?

Flags: needinfo?(krosylight)

Thanks, then it makes much more sense.

(But it doesn't fail locally, it even gives 0 pixel difference. πŸ€”)

Upstream PR merged by moz-wptsync-bot

Just want to point out that the current plan to ship the attributes without the picker behaviour does mean that feature detection is effectively impossible. I think it's less important for color space but for alpha especially it seems problematic to advertise support when you don't have it. If I wanted to decide whether to show a custom picker or use the default browsers one this means I can't do that.

At the very least it would seem good if alpha was wired up to the platform pickers where possible before the web picker ships (macOS's and GTKs definitely support it).

I thought about not shipping alpha, but changed my mind after realizing that alpha does affect the value too and is not fully unusable without alpha slider... But probably alpha should be behind pref for now, yeah. Thank for the feedback.

Attachment #9534840 - Attachment is obsolete: true
Upstream PR merged by moz-wptsync-bot

Added with this wording::

You can now set specific color spaces and transparency (alpha) on <input type="color"> elements, with alpha support currently exclusive to Firefox Nightly. While the visual picker hasn't changed yet (tracked in Bug 2007532), it will now output values in your requested format.

The note will be part of the Nightly release notes for 3 cycles (149-151).
When we extend the support to the release channel, a new release note request will be needed.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: