= How to enable Form features =

== Interactive form validation ==

1. Implement `WebCore/page/ValidationMessageClient.h` for your port
2. Set it to `PageClients::validationMessageClient`
3. Instantiate a `Page` object
4. `page->settings()->setInteractiveFormValidationEnabled(true)`

Doing step 3 and 4 without step 1 and 2 enables a platform-neutral form validation UI. But it has [https://bugs.webkit.org/show_bug.cgi?id=95527 some unresolvable bugs].
You should provide your `ValidationMessageClient`.

== input[type=number] ==

If you have never done anything for input[type=number], it lacks the following features:
* Spin button UI
* Number localization

=== Spin button UI ===

This is optional. Opera has similar UI, but IE10 has no spin button.
If you want the spin button UI, implement `RenderTheme::adjustInnerSpinButtonStyle` and `paintInnerSpinButtonStyle`.

Test: fast/forms/number/number-{appearance,spinbutton}*.html

=== Number localization ===

This is optional. IE10 localizes numbers, but Opera doesn't.

This feature requires `Locale` class implementation. If your port is using `WebCore/platform/text/LocaleNone.cpp`, this feature is disabled. Use `WebCore/platform/text/{LocaleICU.cpp,mac/LocaleMac.mm,win/LocaleWin.cpp}`, or implement your own Locale class.

Test: fast/forms/number/number-l10n-input.html

== input[type=color] ==

Enable `ENABLE_INPUT_TYPE_COLOR` flag, and implement `ChromeClient::createColorChooser`.

== Date, datetime-local, month, time, week input types ==

WebCore provides two UI types for them.

* Chooser-only UI (no `ENABLE_INPUT_MULTIPLE_FIELDS_UI` flag)
   [[Image(chooser-only.png)]]
* Multiple-fields UI (`ENABLE_INPUT_MULTIPLE_FIELDS_UI` flag)
   [[Image(multiple-fields-example.png)]]

In the multiple-fields UI, users can specify values quickly with keyboard or mouse input. This UI is not suitable for mobile devices with touch input. Optionally we can provide platform-specific chooser dialog UI.

The Chooser-only UI is simple. We provide only platform-specific chooser dialog UI.

=== Chooser-only UI ===

1. Enable `ENABLE_INPUT_TYPE_`''FOO'' without `ENABLE_INPUT_MULTIPLE_FIELDS_UI`
2. Implement `Locale` class (See "Number localization" section)
3. Implement `ChromeClient::openDateTimeChooser`

=== Multiple-fields UI ===

1. Enable `ENABLE_INPUT_TYPE_`''FOO'' and `ENABLE_INPUT_MULTIPLE_FIELDS_UI`
2. Implement `Locale` class (See "Number localization" section)
2. Implement `RenderTheme::adjustInnerSpinButonStyle` and `paintInnerSpinButtonStyle`
3. Optionally, provide chooser dialog UI.
  1. Implement `RenderTheme::supportsCalendarPicker` so that it returns true for supported input types.
  2. Implement `ChromeClient::openDateTimeChooser`

=== ENABLE_CALENDAR_PICKER ===
WebCore has a calendar chooser implementation built with HTML.
It supports date type, month type, week type, and year-month-day part of datetime-local type, and
doesn't support time type and the time part of datetime-local type for now.
So, the implementation is not enough for the chooser-only UI.

1. Enable `ENABLE_PAGE_POPUP` flag.[[BR]]
   This feature requires `V8EnabledPerContext` extended attribute.
   If your port uses JavaScriptCore, dont't use `WebCore/page/DOMWindowPagePopup.idl` and setup `pagePopupController` property in C++ code.
2. Implement `ChromeClient::openPagePopup` and `closePagePopup`.
3. Enable `ENABLE_CALENDAR_PICKER` flag
4. Update your build files so that it converts `WebCore/Resources/pagepopups/{pickerCommon.js,pickerCommon.css,calendarPicker.js,calendarPicker.css}` to C++ files by `WebCore/make-file-arrays.py`
5. Implement `RenderTheme::supportsCalendarPicker` so that it returns true for supported input types.
6. Implement `ChromeClient::openDateTimeChooser`. It should use ChromeClient::openPagePopup and the converted resources.  See `WebKit/chromium/src/DateTimeChooserImpl.cpp`.

[[Image(calendar-picker.png)]] [[BR]]
Figure: ENABLE_CALENDAR_PICKER

== input[type=datetime] ==

Do not enable it.  You can not make an appropriate UI with the current WebCore code.

== Datalist element ==

This depends on input types.

=== Text field types ===

1. Enable `ENABLE_DATALIST_ELEMENT`
2. Implement `RenderTheme::supportsDataListUI` so that it returns true for supported types.
3. In WebKit layer, hook keyboard input, focus, or touch events for a target text field, and show UI to choose values of `HTMLInputElement::dataList`.

=== Range type ===

1. Enable `ENABLE_DATALIST_ELEMENT`
2. Implement `RenderTheme::supportsDataListUI` so that it returns true for range type.
3. Implement/override `RenderTheme::slideTickSnappingThreshold`, `sliderTickSize`, `sliderTickOffsetFromTrackCenter`.

=== Color type ===

1. Enable `ENABLE_DATALIST_ELEMENT`
2. Implement `RenderTheme::supportsDataListUI` so that it returns true for color type.
3. Your `ColorChooser` implementation should respect `ColorChooserClient::shouldShowSuggestions` and `suggestions`.

=== Date, datetime-local, month, time, week types ===

1. Enable `ENABLE_DATALIST_ELEMENT`
2. Implement `RenderTheme::supportsDataListUI` so that it returns true for supported types.
3. Implement `ChromeClient::openDateTimeChooser` so that it handles `DateTimeChooserParameters::suggestionValues`.