wiki:EnableFormFeatures

Version 7 (modified by tkent@chromium.org, 11 years ago) (diff)

--

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

  • Multiple-fields UI (ENABLE_INPUT_MULTIPLE_FIELDS_UI flag)

  • Chooser-only UI (no ENABLE_INPUT_MULTIPLE_FIELDS_UI flag)

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)
  3. Implement RenderTheme::adjustInnerSpinButonStyle and paintInnerSpinButtonStyle
  4. 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.
    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.


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.

Attachments (3)

Download all attachments as: .zip