Changeset 140778 in webkit


Ignore:
Timestamp:
Jan 24, 2013 9:28:46 PM (11 years ago)
Author:
keishi@webkit.org
Message:

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.

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.
Location:
trunk
Files:
3 added
1 deleted
30 edited

Legend:

Unmodified
Added
Removed

  • trunk/ChangeLog

    r140662 r140778  
     12013-01-24  Keishi Hattori  <keishi@webkit.org>
     2
     3        Adjust design of the Calendar Picker
     4        https://bugs.webkit.org/show_bug.cgi?id=107507
     5
     6        Reviewed by Kent Tamura.
     7
     8        * ManualTests/forms/calendar-picker.html: Use pickerCommonChromium.css and calendarPickerChromium.css.
     9
    1102013-01-24  Soo-Hyun Choi  <s.choi@hackerslab.eu>
    211

  • trunk/LayoutTests/ChangeLog

    r140773 r140778  
     12013-01-24  Keishi Hattori  <keishi@webkit.org>
     2
     3        Adjust design of the Calendar Picker
     4        https://bugs.webkit.org/show_bug.cgi?id=107507
     5
     6        Reviewed by Kent Tamura.
     7
     8        * platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations.html:
     9        * platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt:
     10        * platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt:
     11        * platform/chromium/fast/forms/calendar-picker/month-picker-key-operations.html:
     12        * platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt:
     13        * platform/chromium-win/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt:
     14        * platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt:
     15        * platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt:
     16        * platform/chromium/fast/forms/calendar-picker/week-picker-key-operations.html:
     17        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png:
     18        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png:
     19        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png:
     20        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png:
     21        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png:
     22        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png:
     23        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png:
     24        * platform/chromium/TestExpectations: Marking calendar picker appearance tests as needing rebaseline.
     25
    1262013-01-24  Michael Saboff  <msaboff@apple.com>
    227

  • trunk/LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt

    r140501 r140778  
    5050PASS focusedElement() is ".today-button[value=<<CalendarToday>>]"
    5151PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    52 PASS focusedElement() is ".year-month-button[value=<<]"
     52PASS focusedElement() is ".year-month-button"
    5353PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    5454PASS document.getElementById("mock-page-popup") is null

  • trunk/LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt

    r134209 r140778  
    4646PASS focusedElement() is ".today-button[value=<<ThisMonthLabel>>]"
    4747PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    48 PASS focusedElement() is ".year-month-button[value=<<]"
     48PASS focusedElement() is ".year-month-button"
    4949PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    5050PASS document.getElementById("mock-page-popup") is null

  • trunk/LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt

    r134731 r140778  
    5050PASS focusedElement() is ".today-button[value=<<ThisWeekLabel>>]"
    5151PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    52 PASS focusedElement() is ".year-month-button[value=<<]"
     52PASS focusedElement() is ".year-month-button"
    5353PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    5454PASS document.getElementById("mock-page-popup") is null

  • trunk/LayoutTests/platform/chromium/TestExpectations

    r140770 r140778  
    42404240crbug.com/166932 [ Debug ] plugins/embed-attributes-setting.html [ Crash Pass ]
    42414241
     4242# Needs rebaseline.
     4243webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step.html [ ImageOnlyFailure Pass ]
     4244webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/week-picker-appearance.html [ ImageOnlyFailure Pass ]
     4245webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru.html [ ImageOnlyFailure Pass ]
     4246webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step.html [ ImageOnlyFailure Pass ]
     4247webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/month-picker-appearance.html [ ImageOnlyFailure Pass ]
     4248webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step.html [ ImageOnlyFailure Pass ]
     4249webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance.html [ ImageOnlyFailure Pass ]
     4250                   
    42424251# Broken by Skia flag changes in r139445
    42434252crbug.com/169550 [ Debug ] fast/lists/big-list-marker.html [ Crash ]

  • trunk/LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt

    r133434 r140778  
    5050PASS focusedElement() is ".today-button[value=<<CalendarToday>>]"
    5151PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    52 PASS focusedElement() is ".year-month-button[value=<<]"
     52PASS focusedElement() is ".year-month-button"
    5353PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    5454PASS document.getElementById("mock-page-popup") is null

  • trunk/LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations.html

    r140501 r140778  
    107107    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
    108108    eventSender.keyDown('\t');
    109     shouldBe('focusedElement()', '".year-month-button[value=<<]"');
     109    shouldBe('focusedElement()', '".year-month-button"');
    110110    eventSender.keyDown('\t', ['shiftKey']);
    111111    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');

  • trunk/LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt

    r134209 r140778  
    4646PASS focusedElement() is ".today-button[value=<<ThisMonthLabel>>]"
    4747PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    48 PASS focusedElement() is ".year-month-button[value=<<]"
     48PASS focusedElement() is ".year-month-button"
    4949PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    5050PASS document.getElementById("mock-page-popup") is null

  • trunk/LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations.html

    r134209 r140778  
    9999    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
    100100    eventSender.keyDown('\t');
    101     shouldBe('focusedElement()', '".year-month-button[value=<<]"');
     101    shouldBe('focusedElement()', '".year-month-button"');
    102102    eventSender.keyDown('\t', ['shiftKey']);
    103103    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');

  • trunk/LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt

    r134731 r140778  
    5050PASS focusedElement() is ".today-button[value=<<ThisWeekLabel>>]"
    5151PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    52 PASS focusedElement() is ".year-month-button[value=<<]"
     52PASS focusedElement() is ".year-month-button"
    5353PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
    5454PASS document.getElementById("mock-page-popup") is null

  • trunk/LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations.html

    r135704 r140778  
    107107    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
    108108    eventSender.keyDown('\t');
    109     shouldBe('focusedElement()', '".year-month-button[value=<<]"');
     109    shouldBe('focusedElement()', '".year-month-button"');
    110110    eventSender.keyDown('\t', ['shiftKey']);
    111111    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');

  • trunk/ManualTests/forms/calendar-picker.html

    r134753 r140778  
    263263    commonCssLink.href = '../../Source/WebCore/Resources/pagepopups/pickerCommon.css?' + (new Date()).getTime();
    264264    doc.head.appendChild(commonCssLink);
     265    var commonChromiumCssLink = doc.createElement('link');
     266    commonChromiumCssLink.rel = 'stylesheet';
     267    commonChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/pickerCommonChromium.css?' + (new Date()).getTime();
     268    doc.head.appendChild(commonChromiumCssLink);
    265269    var suggestionPickerCssLink = doc.createElement('link');
    266270    suggestionPickerCssLink.rel = 'stylesheet';
    … …  
    271275    link.href = '../../Source/WebCore/Resources/pagepopups/calendarPicker.css?' + (new Date()).getTime();
    272276    doc.head.appendChild(link);
     277    var calendarPickerChromiumCssLink = doc.createElement('link');
     278    calendarPickerChromiumCssLink.rel = 'stylesheet';
     279    calendarPickerChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css?' + (new Date()).getTime();
     280    doc.head.appendChild(calendarPickerChromiumCssLink);
    273281    var commonJsScript = doc.createElement('script');
    274282    commonJsScript.src = '../../Source/WebCore/Resources/pagepopups/pickerCommon.js?' + (new Date()).getTime();
    … …  
    292300            return numString.toString();
    293301        },
     302        histogramEnumeration: function() {},
    294303        formatMonth: function(year, zeroBaseMonth) {
    295304            var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',

  • trunk/Source/WebCore/ChangeLog

    r140759 r140778  
     12013-01-24  Keishi Hattori  <keishi@webkit.org>
     2
     3        Adjust design of the Calendar Picker
     4        https://bugs.webkit.org/show_bug.cgi?id=107507
     5
     6        Reviewed by Kent Tamura.
     7
     8        Covered by existing calendar picker appearance tests.
     9
     10        * Resources/pagepopups/calendarPicker.css:
     11        (body): Use bigger font.
     12        (.calendar-picker):
     13        (.month-selector):
     14        (.month-selector svg):
     15        (.month-selector-popup-contents):
     16        (.year-month-button-left .year-month-button):
     17        (.year-month-button-right .year-month-button):
     18        (.days-area-container):
     19        (.days-area):
     20        (.day-label):
     21        (.day):
     22        (.available):
     23        (.month-mode .day):
     24        (.today-clear-area .today-button):
     25        * Resources/pagepopups/calendarPicker.js:
     26        (CalendarPicker.prototype.fixWindowSize): Calculate the width of today-clear-area too.
     27        (YearMonthController.prototype.attachTo):
     28        (YearMonthController.prototype._attachLeftButtonsTo): Use svg icons inside buttons.
     29        (YearMonthController.prototype._attachRightButtonsTo): Use svg icons inside buttons.
     30        (YearMonthController.prototype.setMonth):
     31        (YearMonthController.prototype._handleButtonClick):
     32        * Resources/pagepopups/calendarPickerMac.css: Removed.
     33        * Resources/pagepopups/chromium/calendarPickerChromium.css: Added.
     34        (.year-month-button):
     35        (.days-area-container:focus):
     36        * Resources/pagepopups/chromium/pickerCommonChromium.css: Added. Use Chrome-style buttons.
     37        (button):
     38        (:enabled:hover:-webkit-any(button, input[type='button'])):
     39        (:enabled:active:-webkit-any(button, input[type='button'])):
     40        (:disabled:-webkit-any(button, input[type='button'])):
     41        (:enabled:focus:-webkit-any(button, input[type='button'])):
     42        * WebCore.gyp/WebCore.gyp: Include pickerCommonChromium.css and calendarPickerChromium.css.
     43        * rendering/RenderTheme.cpp: Remove extraCalendarPickerStyleSheet
     44        * rendering/RenderTheme.h: Ditto.
     45        * rendering/RenderThemeChromiumMac.h: Ditto.
     46        * rendering/RenderThemeChromiumMac.mm: Ditto.
     47        (WebCore):
     48
    1492013-01-24  Kentaro Hara  <haraken@chromium.org>
    250

  • trunk/Source/WebCore/Resources/pagepopups/calendarPicker.css

    r135274 r140778  
    3232    -webkit-user-select: none;
    3333    background-color: white;
    34     font: -webkit-small-control;
     34    font: -webkit-control;
    3535    margin: 0;
    3636    overflow: hidden;
    … …  
    4242
    4343.calendar-picker {
    44     background-color: white;
    45     border: solid 1px #8899aa;
    46     box-shadow: inset 2px 2px 2px white,
    47         inset -2px -2px 1px rgba(0,0,0,0.1);
    48     padding: 6px;
     44    border: 1px solid #bfbfbf;
     45    border-radius: 2px;
     46    position: absolute;
     47    padding: 10px;
     48    background-color: white;
    4949    white-space: nowrap;
    5050    width: 500px;
    … …  
    7373    cursor: pointer;
    7474    display: inline-block;
    75     padding: 3px 6px 3px 6px;
    76 }
    77 .month-selector:after {
    78     content: " ▼";
    79     font-size: smaller;
     75    padding: 4px 6px 4px 6px;
     76}
     77
     78.month-selector svg {
     79    margin: 0 6px 2px 6px;
    8080}
    8181
    … …  
    9898.month-selector-popup-contents {
    9999    display: table;
     100    text-align: left;
     101    border: 1px solid #bfbfbf;
     102    margin: -1px 0 0 -1px;
    100103}
    101104
    … …  
    138141}
    139142
     143.year-month-button-left .year-month-button {
     144    margin-right: 4px;
     145}
     146
    140147.year-month-button-right {
    141148    display: inline-block;
    142149}
    143150
     151.year-month-button-right .year-month-button {
     152    margin-left: 4px;
     153}
     154
    144155.days-area-container {
    145156    background-color: white;
    146     border: solid 1px black;
    147     margin-bottom: 4px;
    148     margin-top: 4px;
     157    border: 1px solid #bfbfbf;
     158    margin-bottom: 8px;
     159    margin-top: 10px;
    149160    overflow: hidden;
    150161}
    … …  
    154165    border-collapse: separate;
    155166    border-spacing: 0px;
    156     font: -webkit-small-control;
     167    font: -webkit-control;
    157168    /* table-layout:fixed and width:100% are added in the JS code. */
    158169}
    … …  
    160171.day-label { /* <th> */
    161172    -webkit-box-sizing: border-box;
    162     background-color: #e3e9ff;
    163     border-left-color: #f0f4ff;
    164     border-top-color: #f0f4ff;
    165     border: solid 1px #d0d4f0;
    166     color: #20c;
     173    background-color: #f5f5f5;
    167174    font-weight: normal;
    168175    text-align: center;
     176    border-bottom: 1px solid #bfbfbf;
     177    height: 2.1em;
    169178}
    170179
    … …  
    175184    border: 1px solid white;
    176185    -webkit-box-sizing: border-box;
     186    line-height: 1.4em;
    177187}
    178188
    … …  
    186196.available {
    187197    cursor: default;
    188     font-weight: 700;
    189198    background-color: white;
    190199    border: 1px solid white;
    191     border-radius: 5px;
    192200    -webkit-transition: all 0.2s ease;
    193201}
    … …  
    229237.month-mode .day {
    230238    -webkit-transition: none;
    231     border-radius: 0;
    232239    border: none;
    233240    padding: 2px;
    234 }
    235 
    236 .week-mode .available.day-selected.monday {
    237     border-top-left-radius: 5px;
    238     border-bottom-left-radius: 5px;
    239 }
    240 
    241 .week-mode .available.day-selected.sunday {
    242     border-top-right-radius: 5px;
    243     border-bottom-right-radius: 5px;
    244241}
    245242
    … …  
    274271    padding-right: 1px;
    275272}
     273
     274.today-clear-area .today-button {
     275    margin-right: 8px;
     276}

  • trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js

    r137281 r140778  
    761761    var yearMonthRightElement = this._element.getElementsByClassName(ClassNames.YearMonthButtonRight)[0];
    762762    var daysAreaElement = this._element.getElementsByClassName(ClassNames.DaysArea)[0];
     763    var clearButton = this._element.getElementsByClassName(ClassNames.ClearButton)[0];
    763764    var headers = daysAreaElement.getElementsByClassName(ClassNames.DayLabel);
    764765    var maxCellWidth = 0;
    … …  
    774775    var yearMonthEnd;
    775776    var daysAreaEnd;
     777    var todayClearAreaEnd;
    776778    if (global.params.isLocaleRTL) {
    777779        var startOffset = this._element.offsetLeft + this._element.offsetWidth;
    778780        yearMonthEnd = startOffset - yearMonthRightElement.offsetLeft;
    779781        daysAreaEnd = startOffset - (daysAreaElement.offsetLeft + daysAreaElement.offsetWidth) + weekColumnWidth + maxCellWidth * 7 + DaysAreaContainerBorder;
     782        todayClearAreaEnd = startOffset - clearButton.offsetLeft;
    780783    } else {
    781784        yearMonthEnd = yearMonthRightElement.offsetLeft + yearMonthRightElement.offsetWidth;
    782785        daysAreaEnd = daysAreaElement.offsetLeft + weekColumnWidth + maxCellWidth * 7 + DaysAreaContainerBorder;
    783     }
    784     var maxEnd = Math.max(yearMonthEnd, daysAreaEnd);
    785     var MainPadding = 6; // FIXME: Fix name.
     786        todayClearAreaEnd = clearButton.offsetLeft + clearButton.offsetWidth;
     787    }
     788    var maxEnd = Math.max(yearMonthEnd, daysAreaEnd, todayClearAreaEnd);
     789    var MainPadding = 10; // FIXME: Fix name.
    786790    var MainBorder = 1;
    787     var desiredBodyWidth = maxEnd + MainPadding + MainBorder;
     791    var desiredBodyWidth = maxEnd + MainPadding + MainBorder * 2;
    788792
    789793    var elementHeight = this._element.offsetHeight;
    … …  
    882886    box.appendChild(this._monthPopup);
    883887    this._month = createElement("div", ClassNames.MonthSelector);
     888    this._monthLabel = createElement("span");
     889    this._month.appendChild(this._monthLabel);
     890    var disclosureTriangle = createElement("span");
     891    disclosureTriangle.innerHTML = "<svg width='7' height='5'><polygon points='0,1 7,1 3.5,5' style='fill:#000000;' /></svg>";
     892    this._month.appendChild(disclosureTriangle);
    884893    this._month.addEventListener("click", this._showPopup.bind(this), false);
    885894    box.appendChild(this._month);
    … …  
    895904    var maxWidth = 0;
    896905    for (var m = 0; m < 12; ++m) {
    897         this._month.textContent = month.toLocaleString();
     906        this._monthLabel.textContent = month.toLocaleString();
    898907        maxWidth = Math.max(maxWidth, this._month.offsetWidth);
    899908        month = month.previous();
    … …  
    901910    if (getLanguage() == "ja" && ImperialEraLimit < this.picker.maximumMonth.year) {
    902911        for (var m = 0; m < 12; ++m) {
    903             this._month.textContent = new Month(ImperialEraLimit, m).toLocaleString();
     912            this._monthLabel.textContent = new Month(ImperialEraLimit, m).toLocaleString();
    904913            maxWidth = Math.max(maxWidth, this._month.offsetWidth);
    905914        }
    … …  
    920929
    921930    if (YearMonthController.addTenYearsButtons) {
    922         this._left3 = createElement("input", ClassNames.YearMonthButton);
    923         this._left3.type = "button";
    924         this._left3.value = "<<<";
     931        this._left3 = createElement("button", ClassNames.YearMonthButton);
     932        this._left3.textContent = "<<<";
    925933        this._left3.addEventListener("click", this._handleButtonClick.bind(this), false);
    926934        container.appendChild(this._left3);
    927935    }
    928936
    929     this._left2 = createElement("input", ClassNames.YearMonthButton);
    930     this._left2.type = "button";
    931     this._left2.value = "<<";
     937    this._left2 = createElement("button", ClassNames.YearMonthButton);
     938    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>";
    932939    this._left2.addEventListener("click", this._handleButtonClick.bind(this), false);
    933940    container.appendChild(this._left2);
    934941
    935     this._left1 = createElement("input", ClassNames.YearMonthButton);
    936     this._left1.type = "button";
    937     this._left1.value = "<";
     942    this._left1 = createElement("button", ClassNames.YearMonthButton);
     943    this._left1.innerHTML = "<svg width='4' height='7'><polygon points='0,3.5 4,7 4,0' style='fill:#6e6e6e;' /></svg>";
    938944    this._left1.addEventListener("click", this._handleButtonClick.bind(this), false);
    939945    container.appendChild(this._left1);
    … …  
    946952    var container = createElement("div", ClassNames.YearMonthButtonRight);
    947953    parent.appendChild(container);
    948     this._right1 = createElement("input", ClassNames.YearMonthButton);
    949     this._right1.type = "button";
    950     this._right1.value = ">";
     954    this._right1 = createElement("button", ClassNames.YearMonthButton);
     955    this._right1.innerHTML = "<svg width='4' height='7'><polygon points='0,7 0,0, 4,3.5' style='fill:#6e6e6e;' /></svg>";
    951956    this._right1.addEventListener("click", this._handleButtonClick.bind(this), false);
    952957    container.appendChild(this._right1);
    953958
    954     this._right2 = createElement("input", ClassNames.YearMonthButton);
    955     this._right2.type = "button";
    956     this._right2.value = ">>";
     959    this._right2 = createElement("button", ClassNames.YearMonthButton);
     960    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>";
    957961    this._right2.addEventListener("click", this._handleButtonClick.bind(this), false);
    958962    container.appendChild(this._right2);
    959963
    960964    if (YearMonthController.addTenYearsButtons) {
    961         this._right3 = createElement("input", ClassNames.YearMonthButton);
    962         this._right3.type = "button";
    963         this._right3.value = ">>>";
     965        this._right3 = createElement("button", ClassNames.YearMonthButton);
     966        this._right3.textContent = ">>>";
    964967        this._right3.addEventListener("click", this._handleButtonClick.bind(this), false);
    965968        container.appendChild(this._right3);
    … …  
    980983    if (this._right3)
    981984        this._left3.disabled = !this.picker.shouldShowMonth(new Month(monthValue + 13));
    982     this._month.innerText = month.toLocaleString();
     985    this._monthLabel.innerText = month.toLocaleString();
    983986    while (this._monthPopupContents.hasChildNodes())
    984987        this._monthPopupContents.removeChild(this._monthPopupContents.firstChild);
    … …  
    11501153 */
    11511154YearMonthController.prototype._handleButtonClick = function(event) {
    1152     if (event.target == this._left3)
     1155    var button = enclosingNodeOrSelfWithClass(event.target, ClassNames.YearMonthButton);
     1156    if (button == this._left3)
    11531157        this.moveRelatively(YearMonthController.PreviousTenYears);
    1154     else if (event.target == this._left2) {
     1158    else if (button == this._left2) {
    11551159        this.picker.recordAction(CalendarPicker.Action.ClickedBackwardYearButton);
    11561160        this.moveRelatively(YearMonthController.PreviousYear);
    1157     } else if (event.target == this._left1) {
     1161    } else if (button == this._left1) {
    11581162        this.picker.recordAction(CalendarPicker.Action.ClickedBackwardMonthButton);
    11591163        this.moveRelatively(YearMonthController.PreviousMonth);
    1160     } else if (event.target == this._right1) {
     1164    } else if (button == this._right1) {
    11611165        this.picker.recordAction(CalendarPicker.Action.ClickedForwardMonthButton);
    11621166        this.moveRelatively(YearMonthController.NextMonth)
    1163     } else if (event.target == this._right2) {
     1167    } else if (button == this._right2) {
    11641168        this.picker.recordAction(CalendarPicker.Action.ClickedForwardYearButton);
    11651169        this.moveRelatively(YearMonthController.NextYear);
    1166     } else if (event.target == this._right3)
     1170    } else if (button == this._right3)
    11671171        this.moveRelatively(YearMonthController.NextTenYears);
    11681172    else

  • trunk/Source/WebCore/WebCore.gyp/WebCore.gyp

    r140598 r140778  
    972972            '../Resources/pagepopups/calendarPicker.css',
    973973            '../Resources/pagepopups/calendarPicker.js',
     974            '../Resources/pagepopups/chromium/calendarPickerChromium.css',
     975            '../Resources/pagepopups/chromium/pickerCommonChromium.css',
    974976            '../Resources/pagepopups/suggestionPicker.css',
    975977            '../Resources/pagepopups/suggestionPicker.js',
    … …  
    985987            '--out-h=<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPicker.h',
    986988            '--out-cpp=<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPicker.cpp',
    987             '<@(_inputs)',
    988           ],
    989         },
    990         {
    991           'action_name': 'CalendarPickerMac',
    992           'inputs': [
    993             '../Resources/pagepopups/calendarPickerMac.css',
    994           ],
    995           'outputs': [
    996             '<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.h',
    997             '<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.cpp',
    998           ],
    999           'action': [
    1000             'python',
    1001             '../make-file-arrays.py',
    1002             '--condition=ENABLE(CALENDAR_PICKER)',
    1003             '--out-h=<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.h',
    1004             '--out-cpp=<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.cpp',
    1005989            '<@(_inputs)',
    1006990          ],
    … …  
    13481332          'include_dirs': [
    13491333            '<(chromium_src_dir)/third_party/apple_webkit',
    1350           ],
    1351           'sources': [
    1352             '<(SHARED_INTERMEDIATE_DIR)/webkit/CalendarPickerMac.cpp',
    13531334          ],
    13541335        }],

  • trunk/Source/WebCore/rendering/RenderTheme.cpp

    r137847 r140778  
    633633}
    634634
    635 #if ENABLE(CALENDAR_PICKER)
    636 CString RenderTheme::extraCalendarPickerStyleSheet()
    637 {
    638     return CString();
    639 }
    640 #endif
    641 
    642635int RenderTheme::baselinePosition(const RenderObject* o) const
    643636{

  • trunk/Source/WebCore/rendering/RenderTheme.h

    r135003 r140778  
    9595#if ENABLE(FULLSCREEN_API)
    9696    virtual String extraFullScreenStyleSheet() { return String(); };
    97 #endif
    98 #if ENABLE(CALENDAR_PICKER)
    99     virtual CString extraCalendarPickerStyleSheet();
    10097#endif
    10198

  • trunk/Source/WebCore/rendering/RenderThemeChromiumMac.h

    r134520 r140778  
    7575    virtual LayoutUnit sliderTickSnappingThreshold() const OVERRIDE;
    7676#endif
    77 #if ENABLE(CALENDAR_PICKER)
    78     virtual CString extraCalendarPickerStyleSheet() OVERRIDE;
    79 #endif
    8077#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)
    8178    virtual bool supportsCalendarPicker(const AtomicString& type) const OVERRIDE;

  • trunk/Source/WebCore/rendering/RenderThemeChromiumMac.mm

    r134520 r140778  
    2121#import "config.h"
    2222
    23 #import "CalendarPickerMac.h"
    2423#import "LayoutTestSupport.h"
    2524#import "LocalCurrentGraphicsContext.h"
    … …  
    183182#endif
    184183
    185 #if ENABLE(CALENDAR_PICKER)
    186 CString RenderThemeChromiumMac::extraCalendarPickerStyleSheet()
    187 {
    188     return CString(calendarPickerMacCss, WTF_ARRAY_LENGTH(calendarPickerMacCss));
    189 }
    190 #endif
    191 
    192184#if ENABLE(INPUT_MULTIPLE_FIELDS_UI) && ENABLE(CALENDAR_PICKER)
    193185bool RenderThemeChromiumMac::supportsCalendarPicker(const AtomicString& type) const

  • trunk/Source/WebKit/chromium/ChangeLog

    r140774 r140778  
     12013-01-24  Keishi Hattori  <keishi@webkit.org>
     2
     3        Adjust design of the Calendar Picker
     4        https://bugs.webkit.org/show_bug.cgi?id=107507
     5
     6        Reviewed by Kent Tamura.
     7
     8        * src/DateTimeChooserImpl.cpp:
     9        (WebKit::DateTimeChooserImpl::writeDocument):  Include pickerCommonChromium.css and calendarPickerChromium.css.
     10
    1112013-01-24  James Robinson  <jamesr@chromium.org>
    212

  • trunk/Source/WebKit/chromium/src/DateTimeChooserImpl.cpp

    r139055 r140778  
    121121    addString("<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", writer);
    122122    writer.addData(WebCore::pickerCommonCss, sizeof(WebCore::pickerCommonCss));
     123    writer.addData(WebCore::pickerCommonChromiumCss, sizeof(WebCore::pickerCommonChromiumCss));
    123124    writer.addData(WebCore::suggestionPickerCss, sizeof(WebCore::suggestionPickerCss));
    124125    writer.addData(WebCore::calendarPickerCss, sizeof(WebCore::calendarPickerCss));
    125     CString extraStyle = WebCore::RenderTheme::defaultTheme()->extraCalendarPickerStyleSheet();
    126     if (extraStyle.length())
    127         writer.addData(extraStyle.data(), extraStyle.length());
     126    writer.addData(WebCore::calendarPickerChromiumCss, sizeof(WebCore::calendarPickerChromiumCss));
    128127    addString("</style></head><body><div id=main>Loading...</div><script>\n"
    129128               "window.dialogArguments = {\n", writer);
Note: See TracChangeset for help on using the changeset viewer.