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

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

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

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.

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?

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

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

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

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

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

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

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

> I'm busy next week but I'll have my patch ready the week after. Keishi, how did progress go on this?

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

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.

(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>

Created attachment 94401 [details] Patch

(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

(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?

Also, I prefer one patch per one bug.

Created attachment 94402 [details] implements UI appearance

(In reply to comment #21) > Also, I prefer one patch per one bug. Okay, I'll make separate bugs.

(In reply to comment #23) > Okay, I'll make separate bugs. Moved first patch to Bug 61273 Moved second patch to Bug 61275

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.

<rdar://problem/8489889>

i want this functionality as well :-/

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

Finished platform-independent part.