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;
 /**
  * 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) {

[bryeung, 2011/06/07 22:45:03]

Sorry: I'm still not understanding.

Are you saying that window.onresize can be called even if the height has not
changed?  Or is that the height could have changed, but it might be offset by
the IME height, so no resize is necessary?  i.e. the extra window height is
exactly taken up by the candidates, so we don't need to resize the keys?

[Peng, 2011/06/08 14:59:57]

Yeah. Sometime, the window.onresize is caused by showing or hiding candidates.
In those case, the height of keys should be unchanged. So they do not need
resize.

+    // 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).