Changeset 115276 in webkit


Ignore:
Timestamp:
Apr 25, 2012 6:26:05 PM (12 years ago)
Author:
tkent@chromium.org
Message:

Calendar Picker: Resize to minimal size to fit the content
https://bugs.webkit.org/show_bug.cgi?id=84826

Reviewed by Hajime Morita.

.:

  • ManualTests/forms/calendar-picker.html:

Sync with the size specified in CalendarPickerElement.cpp.

Source/WebCore:

Using fixed-size popup isn't nice. The calender picker popup size should
be minimal.

The minimal size depends on font settings, localized labels, and
localized formats. So we put visible objects on a transparent element,
calculate minimal size, resize the popup, then show the objects.

  • Resources/calendarPicker.css:

(body): Don't use purple. It was for debugging purpose.
The body is visible for a short period becuse we use transparent element.
(#main):

  • Add nowrap to avoid text wrapping.
  • Add wider width to avoid wrapping.
  • Add opacity to hide incomplete layout.

(.year-month-upper): Don't set flexible box yet.
(.month-selector-box): Fix incorrect display value.
(.days-area):
Don't set table-layout:fixed and width:100% in order that it has the
minimal width.

  • Resources/calendarPicker.js:

(initialize): Make a new functio to resize.
(fixWindowSize):
Compute the required width from the right edge of the next year button,
the maximum cell width, and so on. Then, set CSS properties to have
correct layout.
(YearMonthController.prototype.attachTo):
Set min-width property for a long year-month string.
(YearMonthController.prototype._showPopup):
Center the _monthPopup vertically.

  • html/shadow/CalendarPickerElement.cpp:

(WebCore::CalendarPickerElement::contentSize):
Specify small size for the initial size. It's better than showing a
large window then shrink the size.

  • page/PagePopupClient.h:

(PagePopupClient): Remove a false comment. We should support resize*().

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/ChangeLog

    r115193 r115276  
     12012-04-24  Kent Tamura  <tkent@chromium.org>
     2
     3        Calendar Picker: Resize to minimal size to fit the content
     4        https://bugs.webkit.org/show_bug.cgi?id=84826
     5
     6        Reviewed by Hajime Morita.
     7
     8        * ManualTests/forms/calendar-picker.html:
     9        Sync with the size specified in CalendarPickerElement.cpp.
     10
    1112012-04-25  Allan Sandfeld Jensen  <allan.jensen@nokia.com>
    212
  • trunk/ManualTests/forms/calendar-picker.html

    r114356 r115276  
    1010iframe {
    1111    z-index: 2147483647;
    12     width: 290px;
    13     height: 256px;
     12    width: 100px;
     13    height: 100px;
    1414    border: 0;
    1515    overflow: hidden;
  • trunk/Source/WebCore/ChangeLog

    r115275 r115276  
     12012-04-24  Kent Tamura  <tkent@chromium.org>
     2
     3        Calendar Picker: Resize to minimal size to fit the content
     4        https://bugs.webkit.org/show_bug.cgi?id=84826
     5
     6        Reviewed by Hajime Morita.
     7
     8        Using fixed-size popup isn't nice. The calender picker popup size should
     9        be minimal.
     10
     11        The minimal size depends on font settings, localized labels, and
     12        localized formats. So we put visible objects on a transparent element,
     13        calculate minimal size, resize the popup, then show the objects.
     14
     15        * Resources/calendarPicker.css:
     16        (body): Don't use purple. It was for debugging purpose.
     17        The body is visible for a short period becuse we use transparent element.
     18        (#main):
     19         - Add nowrap to avoid text wrapping.
     20         - Add wider width to avoid wrapping.
     21         - Add opacity to hide incomplete layout.
     22        (.year-month-upper): Don't set flexible box yet.
     23        (.month-selector-box): Fix incorrect display value.
     24        (.days-area):
     25        Don't set table-layout:fixed and width:100% in order that it has the
     26        minimal width.
     27
     28        * Resources/calendarPicker.js:
     29        (initialize): Make a new functio to resize.
     30        (fixWindowSize):
     31        Compute the required width from the right edge of the next year button,
     32        the maximum cell width, and so on.  Then, set CSS properties to have
     33        correct layout.
     34        (YearMonthController.prototype.attachTo):
     35        Set min-width property for a long year-month string.
     36        (YearMonthController.prototype._showPopup):
     37        Center the _monthPopup vertically.
     38
     39        * html/shadow/CalendarPickerElement.cpp:
     40        (WebCore::CalendarPickerElement::contentSize):
     41        Specify small size for the initial size. It's better than showing a
     42        large window then shrink the size.
     43        * page/PagePopupClient.h:
     44        (PagePopupClient): Remove a false comment. We should support resize*().
     45
     462012-04-25  Kent Tamura  <tkent@chromium.org>
     47
     48        Unreviewed. Sort Xcode project file.
     49
     50        * WebCore.xcodeproj/project.pbxproj:
     51
    1522012-04-25  Alpha Lam  <hclam@chromium.org>
    253
  • trunk/Source/WebCore/Resources/calendarPicker.css

    r113298 r115276  
    3131body {
    3232    -webkit-user-select: none;
    33     background-color: purple;
     33    background-color: white;
    3434    font: -webkit-small-control;
    3535    margin: 0;
     
    4747        inset -2px -2px 1px rgba(0,0,0,0.1);
    4848    padding: 6px;
     49    whitespace: nowrap;
     50    /* width and opacity are reset in the JS code. */
     51    width: 500px;
     52    opacity: 0;
    4953}
    5054
     
    5357
    5458.year-month-upper {
    55     display: -webkit-box;
     59    /* display:-webkit-box; is added in the JS code. */
    5660}
    5761
     
    6266
    6367.month-selector-box {
    64     display: inline-box;
     68    display: inline-block;
    6569    text-align: center;
    6670    -webkit-box-flex: 2;
     
    142146    border-spacing: 0px;
    143147    font: -webkit-small-control;
    144     table-layout: fixed;
    145     width: 100%;
     148    /* table-layout:fixed and width:100% are added in the JS code. */
    146149}
    147150
  • trunk/Source/WebCore/Resources/calendarPicker.js

    r114356 r115276  
    287287        global.daysTable.selectDate(initialDate);
    288288
    289         setTimeout(function() {
    290             if (window.frameElement)
    291                 window.frameElement.style.height = main.offsetHeight + "px";
    292             else
    293                 window.resizeTo(window.outerWidth, main.offsetTop + main.offsetHeight);
    294         }, 0);
     289        setTimeout(fixWindowSize, 0);
     290    }
     291}
     292
     293function fixWindowSize() {
     294    var yearMonthRightElement = document.getElementsByClassName(ClassNames.YearMonthButtonRight)[0];
     295    var daysAreaElement = document.getElementsByClassName(ClassNames.DaysArea)[0];
     296    var headers = daysAreaElement.getElementsByClassName(ClassNames.DayLabel);
     297    var maxCellWidth = 0;
     298    for (var i = 0; i < headers.length; ++i) {
     299        if (maxCellWidth < headers[i].offsetWidth)
     300            maxCellWidth = headers[i].offsetWidth;
     301    }
     302    var DaysAreaContainerBorder = 1;
     303    var maxRight = Math.max(yearMonthRightElement.offsetLeft + yearMonthRightElement.offsetWidth,
     304                            daysAreaElement.offsetLeft + maxCellWidth * 7 + DaysAreaContainerBorder);
     305    var MainPadding = 6;
     306    var MainBorder = 1;
     307    var desiredBodyWidth = maxRight + MainPadding + MainBorder;
     308
     309    var main = $("main");
     310    var mainHeight = main.offsetHeight;
     311    main.style.width = "auto";
     312    daysAreaElement.style.width = "100%";
     313    daysAreaElement.style.tableLayout = "fixed";
     314    document.getElementsByClassName(ClassNames.YearMonthUpper)[0].style.display = "-webkit-box";
     315    document.getElementsByClassName(ClassNames.MonthSelectorBox)[0].style.display = "block";
     316    main.style.webkitTransition = "opacity 0.1s ease";
     317    main.style.opacity = "1";
     318    if (window.frameElement) {
     319        window.frameElement.style.width = desiredBodyWidth + "px";
     320        window.frameElement.style.height = mainHeight + "px";
     321    } else {
     322        window.resizeTo(desiredBodyWidth, mainHeight);
    295323    }
    296324}
     
    398426    this._wall.addEventListener("click", bind(this._closePopup, this), false);
    399427    main.appendChild(this._wall);
     428
     429    // The maximum year which <input type=date> supports is 275,760.
     430    // See WebCore/platform/DateComponents.h
     431    var MaximumYear = 275760;
     432    var maxWidth = 0;
     433    for (var m = 0; m < 12; ++m) {
     434        this._month.textContent = formatYearMonth(MaximumYear, m);
     435        maxWidth = Math.max(maxWidth, this._month.offsetWidth);
     436    }
     437    this._month.style.minWidth = maxWidth + 'px';
    400438
    401439    global.firstFocusableControl = this._left2; // FIXME: Shoud it be this.month?
     
    514552    this._monthPopup.style.position = "absolute";
    515553    this._monthPopup.style.zIndex = "1000"; // Larger than the days area.
    516     this._monthPopup.style.left = this._month.offsetLeft + "px";
     554    this._monthPopup.style.left = this._month.offsetLeft + (this._month.offsetWidth - this._monthPopup.offsetWidth) / 2 + "px";
    517555    this._monthPopup.style.top = this._month.offsetTop + this._month.offsetHeight + "px";
    518556    this._monthPopup.focus();
  • trunk/Source/WebCore/html/shadow/CalendarPickerElement.cpp

    r115038 r115276  
    130130IntSize CalendarPickerElement::contentSize()
    131131{
    132     return IntSize(320, 256);
     132    return IntSize(100, 100);
    133133}
    134134
  • trunk/Source/WebCore/page/PagePopupClient.h

    r109513 r115276  
    4949    // The content HTML supports:
    5050    //  - No <select> popups
    51     //  - No window.resizeBy() and resizeTo()
    5251    //  - window.setValueAndClosePopup(number, string).
    5352    virtual void writeDocument(DocumentWriter&) = 0;
Note: See TracChangeset for help on using the changeset viewer.