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

chrome/browser/resources/keyboard/main.js

Index: chrome/browser/resources/keyboard/main.js
diff --git a/chrome/browser/resources/keyboard/main.js b/chrome/browser/resources/keyboard/main.js
index 99d4571718f5474e130374a21650983f4999029a..c9ce3a16f88cec13bdcc49965e43b5ede912452f 100644
--- a/chrome/browser/resources/keyboard/main.js
+++ b/chrome/browser/resources/keyboard/main.js
@@ -7,12 +7,6 @@
  */
 
 /**
- * The keyboard layout name currently in use.
- * @type {string}
- */
-var currentKeyboardLayout = 'us';
-
-/**
  * The ratio of the row height to the font size.
  * @type {number}
  */
@@ -48,25 +42,15 @@ function getKeyboardHeight() {
 }
 
 /**
- * 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;
@@ -78,11 +62,24 @@ function initRows(layout, element) {
   }
   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;
@@ -134,6 +131,22 @@ function initKeyboard(layout, element) {
 }
 
 /**
+ * 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}
  */
@@ -162,6 +175,7 @@ window.onload = function() {
 
   initIme(mainDiv);
   initKeyboard(currentKeyboardLayout, mainDiv);
+  initPopupKeyboard(body);
 
   window.onhashchange();