Make touch event handling more consistent with Android keyboard.

chrome/browser/resources/keyboard/common.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview A simple virtual keyboard implementation.
  */
 
 var KEY_MODE = 'key';
 var SHIFT_MODE = 'shift';
@@ skipping 68 matching lines @@
  * @return {void}
  */
 function transitionMode(transition) {
   currentMode = MODE_TRANSITIONS[currentMode + transition];
   setMode(currentMode);
 }
 
 /**
  * Send the given key to chrome, via the experimental extension API.
  * @param {string} key The key to send.
- * @param {string=} opt_type The type of event to send (keydown or keyup). If
- *     omitted send both keydown and keyup events.
  * @return {void}
  */
-function sendKey(key, type) {
+function sendKey(key) {
   var keyEvent = {'keyIdentifier': key};
-  if (!type || type == 'keydown') {
-    // A keypress event is automatically generated for printable characters
-    // immediately following the keydown event.
+  // A keypress event is automatically generated for printable characters
+  // immediately following the keydown event.
+  if (chrome.experimental) {
     keyEvent.type = 'keydown';
-    if (chrome.experimental) {
-      chrome.experimental.input.sendKeyboardEvent(keyEvent);
-    }
-    // Exit shift mode after pressing any key but space.
-    if (currentMode == SHIFT_MODE && key != 'Spacebar') {
-      transitionMode(SHIFT_MODE);
-    }
-    // Enter shift mode after typing a period for a new sentence.
-    if (currentMode != SHIFT_MODE && key == '.') {
-      transitionMode(SHIFT_MODE);
-    }
+    chrome.experimental.input.sendKeyboardEvent(keyEvent);
+    keyEvent.type = 'keyup';
+    chrome.experimental.input.sendKeyboardEvent(keyEvent);
   }
-  if (!type || type == 'keyup') {
-    keyEvent.type = 'keyup';
-    if (chrome.experimental) {
-      chrome.experimental.input.sendKeyboardEvent(keyEvent);
-    }
+  // Exit shift mode after pressing any key but space.
+  if (currentMode == SHIFT_MODE && key != 'Spacebar') {
+    transitionMode(SHIFT_MODE);
+  }
+  // Enter shift mode after typing a period for a new sentence.
+  if (currentMode != SHIFT_MODE && key == '.') {
+    transitionMode(SHIFT_MODE);
   }
 }
 
 /**
  * Add a child div element that represents the content of the given element.
  * A child div element that represents a text content is added if
  * opt_textContent is given. Otherwise a child element that represents an image
  * content is added. If the given element already has a child, the child element
  * is modified.
  * @param {Element} element The DOM Element to which the content is added.
@@ skipping 19 matching lines @@
   element.appendChild(content);
 }
 
 /**
  * Set up the event handlers necessary to respond to mouse and touch events on
  * the virtual keyboard.
  * @param {BaseKey} key The BaseKey object corresponding to this key.
  * @param {Element} element The top-level DOM Element to set event handlers on.
  * @param {function()} keyDownHandler The event handler called when the key is
  *     pressed. This will be called repeatedly when holding a repeating key.
- * @param {function()=} opt_keyUpHandler The event handler called when the key
+ * @param {function()=} keyUpHandler The event handler called when the key
  *     is released. This is only called once per actual key press.
  */
-function setupKeyEventHandlers(key, element, keyDownHandler, opt_keyUpHandler) {
+function setupKeyEventHandlersHelper(key, element, keyDownHandler,
+                                     keyUpHandler) {
   /**
    * Handle a key down event on the virtual key.
    * @param {UIEvent} evt The UI event which triggered the key down.
    */
   var downHandler = function(evt) {
     // Don't process a key down if the key is already down.
     if (key.pressed) {
       return;
     }
     key.pressed = true;
@@ skipping 29 matching lines @@
     if (!key.pressed) {
       return;
     }
     key.pressed = false;
 
     // Cancel running repeat timer for the released key only.
     if (repeatKey.key == key) {
       repeatKey.cancel();
     }
 
-    if (opt_keyUpHandler) {
-      opt_keyUpHandler();
+    if (keyUpHandler) {
+      keyUpHandler();
     }
     evt.preventDefault();
   };
 
+  var outHandler = function(evt) {
+    // Reset key press state if the point goes out of the element.
+    key.pressed = false;
+  }
+
   // Setup mouse event handlers.
   element.addEventListener('mousedown', downHandler);
   element.addEventListener('mouseup', upHandler);
-  element.addEventListener('mouseout', upHandler);
+  element.addEventListener('mouseout', outHandler);
 
   // Setup touch handlers.
   element.addEventListener('touchstart', downHandler);
   element.addEventListener('touchend', upHandler);
+  // TODO(mazda): Add a handler for touchleave once Webkit supports it.
+  // element.addEventListener('touchleave', outHandler);
 }
 
 /**
+ * Set up the event handlers necessary to respond to the key down event on the
+ * virtual keyboard.
+ * @param {BaseKey} key The BaseKey object corresponding to this key.
+ * @param {Element} element The top-level DOM Element to set event handlers on.
+ * @param {function()} keyDownHandler The event handler called when the key is
+ *     pressed. This will be called repeatedly when holding a repeating key.
+ */
+function setupKeyDownEventHandler(key, element, keyDownHandler) {
+  setupKeyEventHandlersHelper(key, element, keyDownHandler, null);
+}
+
+/**
+ * Set up the event handlers necessary to respond to the key up event on the
+ * virtual keyboard.
+ * @param {BaseKey} key The BaseKey object corresponding to this key.
+ * @param {Element} element The top-level DOM Element to set event handlers on.
+ * @param {function()=} keyUpHandler The event handler called when the key
+ *     is released. This is only called once per actual key press.
+ */
+function setupKeyUpEventHandler(key, element, keyUpHandler) {
+  setupKeyEventHandlersHelper(key, element, null, keyUpHandler);
+}
+
+/**
  * Create closure for the sendKey function.
  * @param {string} key The key paramater to sendKey.
  * @param {string=} type The type parameter to sendKey.
  * @return {function()} A function which calls sendKey(key, type).
  */
 function sendKeyFunction(key, type) {
   return function() {
     sendKey(key, type);
   };
 }
@@ skipping 120 matching lines @@
   /** @inheritDoc */
   makeDOM: function(mode) {
     if (!this.modes_[mode]) {
       return null;
     }
 
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].className = 'key';
     addContent(this.modeElements_[mode], this.modes_[mode].display);
 
-    setupKeyEventHandlers(this, this.modeElements_[mode],
-        sendKeyFunction(this.modes_[mode].keyIdentifier, 'keydown'),
-        sendKeyFunction(this.modes_[mode].keyIdentifier, 'keyup'));
+    setupKeyUpEventHandler(this, this.modeElements_[mode],
+        sendKeyFunction(this.modes_[mode].keyIdentifier));
 
     return this.modeElements_[mode];
   }
 };
 
 /**
  * A key which displays an SVG image.
  * @param {string} className The class that provides the image.
  * @param {string} keyId The key identifier for the key.
  * @param {boolean} opt_repeat True if the key should repeat.
@@ skipping 11 matching lines @@
 SvgKey.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
   makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].className = 'key';
     this.modeElements_[mode].classList.add(this.className_);
     addContent(this.modeElements_[mode]);
 
-    setupKeyEventHandlers(this, this.modeElements_[mode],
-        sendKeyFunction(this.keyId_, 'keydown'),
-        sendKeyFunction(this.keyId_, 'keyup'));
+    if (this.repeat_) {
+      // send the key event on key down if key repeat is enabled
+      setupKeyDownEventHandler(this, this.modeElements_[mode],
+          sendKeyFunction(this.keyId_));
+    } else {
+      setupKeyUpEventHandler(this, this.modeElements_[mode],
+          sendKeyFunction(this.keyId_));
+    }
 
     return this.modeElements_[mode];
   }
 };
 
 /**
  * A Key that remains the same through all modes.
  * @param {string} content The display text for the key.
  * @param {string} keyId The key identifier for the key.
  * @constructor
@@ skipping 10 matching lines @@
 SpecialKey.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
   makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].className = 'key';
     this.modeElements_[mode].classList.add(this.className_);
     addContent(this.modeElements_[mode], this.content_);
 
-    setupKeyEventHandlers(this, this.modeElements_[mode],
-        sendKeyFunction(this.keyId_, 'keydown'),
-        sendKeyFunction(this.keyId_, 'keyup'));
+    setupKeyUpEventHandler(this, this.modeElements_[mode],
+        sendKeyFunction(this.keyId_));
 
     return this.modeElements_[mode];
   }
 };
 
 /**
  * A shift key.
  * @constructor
  * @extends {BaseKey}
  */
@@ skipping 19 matching lines @@
     } else if (mode == SYMBOL_MODE) {
       addContent(this.modeElements_[mode], '#123');
     }
 
     if (mode == SHIFT_MODE || mode == SYMBOL_MODE) {
       this.modeElements_[mode].classList.add('moddown');
     } else {
       this.modeElements_[mode].classList.remove('moddown');
     }
 
-    setupKeyEventHandlers(this, this.modeElements_[mode],
+    setupKeyDownEventHandler(this, this.modeElements_[mode],
         function() {
           transitionMode(SHIFT_MODE);
         });
 
     return this.modeElements_[mode];
   },
 };
 
 /**
  * The symbol key: switches the keyboard into symbol mode.
@@ skipping 18 matching lines @@
     } else if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
       addContent(this.modeElements_[mode], 'abc');
     }
 
     if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
       this.modeElements_[mode].classList.add('moddown');
     } else {
       this.modeElements_[mode].classList.remove('moddown');
     }
 
-    setupKeyEventHandlers(this, this.modeElements_[mode],
+    setupKeyDownEventHandler(this, this.modeElements_[mode],
         function() {
           transitionMode(NUMBER_MODE);
         });
 
     return this.modeElements_[mode];
   }
 };
 
 /**
  * The ".com" key.
  * @constructor
  * @extends {BaseKey}
  */
 function DotComKey() {
   this.modeElements_ = {}
   this.cellType_ = 'nc';
 }
 
 DotComKey.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
   makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].className = 'key com';
     addContent(this.modeElements_[mode], '.com');
 
-    setupKeyEventHandlers(this, this.modeElements_[mode],
+    setupKeyUpEventHandler(this, this.modeElements_[mode],
         function() {
           sendKey('.');
           sendKey('c');
           sendKey('o');
           sendKey('m');
         });
 
     return this.modeElements_[mode];
   }
 };
@@ skipping 10 matching lines @@
 
 HideKeyboardKey.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
   makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].className = 'key hide';
     addContent(this.modeElements_[mode]);
 
-    setupKeyEventHandlers(this, this.modeElements_[mode],
+    setupKeyDownEventHandler(this, this.modeElements_[mode],
         function() {
           if (chrome.experimental) {
             chrome.experimental.input.hideKeyboard();
           }
         });
 
     return this.modeElements_[mode];
   }
 };
 
@@ skipping 53 matching lines @@
    * @param {string} mode The mode to show.
    * @return {void}
    */
   showMode: function(mode) {
     for (var i = 0; i < MODES.length; ++i) {
       this.modeElements_[MODES[i]].style.display = 'none';
     }
     this.modeElements_[mode].style.display = '-webkit-box';
   },
 };