Source/WebCore/ChangeLog

 12012-09-28 Yoshifumi Inoue <yosin@chromium.org>
 2
 3 [Forms] Multiple fields month input UI
 4 https://bugs.webkit.org/show_bug.cgi?id=97299
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 This patch introduces multiple fields "month" input UI in DRT. We'll
 9 enable this feature once we add tests.
 10
 11 Note: This patch affects ports which enable both ENABLE_INPUT_TYPE_MONTH
 12 and ENABLE_INPUT_MULTIPLE_FIELDS_UI.
 13
 14 No new tests. To reduce size of this patch, other patches add tests
 15 for multiple fields month input UI.
 16
 17 * css/html.css:
 18 (input::-webkit-datetime-edit-month-field): Added for field appearance.
 19 (input::-webkit-datetime-edit-year-field): ditto.
 20 (input::-webkit-datetime-edit-month-field:focus): Added to remove focus ring.
 21 (input::-webkit-datetime-edit-year-field:focus): ditto.
 22 * html/MonthInputType.cpp:
 23 (WebCore::MonthInputType::formatDateTimeFieldsState): Added to format numeric value to string value as specified in HTML5 specification.
 24 (WebCore::MonthInputType::setupLayoutParameters): Added to set layout of multiple fields.
 25 * html/MonthInputType.h: Changed to include BaseMultipleFieldsDateAndTimeInputType.h and introduce BaseMonthInputType typedef.
 26 (WebCore::MonthInputType::MonthInputType): Changed base class name to BaseMonthInputType.
 27 (MonthInputType): Changed to add declarations for formatDateTimeFieldsState() and setupLayoutParameters().
 28 * html/shadow/DateTimeEditElement.cpp:
 29 (DateTimeEditBuilder): Changed to have copy of object in m_stepRange and m_dateValue member variables for being robust.
 30 (WebCore::DateTimeEditBuilder::DateTimeEditBuilder): Changed to add initialize m_placeholderForMonth and m_placeholderForYear.
 31 (WebCore::DateTimeEditBuilder::visitField): Changed to support month field and year field.
 32 * html/shadow/DateTimeEditElement.h:
 33 (LayoutParameters): Changed to add member variables, placeholderForMonth and placeholderForYear. Changed to have copy of object in stepRange member variable for being robust.
 34
1352012-09-28 Eugene Klyuchnikov <eustas.bug@gmail.com>
236
337 Web Inspector: Elements: Show entities in edit as HTML.

Source/WebCore/css/html.css

@@datalist {
477477#endif
478478
479479#if defined(ENABLE_INPUT_MULTIPLE_FIELDS_UI) && ENABLE_INPUT_MULTIPLE_FIELDS_UI
 480input[type="month"],
480481input[type="time"] {
481482 font-family: monospace;
482483}

@@input::-webkit-datetime-edit-minute-field {
519520 padding: 0.15em;
520521}
521522
 523input::-webkit-datetime-edit-month-field {
 524 -webkit-user-modify: read-only !important;
 525 display: inline-block;
 526 border: none;
 527 text-align: center;
 528 padding: 0.15em;
 529}
 530
522531/* This selector is used when step >= 3600 second but format contains minute field. */
523532input::-webkit-datetime-edit-minute-field[readonly] {
524533 color: GrayText;

@@input::-webkit-datetime-edit-second-field {
532541 padding: 0.15em;
533542}
534543
 544input::-webkit-datetime-edit-year-field {
 545 -webkit-user-modify: read-only !important;
 546 display: inline-block;
 547 border: none;
 548 text-align: center;
 549 padding: 0.15em;
 550}
 551
535552/* Remove focus ring from fields and use highlight color */
536553input::-webkit-datetime-edit-ampm-field:focus,
537554input::-webkit-datetime-edit-hour-field:focus,
538555input::-webkit-datetime-edit-millisecond-field:focus,
539556input::-webkit-datetime-edit-minute-field:focus,
540 input::-webkit-datetime-edit-second-field:focus {
 557input::-webkit-datetime-edit-month-field:focus,
 558input::-webkit-datetime-edit-second-field:focus,
 559input::-webkit-datetime-edit-year-field:focus {
541560 background-color: highlight;
542561 color: highlighttext;
543562 outline: none;

@@input::-webkit-datetime-edit-second-field[readonly] {
548567 color: GrayText;
549568}
550569
 570input[type="month"]::-webkit-inner-spin-button,
551571input[type="time"]::-webkit-inner-spin-button {
552572 margin-left: 0.2em;
553573}

Source/WebCore/html/MonthInputType.cpp

4242
4343#if ENABLE(INPUT_TYPE_MONTH)
4444
 45#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
 46#include "DateTimeFieldsState.h"
 47#include "LocalizedStrings.h"
 48#include "Localizer.h"
 49#include <wtf/text/WTFString.h>
 50#endif
 51
4552namespace WebCore {
4653
4754using namespace HTMLNames;

@@bool MonthInputType::isMonthField() const
137144 return true;
138145}
139146
 147#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
 148String MonthInputType::formatDateTimeFieldsState(const DateTimeFieldsState& dateTimeFieldsState) const
 149{
 150 if (!dateTimeFieldsState.hasMonth() || !dateTimeFieldsState.hasYear())
 151 return emptyString();
 152 return String::format("%04u-%02u", dateTimeFieldsState.year(), dateTimeFieldsState.month());
 153}
 154
 155void MonthInputType::setupLayoutParameters(DateTimeEditElement::LayoutParameters& layoutParameters, const DateComponents& date) const
 156{
 157 layoutParameters.dateTimeFormat = monthFormatInLDML();
 158 layoutParameters.fallbackDateTimeFormat = "MM/yyyy";
 159 layoutParameters.placeholderForMonth = "--";
 160 layoutParameters.placeholderForYear = "----";
 161}
 162#endif
140163} // namespace WebCore
141164
142165#endif

Source/WebCore/html/MonthInputType.h

3131#ifndef MonthInputType_h
3232#define MonthInputType_h
3333
34 #include "BaseDateAndTimeInputType.h"
35 
3634#if ENABLE(INPUT_TYPE_MONTH)
 35#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
 36#include "BaseMultipleFieldsDateAndTimeInputType.h"
 37#else
 38#include "BaseDateAndTimeInputType.h"
 39#endif
3740
3841namespace WebCore {
3942
40 class MonthInputType : public BaseDateAndTimeInputType {
 43#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
 44typedef BaseMultipleFieldsDateAndTimeInputType BaseMonthInputType;
 45#else
 46typedef BaseDateAndTimeInputType BaseMonthInputType;
 47#endif
 48
 49class MonthInputType : public BaseMonthInputType {
4150public:
4251 static PassOwnPtr<InputType> create(HTMLInputElement*);
4352
4453private:
45  MonthInputType(HTMLInputElement* element) : BaseDateAndTimeInputType(element) { }
 54 MonthInputType(HTMLInputElement* element) : BaseMonthInputType(element) { }
4655 virtual const AtomicString& formControlType() const OVERRIDE;
4756 virtual DateComponents::Type dateType() const OVERRIDE;
4857 virtual double valueAsDate() const OVERRIDE;

@@private:
5362 virtual bool parseToDateComponentsInternal(const UChar*, unsigned length, DateComponents*) const OVERRIDE;
5463 virtual bool setMillisecondToDateComponents(double, DateComponents*) const OVERRIDE;
5564 virtual bool isMonthField() const OVERRIDE;
 65
 66#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
 67 // BaseMultipleFieldsDateAndTimeInputType functions
 68 virtual String formatDateTimeFieldsState(const DateTimeFieldsState&) const OVERRIDE FINAL;
 69 virtual void setupLayoutParameters(DateTimeEditElement::LayoutParameters&, const DateComponents&) const OVERRIDE FINAL;
 70#endif
5671};
5772
5873} // namespace WebCore

Source/WebCore/html/shadow/DateTimeEditElement.cpp

@@private:
6464 virtual void visitLiteral(const String&) OVERRIDE FINAL;
6565
6666 DateTimeEditElement& m_editElement;
67  const DateComponents& m_dateValue;
68  const StepRange& m_stepRange;
 67 const DateComponents m_dateValue;
 68 const StepRange m_stepRange;
6969 Localizer& m_localizer;
 70 const String m_placeholderForMonth;
 71 const String m_placeholderForYear;
7072};
7173
7274DateTimeEditBuilder::DateTimeEditBuilder(DateTimeEditElement& elemnt, const DateTimeEditElement::LayoutParameters& layoutParameters, const DateComponents& dateValue)

@@DateTimeEditBuilder::DateTimeEditBuilder(DateTimeEditElement& elemnt, const Date
7476 , m_dateValue(dateValue)
7577 , m_stepRange(layoutParameters.stepRange)
7678 , m_localizer(layoutParameters.localizer)
 79 , m_placeholderForMonth(layoutParameters.placeholderForMonth)
 80 , m_placeholderForYear(layoutParameters.placeholderForYear)
7781{
7882}
7983

@@void DateTimeEditBuilder::visitField(DateTimeFormat::FieldType fieldType, int)
119123 return;
120124 }
121125
 126 case DateTimeFormat::FieldTypeMonth:
 127 // We always use "MM", two digits month, even if "M", "MMM", "MMMM", or "MMMMM".
 128 m_editElement.addField(DateTimeMonthFieldElement::create(document, m_editElement, m_placeholderForMonth));
 129 return;
 130
122131 case DateTimeFormat::FieldTypePeriod:
123132 m_editElement.addField(DateTimeAMPMFieldElement::create(document, m_editElement, m_localizer.timeAMPMLabels()));
124133 return;

@@void DateTimeEditBuilder::visitField(DateTimeFormat::FieldType fieldType, int)
144153 return;
145154 }
146155
 156 case DateTimeFormat::FieldTypeYear:
 157 m_editElement.addField(DateTimeYearFieldElement::create(document, m_editElement, m_placeholderForYear));
 158 return;
 159
147160 default:
148161 return;
149162 }

Source/WebCore/html/shadow/DateTimeEditElement.h

@@public:
6565 String dateTimeFormat;
6666 String fallbackDateTimeFormat;
6767 Localizer& localizer;
68  const StepRange& stepRange;
 68 const StepRange stepRange;
 69 String placeholderForMonth;
 70 String placeholderForYear;
6971
7072 LayoutParameters(Localizer& localizer, const StepRange& stepRange)
7173 : localizer(localizer)