Adjust the size of keys and rows with CSS instead of calculating in JavaScript.

This is a preliminary change for adding i18n support to virtual keyboard, which mostly depends on CSS for the layout of keys and rows.
This change replace the most logic of calculating layout in JavaScirpt with CSS using -webkit-box.
Because of subtle difference of logic between the previous implementation using JavaScript and the current implementation using -webkit-box, several keys have slightly different sizes, but the difference is practically unnoticeable.

BUG=none
TEST=manually checked on the device


Review URL: http://codereview.chromium.org/7326047

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@92974 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 211 insertions, 251 deletions

diff --git a/chrome/browser/resources/keyboard/common.js b/chrome/browser/resources/keyboard/common.js
index 486f006..54b9907 100644
--- a/chrome/browser/resources/keyboard/common.js
+++ b/chrome/browser/resources/keyboard/common.js
@@ -115,6 +115,35 @@ function sendKey(key, type) {
 }
 
 /**
+ * Add a child div element that represents the content of the given element.
+ * A child div element that represents a text content is added if
+ * opt_textContent is given. Otherwise a child element that represents an image
+ * content is added. If the given element already has a child, the child element
+ * is modified.
+ * @param {Element} element The DOM Element to which the content is added.
+ * @param {string} opt_textContent The text to be inserted.
+ * @return {void}
+ */
+function addContent(element, opt_textContent) {
+  if (element.childNodes.length > 0) {
+    var content = element.childNodes[0];
+    if (opt_textContent) {
+      content.textContent = opt_textContent;
+    }
+    return;
+  }
+
+  var content = document.createElement('div');
+  if (opt_textContent) {
+    content.textContent = opt_textContent;
+    content.className = 'text-key';
+  } else {
+    content.className = 'image-key';
+  }
+  element.appendChild(content);
+}
+
+/**
  * Set up the event handlers necessary to respond to mouse and touch events on
  * the virtual keyboard.
  * @param {BaseKey} key The BaseKey object corresponding to this key.
@@ -229,18 +258,6 @@ function BaseKey() {}
 
 BaseKey.prototype = {
   /**
-   * The aspect ratio of this key.
-   * @type {number}
-   */
-  aspect_: 1,
-
-  /**
-   * The column.
-   * @type {number}
-   */
-  column_: 0.,
-
-  /**
    * The cell type of this key.  Determines the background colour.
    * @type {string}
    */
@@ -291,21 +308,6 @@ BaseKey.prototype = {
   },
 
   /**
-   * @return {number} The aspect ratio of this key.
-   */
-  get aspect() {
-    return this.aspect_;
-  },
-
-  /**
-   * Set the horizontal position for this key.
-   * @param {number} column Horizonal position (in multiples of row height).
-   */
-  set column(column) {
-    this.column_ = column;
-  },
-
-  /**
    * Set the vertical position, aka row, of this key.
    * @param {number} row The row.
    */
@@ -316,56 +318,11 @@ BaseKey.prototype = {
   },
 
   /**
-   * Returns the amount of padding for the top of the key.
-   * @param {string} mode The mode for the key.
-   * @param {number} height The height of the key.
-   * @return {number} Padding in pixels.
-   */
-  getPadding: function(mode, height) {
-    return Math.floor(height / 3.5);
-  },
-
-  /**
-   * Size the DOM elements of this key.
-   * @param {string} mode The mode to be sized.
-   * @param {number} height The height of the key.
-   * @return {void}
-   */
-  sizeElement: function(mode, height) {
-    var padding = this.getPadding(mode, height);
-    var border = 1;
-    var margin = 5;
-    var width = Math.floor(height * (this.column_ + this.aspect_)) -
-                Math.floor(height *  this.column_);
-
-    var extraHeight = margin + padding + 2 * border;
-    var extraWidth = margin + 2 * border;
-
-    this.modeElements_[mode].style.width = (width - extraWidth) + 'px';
-    this.modeElements_[mode].style.height = (height - extraHeight) + 'px';
-    this.modeElements_[mode].style.marginLeft = margin + 'px';
-    this.modeElements_[mode].style.fontSize = (height / 3.5) + 'px';
-    this.modeElements_[mode].style.paddingTop = padding + 'px';
-  },
-
-  /**
-   * Resize all modes of this key based on the given height.
-   * @param {number} height The height of the key.
-   * @return {void}
-   */
-  resize: function(height) {
-    for (var i in this.modeElements_) {
-      this.sizeElement(i, height);
-    }
-  },
-
-  /**
    * Create the DOM elements for the given keyboard mode.  Must be overridden.
    * @param {string} mode The keyboard mode to create elements for.
-   * @param {number} height The height of the key.
    * @return {Element} The top-level DOM Element for the key.
    */
-  makeDOM: function(mode, height) {
+  makeDOM: function(mode) {
     throw new Error('makeDOM not implemented in BaseKey');
   },
 };
@@ -381,7 +338,6 @@ BaseKey.prototype = {
  */
 function Key(key, shift, num, symbol) {
   this.modeElements_ = {};
-  this.aspect_ = 1;  // ratio width:height
   this.cellType_ = '';
 
   this.modes_ = {};
@@ -395,12 +351,11 @@ Key.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
-  makeDOM: function(mode, height) {
+  makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
-    this.modeElements_[mode].textContent = this.modes_[mode].display;
     this.modeElements_[mode].className = 'key';
+    addContent(this.modeElements_[mode], this.modes_[mode].display);
 
-    this.sizeElement(mode, height);
     setupKeyEventHandlers(this, this.modeElements_[mode],
         sendKeyFunction(this.modes_[mode].keyIdentifier, 'keydown'),
         sendKeyFunction(this.modes_[mode].keyIdentifier, 'keyup'));
@@ -411,15 +366,13 @@ Key.prototype = {
 
 /**
  * A key which displays an SVG image.
- * @param {number} aspect The aspect ratio of the key.
  * @param {string} className The class that provides the image.
  * @param {string} keyId The key identifier for the key.
  * @constructor
  * @extends {BaseKey}
  */
-function SvgKey(aspect, className, keyId) {
+function SvgKey(className, keyId) {
   this.modeElements_ = {};
-  this.aspect_ = aspect;
   this.cellType_ = 'nc';
   this.className_ = className;
   this.keyId_ = keyId;
@@ -429,21 +382,15 @@ SvgKey.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
-  getPadding: function(mode, height) { return 0; },
-
-  /** @inheritDoc */
-  makeDOM: function(mode, height) {
+  makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].className = 'key';
-
-    var img = document.createElement('div');
-    img.className = 'image-key ' + this.className_;
-    this.modeElements_[mode].appendChild(img);
+    this.modeElements_[mode].classList.add(this.className_);
+    addContent(this.modeElements_[mode]);
 
     setupKeyEventHandlers(this, this.modeElements_[mode],
         sendKeyFunction(this.keyId_, 'keydown'),
         sendKeyFunction(this.keyId_, 'keyup'));
-    this.sizeElement(mode, height);
 
     return this.modeElements_[mode];
   }
@@ -451,30 +398,29 @@ SvgKey.prototype = {
 
 /**
  * A Key that remains the same through all modes.
- * @param {number} aspect The aspect ratio of the key.
  * @param {string} content The display text for the key.
  * @param {string} keyId The key identifier for the key.
  * @constructor
  * @extends {BaseKey}
  */
-function SpecialKey(aspect, content, keyId) {
+function SpecialKey(className, content, keyId) {
   this.modeElements_ = {};
-  this.aspect_ = aspect;
   this.cellType_ = 'nc';
   this.content_ = content;
   this.keyId_ = keyId;
+  this.className_ = className;
 }
 
 SpecialKey.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
-  makeDOM: function(mode, height) {
+  makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
-    this.modeElements_[mode].textContent = this.content_;
     this.modeElements_[mode].className = 'key';
+    this.modeElements_[mode].classList.add(this.className_);
+    addContent(this.modeElements_[mode], this.content_);
 
-    this.sizeElement(mode, height);
     setupKeyEventHandlers(this, this.modeElements_[mode],
         sendKeyFunction(this.keyId_, 'keydown'),
         sendKeyFunction(this.keyId_, 'keyup'));
@@ -485,48 +431,38 @@ SpecialKey.prototype = {
 
 /**
  * A shift key.
- * @param {number} aspect The aspect ratio of the key.
  * @constructor
  * @extends {BaseKey}
  */
-function ShiftKey(aspect) {
+function ShiftKey(className) {
   this.modeElements_ = {};
-  this.aspect_ = aspect;
   this.cellType_ = 'nc';
+  this.className_ = className;
 }
 
 ShiftKey.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
-  getPadding: function(mode, height) {
-    if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
-      return BaseKey.prototype.getPadding.call(this, mode, height);
-    }
-    return 0;
-  },
-
-  /** @inheritDoc */
-  makeDOM: function(mode, height) {
+  makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
+    this.modeElements_[mode].className = 'key shift';
+    this.modeElements_[mode].classList.add(this.className_);
 
     if (mode == KEY_MODE || mode == SHIFT_MODE) {
-      var shift = document.createElement('div');
-      shift.className = 'image-key shift';
-      this.modeElements_[mode].appendChild(shift);
+      addContent(this.modeElements_[mode]);
     } else if (mode == NUMBER_MODE) {
-      this.modeElements_[mode].textContent = 'more';
+      addContent(this.modeElements_[mode], 'more');
     } else if (mode == SYMBOL_MODE) {
-      this.modeElements_[mode].textContent = '#123';
+      addContent(this.modeElements_[mode], '#123');
     }
 
     if (mode == SHIFT_MODE || mode == SYMBOL_MODE) {
-      this.modeElements_[mode].className = 'moddown key';
+      this.modeElements_[mode].classList.add('moddown');
     } else {
-      this.modeElements_[mode].className = 'key';
+      this.modeElements_[mode].classList.remove('moddown');
     }
 
-    this.sizeElement(mode, height);
     setupKeyEventHandlers(this, this.modeElements_[mode],
         function() {
           transitionMode(SHIFT_MODE);
@@ -543,7 +479,6 @@ ShiftKey.prototype = {
  */
 function SymbolKey() {
   this.modeElements_ = {}
-  this.aspect_ = 1.3;
   this.cellType_ = 'nc';
 }
 
@@ -553,20 +488,20 @@ SymbolKey.prototype = {
   /** @inheritDoc */
   makeDOM: function(mode, height) {
     this.modeElements_[mode] = document.createElement('div');
+    this.modeElements_[mode].className = 'key symbol';
 
     if (mode == KEY_MODE || mode == SHIFT_MODE) {
-      this.modeElements_[mode].textContent = '#123';
+      addContent(this.modeElements_[mode], '#123');
     } else if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
-      this.modeElements_[mode].textContent = 'abc';
+      addContent(this.modeElements_[mode], 'abc');
     }
 
     if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
-      this.modeElements_[mode].className = 'moddown key';
+      this.modeElements_[mode].classList.add('moddown');
     } else {
-      this.modeElements_[mode].className = 'key';
+      this.modeElements_[mode].classList.remove('moddown');
     }
 
-    this.sizeElement(mode, height);
     setupKeyEventHandlers(this, this.modeElements_[mode],
         function() {
           transitionMode(NUMBER_MODE);
@@ -583,7 +518,6 @@ SymbolKey.prototype = {
  */
 function DotComKey() {
   this.modeElements_ = {}
-  this.aspect_ = 1.3;
   this.cellType_ = 'nc';
 }
 
@@ -591,12 +525,11 @@ DotComKey.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
-  makeDOM: function(mode, height) {
+  makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
-    this.modeElements_[mode].textContent = '.com';
-    this.modeElements_[mode].className = 'key';
+    this.modeElements_[mode].className = 'key com';
+    addContent(this.modeElements_[mode], '.com');
 
-    this.sizeElement(mode, height);
     setupKeyEventHandlers(this, this.modeElements_[mode],
         function() {
           sendKey('.');
@@ -611,13 +544,11 @@ DotComKey.prototype = {
 
 /**
  * The key that hides the keyboard.
- * @param {number} aspect The aspect ratio of the key.
  * @constructor
  * @extends {BaseKey}
  */
-function HideKeyboardKey(aspect) {
+function HideKeyboardKey() {
   this.modeElements_ = {}
-  this.aspect_ = aspect;
   this.cellType_ = 'nc';
 }
 
@@ -625,18 +556,11 @@ HideKeyboardKey.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
-  getPadding: function(mode, height) { return 0; },
-
-  /** @inheritDoc */
-  makeDOM: function(mode, height) {
+  makeDOM: function(mode) {
     this.modeElements_[mode] = document.createElement('div');
-    this.modeElements_[mode].className = 'key';
-
-    var hide = document.createElement('div');
-    hide.className = 'image-key hide';
-    this.modeElements_[mode].appendChild(hide);
+    this.modeElements_[mode].className = 'key hide';
+    addContent(this.modeElements_[mode]);
 
-    this.sizeElement(mode, height);
     setupKeyEventHandlers(this, this.modeElements_[mode],
         function() {
           if (chrome.experimental) {
@@ -663,22 +587,10 @@ function Row(position, keys) {
 
 Row.prototype = {
   /**
-   * Get the total aspect ratio of the row.
-   * @return {number} The aspect ratio relative to a height of 1 unit.
-   */
-  get aspect() {
-    var total = 0;
-    for (var i = 0; i < this.keys_.length; ++i) {
-      total += this.keys_[i].aspect;
-    }
-    return total;
-  },
-
-  /**
    * Create the DOM elements for the row.
    * @return {Element} The top-level DOM Element for the row.
    */
-  makeDOM: function(height) {
+  makeDOM: function() {
     this.element_ = document.createElement('div');
     this.element_.className = 'row';
     for (var i = 0; i < MODES.length; ++i) {
@@ -691,7 +603,7 @@ Row.prototype = {
     for (var j = 0; j < this.keys_.length; ++j) {
       var key = this.keys_[j];
       for (var i = 0; i < MODES.length; ++i) {
-        this.modeElements_[MODES[i]].appendChild(key.makeDOM(MODES[i], height));
+        this.modeElements_[MODES[i]].appendChild(key.makeDOM(MODES[i]));
       }
     }
 
@@ -701,11 +613,8 @@ Row.prototype = {
       this.modeElements_[MODES[i]].appendChild(clearingDiv);
     }
 
-    var column = 0.;
     for (var i = 0; i < this.keys_.length; ++i) {
       this.keys_[i].row = this.position_;
-      this.keys_[i].column = column;
-      column += this.keys_[i].aspect;
     }
 
     return this.element_;
@@ -720,17 +629,6 @@ Row.prototype = {
     for (var i = 0; i < MODES.length; ++i) {
       this.modeElements_[MODES[i]].style.display = 'none';
     }
-    this.modeElements_[mode].style.display = 'block';
-  },
-
-  /**
-   * Resizes all keys in the row according to the global size.
-   * @param {number} height The height of the key.
-   * @return {void}
-   */
-  resize: function(height) {
-    for (var i = 0; i < this.keys_.length; ++i) {
-      this.keys_[i].resize(height);
-    }
+    this.modeElements_[mode].style.display = '-webkit-box';
   },
 };
diff --git a/chrome/browser/resources/keyboard/layout_handwriting_vk.js b/chrome/browser/resources/keyboard/layout_handwriting_vk.js
index 6c26c6d..bc54b3a 100644
--- a/chrome/browser/resources/keyboard/layout_handwriting_vk.js
+++ b/chrome/browser/resources/keyboard/layout_handwriting_vk.js
@@ -21,9 +21,8 @@ const HANDWRITING_CANVAS_ELEMENT_ID = 'handwriting-canvas';
  * @constructor
  * @extends {BaseKey}
  */
-function ClearHandwritingKey(aspect, content) {
+function ClearHandwritingKey(content) {
   this.modeElements_ = {}
-  this.aspect_ = aspect;
   this.cellType_ = 'nc';
   this.content_ = content;
 }
@@ -34,10 +33,8 @@ ClearHandwritingKey.prototype = {
   /** @inheritDoc */
   makeDOM: function(mode, height) {
     this.modeElements_[mode] = document.createElement('div');
-    this.modeElements_[mode].textContent = this.content_;
-    this.modeElements_[mode].className = 'key';
-
-    this.sizeElement(mode, height);
+    this.modeElements_[mode].className = 'key handwriting-clear';
+    addContent(this.modeElements_[mode], this.content_);
 
     this.modeElements_[mode].onclick = function() {
       var canvas = document.getElementById(HANDWRITING_CANVAS_ELEMENT_ID);
@@ -191,17 +188,17 @@ HandwritingCanvas.prototype = {
  */
 var KEYS_HANDWRITING_VK = [
   [
-    new ClearHandwritingKey(5, 'CLEAR')
+    new ClearHandwritingKey('CLEAR')
   ],
   [
-    new SvgKey(5, 'return', 'Enter')
+    new SvgKey('handwriting-return', 'Enter')
   ],
   [
-    new SpecialKey(3.7, 'SPACE', 'Spacebar'),
-    new SvgKey(1.3, 'backspace', 'Backspace')
+    new SpecialKey('handwriting-space', 'SPACE', 'Spacebar'),
+    new SvgKey('handwriting-backspace', 'Backspace')
   ],
   [
-    new SvgKey(3.7, 'mic', ''),
-    new HideKeyboardKey(1.3)
+    new SvgKey('handwriting-mic', ''),
+    new HideKeyboardKey()
   ]
 ];
diff --git a/chrome/browser/resources/keyboard/layout_us.js b/chrome/browser/resources/keyboard/layout_us.js
index e65743f..5b12dca 100644
--- a/chrome/browser/resources/keyboard/layout_us.js
+++ b/chrome/browser/resources/keyboard/layout_us.js
@@ -19,7 +19,7 @@ var backspaceKey;
  */
 var KEYS_US = [
   [
-    new SvgKey(1, 'tab', 'Tab'),
+    new SvgKey('tab', 'Tab'),
     new Key(C('q'), C('Q'), C('1'), C('`')),
     new Key(C('w'), C('W'), C('2'), C('~')),
     new Key(C('e'), C('E'), C('3'), new Character('<', 'LessThan')),
@@ -30,7 +30,7 @@ var KEYS_US = [
     new Key(C('i'), C('I'), C('8'), C('}')),
     new Key(C('o'), C('O'), C('9'), C('\'')),
     new Key(C('p'), C('P'), C('0'), C('|')),
-    backspaceKey = new SvgKey(1.6, 'backspace', 'Backspace')
+    backspaceKey = new SvgKey('backspace', 'Backspace')
   ],
   [
     new SymbolKey(),
@@ -44,10 +44,10 @@ var KEYS_US = [
     new Key(C('k'), C('K'), C('*'), C('#')),
     new Key(C('l'), C('L'), C('('), C(' ')),
     new Key(C('\''), C('\''), C(')'), C(' ')),
-    new SvgKey(1.3, 'return', 'Enter')
+    new SvgKey('return', 'Enter')
   ],
   [
-    new ShiftKey(1.6),
+    new ShiftKey('left_shift'),
     new Key(C('z'), C('Z'), C('/'), C(' ')),
     new Key(C('x'), C('X'), C('-'), C(' ')),
     new Key(C('c'), C('C'), C('\''), C(' ')),
@@ -58,19 +58,19 @@ var KEYS_US = [
     new Key(C('!'), C('!'), C('{'), C(' ')),
     new Key(C('?'), C('?'), C('}'), C(' ')),
     new Key(C('/'), C('/'), C('\\'), C(' ')),
-    new ShiftKey(1)
+    new ShiftKey()
   ],
   [
-    new SvgKey(1.3, 'mic', ''),
+    new SvgKey('mic', ''),
     new DotComKey(),
-    new SpecialKey(1.3, '@', '@'),
+    new SpecialKey('at', '@', '@'),
     // TODO(bryeung): the spacebar needs to be a little bit more stretchy,
     // since this row has only 7 keys (as opposed to 12), the truncation
     // can cause it to not be wide enough.
-    new SpecialKey(4.8, ' ', 'Spacebar'),
-    new SpecialKey(1.3, ',', ','),
-    new SpecialKey(1.3, '.', '.'),
-    new HideKeyboardKey(1.3)
+    new SpecialKey('space', ' ', 'Spacebar'),
+    new SpecialKey('comma', ',', ','),
+    new SpecialKey('period', '.', '.'),
+    new HideKeyboardKey()
   ]
 ];
 
diff --git a/chrome/browser/resources/keyboard/main.css b/chrome/browser/resources/keyboard/main.css
index b5aeaeb..e77af0b 100644
--- a/chrome/browser/resources/keyboard/main.css
+++ b/chrome/browser/resources/keyboard/main.css
@@ -14,17 +14,40 @@ body {
 }
 
 div.main {
+  margin: 0 auto;
   display: -webkit-box;
-  margin-top: 5px;
+  -webkit-box-orient: vertical;
+}
+
+div.keyboard {
+  margin: 0 auto;
+  display: -webkit-box;
+  text-align: center;
+  -webkit-box-flex: 1;
+}
+
+div.rows {
+  display: -webkit-box;
+  text-align: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-flex: 1;
 }
 
 div.canvas {
-  margin-left: 5px;
+  display: block;
+  margin: 5px 0 0 5px;
   -webkit-box-flex: 1;
 }
 
 div.row {
+  display: -webkit-box;
   margin-top: 5px;
+  -webkit-box-flex: 1;
+}
+
+div.row > div {
+  display: -webkit-box;
+  -webkit-box-flex: 1;
 }
 
 canvas.handwriting {
@@ -66,12 +89,23 @@ canvas.handwriting {
 .key {
   border: 1px solid gray;
   color: #dbdbdb;
-  float: left;
+  display: -webkit-box;
   font-family: sans-serif;
-  text-align: center;
+  margin-left: 5px;
+  position: relative;
+  -webkit-box-flex: 1;
   -webkit-border-radius: 4px;
 }
 
+.key > div {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 .r0 {
   background: -webkit-linear-gradient(#5a616f, #505662);
 }
@@ -120,26 +154,69 @@ div.moddown {
   width: 100%;
 }
 
-.backspace {
+.text-key {
+  height: 1.2em;
+}
+
+.backspace > div, .handwriting-backspace > div {
   background-image: url("del.svg");
 }
 
-.tab {
+.tab > div {
   background-image: url("tab.svg");
 }
 
-.return {
+.return > div, .handwriting-return > div {
   background-image: url("ret.svg");
 }
 
-.mic {
+.mic > div, .handwriting-mic > div {
   background-image: url("mic.svg");
 }
 
-.shift {
+.shift > div.image-key {
   background-image: url("shift.svg");
 }
 
-.hide {
+.moddownshift > div {
+  background-image: url("shift.svg");
+}
+
+.hide > div {
   background-image: url("keyboard.svg");
 }
+
+.at,
+.com,
+.comma,
+.handwriting-backspace,
+.hide,
+.mic,
+.period,
+.return,
+.symbol {
+  -webkit-box-flex: 1.3;
+}
+
+.backspace,
+.left_shift {
+  -webkit-box-flex: 1.6;
+}
+
+.space {
+  -webkit-box-flex: 4.8;
+}
+
+.handwriting-mic,
+.handwriting-space {
+  -webkit-box-flex: 3.7;
+}
+
+.handwriting-clear,
+.handwriting-return {
+  -webkit-box-flex: 5;
+}
+
+.nodisplay {
+  display: none;
+}
diff --git a/chrome/browser/resources/keyboard/main.js b/chrome/browser/resources/keyboard/main.js
index d83924b..715e019 100644
--- a/chrome/browser/resources/keyboard/main.js
+++ b/chrome/browser/resources/keyboard/main.js
@@ -32,18 +32,22 @@ var currentKeyboardLayout = 'us';
  * The keyboard's aspect ratio.
  * @type {number}
  */
-var kKeyboardAspect = 3.3;
+const kKeyboardAspect = 3.15;
 
 /**
- * Calculate the height of the row based on the size of the page.
- * @return {number} The height of each row, in pixels.
+ * The ratio of the row height to the font size.
+ * @type {number}
  */
-function getRowHeight() {
+const kFontSizeRatio = 3.5;
+
+/**
+ * Calculate the height of the keyboard based on the size of the page.
+ * @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 > kKeyboardAspect * y) ?
-      (height = Math.floor(y / 4)) :
-      (height = Math.floor(x / (kKeyboardAspect * 4)));
+  return (x > kKeyboardAspect * y) ? y : Math.floor(x / kKeyboardAspect);
 }
 
 /**
@@ -58,44 +62,19 @@ function setMode(mode) {
   }
 }
 
-var oldHeight = 0;
-var oldX = 0;
-var oldAspect = 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 of the current keyboard should have the same aspect, so just use
-  // the first row.
-  var newAspect = KEYBOARDS[currentKeyboardLayout]['rows'][0].aspect;
-
-  if (newX != oldX || height != oldHeight || newAspect != oldAspect) {
-    var totalWidth = Math.floor(height * newAspect);
-    var leftPadding = Math.floor((newX - totalWidth) / 2);
-    document.getElementById('b').style.paddingLeft = leftPadding + 'px';
-  }
-
-  if (height != oldHeight || newAspect != oldAspect) {
-    var rows = KEYBOARDS[currentKeyboardLayout]['rows'];
-    for (var i = 0; i < rows.length; ++i) {
-      rows[i].resize(height);
-    }
-    var canvas = KEYBOARDS[currentKeyboardLayout]['canvas'];
-    if (canvas !== undefined) {
-      var canvasHeight = (height - 2 /* overlapped margin*/) * rows.length;
-      canvas.resize(canvasHeight);
-    }
-  }
-
+  var keyboardDiv = document.getElementById('keyboard');
+  var height = getKeyboardHeight();
+  keyboardDiv.style.height = height + 'px';
+  var mainDiv = document.getElementById('main');
+  mainDiv.style.width = Math.floor(kKeyboardAspect * height) + 'px';
+  var rowsLength = KEYBOARDS[currentKeyboardLayout]['rows'].length;
+  keyboardDiv.style.fontSize = (height / kFontSizeRatio / rowsLength) + 'px';
   updateIme();
-
-  oldHeight = height;
-  oldX = newX;
-  oldAspect = newAspect;
 }
 
 /**
@@ -105,12 +84,13 @@ window.onresize = function() {
 window.onload = function() {
   var body = document.getElementById('b');
 
-  initIme(body);
-
   var mainDiv = document.createElement('div');
   mainDiv.className = 'main';
+  mainDiv.id = 'main';
   body.appendChild(mainDiv);
 
+  initIme(mainDiv);
+
   // TODO(mazda,yusukes): If we support 40+ virtual keyboards, it's not a good
   // idea to create rows (and DOM) for all keyboards inside onload(). We should
   // do it on an on-demand basis instead.
@@ -123,35 +103,41 @@ window.onload = function() {
     }
   }
 
-  height = getRowHeight();
+  // A div element which holds rows and canvases
+  var keyboardDiv = document.createElement('div');
+  keyboardDiv.className = 'keyboard';
+  keyboardDiv.id = 'keyboard';
 
   // A div element which holds canvases for all keyboards layouts.
   var canvasesDiv = document.createElement('div');
-  canvasesDiv.className = 'canvas';
+  canvasesDiv.className = 'nodisplay';
 
   for (var layout in KEYBOARDS) {
     // A div element which holds rows for the layout.
     var rowsDiv = document.createElement('div');
     var rows = KEYBOARDS[layout]['rows'];
     for (var i = 0; i < rows.length; ++i) {
-      rowsDiv.appendChild(rows[i].makeDOM(height));
+      rowsDiv.appendChild(rows[i].makeDOM());
       rows[i].showMode(currentMode);
     }
-    rowsDiv.hidden = true;
-    mainDiv.appendChild(rowsDiv);
+    rowsDiv.className = 'nodisplay';
+    keyboardDiv.appendChild(rowsDiv);
     KEYBOARDS[layout]['rowsDiv'] = rowsDiv;
 
     var canvas = KEYBOARDS[layout]['canvas'];
     if (canvas !== undefined) {
       canvas.visible = false;
-      var canvasHeight = (height - 2 /* overlapped margin*/) * rows.length;
+      var border = 1;
+      var marginTop = 5;
+      var canvasHeight = getKeyboardHeight() - 2 * border - marginTop;
       canvas.resize(canvasHeight);
       canvasesDiv.appendChild(canvas);
     }
+    KEYBOARDS[layout]['canvasesDiv'] = canvasesDiv;
   }
-  mainDiv.appendChild(canvasesDiv);
+  keyboardDiv.appendChild(canvasesDiv);
+  mainDiv.appendChild(keyboardDiv);
 
-  oldHeight = height;
   window.onhashchange();
 
   // Restore the keyboard to the default state when it is hidden.
@@ -184,8 +170,10 @@ window.onhashchange = function() {
       var visible = (layout == new_layout);
       var canvas = KEYBOARDS[layout]['canvas'];
       var rowsDiv = KEYBOARDS[layout]['rowsDiv'];
-      rowsDiv.hidden = !visible;
+      var canvasesDiv = KEYBOARDS[layout]['canvasesDiv'];
+      rowsDiv.className = visible ? 'rows' : 'nodisplay';
       if (canvas !== undefined) {
+        canvasesDiv.className = visible ? 'canvas' : 'nodisplay';
         canvas.visible = visible;
         if (!visible) {
           canvas.clear();