Enable the keyboard to show the popup keyboard for inputting accented characters.

chrome/browser/resources/keyboard/main.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.
  */
 
 /**
- * The keyboard layout name currently in use.
- * @type {string}
- */
-var currentKeyboardLayout = 'us';
-
-/**
  * The ratio of the row height to the font size.
  * @type {number}
  */
 const kFontSizeRatio = 3.5;
 
 /**
  * Return the id attribute of the keyboard element for the given layout.
  * @param {string} layout The keyboard layout.
  * @return {string} The id attribute of the keyboard element.
  */
@@ skipping 15 matching lines @@
  * @return {number} The height of the keyboard in pixels.
  */
 function getKeyboardHeight() {
   var x = window.innerWidth;
   var y = window.innerHeight - ((imeui && imeui.visible) ? IME_HEIGHT : 0);
   return (x > getKeyboardAspect() * y) ?
       y : Math.floor(x / getKeyboardAspect());
 }
 
 /**
- * Set the keyboard mode.
- * @param {string} mode The new mode.
- * @return {void}
- */
-function setMode(mode) {
-  var rows = KEYBOARDS[currentKeyboardLayout]['rows'];
-  for (var i = 0; i < rows.length; ++i) {
-    rows[i].showMode(mode);
-  }
-}
-
-/**
  * Create a DOM of the keyboard rows for the given keyboard layout.
  * Do nothing if the DOM is already created.
  * @param {string} layout The keyboard layout for which rows are created.
- * @param {Element} The DOM Element to which rows are appended.
+ * @param {Element} element The DOM Element to which rows are appended.
+ * @param {boolean} autoPadding True if padding needs to be added to both side
+ *     of the rows that have less keys.
  * @return {void}
  */
-function initRows(layout, element) {
+function initRows(layout, element, autoPadding) {
   var keyboard = KEYBOARDS[layout];
   if ('rows' in keyboard) {
     return;
   }
   var def = keyboard['definition'];
   var rows = [];
   for (var i = 0; i < def.length; ++i) {
     rows.push(new Row(i, def[i]));
   }
   keyboard['rows'] = rows;
 
+  var maxRowLength = -1;
+  for (var i = 0; i < rows.length; ++i) {
+    if (rows[i].length > maxRowLength) {
+      maxRowLength = rows[i].length;
+    }
+  }
+
   // A div element which holds rows for the layout.
   var rowsDiv = document.createElement('div');
   rowsDiv.className = 'rows';
   for (var i = 0; i < rows.length; ++i) {
-    rowsDiv.appendChild(rows[i].makeDOM());
+    var rowDiv = rows[i].makeDOM();
+    if (autoPadding && rows[i].length < maxRowLength) {
+      var padding = 50 * (maxRowLength - rows[i].length) / maxRowLength;
+      rowDiv.style.paddingLeft = padding + '%';
+      rowDiv.style.paddingRight = padding + '%';

[bryeung, 2011/09/08 19:22:35]

Why is this necsesary?  And why is it being done with a percentage?

[mazda, 2011/09/12 14:33:48]

Keys occupy the entire row without these paddings since I'm using
-webkit-box-flex to lay out the keys, and this looks weird when the popup
keyboard has a row that contains few keys.
Please look at the image of popup keyboard for e and i as examples that would
look weird without the padding.
A percentage is used for making the key width same as other rows.

I plan to enable Row to set CSS class individually, and that would make this
code unnecessary.

+    }
+    rowsDiv.appendChild(rowDiv);
     rows[i].showMode(currentMode);
   }
   keyboard['rowsDiv'] = rowsDiv;
   element.appendChild(rowsDiv);
 }
 
 /**
  * Create a DOM of the handwriting canvas for the given keyboard layout.
  * Do nothing if the DOM is already created or the layout doesn't have canvas.
  * @param {string} layout The keyboard layout for which canvas is created.
@@ skipping 31 matching lines @@
   keyboardDiv.id = getKeyboardId(layout);
   keyboardDiv.className = 'keyboard';
   initRows(layout, keyboardDiv);
   initHandwritingCanvas(layout, keyboardDiv);
   keyboard['keyboardDiv'] = keyboardDiv;
   window.onresize();
   element.appendChild(keyboardDiv);
 }
 
 /**
+ * Create a DOM of the popup keyboard.
+ * @param {Element} The DOM Element to which the popup keyboard is appended.
+ * @return {void}
+ */
+function initPopupKeyboard(element) {
+  var popupDiv = document.createElement('div');
+  popupDiv.id = 'popup';
+  popupDiv.className = 'keyboard popup';
+  popupDiv.style.visibility = 'hidden';
+  element.appendChild(popupDiv);
+  element.addEventListener('mouseup', function(evt) {

[bryeung, 2011/09/08 19:22:35]

Is there a reason there is not also a touchend handler here?

[mazda, 2011/09/12 14:33:48]

This mouseup handler deals with the case that the mouse cursor has moved out of
the element that has received mousedown event.
On the other hand, touchend event is sent to and handled by the element that has
received touchstart event even if the touch point have moved out of the element.
That's why it is not necessary to add touchend handler here.

+      hidePopupKeyboard(evt);
+    });
+}
+
+/**
  * Resize the keyboard according to the new window size.
  * @return {void}
  */
 window.onresize = function() {
   var keyboardDiv = KEYBOARDS[currentKeyboardLayout]['keyboardDiv'];
   var height = getKeyboardHeight();
   keyboardDiv.style.height = height + 'px';
   var mainDiv = document.getElementById('main');
   mainDiv.style.width = Math.floor(getKeyboardAspect() * height) + 'px';
   var rowsLength = KEYBOARDS[currentKeyboardLayout]['rows'].length;
   keyboardDiv.style.fontSize = (height / kFontSizeRatio / rowsLength) + 'px';
   updateIme();
 }
 
 /**
  * Init the keyboard.
  * @return {void}
  */
 window.onload = function() {
   var body = document.getElementById('b');
 
   var mainDiv = document.createElement('div');
   mainDiv.className = 'main';
   mainDiv.id = 'main';
   body.appendChild(mainDiv);
 
   initIme(mainDiv);
   initKeyboard(currentKeyboardLayout, mainDiv);
+  initPopupKeyboard(body);
 
   window.onhashchange();
 
   chrome.experimental.input.onTextInputTypeChanged.addListener(function(type) {
     switch(type) {
       case "text":
         currentMode = SHIFT_MODE;
         break;
       case "email":
       case "password":
@@ skipping 43 matching lines @@
       if (canvas !== undefined) {
         if (!visible) {
           canvas.clear();
         }
       }
       if (visible) {
         window.onresize();
       }
     });
 }