<input type=color> UI

• Component: Forms
• Status: RESOLVED FIXED

[Kent Tamura]

Add dedicated UI for <input type=color>.

[Alfred Morgan]

I would like to help implement this feature if I can.  I just don't know where/how to start.

[Hajime Morrita]

(In reply to comment #1)
> I would like to help implement this feature if I can.  I just don't know
> where/how to start.
Searching ChangeLog for similar implementation will be a good starting point.
To find out what to search, Bug 19264 will be helpful.

[Kent Tamura]

(In reply to comment #1)
> I would like to help implement this feature if I can.  I just don't know
> where/how to start.

The process would be:
1. Define new value for -webkit-appearance
  See CSSStyleSelector::SelectorChecker::checkOneSelector()
2. Implement the appearance (rendering/RenderTheme*)
3. Assign the appearance for input[type=color] (css/html.css)
4. Implement UI behavior
  - Add a new function to page/Chrome and page/ChromeClient to open a color picker
   (See runOpenPanel()
  - Implement it for various platforms
  - Add a click handling to html/HTMLInputElement.cpp defaultEventHandler()

[Alfred Morgan]

Thank you Kent.  This is great.

> - Implement it for various platforms

I'm going to need help doing this task.  I can do the generics and the Mac platform.

[Keishi Hattori]

I was interested in this for Bug 25032, so I've started working on this. As a first step, I am trying to draw a NSColorWell and I have a couple of questions.

1. https://docs.google.com/View?id=dch3zh37_0cf8kc8c4 proposes implementing it like this.

input[type="color"]::-webkit-input-color-button {
  -webkit-appearance: color-button;
}

But do I need to  create -webkit-input-color-button pseudo element? Why can't I do this?

input[type="color"] {
  -webkit-appearance: color-button;
}

2. NSColorWell does not have NSCell. How should I paint it?

[Kent Tamura]

(In reply to comment #5)
> I was interested in this for Bug 25032, so I've started working on this. As a first step, I am trying to draw a NSColorWell and I have a couple of questions.
> 
> 1. https://docs.google.com/View?id=dch3zh37_0cf8kc8c4 proposes implementing it like this.
> 
> input[type="color"]::-webkit-input-color-button {
>   -webkit-appearance: color-button;
> }
> 
> But do I need to  create -webkit-input-color-button pseudo element? Why can't I do this?
> 
> input[type="color"] {
>   -webkit-appearance: color-button;
> }

It's ok to omit ::-webkit-input-color-button if the 'color-button' appearance supports all of states such as :disabled :active.  I guess it can support.

> 2. NSColorWell does not have NSCell. How should I paint it?

I think NSColorWell appearance is just a square button + a filled rectangle.  So we can use NSButtonCell.

[Alfred Morgan]

> 2. NSColorWell does not have NSCell. How should I paint it?

I would like to see it drawn like this:
http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGControls/XHIGControls.html%23//apple_ref/doc/uid/TP30000359-TPXREF213

That Google proposal you mentioned looks more like how a <select> is drawn, all the way down to the mini popup.

I would rather like to see the color well be clean like in the HIG.  It would be nice if your color well element coulb be used as the Color Swatch in the Web Inspector (a small color square with a thin gray border).

[Peter Kasting]

(In reply to comment #7)
> I would like to see it drawn like this:
> http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGControls/XHIGControls.html%23//apple_ref/doc/uid/TP30000359-TPXREF213
> 
> That Google proposal you mentioned looks more like how a <select> is drawn, all the way down to the mini popup.

This may be an area where different platforms would prefer different styles.  The proposal on Google Docs is basically the Windows native UI.  The Mac-style color well looks out of place on Windows in the same way that the reverse is true.

I don't know whether that causes problems for web developers looking to style the controls.

[Keishi Hattori]

(In reply to comment #6)

> > 2. NSColorWell does not have NSCell. How should I paint it?
> 
> I think NSColorWell appearance is just a square button + a filled rectangle.  So we can use NSButtonCell.

Thanks Kent!

I'm busy next week but I'll have my patch ready the week after.

[Keishi Hattori]

(In reply to comment #7)
> I would like to see it drawn like this:
> http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGControls/XHIGControls.html%23//apple_ref/doc/uid/TP30000359-TPXREF213

Yes. That is all I'm trying to do for my first patch. 

However I think the mac might also need the popup UI to support the "list" attribute. Maybe something like http://i56.tinypic.com/e6zujn.png in the Interface Builder.

[Alfred Morgan]

> like in the Interface Builder.

Oh wow! That's exactly how to do it.  I like how clicking on the left half brings the color well right away and can be used as a drop target.  And the right half acts as a dropdown with the possibility of text.  The popup then contains recently used colors at top, and the @list following that, and then Other… at the bottom.  It's perfect.

[Aaron]

Eager to see this implemented into the browser as well as Web Inspector.  This will be a huge improvement for both.

[Joseph Pecoraro]

> I'm busy next week but I'll have my patch ready the week after.

Keishi, how did progress go on this?

[Aaron]

Created attachment 82080 [details]
Color picker

[Aaron]

Anyone ever get a chance to add this? I'd like to see something like this for the Inspector. Something simple I found that uses jQuery to build cross-browser compatible HTML5 forms.

[Aaron]

Comment on attachment 82080 [details]
Color picker

Anyone ever get a chance to add this? I'd like to see something like this for the Inspector. Something simple I found that uses jQuery to build cross-browser compatible HTML5 forms.

[Kent Tamura]

(In reply to comment #6)
> > 2. NSColorWell does not have NSCell. How should I paint it?
> 
> I think NSColorWell appearance is just a square button + a filled rectangle.  So we can use NSButtonCell.

Probably, having a shadow tree like the following would be enough.

<button style="-webkit-appearance: square-button; padding:2px;"><div style="display:inline-block;background-color:yellow;width:16px;height:10px;border:1px black solid"></div></button>

[Keishi Hattori]

Created attachment 94401 [details]
Patch

[Keishi Hattori]

(In reply to comment #18)
> Created an attachment (id=94401) [details]
> Patch
This first patch does the following
- disables the current input type=color implementation
- adds ENABLE_INPUT_COLOR feature flag
- replace typemismatch with value sanitization

[Kent Tamura]

(In reply to comment #19)
> (In reply to comment #18)
> > Created an attachment (id=94401) [details] [details]
> > Patch
> This first patch does the following
> - disables the current input type=color implementation
> - adds ENABLE_INPUT_COLOR feature flag
> - replace typemismatch with value sanitization

The code change looks ok.  I'll review the patch tomorrow.

Anyway, please post an announcement of the new feature flag to webkit-dev.  This flag change the existing behavior and will require browser-side implementation, won't it?

[Kent Tamura]

Also, I prefer one patch per one bug.

[Keishi Hattori]

Created attachment 94402 [details]
implements UI appearance

[Keishi Hattori]

(In reply to comment #21)
> Also, I prefer one patch per one bug.

Okay, I'll make separate bugs.

[Keishi Hattori]

(In reply to comment #23)
> Okay, I'll make separate bugs.

Moved first patch to Bug 61273
Moved second patch to Bug 61275

[Hyerim Bae]

I'm also interested this color input feature. Do you think this feature also can be useful on mobile environment which has small screen with no accurate mouse pointer?

I think user can input color value only though keypad via input field.
Somebody may want to select color on color picker with mobile environment.

[Jon Lee]

<rdar://problem/8489889>

[john stalcup]

i want this functionality as well :-/

[Jon Lee]

What exactly is the state of the completion of this feature at this point?

[Kent Tamura]

Finished platform-independent part.