UI Framework-1: Ash Color Chooser

Ash Color Chooser

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