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 + '%';
+    }
+    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) {
+      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;
@@ skipping 17 matching lines @@
   body.addEventListener('touchmove', disableGestures);
   body.addEventListener('touchend', disableGestures);
 
   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();
       }
     });
 }