Merge 129094 - REGRESSION(r127727): Calendar picker focus ring should be hidden until key event

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 54 matching lines @@
     YearMonthButtonLeft: "year-month-button-left",
     YearMonthButtonRight: "year-month-button-right",
     YearMonthUpper: "year-month-upper"
 };
 
 /**
  * @type {Object}
  */
 var global = {
     argumentsReceived: false,
-    hadKeyEvent: false,
     params: null
 };
 
 // ----------------------------------------------------------------
 // Utility functions
 
 /**
  * @return {!string} lowercase locale name. e.g. "en-us"
  */
 function getLocale() {
@@ skipping 174 matching lines @@
         if (args.weekStartDay < 0 || args.weekStartDay > 6)
             return "Invalid weekStartDay: " + args.weekStartDay;
     }
     return null;
 }
 
 /**
  * @param {!Object} args
  */
 function initialize(args) {
-    var main = $("main");
-    main.classList.add(ClassNames.NoFocusRing);
-
     var errorString = validateArguments(args);
     if (errorString) {
+        var main = $("main");
         main.textContent = "Internal error: " + errorString;
         resizeWindow(main.offsetWidth, main.offsetHeight);
     } else {
         global.params = args;
         openCalendarPicker();
     }
 }
 
 function resetMain() {
     var main = $("main");
@@ skipping 13 matching lines @@
  */
 function CalendarPicker(element, config) {
     Picker.call(this, element, config);
     // We assume this._config.min is a valid date.
     this.minimumDate = (typeof this._config.min !== "undefined") ? parseDateString(this._config.min) : CalendarPicker.MinimumPossibleDate;
     // We assume this._config.max is a valid date.
     this.maximumDate = (typeof this._config.max !== "undefined") ? parseDateString(this._config.max) : CalendarPicker.MaximumPossibleDate;
     this.step = (typeof this._config.step !== undefined) ? this._config.step * CalendarPicker.BaseStep : CalendarPicker.BaseStep;
     this.yearMonthController = new YearMonthController(this);
     this.daysTable = new DaysTable(this);
+    this._hadKeyEvent = false;
     this._layout();
     var initialDate = parseDateString(this._config.currentValue);
     if (initialDate < this.minimumDate)
         initialDate = this.minimumDate;
     else if (initialDate > this.maximumDate)
         initialDate = this.maximumDate;
     this.daysTable.selectDate(initialDate);
     this.fixWindowSize();
     document.body.addEventListener("keydown", this._handleBodyKeyDown.bind(this), false);
 }
 CalendarPicker.prototype = Object.create(Picker.prototype);
 
 // Hard limits of type=date. See WebCore/platform/DateComponents.h.
 CalendarPicker.MinimumPossibleDate = new Date(-62135596800000.0);
 CalendarPicker.MaximumPossibleDate = new Date(8640000000000000.0);
 // See WebCore/html/DateInputType.cpp.
 CalendarPicker.BaseStep = 86400000;
 
 CalendarPicker.prototype._layout = function() {
     this._element.style.direction = global.params.isRTL ? "rtl" : "ltr";
     this.yearMonthController.attachTo(this._element);
     this.daysTable.attachTo(this._element);
     this._layoutButtons();
+    // DaysTable will have focus but we don't want to show its focus ring until the first key event.
+    this._element.classList.add(ClassNames.NoFocusRing);
 };
 
 CalendarPicker.prototype.handleToday = function() {
     var date = new Date();
     this.daysTable.selectDate(date);
     this.submitValue(serializeDate(date.getFullYear(), date.getMonth(), date.getDate()));
 };
 
 CalendarPicker.prototype.handleClear = function() {
     this.submitValue("");
@@ skipping 708 matching lines @@
     if (this._hasSelection())
         this._days[this._y][this._x].classList.remove(ClassNames.Selected);
     this._x = -1;
     this._y = -1;
 };
 
 /**
  * @param {Event} event
  */
 DaysTable.prototype._handleKey = function(event) {
-    maybeUpdateFocusStyle();
+    this.picker.maybeUpdateFocusStyle();
     var x = this._x;
     var y = this._y;
     var key = event.keyIdentifier;
     if (!this._hasSelection() && (key == "Left" || key == "Up" || key == "Right" || key == "Down")) {
         // Put the selection on a center cell.
         this.updateSelection(event, 3, Math.floor(DaysTable._Weeks / 2 - 1));
         return;
     }
 
     if (key == (global.params.isRTL ? "Right" : "Left")) {
@@ skipping 79 matching lines @@
         this._y = y;
     }
     event.stopPropagation();
     event.preventDefault();
 };
 
 /**
  * @param {!Event} event
  */
 CalendarPicker.prototype._handleBodyKeyDown = function(event) {
-    maybeUpdateFocusStyle();
+    this.maybeUpdateFocusStyle();
     var key = event.keyIdentifier;
     if (key == "U+0009") {
         if (!event.shiftKey && document.activeElement == global.lastFocusableControl) {
             event.stopPropagation();
             event.preventDefault();
             this.firstFocusableControl.focus();
         } else if (event.shiftKey && document.activeElement == global.firstFocusableControl) {
             event.stopPropagation();
             event.preventDefault();
             this.lastFocusableControl.focus();
         }
     } else if (key == "U+004D") { // 'm'
         this.yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousMonth : YearMonthController.NextMonth);
     } else if (key == "U+0059") { // 'y'
         this.yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousYear : YearMonthController.NextYear);
     } else if (key == "U+0044") { // 'd'
         this.yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousTenYears : YearMonthController.NextTenYears);
     } else if (key == "U+001B") // ESC
         this.handleCancel();
 }
 
-function maybeUpdateFocusStyle() {
-    if (global.hadKeyEvent)
+CalendarPicker.prototype.maybeUpdateFocusStyle = function() {
+    if (this._hadKeyEvent)
         return;
-    global.hadKeyEvent = true;
-    $("main").classList.remove(ClassNames.NoFocusRing);
+    this._hadKeyEvent = true;
+    this._element.classList.remove(ClassNames.NoFocusRing);
 }
 
 if (window.dialogArguments) {
     initialize(dialogArguments);
 } else {
     window.addEventListener("message", handleMessage, false);
     window.setTimeout(handleArgumentsTimeout, 1000);
 }