Changeset 130147 in webkit


Ignore:
Timestamp:
Oct 2, 2012 3:21:37 AM (12 years ago)
Author:
yosin@chromium.org
Message:

[Forms] Multiple fields datetime/datetime-local input UI
​https://bugs.webkit.org/show_bug.cgi?id=97997

Reviewed by Kent Tamura.

Source/WebCore:

This patch introduces multiple fields "datetime" and "datetime-local"
input UI in DRT. We'll enable these features once we add tests.

No new tests. To reduce size of this patch, other patches add tests
for multiple fields datetime/datetime-local input UI.

Note: Actual outputs of four tests

  • fast/forms/datetime/datetime-input-visible-string.html
  • fast/forms/datetime/datetime-stepup-stepdown-from-renderer.html
  • fast/forms/datetimelocal/datetimelocal-input-visible-string.html
  • fast/forms/datetimelocal/datetimelocal-stepup-stepdown-from-renderer.html

are different.

  • bindings/generic/RuntimeEnabledFeatures.cpp:

(WebCore):

  • css/html.css:

(input::-webkit-datetime-edit-day-field): Added for field appearance.
(input::-webkit-datetime-edit-day-field:focus): Added to remove focus ring.

  • html/DateTimeInputType.cpp:

(WebCore::DateTimeInputType::formatDateTimeFieldsState): Added to format numeric value to string value as specified in HTML5 specification.
(WebCore::DateTimeInputType::setupLayoutParameters): Added to set layout of multiple fields.

  • html/DateTimeInputType.h: Changed to include BaseMultipleFieldsDateAndTimeInputType.h and introduce BaseDateTimeInputType typedef.

(WebCore::DateTimeInputType::DateTimeInputType): Changed base class name to BaseDateTimeInputType.
(DateTimeInputType): Changed to add declarations for formatDateTimeFieldsState() and setupLayoutParameters().

  • html/DateTimeLocalInputType.cpp:

(WebCore::DateTimeLocalInputType::formatDateTimeFieldsState): Added to format numeric value to string value as specified in HTML5 specification.
(WebCore::DateTimeLocalInputType::setupLayoutParameters): Added to set layout of multiple fields.

  • html/DateTimeLocalInputType.h: Changed to include BaseMultipleFieldsDateAndTimeInputType.h and introduce BaseDateTimeLocalInputType typedef.

(WebCore::DateTimeLocalInputType::DateTimeLocalInputType): Changed base class name to BaseDateTimeLocalInputType.
(DateTimeLocalInputType): Changed to add declarations for formatDateTimeFieldsState() and setupLayoutParameters().

  • html/shadow/DateTimeEditElement.cpp:

(DateTimeEditBuilder): Changed to add member variable m_placeholderForDay.
(WebCore::DateTimeEditBuilder::DateTimeEditBuilder): Changed to initialize m_placeholderForDay.
(WebCore::DateTimeEditBuilder::visitField): Changed to support week field.

  • html/shadow/DateTimeEditElement.h:

(LayoutParameters): Changed to add placeholderForDay member variable.

LayoutTests:

This patch adds Chromium port specific expectations for "datetime" and
"datetime-local" input type tests for multiple fields datetime input UI.

  • platform/chromium/fast/forms/datetime/datetime-input-visible-string-expected.txt: Added. Multiple fields datetime input UI doesn't have selection.
  • platform/chromium/fast/forms/datetime/datetime-stepup-stepdown-from-renderer-expected.txt: Added. On multiple fields datetime input UI, step down/up decrement/increment a field rather than whole value.
  • platform/chromium/fast/forms/datetimelocal/datetimelocal-input-visible-string-expected.txt: Added. Multiple fields datetime-local input UI doesn't have selection.
  • platform/chromium/fast/forms/datetimelocal/datetimelocal-stepup-stepdown-from-renderer-expected.txt: Added. On multiple fields datetime-local input UI, step down/up decrement/increment a field rather than whole value.
Location:
trunk
Files:
6 added
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r130145 r130147  
     12012-10-02  Yoshifumi Inoue  <yosin@chromium.org>
     2
     3        [Forms] Multiple fields datetime/datetime-local input UI
     4        https://bugs.webkit.org/show_bug.cgi?id=97997
     5
     6        Reviewed by Kent Tamura.
     7
     8        This patch adds Chromium port specific expectations for "datetime" and
     9        "datetime-local" input type tests for multiple fields datetime input UI.
     10
     11        * platform/chromium/fast/forms/datetime/datetime-input-visible-string-expected.txt: Added. Multiple fields datetime input UI doesn't have selection.
     12        * platform/chromium/fast/forms/datetime/datetime-stepup-stepdown-from-renderer-expected.txt: Added. On multiple fields datetime input UI, step down/up decrement/increment a field rather than whole value.
     13        * platform/chromium/fast/forms/datetimelocal/datetimelocal-input-visible-string-expected.txt: Added. Multiple fields datetime-local input UI doesn't have selection.
     14        * platform/chromium/fast/forms/datetimelocal/datetimelocal-stepup-stepdown-from-renderer-expected.txt: Added. On multiple fields datetime-local input UI, step down/up decrement/increment a field rather than whole value.
     15
    1162012-10-02  Zan Dobersek  <zandobersek@gmail.com>
    217

  • trunk/Source/WebCore/ChangeLog

    r130146 r130147  
     12012-10-02  Yoshifumi Inoue  <yosin@chromium.org>
     2
     3        [Forms] Multiple fields datetime/datetime-local input UI
     4        https://bugs.webkit.org/show_bug.cgi?id=97997
     5
     6        Reviewed by Kent Tamura.
     7
     8        This patch introduces multiple fields "datetime" and "datetime-local"
     9        input UI in DRT. We'll enable these features once we add tests.
     10
     11        No new tests. To reduce size of this patch, other patches add tests
     12        for multiple fields datetime/datetime-local input UI.
     13
     14        Note: Actual outputs of four tests
     15          - fast/forms/datetime/datetime-input-visible-string.html
     16          - fast/forms/datetime/datetime-stepup-stepdown-from-renderer.html
     17          - fast/forms/datetimelocal/datetimelocal-input-visible-string.html
     18          - fast/forms/datetimelocal/datetimelocal-stepup-stepdown-from-renderer.html
     19        are different.
     20
     21        * bindings/generic/RuntimeEnabledFeatures.cpp:
     22        (WebCore):
     23        * css/html.css:
     24        (input::-webkit-datetime-edit-day-field): Added for field appearance.
     25        (input::-webkit-datetime-edit-day-field:focus):  Added to remove focus ring.
     26        * html/DateTimeInputType.cpp:
     27        (WebCore::DateTimeInputType::formatDateTimeFieldsState): Added to format numeric value to string value as specified in HTML5 specification.
     28        (WebCore::DateTimeInputType::setupLayoutParameters): Added to set layout of multiple fields.
     29        * html/DateTimeInputType.h: Changed to include BaseMultipleFieldsDateAndTimeInputType.h and introduce BaseDateTimeInputType typedef.
     30        (WebCore::DateTimeInputType::DateTimeInputType): Changed base class name to BaseDateTimeInputType.
     31        (DateTimeInputType): Changed to add declarations for formatDateTimeFieldsState() and setupLayoutParameters().
     32        * html/DateTimeLocalInputType.cpp:
     33        (WebCore::DateTimeLocalInputType::formatDateTimeFieldsState): Added to format numeric value to string value as specified in HTML5 specification.
     34        (WebCore::DateTimeLocalInputType::setupLayoutParameters):  Added to set layout of multiple fields.
     35        * html/DateTimeLocalInputType.h: Changed to include BaseMultipleFieldsDateAndTimeInputType.h and introduce BaseDateTimeLocalInputType typedef.
     36        (WebCore::DateTimeLocalInputType::DateTimeLocalInputType): Changed base class name to BaseDateTimeLocalInputType.
     37        (DateTimeLocalInputType): Changed to add declarations for formatDateTimeFieldsState() and setupLayoutParameters().
     38        * html/shadow/DateTimeEditElement.cpp:
     39        (DateTimeEditBuilder): Changed to add member variable m_placeholderForDay.
     40        (WebCore::DateTimeEditBuilder::DateTimeEditBuilder): Changed to initialize m_placeholderForDay.
     41        (WebCore::DateTimeEditBuilder::visitField): Changed to support week field.
     42        * html/shadow/DateTimeEditElement.h:
     43        (LayoutParameters): Changed to add placeholderForDay member variable.
     44
    1452012-10-02  Vsevolod Vlasov  <vsevik@chromium.org>
    246

  • trunk/Source/WebCore/css/html.css

    r130024 r130147  
    478478
    479479#if defined(ENABLE_INPUT_MULTIPLE_FIELDS_UI) && ENABLE_INPUT_MULTIPLE_FIELDS_UI
     480input[type="datetime"],
     481input[type="datetime-local"],
    480482input[type="month"],
    481483input[type="time"],
    … …  
    498500}
    499501
    500 input::-webkit-datetime-edit-hour-field {
     502input::-webkit-datetime-edit-day-field {
    501503    -webkit-user-modify: read-only !important;
    502504    display: inline-block;
    … …  
    506508}
    507509
    508 input::-webkit-datetime-edit-millisecond-field {
     510input::-webkit-datetime-edit-hour-field {
    509511    -webkit-user-modify: read-only !important;
    510512    display: inline-block;
    … …  
    514516}
    515517
    516 input::-webkit-datetime-edit-minute-field {
     518input::-webkit-datetime-edit-millisecond-field {
    517519    -webkit-user-modify: read-only !important;
    518520    display: inline-block;
    … …  
    522524}
    523525
    524 input::-webkit-datetime-edit-month-field {
     526input::-webkit-datetime-edit-minute-field {
    525527    -webkit-user-modify: read-only !important;
    526528    display: inline-block;
    … …  
    530532}
    531533
     534input::-webkit-datetime-edit-month-field {
     535    -webkit-user-modify: read-only !important;
     536    display: inline-block;
     537    border: none;
     538    text-align: center;
     539    padding: 0.15em;
     540}
     541
    532542/* This selector is used when step >= 3600 second but format contains minute field. */
    533543input::-webkit-datetime-edit-minute-field[readonly] {
    … …  
    561571/* Remove focus ring from fields and use highlight color */
    562572input::-webkit-datetime-edit-ampm-field:focus,
     573input::-webkit-datetime-edit-day-field:focus,
    563574input::-webkit-datetime-edit-hour-field:focus,
    564575input::-webkit-datetime-edit-millisecond-field:focus,

  • trunk/Source/WebCore/html/DateTimeInputType.cpp

    r128149 r130147  
    4040
    4141#if ENABLE(INPUT_TYPE_DATETIME)
     42
     43#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
     44#include "DateTimeFieldsState.h"
     45#include "LocalizedStrings.h"
     46#include "Localizer.h"
     47#include <wtf/text/StringBuilder.h>
     48#include <wtf/text/WTFString.h>
     49#endif
    4250
    4351namespace WebCore {
    … …  
    98106}
    99107
     108#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
     109// FIXME: It is better to share code for DateTimeInputType::formatDateTimeFieldsState()
     110// and DateTimeInputLocalType::formatDateTimeFieldsState().
     111String DateTimeInputType::formatDateTimeFieldsState(const DateTimeFieldsState& dateTimeFieldsState) const
     112{
     113    if (!dateTimeFieldsState.hasDayOfMonth() || !dateTimeFieldsState.hasMonth() || !dateTimeFieldsState.hasYear()
     114        || !dateTimeFieldsState.hasHour() || !dateTimeFieldsState.hasMinute() || !dateTimeFieldsState.hasAMPM())
     115        return emptyString();
     116
     117    if (dateTimeFieldsState.hasMillisecond() && dateTimeFieldsState.millisecond()) {
     118        return String::format("%04u-%02u-%02uT%02u:%02u:%02u.%03uZ",
     119            dateTimeFieldsState.year(),
     120            dateTimeFieldsState.month() + 1,
     121            dateTimeFieldsState.dayOfMonth(),
     122            dateTimeFieldsState.hour23(),
     123            dateTimeFieldsState.minute(),
     124            dateTimeFieldsState.hasSecond() ? dateTimeFieldsState.second() : 0,
     125            dateTimeFieldsState.millisecond());
     126    }
     127
     128    if (dateTimeFieldsState.hasSecond() && dateTimeFieldsState.second()) {
     129        return String::format("%04u-%02u-%02uT%02u:%02u:%02uZ",
     130            dateTimeFieldsState.year(),
     131            dateTimeFieldsState.month() + 1,
     132            dateTimeFieldsState.dayOfMonth(),
     133            dateTimeFieldsState.hour23(),
     134            dateTimeFieldsState.minute(),
     135            dateTimeFieldsState.second());
     136    }
     137
     138    return String::format("%04u-%02u-%02uT%02u:%02uZ",
     139        dateTimeFieldsState.year(),
     140        dateTimeFieldsState.month() + 1,
     141        dateTimeFieldsState.dayOfMonth(),
     142        dateTimeFieldsState.hour23(),
     143        dateTimeFieldsState.minute());
     144}
     145
     146void DateTimeInputType::setupLayoutParameters(DateTimeEditElement::LayoutParameters& layoutParameters, const DateComponents& date) const
     147{
     148    // FIXME: It is better to have Localizer::dateTimeFormat() and use it
     149    // here rather than constructing from dateFormat() and timeFormat().
     150    StringBuilder builder;
     151    builder.append(layoutParameters.localizer.dateFormat());
     152    builder.append(' ');
     153    if (date.second() || layoutParameters.shouldHaveSecondField()) {
     154        builder.append(layoutParameters.localizer.timeFormat());
     155        layoutParameters.fallbackDateTimeFormat = "dd/MM/yyyy HH:mm:ss";
     156    } else {
     157        builder.append(layoutParameters.localizer.shortTimeFormat());
     158        layoutParameters.fallbackDateTimeFormat = "dd/MM/yyyy HH:mm";
     159    }
     160
     161    layoutParameters.dateTimeFormat = builder.toString();
     162    layoutParameters.placeholderForDay = placeholderForDayOfMonthField();
     163    layoutParameters.placeholderForMonth = placeholderForMonthField();
     164    layoutParameters.placeholderForYear = placeholderForYearField();
     165}
     166#endif
     167
    100168} // namespace WebCore
    101169

  • trunk/Source/WebCore/html/DateTimeInputType.h

    r120313 r130147  
    3535
    3636#if ENABLE(INPUT_TYPE_DATETIME)
     37#include "BaseMultipleFieldsDateAndTimeInputType.h"
    3738
    3839namespace WebCore {
    3940
    40 class DateTimeInputType : public BaseDateAndTimeInputType {
     41#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
     42typedef BaseMultipleFieldsDateAndTimeInputType BaseDateTimeInputType;
     43#else
     44typedef BaseDateAndTimeInputType BaseDateTimeInputType;
     45#endif
     46
     47class DateTimeInputType : public BaseDateTimeInputType {
    4148public:
    4249    static PassOwnPtr<InputType> create(HTMLInputElement*);
    4350
    4451private:
    45     DateTimeInputType(HTMLInputElement* element) : BaseDateAndTimeInputType(element) { }
     52    DateTimeInputType(HTMLInputElement* element) : BaseDateTimeInputType(element) { }
    4653    virtual const AtomicString& formControlType() const OVERRIDE;
    4754    virtual DateComponents::Type dateType() const OVERRIDE;
    … …  
    5158    virtual bool setMillisecondToDateComponents(double, DateComponents*) const OVERRIDE;
    5259    virtual bool isDateTimeField() const OVERRIDE;
     60
     61#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
     62    // BaseMultipleFieldsDateAndTimeInputType functions
     63    virtual String formatDateTimeFieldsState(const DateTimeFieldsState&) const OVERRIDE FINAL;
     64    virtual void setupLayoutParameters(DateTimeEditElement::LayoutParameters&, const DateComponents&) const OVERRIDE FINAL;
     65#endif
    5366};
    5467

  • trunk/Source/WebCore/html/DateTimeLocalInputType.cpp

    r128149 r130147  
    3939
    4040#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
     41
     42#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
     43#include "DateTimeFieldsState.h"
     44#include "LocalizedStrings.h"
     45#include "Localizer.h"
     46#include <wtf/text/StringBuilder.h>
     47#include <wtf/text/WTFString.h>
     48#endif
    4149
    4250namespace WebCore {
    … …  
    104112}
    105113
     114#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
     115// FIXME: It is better to share code for DateTimeInputType::formatDateTimeFieldsState()
     116// and DateTimeInputLocalType::formatDateTimeFieldsState().
     117String DateTimeLocalInputType::formatDateTimeFieldsState(const DateTimeFieldsState& dateTimeFieldsState) const
     118{
     119    if (!dateTimeFieldsState.hasDayOfMonth() || !dateTimeFieldsState.hasMonth() || !dateTimeFieldsState.hasYear()
     120        || !dateTimeFieldsState.hasHour() || !dateTimeFieldsState.hasMinute() || !dateTimeFieldsState.hasAMPM())
     121        return emptyString();
     122
     123    if (dateTimeFieldsState.hasMillisecond() && dateTimeFieldsState.millisecond()) {
     124        return String::format("%04u-%02u-%02uT%02u:%02u:%02u.%03u",
     125            dateTimeFieldsState.year(),
     126            dateTimeFieldsState.month() + 1,
     127            dateTimeFieldsState.dayOfMonth(),
     128            dateTimeFieldsState.hour23(),
     129            dateTimeFieldsState.minute(),
     130            dateTimeFieldsState.hasSecond() ? dateTimeFieldsState.second() : 0,
     131            dateTimeFieldsState.millisecond());
     132    }
     133
     134    if (dateTimeFieldsState.hasSecond() && dateTimeFieldsState.second()) {
     135        return String::format("%04u-%02u-%02uT%02u:%02u:%02u",
     136            dateTimeFieldsState.year(),
     137            dateTimeFieldsState.month() + 1,
     138            dateTimeFieldsState.dayOfMonth(),
     139            dateTimeFieldsState.hour23(),
     140            dateTimeFieldsState.minute(),
     141            dateTimeFieldsState.second());
     142    }
     143
     144    return String::format("%04u-%02u-%02uT%02u:%02u",
     145        dateTimeFieldsState.year(),
     146        dateTimeFieldsState.month() + 1,
     147        dateTimeFieldsState.dayOfMonth(),
     148        dateTimeFieldsState.hour23(),
     149        dateTimeFieldsState.minute());
     150}
     151
     152void DateTimeLocalInputType::setupLayoutParameters(DateTimeEditElement::LayoutParameters& layoutParameters, const DateComponents& date) const
     153{
     154    // FIXME: It is better to have Localizer::dateTimeFormat() and use it
     155    // here rather than constructing from dateFormat() and timeFormat().
     156    StringBuilder builder;
     157    builder.append(layoutParameters.localizer.dateFormat());
     158    builder.append(' ');
     159    if (date.second() || layoutParameters.shouldHaveSecondField()) {
     160        builder.append(layoutParameters.localizer.timeFormat());
     161        layoutParameters.fallbackDateTimeFormat = "dd/MM/yyyy HH:mm:ss";
     162    } else {
     163        builder.append(layoutParameters.localizer.shortTimeFormat());
     164        layoutParameters.fallbackDateTimeFormat = "dd/MM/yyyy HH:mm";
     165    }
     166
     167    layoutParameters.dateTimeFormat = builder.toString();
     168    layoutParameters.placeholderForDay = placeholderForDayOfMonthField();
     169    layoutParameters.placeholderForMonth = placeholderForMonthField();
     170    layoutParameters.placeholderForYear = placeholderForYearField();
     171}
     172#endif
     173
    106174} // namespace WebCore
    107175

  • trunk/Source/WebCore/html/DateTimeLocalInputType.h

    r117738 r130147  
    3232#define DateTimeLocalInputType_h
    3333
    34 #include "BaseDateAndTimeInputType.h"
    35 
    3634#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
     35#include "BaseMultipleFieldsDateAndTimeInputType.h"
    3736
    3837namespace WebCore {
    3938
    40 class DateTimeLocalInputType : public BaseDateAndTimeInputType {
     39#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
     40typedef BaseMultipleFieldsDateAndTimeInputType BaseDateTimeLocalInputType;
     41#else
     42typedef BaseDateAndTimeInputType BaseDateTimeLocalInputType;
     43#endif
     44
     45class DateTimeLocalInputType : public BaseDateTimeLocalInputType {
    4146public:
    4247    static PassOwnPtr<InputType> create(HTMLInputElement*);
    4348
    4449private:
    45     DateTimeLocalInputType(HTMLInputElement* element) : BaseDateAndTimeInputType(element) { }
     50    DateTimeLocalInputType(HTMLInputElement* element) : BaseDateTimeLocalInputType(element) { }
    4651    virtual const AtomicString& formControlType() const OVERRIDE;
    4752    virtual DateComponents::Type dateType() const OVERRIDE;
    … …  
    5257    virtual bool setMillisecondToDateComponents(double, DateComponents*) const OVERRIDE;
    5358    virtual bool isDateTimeLocalField() const OVERRIDE;
     59
     60#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
     61    // BaseMultipleFieldsDateAndTimeInputType functions
     62    virtual String formatDateTimeFieldsState(const DateTimeFieldsState&) const OVERRIDE FINAL;
     63    virtual void setupLayoutParameters(DateTimeEditElement::LayoutParameters&, const DateComponents&) const OVERRIDE FINAL;
     64#endif
    5465};
    5566

  • trunk/Source/WebCore/html/shadow/DateTimeEditElement.cpp

    r130024 r130147  
    6868    const StepRange m_stepRange;
    6969    Localizer& m_localizer;
     70    const String m_placeholderForDay;
    7071    const String m_placeholderForMonth;
    7172    const String m_placeholderForYear;
    … …  
    7778    , m_stepRange(layoutParameters.stepRange)
    7879    , m_localizer(layoutParameters.localizer)
     80    , m_placeholderForDay(layoutParameters.placeholderForDay)
    7981    , m_placeholderForMonth(layoutParameters.placeholderForMonth)
    8082    , m_placeholderForYear(layoutParameters.placeholderForYear)
    … …  
    100102
    101103    switch (fieldType) {
     104    case DateTimeFormat::FieldTypeDayOfMonth:
     105        m_editElement.addField(DateTimeDayFieldElement::create(document, m_editElement, m_placeholderForDay));
     106        return;
     107
    102108    case DateTimeFormat::FieldTypeHour11:
    103109        m_editElement.addField(DateTimeHourFieldElement::create(document, m_editElement, 0, 11));

  • trunk/Source/WebCore/html/shadow/DateTimeEditElement.h

    r129867 r130147  
    6767        Localizer& localizer;
    6868        const StepRange stepRange;
     69        String placeholderForDay;
    6970        String placeholderForMonth;
    7071        String placeholderForYear;
Note: See TracChangeset for help on using the changeset viewer.