Adjust virtual keyboard size base on input method candidates.

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, English virtual keyboard implementation.
  */
 
 var KEY_MODE = 'key';
 var SHIFT_MODE = 'shift';
@@ skipping 560 matching lines @@
  * @type {Array.<Row>}
  */
 var allRows = [];  // Populated during start()
 
 /**
  * Calculate the height of the row based on the size of the page.
  * @return {number} The height of each row, in pixels.
  */
 function getRowHeight() {
   var x = window.innerWidth;
-  var y = window.innerHeight - (imeui ? IME_HEIGHT - 2 : 0);
+  var y = window.innerHeight - ((imeui && imeui.visible) ? IME_HEIGHT : 0);
   return (x > kKeyboardAspect * y) ?
       (height = Math.floor(y / 4)) :
       (height = Math.floor(x / (kKeyboardAspect * 4)));
 }
 
 /**
  * Set the keyboard mode.
  * @param {string} mode The new mode.
  * @return {void}
  */
@@ skipping 48 matching lines @@
  * Create a closure for the sendKey function.
  * @param {string} key The parameter to sendKey.
  * @return {void}
  */
 function sendKeyFunction(key) {
   return function() {
     sendKey(key);
   }
 }
 
+var oldHeight = 0;
+var oldX = 0;

[bryeung, 2011/06/03 19:14:52]

I'm confused why this is necessary.  Won't one of these always have changed when
window.onresize gets called?

[Peng, 2011/06/03 22:22:10]

oldHeight is not the height of window. It may be the (window_height -
IME_HEIGHT) or (window_height - 0). They could be same in window.onresize(). 

 /**
  * Resize the keyboard according to the new window size.
  * @return {void}
  */
 window.onresize = function() {
   var height = getRowHeight();
   var newX = document.documentElement.clientWidth;
 
-  // All rows should have the same aspect, so just use the first one
-  var totalWidth = Math.floor(height * allRows[0].aspect);
-  var leftPadding = Math.floor((newX - totalWidth) / 2);
-  document.getElementById('b').style.paddingLeft = leftPadding + 'px';
+  if (newX != oldX || height != oldHeight) {
+    // All rows should have the same aspect, so just use the first one
+    var totalWidth = Math.floor(height * allRows[0].aspect);
+    var leftPadding = Math.floor((newX - totalWidth) / 2);
+    document.getElementById('b').style.paddingLeft = leftPadding + 'px';
+  }
 
-  for (var i = 0; i < allRows.length; ++i) {
-    allRows[i].resize(height);
+  if (height != oldHeight) {
+    for (var i = 0; i < allRows.length; ++i) {
+      allRows[i].resize(height);
+    }
   }
 
   updateIme();
+
+  oldHeight = height;
+  oldX = newX;
 }
 
 /**
  * Init the keyboard.
  * @return {void}
  */
 window.onload = function() {
   var body = document.getElementById('b');
 
   initIme(body);
 
   for (var i = 0; i < KEYS.length; ++i) {
     allRows.push(new Row(i, KEYS[i]));
   }
 
+  height = getRowHeight();
   for (var i = 0; i < allRows.length; ++i) {
-    body.appendChild(allRows[i].makeDOM(getRowHeight()));
+    body.appendChild(allRows[i].makeDOM(height));
     allRows[i].showMode(KEY_MODE);
   }
+  oldHeight = height;
 
   window.onresize();
 }
 // TODO(bryeung): would be nice to leave less gutter (without causing
 // rendering issues with floated divs wrapping at some sizes).