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
+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
+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
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"
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"
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"
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 ]
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"
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>>]"');
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"
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>>]"');
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"
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>>]"');
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();
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);
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>'];
+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.
body {
-webkit-user-select: none;
background-color: white;
- font: -webkit-small-control;
+ font: -webkit-control;
margin: 0;
overflow: hidden;
}
}
.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;
}
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 {
.month-selector-popup-contents {
display: table;
+ text-align: left;
+ border: 1px solid #bfbfbf;
+ margin: -1px 0 0 -1px;
}
.month-selector-popup-entry {
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;
}
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> */
background-color: white;
border: 1px solid white;
-webkit-box-sizing: border-box;
+ line-height: 1.4em;
}
@media (pointer:coarse) {
.available {
cursor: default;
- font-weight: 700;
background-color: white;
border: 1px solid white;
- border-radius: 5px;
-webkit-transition: all 0.2s ease;
}
.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;
border-right: 1px solid #999;
padding-right: 1px;
}
+
+.today-clear-area .today-button {
+ margin-right: 8px;
+}
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) {
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";
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);
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);
}
}
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);
};
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);
}
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);
* @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;
+++ /dev/null
-/*
- * 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;
-}
--- /dev/null
+.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;
+}
--- /dev/null
+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;
+}
'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': [
return platformInactiveSelectionForegroundColor();
}
-#if ENABLE(CALENDAR_PICKER)
-CString RenderTheme::extraCalendarPickerStyleSheet()
-{
- return CString();
-}
-#endif
-
int RenderTheme::baselinePosition(const RenderObject* o) const
{
if (!o->isBox())
#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
#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
#import "config.h"
-#import "CalendarPickerMac.h"
#import "LayoutTestSupport.h"
#import "LocalCurrentGraphicsContext.h"
#import "RenderThemeChromiumMac.h"
}
#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
{
+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
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);
git://git.webkit.org / WebKit-https.git / commitdiff
