Overview
This document describes how to achieve <input type=”color”> UI in ChromeOS/Ash.
Motivation
<input type=”color”> is a new input type introduced in HTML5. It enables users to pick a color and returns a value of #hhhhhh format. WebKit forms team has decided to use platform’s default color picker rather than implementing a new one. It means that we need to implement our own color picker view for ChromeOS/Ash.
First Goal
- Implement simple color picker dialog working with <input type=”color>.
- Implement with views, not HTML.
- Features
- Behave as Modal Dialog (see doc)
- Appears in the topmost z-order
- Pick up a color from HSV model
- Has both a Hue bar and a Saturation-Value plane (see below mock).
- Pick up a color from text
- Allow copy/paste
- Specify the color by …
- rgb(xx ,yy, zz)
- #RRGGBB
- CSS well-known color name
- … anything else?
- Work on Chrome OS
- first mock
- Confirmed that the upper box isn’t necessary, since the color will be shown in the page.
- Current screenshot:
Next plans (not confirmed yet)
- Global Color Picker: Picking a color from any point on the desktop.
- Even from other tab, window or desktop.
- “Favorite Color” feature
- Pick up the color easily from each user’s favorite color.
- Works on Windows and Chrome OS
- Currently, Windows has native OS Color PIcker Dialog. This new Color Picker will replace it.
Not Goal
- Alpha value (transparency) support
- HTML5 spec has not supported alpha value.
References
Input type=color spec: http://www.w3.org/TR/html-markup/input.color.html
|
