Update calendar picker UI
authorkeishi@webkit.org <keishi@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 8 Mar 2013 07:37:00 +0000 (07:37 +0000)
committerkeishi@webkit.org <keishi@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 8 Mar 2013 07:37:00 +0000 (07:37 +0000)
commitd9848e6ecab0b3c69ddb148bbbfb4a4311b3e11c
tree19b9bceffa30240f6833799ffd79e249f922b2ed
parenta6758081d4f59c56b701af6cf9d94fbf77182ef6
Update calendar picker UI
https://bugs.webkit.org/show_bug.cgi?id=109439

Reviewed by Kent Tamura.

.:

* ManualTests/forms/calendar-picker.html: New test file with more options.
* ManualTests/forms/date-suggestion-picker.html: Copied from ManualTests/forms/calendar-picker.html. Old one kept for dat/time suggestion picker testing.

Source/WebCore:

This patch changes the calendar picker UI.

Added tests to existing calendar picker tests.
Test: platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html

* Resources/pagepopups/calendarPicker.css:
(body):
(.rtl):
(.scroll-view):
(.scroll-view-content):
(.list-cell):
(.list-cell.hidden):
(.day-cell):
(.week-number-cell):
(.day-cell.today):
(.day-cell.highlighted):
(.day-cell.highlighted.disabled):
(.day-cell.selected):
(.day-cell.disabled):
(.day-cell.current-month):
(.calendar-table-view):
(.preparing .calendar-table-view:focus):
(.week-day-label):
(.week-number-label):
(.calendar-table-header-view):
(.calendar-picker):
(.calendar-header-view):
(.calendar-title):
(.rtl .calendar-title):
(.month-popup-button:disabled):
(.month-popup-button):
(.month-popup-button .disclosure-triangle):
(.month-popup-button .disclosure-triangle svg):
(.today-button::after):
(.calendar-navigation-button):
(.year-list-view):
(.year-list-cell):
(.year-list-cell .label):
(.year-list-cell .month-chooser):
(.month-buttons-row):
(.month-button):
(.month-button.highlighted):
(.scrubby-scroll-bar):
(.scrubby-scroll-thumb):
(.month-popup-view):
(.year-list-view .scrubby-scroll-bar):
(.rtl .year-list-view .scrubby-scroll-bar):
* Resources/pagepopups/calendarPicker.js:
(setGlobalParams): Sets the global params.
(initialize):
(openCalendarPicker):
(CalendarHeaderView.prototype.onNavigationButtonClick): Fix typo.
(CalendarPicker):
(CalendarPicker.prototype.onWindowResize): We want to have the "preparing" class applied
to cancel css transitions while setting up the calendar picker so we can avoid flaky pixel tests.
(CalendarPicker.prototype.onYearListViewDidHide): The user clicked on a month so hide the month popup.
(CalendarPicker.prototype.onYearListViewDidSelectMonth): Change the current month in response to the month popup.
(CalendarPicker.prototype.attachTo): We want the calendar table focused when the calendar picker first opens.
(CalendarPicker.prototype.cleanup): Clean up any event listeners or elements attached to nodes outside of this.element.
(CalendarPicker.prototype.onMonthPopupButtonClick): Open the month popup in response to the month popup button being clicked.
(CalendarPicker.prototype._setConfig): Configures the calendar picker.
(CalendarPicker.prototype.currentMonth): The currently shown month.
(CalendarPicker.prototype.setCurrentMonth): Scrolls the calendar table to the given month. Use the navigation behavior param to specify if you want a transition animation.
(CalendarPicker.prototype.adjustHeight): Adjusts the height so its just tall enough to fit the current month. If the month picker is open, fit that.
(CalendarPicker.prototype.selection): Currently selected date range.
(CalendarPicker.prototype.highlight): Currently highlighted date range.
(CalendarPicker.prototype.firstVisibleDay): Returns the first visible day ignoring scroll animation (i.e. this is the first visible day when the scroll animation is done).
(CalendarPicker.prototype.lastVisibleDay): Returns the last visible day ignoring scroll animation.
(CalendarPicker.prototype.selectRangeContainingDay): Sets the selection to the date range containing the given day.
(CalendarPicker.prototype.highlightRangeContainingDay): Sets the highlight to the date range containing the given day.
(CalendarPicker.prototype.setSelection): Sets the selection to the given date range.
(CalendarPicker.prototype._setHighlight): Sets the highlight to the given date range.
(CalendarPicker.prototype._stepMismatch): Just moving.
(CalendarPicker.prototype._outOfRange): Ditto.
(CalendarPicker.prototype.isValid): Returns true if the given date range is a valid selection.
(CalendarPicker.prototype.isValidDay): Returns true if the day is part of a valid selection.
(CalendarPicker.prototype._moveHighlight): Moves the highlight to the given date range if possible. Returns true if it succeeds.
(CalendarPicker.prototype.onCalendarTableKeyDown): Handles the arrow keys, etc.
(CalendarPicker.prototype.width):
(CalendarPicker.prototype.height):
(CalendarPicker.prototype.setHeight):
(CalendarPicker.prototype.onBodyKeyDown): Handles esc/m/y/d.
* Resources/pagepopups/chromium/calendarPickerChromium.css:
(.calendar-table-view:focus):
(.preparing .calendar-table-view:focus):

Source/WebKit/chromium:

* src/DateTimeChooserImpl.cpp:
(WebKit::DateTimeChooserImpl::writeDocument): Adding shortMonthLabels property.

LayoutTests:

* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ar-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-ar-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png:
* platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt: Removed.
* platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt: Removed.
* platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt:
* platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt:
* platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt:
* platform/chromium/TestExpectations:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step.html:
* platform/chromium/fast/forms/calendar-picker/date-picker-events-expected.txt:
* platform/chromium/fast/forms/calendar-picker/date-picker-events.html:
* platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events-expected.txt:
* platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events.html:
* platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/month-picker-key-operations.html:
* platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations.html:
* platform/chromium/fast/forms/calendar-picker/month-picker-with-step-expected.txt:
* platform/chromium/fast/forms/calendar-picker/month-picker-with-step.html:
* platform/chromium/fast/forms/calendar-picker/resources/calendar-picker-common.js:
(currentMonth):
(highlightedValue):
(selectedValue):
(skipAnimation):
(hoverOverDayCellAt):
(clickDayCellAt):
* platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/week-picker-key-operations.html:
* platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations.html:
* platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations.html:
* platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations.html:
* platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@145186 268f45cc-cd09-0410-ab3c-d52691b4dbfc
64 files changed:
ChangeLog
LayoutTests/ChangeLog
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ar-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.png [new file with mode: 0644]
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-ar-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt [deleted file]
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt [deleted file]
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium/TestExpectations
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.txt [new file with mode: 0644]
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html [new file with mode: 0644]
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/date-picker-events-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/date-picker-events.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-with-step-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-with-step.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/resources/calendar-picker-common.js
LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations.html
LayoutTests/platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations.html
ManualTests/forms/calendar-picker.html
ManualTests/forms/date-suggestion-picker.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/Resources/pagepopups/calendarPicker.css
Source/WebCore/Resources/pagepopups/calendarPicker.js
Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css
Source/WebKit/chromium/ChangeLog
Source/WebKit/chromium/src/DateTimeChooserImpl.cpp