Changeset 115276 in webkit
- Timestamp:
- Apr 25, 2012 6:26:05 PM (12 years ago)
- Location:
- trunk
- Files:
-
- 7 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/ChangeLog
r115193 r115276 1 2012-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 1 11 2012-04-25 Allan Sandfeld Jensen <allan.jensen@nokia.com> 2 12 -
trunk/ManualTests/forms/calendar-picker.html
r114356 r115276 10 10 iframe { 11 11 z-index: 2147483647; 12 width: 290px;13 height: 256px;12 width: 100px; 13 height: 100px; 14 14 border: 0; 15 15 overflow: hidden; -
trunk/Source/WebCore/ChangeLog
r115275 r115276 1 2012-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 46 2012-04-25 Kent Tamura <tkent@chromium.org> 47 48 Unreviewed. Sort Xcode project file. 49 50 * WebCore.xcodeproj/project.pbxproj: 51 1 52 2012-04-25 Alpha Lam <hclam@chromium.org> 2 53 -
trunk/Source/WebCore/Resources/calendarPicker.css
r113298 r115276 31 31 body { 32 32 -webkit-user-select: none; 33 background-color: purple;33 background-color: white; 34 34 font: -webkit-small-control; 35 35 margin: 0; … … 47 47 inset -2px -2px 1px rgba(0,0,0,0.1); 48 48 padding: 6px; 49 whitespace: nowrap; 50 /* width and opacity are reset in the JS code. */ 51 width: 500px; 52 opacity: 0; 49 53 } 50 54 … … 53 57 54 58 .year-month-upper { 55 display: -webkit-box;59 /* display:-webkit-box; is added in the JS code. */ 56 60 } 57 61 … … 62 66 63 67 .month-selector-box { 64 display: inline-b ox;68 display: inline-block; 65 69 text-align: center; 66 70 -webkit-box-flex: 2; … … 142 146 border-spacing: 0px; 143 147 font: -webkit-small-control; 144 table-layout: fixed; 145 width: 100%; 148 /* table-layout:fixed and width:100% are added in the JS code. */ 146 149 } 147 150 -
trunk/Source/WebCore/Resources/calendarPicker.js
r114356 r115276 287 287 global.daysTable.selectDate(initialDate); 288 288 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 293 function 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); 295 323 } 296 324 } … … 398 426 this._wall.addEventListener("click", bind(this._closePopup, this), false); 399 427 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'; 400 438 401 439 global.firstFocusableControl = this._left2; // FIXME: Shoud it be this.month? … … 514 552 this._monthPopup.style.position = "absolute"; 515 553 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"; 517 555 this._monthPopup.style.top = this._month.offsetTop + this._month.offsetHeight + "px"; 518 556 this._monthPopup.focus(); -
trunk/Source/WebCore/html/shadow/CalendarPickerElement.cpp
r115038 r115276 130 130 IntSize CalendarPickerElement::contentSize() 131 131 { 132 return IntSize( 320, 256);132 return IntSize(100, 100); 133 133 } 134 134 -
trunk/Source/WebCore/page/PagePopupClient.h
r109513 r115276 49 49 // The content HTML supports: 50 50 // - No <select> popups 51 // - No window.resizeBy() and resizeTo()52 51 // - window.setValueAndClosePopup(number, string). 53 52 virtual void writeDocument(DocumentWriter&) = 0;
Note: See TracChangeset
for help on using the changeset viewer.