Merge 140778

Source/WebCore/Resources/pagepopups/calendarPicker.js

 "use strict";
 /*
  * 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.
@@ skipping 742 matching lines @@
 };
 
 CalendarPicker.prototype.handleClear = function() {
     this.recordAction(CalendarPicker.Action.ClickedClearButton);
     this.submitValue("");
 };
 
 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) {
         if (maxCellWidth < headers[i].offsetWidth)
             maxCellWidth = headers[i].offsetWidth;
     }
     var weekColumnWidth = headers[0].offsetWidth;
     if (maxCellWidth > weekColumnWidth)
         weekColumnWidth = maxCellWidth;
     headers[0].style.width = weekColumnWidth + "px";
     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";
     daysAreaElement.style.width = "100%";
     daysAreaElement.style.tableLayout = "fixed";
     this._element.getElementsByClassName(ClassNames.YearMonthUpper)[0].style.display = "-webkit-box";
     this._element.getElementsByClassName(ClassNames.MonthSelectorBox)[0].style.display = "block";
     resizeWindow(desiredBodyWidth, elementHeight);
 };
 
@@ skipping 76 matching lines @@
     this._monthPopup = createElement("div", ClassNames.MonthSelectorPopup);
     this._monthPopup.addEventListener("click", this._handleYearMonthChange.bind(this), false);
     this._monthPopup.addEventListener("keydown", this._handleMonthPopupKey.bind(this), false);
     this._monthPopup.addEventListener("mousemove", this._handleMouseMove.bind(this), false);
     this._updateSelectionOnMouseMove = true;
     this._monthPopup.tabIndex = 0;
     this._monthPopupContents = createElement("div", ClassNames.MonthSelectorPopupContents);
     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);
 
     this._attachRightButtonsTo(innerContainer);
     element.appendChild(outerContainer);
 
     this._wall = createElement("div", ClassNames.MonthSelectorWall);
     this._wall.addEventListener("click", this._closePopup.bind(this), false);
     element.appendChild(this._wall);
 
     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);
         }
     }
     this._month.style.minWidth = maxWidth + 'px';
 
     this.picker.firstFocusableControl = this._left2; // FIXME: Should it be this.month?
 };
 
 YearMonthController.addTenYearsButtons = false;
 
 /**
  * @param {!Element} parent
  */
 YearMonthController.prototype._attachLeftButtonsTo = function(parent) {
     var container = createElement("div", ClassNames.YearMonthButtonLeft);
     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);
 };
 
 /**
  * @param {!Element} 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);
     }
 };
 
 /**
  * @param {!Month} month
  */
 YearMonthController.prototype.setMonth = function(month) {
     var monthValue = month.valueOf();
     if (this._left3)
         this._left3.disabled = !this.picker.shouldShowMonth(new Month(monthValue - 13));
     this._left2.disabled = !this.picker.shouldShowMonth(new Month(monthValue - 2));
     this._left1.disabled = !this.picker.shouldShowMonth(new Month(monthValue - 1));
     this._right1.disabled = !this.picker.shouldShowMonth(new Month(monthValue + 1));
     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);
 
     for (var m = monthValue - 6; m <= monthValue + 6; m++) {
         var month = new Month(m);
         if (!this.picker.shouldShowMonth(month))
             continue;
         var option = createElement("div", ClassNames.MonthSelectorPopupEntry, month.toLocaleString());
         option.dataset.value = month.toString();
         this._monthPopupContents.appendChild(option);
@@ skipping 149 matching lines @@
 /**
  * @const
  * @type {number}
  */
 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;
 };
 
 /**
  * @param {!number} amount
  */
 YearMonthController.prototype.moveRelatively = function(amount) {
     var current = this.picker.currentMonth().valueOf();
@@ skipping 673 matching lines @@
     this._hadKeyEvent = true;
     this._element.classList.remove(ClassNames.NoFocusRing);
 }
 
 if (window.dialogArguments) {
     initialize(dialogArguments);
 } else {
     window.addEventListener("message", handleMessage, false);
     window.setTimeout(handleArgumentsTimeout, 1000);
 }