Adjust design of the Calendar Picker
authorkeishi@webkit.org <keishi@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 25 Jan 2013 05:28:46 +0000 (05:28 +0000)
committerkeishi@webkit.org <keishi@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 25 Jan 2013 05:28:46 +0000 (05:28 +0000)
https://bugs.webkit.org/show_bug.cgi?id=107507

Reviewed by Kent Tamura.

.:

* ManualTests/forms/calendar-picker.html: Use pickerCommonChromium.css and calendarPickerChromium.css.

Source/WebCore:

Covered by existing calendar picker appearance tests.

* Resources/pagepopups/calendarPicker.css:
(body): Use bigger font.
(.calendar-picker):
(.month-selector):
(.month-selector svg):
(.month-selector-popup-contents):
(.year-month-button-left .year-month-button):
(.year-month-button-right .year-month-button):
(.days-area-container):
(.days-area):
(.day-label):
(.day):
(.available):
(.month-mode .day):
(.today-clear-area .today-button):
* Resources/pagepopups/calendarPicker.js:
(CalendarPicker.prototype.fixWindowSize): Calculate the width of today-clear-area too.
(YearMonthController.prototype.attachTo):
(YearMonthController.prototype._attachLeftButtonsTo): Use svg icons inside buttons.
(YearMonthController.prototype._attachRightButtonsTo): Use svg icons inside buttons.
(YearMonthController.prototype.setMonth):
(YearMonthController.prototype._handleButtonClick):
* Resources/pagepopups/calendarPickerMac.css: Removed.
* Resources/pagepopups/chromium/calendarPickerChromium.css: Added.
(.year-month-button):
(.days-area-container:focus):
* Resources/pagepopups/chromium/pickerCommonChromium.css: Added. Use Chrome-style buttons.
(button):
(:enabled:hover:-webkit-any(button, input[type='button'])):
(:enabled:active:-webkit-any(button, input[type='button'])):
(:disabled:-webkit-any(button, input[type='button'])):
(:enabled:focus:-webkit-any(button, input[type='button'])):
* WebCore.gyp/WebCore.gyp: Include pickerCommonChromium.css and calendarPickerChromium.css.
* rendering/RenderTheme.cpp: Remove extraCalendarPickerStyleSheet
* rendering/RenderTheme.h: Ditto.
* rendering/RenderThemeChromiumMac.h: Ditto.
* rendering/RenderThemeChromiumMac.mm: Ditto.
(WebCore):

Source/WebKit/chromium:

* src/DateTimeChooserImpl.cpp:
(WebKit::DateTimeChooserImpl::writeDocument):  Include pickerCommonChromium.css and calendarPickerChromium.css.

LayoutTests:

* platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt:
* 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/week-picker-key-operations-expected.txt:
* platform/chromium-win/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt:
* platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt:
* platform/chromium-win/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-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-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/TestExpectations: Marking calendar picker appearance tests as needing rebaseline.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@140778 268f45cc-cd09-0410-ab3c-d52691b4dbfc

33 files changed:
ChangeLog
LayoutTests/ChangeLog
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-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/calendar-picker-key-operations-expected.txt
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt
LayoutTests/platform/chromium/TestExpectations
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/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/week-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations.html
ManualTests/forms/calendar-picker.html
Source/WebCore/ChangeLog
Source/WebCore/Resources/pagepopups/calendarPicker.css
Source/WebCore/Resources/pagepopups/calendarPicker.js
Source/WebCore/Resources/pagepopups/calendarPickerMac.css [deleted file]
Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css [new file with mode: 0644]
Source/WebCore/Resources/pagepopups/chromium/pickerCommonChromium.css [new file with mode: 0644]
Source/WebCore/WebCore.gyp/WebCore.gyp
Source/WebCore/rendering/RenderTheme.cpp
Source/WebCore/rendering/RenderTheme.h
Source/WebCore/rendering/RenderThemeChromiumMac.h
Source/WebCore/rendering/RenderThemeChromiumMac.mm
Source/WebKit/chromium/ChangeLog
Source/WebKit/chromium/src/DateTimeChooserImpl.cpp

index 9f9793c..8eaca7b 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,12 @@
+2013-01-24  Keishi Hattori  <keishi@webkit.org>
+
+        Adjust design of the Calendar Picker
+        https://bugs.webkit.org/show_bug.cgi?id=107507
+
+        Reviewed by Kent Tamura.
+
+        * ManualTests/forms/calendar-picker.html: Use pickerCommonChromium.css and calendarPickerChromium.css.
+
 2013-01-24  Soo-Hyun Choi  <s.choi@hackerslab.eu>
 
         [CMake] Remove the definition of WTF_PLATFORM_WIN from the build system
index 70ae196..eb2aee1 100644 (file)
@@ -1,3 +1,28 @@
+2013-01-24  Keishi Hattori  <keishi@webkit.org>
+
+        Adjust design of the Calendar Picker
+        https://bugs.webkit.org/show_bug.cgi?id=107507
+
+        Reviewed by Kent Tamura.
+
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations.html:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt:
+        * 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/week-picker-key-operations-expected.txt:
+        * platform/chromium-win/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt:
+        * platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt:
+        * platform/chromium-win/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-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-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/TestExpectations: Marking calendar picker appearance tests as needing rebaseline.
+
 2013-01-24  Michael Saboff  <msaboff@apple.com>
 
         Add js/regress tests for integer modulo
index 4f6aefc..594be28 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png differ
index bd1bfc4..d4eadc5 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png differ
index 0641e4a..ebca715 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png differ
index c449749..8f703ee 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png differ
index 23b6ff7..43ffa26 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png differ
index ccad192..60735ac 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png differ
index 65d63d8..0d0eb9b 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png differ
index 5ebfe6b..bb9e00a 100644 (file)
@@ -49,7 +49,7 @@ Check if tabbing works.
 PASS focusedElement() is ".days-area-container"
 PASS focusedElement() is ".today-button[value=<<CalendarToday>>]"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button[value=<<]"
+PASS focusedElement() is ".year-month-button"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("date").value is "1999-12-26"
index 2a92feb..341411e 100644 (file)
@@ -45,7 +45,7 @@ Check if tabbing works.
 PASS focusedElement() is ".days-area-container"
 PASS focusedElement() is ".today-button[value=<<ThisMonthLabel>>]"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button[value=<<]"
+PASS focusedElement() is ".year-month-button"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("month").value is "2000-02"
index d198aef..a08b074 100644 (file)
@@ -49,7 +49,7 @@ Check if tabbing works.
 PASS focusedElement() is ".days-area-container"
 PASS focusedElement() is ".today-button[value=<<ThisWeekLabel>>]"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button[value=<<]"
+PASS focusedElement() is ".year-month-button"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("week").value is "2000-W02"
index 4e71242..8e176a9 100644 (file)
@@ -4239,6 +4239,15 @@ webkit.org/b/106426 [ Win ] inspector/geolocation-success.html [ Failure Pass ]
 webkit.org/b/106426 [ Win ] inspector/geolocation-watchPosition.html [ Failure Pass ]
 crbug.com/166932 [ Debug ] plugins/embed-attributes-setting.html [ Crash Pass ]
 
+# Needs rebaseline.
+webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step.html [ ImageOnlyFailure Pass ]
+webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/week-picker-appearance.html [ ImageOnlyFailure Pass ]
+webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru.html [ ImageOnlyFailure Pass ]
+webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step.html [ ImageOnlyFailure Pass ]
+webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/month-picker-appearance.html [ ImageOnlyFailure Pass ]
+webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step.html [ ImageOnlyFailure Pass ]
+webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance.html [ ImageOnlyFailure Pass ]
+                    
 # Broken by Skia flag changes in r139445
 crbug.com/169550 [ Debug ] fast/lists/big-list-marker.html [ Crash ]
 crbug.com/169550 [ Debug ] platform/chromium/virtual/deferred/fast/images/icon-decoding.html [ Crash ]
index 3fbe0f7..8d947f5 100644 (file)
@@ -49,7 +49,7 @@ Check if tabbing works.
 PASS focusedElement() is ".days-area-container"
 PASS focusedElement() is ".today-button[value=<<CalendarToday>>]"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button[value=<<]"
+PASS focusedElement() is ".year-month-button"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("date").value is "1999-12-26"
index 21e1c01..a3430e8 100644 (file)
@@ -106,7 +106,7 @@ function test2() {
     eventSender.keyDown('\t');
     shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
     eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".year-month-button[value=<<]"');
+    shouldBe('focusedElement()', '".year-month-button"');
     eventSender.keyDown('\t', ['shiftKey']);
     shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
 
index 9e8bfcb..22d46d4 100644 (file)
@@ -45,7 +45,7 @@ Check if tabbing works.
 PASS focusedElement() is ".days-area-container"
 PASS focusedElement() is ".today-button[value=<<ThisMonthLabel>>]"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button[value=<<]"
+PASS focusedElement() is ".year-month-button"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("month").value is "2000-02"
index 7958820..d15ce62 100644 (file)
@@ -98,7 +98,7 @@ function test2() {
     eventSender.keyDown('\t');
     shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
     eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".year-month-button[value=<<]"');
+    shouldBe('focusedElement()', '".year-month-button"');
     eventSender.keyDown('\t', ['shiftKey']);
     shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
 
index f4c4491..c2f2d3b 100644 (file)
@@ -49,7 +49,7 @@ Check if tabbing works.
 PASS focusedElement() is ".days-area-container"
 PASS focusedElement() is ".today-button[value=<<ThisWeekLabel>>]"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button[value=<<]"
+PASS focusedElement() is ".year-month-button"
 PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("week").value is "2000-W02"
index 888f0e4..fe54a04 100644 (file)
@@ -106,7 +106,7 @@ function test2() {
     eventSender.keyDown('\t');
     shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
     eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".year-month-button[value=<<]"');
+    shouldBe('focusedElement()', '".year-month-button"');
     eventSender.keyDown('\t', ['shiftKey']);
     shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
 
index a1d5dde..20e14a8 100644 (file)
@@ -262,6 +262,10 @@ function openCalendar(args) {
     commonCssLink.rel = 'stylesheet';
     commonCssLink.href = '../../Source/WebCore/Resources/pagepopups/pickerCommon.css?' + (new Date()).getTime();
     doc.head.appendChild(commonCssLink);
+    var commonChromiumCssLink = doc.createElement('link');
+    commonChromiumCssLink.rel = 'stylesheet';
+    commonChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/pickerCommonChromium.css?' + (new Date()).getTime();
+    doc.head.appendChild(commonChromiumCssLink);
     var suggestionPickerCssLink = doc.createElement('link');
     suggestionPickerCssLink.rel = 'stylesheet';
     suggestionPickerCssLink.href = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.css?' + (new Date()).getTime();
@@ -270,6 +274,10 @@ function openCalendar(args) {
     link.rel = 'stylesheet';
     link.href = '../../Source/WebCore/Resources/pagepopups/calendarPicker.css?' + (new Date()).getTime();
     doc.head.appendChild(link);
+    var calendarPickerChromiumCssLink = doc.createElement('link');
+    calendarPickerChromiumCssLink.rel = 'stylesheet';
+    calendarPickerChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css?' + (new Date()).getTime();
+    doc.head.appendChild(calendarPickerChromiumCssLink);
     var commonJsScript = doc.createElement('script');
     commonJsScript.src = '../../Source/WebCore/Resources/pagepopups/pickerCommon.js?' + (new Date()).getTime();
     doc.body.appendChild(commonJsScript);
@@ -291,6 +299,7 @@ function openCalendar(args) {
                 return numString.toLocaleString();
             return numString.toString();
         },
+        histogramEnumeration: function() {},
         formatMonth: function(year, zeroBaseMonth) {
             var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',
                                '<July>', '<August>', '<September>', '<October>', '<November>', '<December>'];
index 88c7876..e8a5115 100644 (file)
@@ -1,3 +1,51 @@
+2013-01-24  Keishi Hattori  <keishi@webkit.org>
+
+        Adjust design of the Calendar Picker
+        https://bugs.webkit.org/show_bug.cgi?id=107507
+
+        Reviewed by Kent Tamura.
+
+        Covered by existing calendar picker appearance tests.
+
+        * Resources/pagepopups/calendarPicker.css:
+        (body): Use bigger font.
+        (.calendar-picker):
+        (.month-selector):
+        (.month-selector svg):
+        (.month-selector-popup-contents):
+        (.year-month-button-left .year-month-button):
+        (.year-month-button-right .year-month-button):
+        (.days-area-container):
+        (.days-area):
+        (.day-label):
+        (.day):
+        (.available):
+        (.month-mode .day):
+        (.today-clear-area .today-button):
+        * Resources/pagepopups/calendarPicker.js:
+        (CalendarPicker.prototype.fixWindowSize): Calculate the width of today-clear-area too.
+        (YearMonthController.prototype.attachTo):
+        (YearMonthController.prototype._attachLeftButtonsTo): Use svg icons inside buttons.
+        (YearMonthController.prototype._attachRightButtonsTo): Use svg icons inside buttons.
+        (YearMonthController.prototype.setMonth):
+        (YearMonthController.prototype._handleButtonClick):
+        * Resources/pagepopups/calendarPickerMac.css: Removed.
+        * Resources/pagepopups/chromium/calendarPickerChromium.css: Added.
+        (.year-month-button):
+        (.days-area-container:focus):
+        * Resources/pagepopups/chromium/pickerCommonChromium.css: Added. Use Chrome-style buttons.
+        (button):
+        (:enabled:hover:-webkit-any(button, input[type='button'])):
+        (:enabled:active:-webkit-any(button, input[type='button'])):
+        (:disabled:-webkit-any(button, input[type='button'])):
+        (:enabled:focus:-webkit-any(button, input[type='button'])):
+        * WebCore.gyp/WebCore.gyp: Include pickerCommonChromium.css and calendarPickerChromium.css.
+        * rendering/RenderTheme.cpp: Remove extraCalendarPickerStyleSheet
+        * rendering/RenderTheme.h: Ditto.
+        * rendering/RenderThemeChromiumMac.h: Ditto.
+        * rendering/RenderThemeChromiumMac.mm: Ditto.
+        (WebCore):
+
 2013-01-24  Kentaro Hara  <haraken@chromium.org>
 
         Unreviewed build fix.
index 8e2eaf9..d97845d 100644 (file)
@@ -31,7 +31,7 @@
 body {
     -webkit-user-select: none;
     background-color: white;
-    font: -webkit-small-control;
+    font: -webkit-control;
     margin: 0;
     overflow: hidden;
 }
@@ -41,11 +41,11 @@ body {
 }
 
 .calendar-picker {
+    border: 1px solid #bfbfbf;
+    border-radius: 2px;
+    position: absolute;
+    padding: 10px;
     background-color: white;
-    border: solid 1px #8899aa;
-    box-shadow: inset 2px 2px 2px white,
-        inset -2px -2px 1px rgba(0,0,0,0.1);
-    padding: 6px;
     white-space: nowrap;
     width: 500px;
 }
@@ -72,11 +72,11 @@ body {
     background-color: white;
     cursor: pointer;
     display: inline-block;
-    padding: 3px 6px 3px 6px;
+    padding: 4px 6px 4px 6px;
 }
-.month-selector:after {
-    content: " ▼";
-    font-size: smaller;
+
+.month-selector svg {
+    margin: 0 6px 2px 6px;
 }
 
 .month-selector-popup {
@@ -97,6 +97,9 @@ body {
 
 .month-selector-popup-contents {
     display: table;
+    text-align: left;
+    border: 1px solid #bfbfbf;
+    margin: -1px 0 0 -1px;
 }
 
 .month-selector-popup-entry {
@@ -137,15 +140,23 @@ body {
     display: inline-block;
 }
 
+.year-month-button-left .year-month-button {
+    margin-right: 4px;
+}
+
 .year-month-button-right {
     display: inline-block;
 }
 
+.year-month-button-right .year-month-button {
+    margin-left: 4px;
+}
+
 .days-area-container {
     background-color: white;
-    border: solid 1px black;
-    margin-bottom: 4px;
-    margin-top: 4px;
+    border: 1px solid #bfbfbf;
+    margin-bottom: 8px;
+    margin-top: 10px;
     overflow: hidden;
 }
 
@@ -153,19 +164,17 @@ body {
     background-color: white;
     border-collapse: separate;
     border-spacing: 0px;
-    font: -webkit-small-control;
+    font: -webkit-control;
     /* table-layout:fixed and width:100% are added in the JS code. */
 }
 
 .day-label { /* <th> */
     -webkit-box-sizing: border-box;
-    background-color: #e3e9ff;
-    border-left-color: #f0f4ff;
-    border-top-color: #f0f4ff;
-    border: solid 1px #d0d4f0;
-    color: #20c;
+    background-color: #f5f5f5;
     font-weight: normal;
     text-align: center;
+    border-bottom: 1px solid #bfbfbf;
+    height: 2.1em;
 }
 
 .day { /* <td> */
@@ -174,6 +183,7 @@ body {
     background-color: white;
     border: 1px solid white;
     -webkit-box-sizing: border-box;
+    line-height: 1.4em;
 }
 
 @media (pointer:coarse) {
@@ -185,10 +195,8 @@ body {
 
 .available {
     cursor: default;
-    font-weight: 700;
     background-color: white;
     border: 1px solid white;
-    border-radius: 5px;
     -webkit-transition: all 0.2s ease;
 }
 
@@ -228,21 +236,10 @@ body {
 .week-mode .day,
 .month-mode .day {
     -webkit-transition: none;
-    border-radius: 0;
     border: none;
     padding: 2px;
 }
 
-.week-mode .available.day-selected.monday {
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-}
-
-.week-mode .available.day-selected.sunday {
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-}
-
 .week-mode .unavailable.day-selected {
     padding: 1px 2px;
     border-top: 1px solid highlight;
@@ -273,3 +270,7 @@ body {
     border-right: 1px solid #999;
     padding-right: 1px;
 }
+
+.today-clear-area .today-button {
+    margin-right: 8px;
+}
index 14814bd..e80bc6f 100644 (file)
@@ -760,6 +760,7 @@ CalendarPicker.prototype.handleClear = function() {
 CalendarPicker.prototype.fixWindowSize = function() {
     var yearMonthRightElement = this._element.getElementsByClassName(ClassNames.YearMonthButtonRight)[0];
     var daysAreaElement = this._element.getElementsByClassName(ClassNames.DaysArea)[0];
+    var clearButton = this._element.getElementsByClassName(ClassNames.ClearButton)[0];
     var headers = daysAreaElement.getElementsByClassName(ClassNames.DayLabel);
     var maxCellWidth = 0;
     for (var i = 1; i < headers.length; ++i) {
@@ -773,18 +774,21 @@ CalendarPicker.prototype.fixWindowSize = function() {
     var DaysAreaContainerBorder = 1;
     var yearMonthEnd;
     var daysAreaEnd;
+    var todayClearAreaEnd;
     if (global.params.isLocaleRTL) {
         var startOffset = this._element.offsetLeft + this._element.offsetWidth;
         yearMonthEnd = startOffset - yearMonthRightElement.offsetLeft;
         daysAreaEnd = startOffset - (daysAreaElement.offsetLeft + daysAreaElement.offsetWidth) + weekColumnWidth + maxCellWidth * 7 + DaysAreaContainerBorder;
+        todayClearAreaEnd = startOffset - clearButton.offsetLeft;
     } else {
         yearMonthEnd = yearMonthRightElement.offsetLeft + yearMonthRightElement.offsetWidth;
         daysAreaEnd = daysAreaElement.offsetLeft + weekColumnWidth + maxCellWidth * 7 + DaysAreaContainerBorder;
+        todayClearAreaEnd = clearButton.offsetLeft + clearButton.offsetWidth;
     }
-    var maxEnd = Math.max(yearMonthEnd, daysAreaEnd);
-    var MainPadding = 6; // FIXME: Fix name.
+    var maxEnd = Math.max(yearMonthEnd, daysAreaEnd, todayClearAreaEnd);
+    var MainPadding = 10; // FIXME: Fix name.
     var MainBorder = 1;
-    var desiredBodyWidth = maxEnd + MainPadding + MainBorder;
+    var desiredBodyWidth = maxEnd + MainPadding + MainBorder * 2;
 
     var elementHeight = this._element.offsetHeight;
     this._element.style.width = "auto";
@@ -881,6 +885,11 @@ YearMonthController.prototype.attachTo = function(element) {
     this._monthPopup.appendChild(this._monthPopupContents);
     box.appendChild(this._monthPopup);
     this._month = createElement("div", ClassNames.MonthSelector);
+    this._monthLabel = createElement("span");
+    this._month.appendChild(this._monthLabel);
+    var disclosureTriangle = createElement("span");
+    disclosureTriangle.innerHTML = "<svg width='7' height='5'><polygon points='0,1 7,1 3.5,5' style='fill:#000000;' /></svg>";
+    this._month.appendChild(disclosureTriangle);
     this._month.addEventListener("click", this._showPopup.bind(this), false);
     box.appendChild(this._month);
 
@@ -894,13 +903,13 @@ YearMonthController.prototype.attachTo = function(element) {
     var month = this.picker.maximumMonth;
     var maxWidth = 0;
     for (var m = 0; m < 12; ++m) {
-        this._month.textContent = month.toLocaleString();
+        this._monthLabel.textContent = month.toLocaleString();
         maxWidth = Math.max(maxWidth, this._month.offsetWidth);
         month = month.previous();
     }
     if (getLanguage() == "ja" && ImperialEraLimit < this.picker.maximumMonth.year) {
         for (var m = 0; m < 12; ++m) {
-            this._month.textContent = new Month(ImperialEraLimit, m).toLocaleString();
+            this._monthLabel.textContent = new Month(ImperialEraLimit, m).toLocaleString();
             maxWidth = Math.max(maxWidth, this._month.offsetWidth);
         }
     }
@@ -919,22 +928,19 @@ YearMonthController.prototype._attachLeftButtonsTo = function(parent) {
     parent.appendChild(container);
 
     if (YearMonthController.addTenYearsButtons) {
-        this._left3 = createElement("input", ClassNames.YearMonthButton);
-        this._left3.type = "button";
-        this._left3.value = "<<<";
+        this._left3 = createElement("button", ClassNames.YearMonthButton);
+        this._left3.textContent = "<<<";
         this._left3.addEventListener("click", this._handleButtonClick.bind(this), false);
         container.appendChild(this._left3);
     }
 
-    this._left2 = createElement("input", ClassNames.YearMonthButton);
-    this._left2.type = "button";
-    this._left2.value = "<<";
+    this._left2 = createElement("button", ClassNames.YearMonthButton);
+    this._left2.innerHTML = "<svg width='9' height='7'><polygon points='0,3.5 4,7 4,0' style='fill:#6e6e6e;' /><polygon points='5,3.5 9,7 9,0' style='fill:#6e6e6e;' /></svg>";
     this._left2.addEventListener("click", this._handleButtonClick.bind(this), false);
     container.appendChild(this._left2);
 
-    this._left1 = createElement("input", ClassNames.YearMonthButton);
-    this._left1.type = "button";
-    this._left1.value = "<";
+    this._left1 = createElement("button", ClassNames.YearMonthButton);
+    this._left1.innerHTML = "<svg width='4' height='7'><polygon points='0,3.5 4,7 4,0' style='fill:#6e6e6e;' /></svg>";
     this._left1.addEventListener("click", this._handleButtonClick.bind(this), false);
     container.appendChild(this._left1);
 };
@@ -945,22 +951,19 @@ YearMonthController.prototype._attachLeftButtonsTo = function(parent) {
 YearMonthController.prototype._attachRightButtonsTo = function(parent) {
     var container = createElement("div", ClassNames.YearMonthButtonRight);
     parent.appendChild(container);
-    this._right1 = createElement("input", ClassNames.YearMonthButton);
-    this._right1.type = "button";
-    this._right1.value = ">";
+    this._right1 = createElement("button", ClassNames.YearMonthButton);
+    this._right1.innerHTML = "<svg width='4' height='7'><polygon points='0,7 0,0, 4,3.5' style='fill:#6e6e6e;' /></svg>";
     this._right1.addEventListener("click", this._handleButtonClick.bind(this), false);
     container.appendChild(this._right1);
 
-    this._right2 = createElement("input", ClassNames.YearMonthButton);
-    this._right2.type = "button";
-    this._right2.value = ">>";
+    this._right2 = createElement("button", ClassNames.YearMonthButton);
+    this._right2.innerHTML = "<svg width='9' height='7'><polygon points='4,3.5 0,7 0,0' style='fill:#6e6e6e;' /><polygon points='9,3.5 5,7 5,0' style='fill:#6e6e6e;' /></svg>";
     this._right2.addEventListener("click", this._handleButtonClick.bind(this), false);
     container.appendChild(this._right2);
 
     if (YearMonthController.addTenYearsButtons) {
-        this._right3 = createElement("input", ClassNames.YearMonthButton);
-        this._right3.type = "button";
-        this._right3.value = ">>>";
+        this._right3 = createElement("button", ClassNames.YearMonthButton);
+        this._right3.textContent = ">>>";
         this._right3.addEventListener("click", this._handleButtonClick.bind(this), false);
         container.appendChild(this._right3);
     }
@@ -979,7 +982,7 @@ YearMonthController.prototype.setMonth = function(month) {
     this._right2.disabled = !this.picker.shouldShowMonth(new Month(monthValue + 2));
     if (this._right3)
         this._left3.disabled = !this.picker.shouldShowMonth(new Month(monthValue + 13));
-    this._month.innerText = month.toLocaleString();
+    this._monthLabel.innerText = month.toLocaleString();
     while (this._monthPopupContents.hasChildNodes())
         this._monthPopupContents.removeChild(this._monthPopupContents.firstChild);
 
@@ -1149,21 +1152,22 @@ YearMonthController.NextTenYears = 120;
  * @param {Event} event
  */
 YearMonthController.prototype._handleButtonClick = function(event) {
-    if (event.target == this._left3)
+    var button = enclosingNodeOrSelfWithClass(event.target, ClassNames.YearMonthButton);
+    if (button == this._left3)
         this.moveRelatively(YearMonthController.PreviousTenYears);
-    else if (event.target == this._left2) {
+    else if (button == this._left2) {
         this.picker.recordAction(CalendarPicker.Action.ClickedBackwardYearButton);
         this.moveRelatively(YearMonthController.PreviousYear);
-    } else if (event.target == this._left1) {
+    } else if (button == this._left1) {
         this.picker.recordAction(CalendarPicker.Action.ClickedBackwardMonthButton);
         this.moveRelatively(YearMonthController.PreviousMonth);
-    } else if (event.target == this._right1) {
+    } else if (button == this._right1) {
         this.picker.recordAction(CalendarPicker.Action.ClickedForwardMonthButton);
         this.moveRelatively(YearMonthController.NextMonth)
-    } else if (event.target == this._right2) {
+    } else if (button == this._right2) {
         this.picker.recordAction(CalendarPicker.Action.ClickedForwardYearButton);
         this.moveRelatively(YearMonthController.NextYear);
-    } else if (event.target == this._right3)
+    } else if (button == this._right3)
         this.moveRelatively(YearMonthController.NextTenYears);
     else
         return;
diff --git a/Source/WebCore/Resources/pagepopups/calendarPickerMac.css b/Source/WebCore/Resources/pagepopups/calendarPickerMac.css
deleted file mode 100644 (file)
index 4144645..0000000
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright (C) 2012 Google Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.year-month-button {
-    -webkit-appearance: none;
-    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.3, #fff), color-stop(0.35, #f7f7f7), color-stop(0.49, #f7f7f7), color-stop(0.5, #ededed), to(#ededed));
-    border: solid 1px #a6a6a6;
-    border-radius: 4px;
-    box-shadow: inset 1px 1px 1px rgba(255,255,255,0.4), inset -1px -1px 1px rgba(255,255,255,0.4);
-    padding-left: 3px;
-    padding-right: 3px;
-}
-
-.year-month-button:active {
-    background: -webkit-gradient(linear, left top, left bottom, from(#a3bfef), color-stop(0.49,  #6ba3ef), color-stop(0.5, #4491ef), to(#a3d1ef));
-    border: solid 1px #4d4d50;
-}
-
-.year-month-button:disabled {
-    color: #888;
-    border: solid 1px #d1d1d1;
-}
diff --git a/Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css b/Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css
new file mode 100644 (file)
index 0000000..c63e430
--- /dev/null
@@ -0,0 +1,14 @@
+.year-month-button {
+    width: 24px;
+    height: 24px;
+    min-width: 0;
+    padding: 0;
+}
+
+.days-area-container:focus {
+    -webkit-transition: border-color 200ms;
+    /* We use border color because it follows the border radius (unlike outline).
+    * This is particularly noticeable on mac. */
+    border-color: -webkit-focus-ring-color;
+    outline: none;
+}
diff --git a/Source/WebCore/Resources/pagepopups/chromium/pickerCommonChromium.css b/Source/WebCore/Resources/pagepopups/chromium/pickerCommonChromium.css
new file mode 100644 (file)
index 0000000..a15f45a
--- /dev/null
@@ -0,0 +1,46 @@
+input[type='button'],
+button {
+    -webkit-appearance: none;
+    -webkit-user-select: none;
+    background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 2px;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
+    inset 0 1px 2px rgba(255, 255, 255, 0.75);
+    color: #444;
+    font: inherit;
+    text-shadow: 0 1px 0 rgb(240, 240, 240);
+    min-height: 2em;
+    min-width: 4em;
+    -webkit-padding-end: 10px;
+    -webkit-padding-start: 10px;
+    margin: 0;
+}
+
+:enabled:hover:-webkit-any(button, input[type='button']) {
+    background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
+    border-color: rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
+    color: black;
+}
+
+:enabled:active:-webkit-any(button, input[type='button']) {
+    background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
+    box-shadow: none;
+    text-shadow: none;
+}
+
+:disabled:-webkit-any(button, input[type='button']) {
+    background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
+    border-color: rgba(80, 80, 80, 0.2);
+    box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
+    color: #aaa;
+}
+
+:enabled:focus:-webkit-any(button, input[type='button']) {
+    -webkit-transition: border-color 200ms;
+    /* We use border color because it follows the border radius (unlike outline).
+    * This is particularly noticeable on mac. */
+    border-color: -webkit-focus-ring-color;
+    outline: none;
+}
index 4a7d078..c6df156 100644 (file)
           'inputs': [
             '../Resources/pagepopups/calendarPicker.css',
             '../Resources/pagepopups/calendarPicker.js',
+            '../Resources/pagepopups/chromium/calendarPickerChromium.css',
+            '../Resources/pagepopups/chromium/pickerCommonChromium.css',
             '../Resources/pagepopups/suggestionPicker.css',
             '../Resources/pagepopups/suggestionPicker.js',
           ],
           ],
         },
         {
-          'action_name': 'CalendarPickerMac',
-          'inputs': [
-            '../Resources/pagepopups/calendarPickerMac.css',
-          ],
-          'outputs': [
-            '<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.h',
-            '<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.cpp',
-          ],
-          'action': [
-            'python',
-            '../make-file-arrays.py',
-            '--condition=ENABLE(CALENDAR_PICKER)',
-            '--out-h=<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.h',
-            '--out-cpp=<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.cpp',
-            '<@(_inputs)',
-          ],
-        },
-        {
           'action_name': 'ColorSuggestionPicker',
           'inputs': [
             '../Resources/pagepopups/colorSuggestionPicker.css',
           'include_dirs': [
             '<(chromium_src_dir)/third_party/apple_webkit',
           ],
-          'sources': [
-            '<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.cpp',
-          ],
         }],
         ['OS=="win"', {
           'defines': [
index 1ae9f39..9a0c4e7 100644 (file)
@@ -632,13 +632,6 @@ Color RenderTheme::platformInactiveListBoxSelectionForegroundColor() const
     return platformInactiveSelectionForegroundColor();
 }
 
-#if ENABLE(CALENDAR_PICKER)
-CString RenderTheme::extraCalendarPickerStyleSheet()
-{
-    return CString();
-}
-#endif
-
 int RenderTheme::baselinePosition(const RenderObject* o) const
 {
     if (!o->isBox())
index bbb86e1..60a9f5b 100644 (file)
@@ -95,9 +95,6 @@ public:
 #if ENABLE(FULLSCREEN_API)
     virtual String extraFullScreenStyleSheet() { return String(); };
 #endif
-#if ENABLE(CALENDAR_PICKER)
-    virtual CString extraCalendarPickerStyleSheet();
-#endif
 
     // A method to obtain the baseline position for a "leaf" control.  This will only be used if a baseline
     // position cannot be determined by examining child content. Checkboxes and radio buttons are examples of
index 5acd13a..95aa0bb 100644 (file)
@@ -74,9 +74,6 @@ private:
 #if ENABLE(DATALIST_ELEMENT)
     virtual LayoutUnit sliderTickSnappingThreshold() const OVERRIDE;
 #endif
-#if ENABLE(CALENDAR_PICKER)
-    virtual CString extraCalendarPickerStyleSheet() OVERRIDE;
-#endif
 #if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
     virtual bool supportsCalendarPicker(const AtomicString& type) const OVERRIDE;
 #endif
index 91fe6ba..830ae60 100644 (file)
@@ -20,7 +20,6 @@
 
 #import "config.h"
 
-#import "CalendarPickerMac.h"
 #import "LayoutTestSupport.h"
 #import "LocalCurrentGraphicsContext.h"
 #import "RenderThemeChromiumMac.h"
@@ -182,13 +181,6 @@ LayoutUnit RenderThemeChromiumMac::sliderTickSnappingThreshold() const
 }
 #endif
 
-#if ENABLE(CALENDAR_PICKER)
-CString RenderThemeChromiumMac::extraCalendarPickerStyleSheet()
-{
-    return CString(calendarPickerMacCss, WTF_ARRAY_LENGTH(calendarPickerMacCss));
-}
-#endif
-
 #if ENABLE(INPUT_MULTIPLE_FIELDS_UI) && ENABLE(CALENDAR_PICKER)
 bool RenderThemeChromiumMac::supportsCalendarPicker(const AtomicString& type) const
 {
index b4daf53..bab448c 100644 (file)
@@ -1,3 +1,13 @@
+2013-01-24  Keishi Hattori  <keishi@webkit.org>
+
+        Adjust design of the Calendar Picker
+        https://bugs.webkit.org/show_bug.cgi?id=107507
+
+        Reviewed by Kent Tamura.
+
+        * src/DateTimeChooserImpl.cpp:
+        (WebKit::DateTimeChooserImpl::writeDocument):  Include pickerCommonChromium.css and calendarPickerChromium.css.
+
 2013-01-24  James Robinson  <jamesr@chromium.org>
 
         [chromium] Remove dead transitional code from WebViewImpl
index 1b62ebd..7ce5f0a 100644 (file)
@@ -120,11 +120,10 @@ void DateTimeChooserImpl::writeDocument(WebCore::DocumentWriter& writer)
 
     addString("<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", writer);
     writer.addData(WebCore::pickerCommonCss, sizeof(WebCore::pickerCommonCss));
+    writer.addData(WebCore::pickerCommonChromiumCss, sizeof(WebCore::pickerCommonChromiumCss));
     writer.addData(WebCore::suggestionPickerCss, sizeof(WebCore::suggestionPickerCss));
     writer.addData(WebCore::calendarPickerCss, sizeof(WebCore::calendarPickerCss));
-    CString extraStyle = WebCore::RenderTheme::defaultTheme()->extraCalendarPickerStyleSheet();
-    if (extraStyle.length())
-        writer.addData(extraStyle.data(), extraStyle.length());
+    writer.addData(WebCore::calendarPickerChromiumCss, sizeof(WebCore::calendarPickerChromiumCss));
     addString("</style></head><body><div id=main>Loading...</div><script>\n"
                "window.dialogArguments = {\n", writer);
     addProperty("anchorRectInScreen", anchorRectInScreen, writer);