Add a virtual keyboard webui at chrome://keyboard/

This is just the old virtual keyboard that was removed a couple of years
ago, being used as a temporary stand-in.

BUG=222801

Review URL: https://codereview.chromium.org/13652010

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

chrome/browser/extensions/component_loader.cc

@@ -26,6 +26,7 @@
 #include "content/public/browser/notification_source.h"
 #include "extensions/common/id_util.h"
 #include "grit/browser_resources.h"
+#include "grit/keyboard_resources.h"
 #include "ui/base/resource/resource_bundle.h"
 
 #if defined(OFFICIAL_BUILD)
@@ -333,6 +334,12 @@ void ComponentLoader::AddChromeApp() {
 #endif
 }
 
+void ComponentLoader::AddKeyboardApp() {
+#if defined(USE_ASH)
+  Add(IDR_KEYBOARD_MANIFEST, base::FilePath(FILE_PATH_LITERAL("keyboard")));
+#endif
+}
+
 // static
 void ComponentLoader::EnableBackgroundExtensionsForTesting() {
   enable_background_extensions_during_testing = true;
@@ -387,6 +394,10 @@ void ComponentLoader::AddDefaultComponentExtensions(
     AddChromeApp();
   }
 
+#if defined(USE_AURA)
+  AddKeyboardApp();
+#endif
+
   AddDefaultComponentExtensionsWithBackgroundPages(skip_session_components);
 }
 

chrome/browser/extensions/component_loader.h

@@ -127,6 +127,7 @@ class ComponentLoader {
   void AddOrReloadEnterpriseWebStore();
 
   void AddChromeApp();
+  void AddKeyboardApp();
 
   // Unloads |component| from the memory.
   void UnloadComponent(ComponentExtensionInfo* component);

chrome/browser/extensions/image_loader.cc

@@ -16,6 +16,7 @@
 #include "content/public/browser/browser_thread.h"
 #include "grit/chrome_unscaled_resources.h"
 #include "grit/component_extension_resources_map.h"
+#include "grit/keyboard_resources.h"
 #include "grit/theme_resources.h"
 #include "skia/ext/image_operations.h"
 #include "ui/base/resource/resource_bundle.h"
@@ -169,6 +170,21 @@ bool ImageLoader::IsComponentExtensionResource(
     {"settings_app/settings_app_icon_16.png", IDR_SETTINGS_APP_ICON_16},
     {"settings_app/settings_app_icon_32.png", IDR_SETTINGS_APP_ICON_32},
     {"settings_app/settings_app_icon_48.png", IDR_SETTINGS_APP_ICON_48},
+#endif
+#if defined(USE_AURA)
+    {"keyboard/index.html", IDR_KEYBOARD_INDEX},
+    {"keyboard/main.css", IDR_KEYBOARD_MAIN_CSS},
+    {"keyboard/main.js", IDR_KEYBOARD_MAIN_JS},
+    {"keyboard/common.js", IDR_KEYBOARD_COMMON_JS},
+    {"keyboard/layout_us.js", IDR_KEYBOARD_LAYOUT_US_JS},
+    {"keyboard/images/chevron.svg", IDR_KEYBOARD_IMAGES_CHEVRON},
+    {"keyboard/images/del.svg", IDR_KEYBOARD_IMAGES_DEL},
+    {"keyboard/images/keyboard.svg", IDR_KEYBOARD_IMAGES_KEYBOARD},
+    {"keyboard/images/mic.svg", IDR_KEYBOARD_IMAGES_MIC},
+    {"keyboard/images/ret.svg", IDR_KEYBOARD_IMAGES_RET},
+    {"keyboard/images/shift_down.svg", IDR_KEYBOARD_IMAGES_SHIFT_DOWN},
+    {"keyboard/images/shift.svg", IDR_KEYBOARD_IMAGES_SHIFT},
+    {"keyboard/images/tab.svg", IDR_KEYBOARD_IMAGES_TAB},
 #endif
   };
   static const size_t kExtraComponentExtensionResourcesSize =

chrome/browser/ui/webui/chrome_web_ui_controller_factory.cc

@@ -98,6 +98,8 @@
 
 #if defined(USE_AURA)
 #include "chrome/browser/ui/webui/gesture_config_ui.h"
+#include "ui/keyboard/keyboard_constants.h"
+#include "ui/keyboard/keyboard_ui_controller.h"
 #endif
 
 #if !defined(OS_CHROMEOS) && !defined(OS_ANDROID)
@@ -357,6 +359,8 @@ WebUIFactoryFunction GetWebUIFactoryFunction(WebUI* web_ui,
 #if defined(USE_AURA)
   if (url.host() == chrome::kChromeUIGestureConfigHost)
     return &NewWebUI<GestureConfigUI>;
+  if (url.host() == keyboard::kKeyboardWebUIHost)
+    return &NewWebUI<keyboard::KeyboardUIController>;
 #endif
 
 #if !defined(OS_CHROMEOS) && !defined(OS_ANDROID)

chrome/chrome_browser_extensions.gypi

@@ -40,6 +40,7 @@
         '../third_party/libusb/libusb.gyp:libusb',
         '../third_party/re2/re2.gyp:re2',
         '../ui/base/strings/ui_strings.gyp:ui_strings',
+        '../ui/keyboard/keyboard.gyp:keyboard_resources',
         '../ui/ui.gyp:ui',
         '../ui/ui.gyp:ui_resources',
         '../webkit/support/webkit_support.gyp:glue',

chrome/chrome_browser_ui.gypi

@@ -2498,6 +2498,8 @@
             # aura uses some of ash resources.
             '../ash/ash.gyp:ash_resources',
             '../ui/aura/aura.gyp:aura',
+            '../ui/keyboard/keyboard.gyp:keyboard',
+            '../ui/keyboard/keyboard.gyp:keyboard_resources',
           ],
           'conditions': [
             ['OS=="win"', {

chrome/chrome_repack_resources.gypi

@@ -15,6 +15,7 @@
       ['OS != "ios" and OS != "android"', {
         # New paks should be added here by default.
         'pak_inputs': [
+          '<(SHARED_INTERMEDIATE_DIR)/ui/keyboard/keyboard_resources.pak',
           '<(SHARED_INTERMEDIATE_DIR)/webkit/devtools_resources.pak',
           '<(grit_out_dir)/component_extension_resources.pak',
           '<(grit_out_dir)/options_resources.pak',

chrome/common/extensions/manifest_url_handler.cc

@@ -22,6 +22,10 @@
 #include "grit/generated_resources.h"
 #include "ui/base/l10n/l10n_util.h"
 
+#if defined(USE_AURA)
+#include "ui/keyboard/keyboard_constants.h"
+#endif
+
 namespace keys = extension_manifest_keys;
 namespace errors = extension_manifest_errors;
 
@@ -276,6 +280,9 @@ bool URLOverridesHandler::Parse(Extension* extension, string16* error) {
                    !(extension->location() == Manifest::COMPONENT &&
                      page == chrome::kChromeUIFileManagerHost));
 #endif
+#if defined(USE_AURA)
+    is_override = (is_override && page != keyboard::kKeyboardWebUIHost);
+#endif
 
     if (is_override || !iter.value().GetAsString(&val)) {
       *error = ASCIIToUTF16(errors::kInvalidChromeURLOverrides);

chrome/common/url_constants.cc

@@ -47,7 +47,6 @@ const char kChromeUIHistoryFrameURL[] = "chrome://history-frame/";
 const char kChromeUIInspectURL[] = "chrome://inspect/";
 const char kChromeUIInstantURL[] = "chrome://instant/";
 const char kChromeUIIPCURL[] = "chrome://ipc/";
-const char kChromeUIKeyboardURL[] = "chrome://keyboard/";
 const char kChromeUIManagedUserPassphrasePageURL[] =
     "chrome://managed-user-passphrase/";
 const char kChromeUIMemoryRedirectURL[] = "chrome://memory-redirect/";
@@ -167,7 +166,6 @@ const char kChromeUIHistoryFrameHost[] = "history-frame";
 const char kChromeUIInspectHost[] = "inspect";
 const char kChromeUIInstantHost[] = "instant";
 const char kChromeUIIPCHost[] = "ipc";
-const char kChromeUIKeyboardHost[] = "keyboard";
 const char kChromeUIKillHost[] = "kill";
 const char kChromeUIManagedUserPassphrasePageHost[] = "managed-user-passphrase";
 const char kChromeUIMemoryHost[] = "memory";

chrome/common/url_constants.h

@@ -46,7 +46,6 @@ extern const char kChromeUIHistoryFrameURL[];
 extern const char kChromeUIInspectURL[];
 extern const char kChromeUIInstantURL[];
 extern const char kChromeUIIPCURL[];
-extern const char kChromeUIKeyboardURL[];
 extern const char kChromeUIManagedUserPassphrasePageURL[];
 extern const char kChromeUIMemoryRedirectURL[];
 extern const char kChromeUIMemoryURL[];
@@ -160,7 +159,6 @@ extern const char kChromeUIHistoryFrameHost[];
 extern const char kChromeUIInspectHost[];
 extern const char kChromeUIInstantHost[];
 extern const char kChromeUIIPCHost[];
-extern const char kChromeUIKeyboardHost[];
 extern const char kChromeUIKillHost[];
 extern const char kChromeUIManagedUserPassphrasePageHost[];
 extern const char kChromeUIMemoryHost[];

tools/gritsettings/resource_ids

@@ -205,10 +205,11 @@
   "chrome/browser/resources/memory_internals_resources.grd": {
     "includes": [27500],
   },
-
   "device/device_bluetooth_strings.grd": {
     "messages": [28000],
   },
-
+  "ui/keyboard/keyboard_resources.grd": {
+    "includes": [28050],
+  },
   # Resource ids starting at 31000 are reserved for projects built on Chromium.
 }

ui/keyboard/DEPS

+include_rules = [
+  "+content/public",
+  "+grit/keyboard_resources.h",
+]

ui/keyboard/keyboard.gyp

@@ -7,36 +7,60 @@
     'chromium_code': 1,
   },
   'targets': [
+    {
+      'target_name': 'keyboard_resources',
+      'type': 'none',
+      'variables': {
+        'grit_out_dir': '<(SHARED_INTERMEDIATE_DIR)/ui/keyboard',
+      },
+      'actions': [
+        {
+          'action_name': 'keyboard_resources',
+          'variables': {
+            'grit_grd_file': 'keyboard_resources.grd',
+          },
+          'includes': [ '../../build/grit_action.gypi' ],
+        },
+      ],
+      'includes': [ '../../build/grit_target.gypi' ],
+    },
     {
       'target_name': 'keyboard',
       'type': '<(component)',
       'dependencies': [
         '../../base/base.gyp:base',
+        '../../content/content.gyp:content_browser',
         '../../skia/skia.gyp:skia',
         '../aura/aura.gyp:aura',
         '../compositor/compositor.gyp:compositor',
         '../ui.gyp:ui',
+        'keyboard_resources',
       ],
       'defines': [
         'KEYBOARD_IMPLEMENTATION',
       ],
       'sources': [
+        'keyboard_constants.cc',
+        'keyboard_constants.h',
         'keyboard_controller.cc',
         'keyboard_controller.h',
         'keyboard_controller_proxy.h',
         'keyboard_export.h',
         'keyboard_switches.cc',
         'keyboard_switches.h',
+        'keyboard_ui_controller.cc',
+        'keyboard_ui_controller.h',
         'keyboard_util.cc',
         'keyboard_util.h',
       ]
     },
     {
       'target_name': 'keyboard_unittests',
-      'type': 'executable',
+      'type': '<(gtest_target_type)',
       'dependencies': [
         '../../base/base.gyp:base',
         '../../base/base.gyp:test_support_base',
+        '../../content/content.gyp:content_browser',
         '../../skia/skia.gyp:skia',
         '../../testing/gtest.gyp:gtest',
         '../aura/aura.gyp:aura',
@@ -51,6 +75,17 @@
         'keyboard_controller_unittest.cc',
         'keyboard_test_suite.cc',
       ],
+      'conditions': [
+        [ 'os_posix == 1 and OS != "mac" and OS != "android" and OS != "ios"', {
+          'conditions': [
+            ['linux_use_tcmalloc==1', {
+              'dependencies': [
+                '../../base/allocator/allocator.gyp:allocator',
+              ],
+            }],
+          ],
+        }],
+      ],
     },
   ],
 }

ui/keyboard/keyboard_constants.cc

+// Copyright (c) 2013 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.
+
+#include "ui/keyboard/keyboard_constants.h"
+
+namespace keyboard {
+
+const char kKeyboardWebUIURL[] = "chrome://keyboard";
+const char kKeyboardWebUIHost[] = "keyboard";
+
+}  // namespace keyboard

ui/keyboard/keyboard_constants.h

+// Copyright (c) 2013 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.
+
+#ifndef UI_KEYBOARD_KEYBOARD_CONSTANTS_H_
+#define UI_KEYBOARD_KEYBOARD_CONSTANTS_H_
+
+#include "ui/keyboard/keyboard_export.h"
+
+namespace keyboard {
+
+// The URL of the keyboard WebUI.
+KEYBOARD_EXPORT extern const char kKeyboardWebUIURL[];
+
+// The host of the keyboard WebUI URL.
+KEYBOARD_EXPORT extern const char kKeyboardWebUIHost[];
+
+}  // namespace keyboard
+
+#endif  //  UI_KEYBOARD_KEYBOARD_CONSTANTS_H_

ui/keyboard/keyboard_resources.grd

+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     NOTE: if you are adding resources here, you should probably also edit:
+     chrome/browser/ui/webui/virtual_keyboard_ui.cc  // FIXME: this will move
+     chrome/browser/extensions/image_loader.cc
+-->
+<grit latest_public_release="0" current_release="1">
+  <outputs>
+    <output filename="grit/keyboard_resources.h" type="rc_header">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="keyboard_resources.pak" type="data_package" />
+    <output filename="keyboard_resources.rc" type="rc_all" />
+  </outputs>
+  <release seq="1">
+    <includes>
+      <include name="IDR_KEYBOARD_MANIFEST" file="resources/manifest.json" type="BINDATA" />
+      <include name="IDR_KEYBOARD_INDEX" file="resources/index.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
+      <include name="IDR_KEYBOARD_MAIN_CSS" file="resources/main.css" type="BINDATA" />
+      <include name="IDR_KEYBOARD_MAIN_JS" file="resources/main.js" type="BINDATA" />
+      <include name="IDR_KEYBOARD_COMMON_JS" file="resources/common.js" type="BINDATA" />
+      <include name="IDR_KEYBOARD_LAYOUT_US_JS" file="resources/layout_us.js" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_CHEVRON" file="resources/images/chevron.svg" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_DEL" file="resources/images/del.svg" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_KEYBOARD" file="resources/images/keyboard.svg" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_MIC" file="resources/images/mic.svg" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_RET" file="resources/images/ret.svg" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_SHIFT_DOWN" file="resources/images/shift-down.svg" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_SHIFT" file="resources/images/shift.svg" type="BINDATA" />
+      <include name="IDR_KEYBOARD_IMAGES_TAB" file="resources/images/tab.svg" type="BINDATA" />
+    </includes>
+  </release>
+</grit>

ui/keyboard/keyboard_ui_controller.cc

+// Copyright (c) 2013 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.
+
+#include "ui/keyboard/keyboard_ui_controller.h"
+
+#include "content/public/browser/browser_context.h"
+#include "content/public/browser/web_contents.h"
+#include "content/public/browser/web_ui.h"
+#include "content/public/browser/web_ui_data_source.h"
+#include "grit/keyboard_resources.h"
+#include "ui/keyboard/keyboard_constants.h"
+
+namespace {
+
+content::WebUIDataSource* CreateKeyboardUIDataSource() {
+  content::WebUIDataSource* source =
+      content::WebUIDataSource::Create(keyboard::kKeyboardWebUIHost);
+
+  source->SetDefaultResource(IDR_KEYBOARD_INDEX);
+
+  source->AddResourcePath("main.css", IDR_KEYBOARD_MAIN_CSS);
+
+  source->AddResourcePath("main.js", IDR_KEYBOARD_MAIN_JS);
+  source->AddResourcePath("common.js", IDR_KEYBOARD_COMMON_JS);
+  source->AddResourcePath("layout_us.js", IDR_KEYBOARD_LAYOUT_US_JS);
+  source->AddResourcePath("images/chevron.svg", IDR_KEYBOARD_IMAGES_CHEVRON);
+  source->AddResourcePath("images/del.svg", IDR_KEYBOARD_IMAGES_DEL);
+  source->AddResourcePath("images/keyboard.svg", IDR_KEYBOARD_IMAGES_KEYBOARD);
+  source->AddResourcePath("images/mic.svg", IDR_KEYBOARD_IMAGES_MIC);
+  source->AddResourcePath("images/ret.svg", IDR_KEYBOARD_IMAGES_RET);
+  source->AddResourcePath("images/shift_down.svg",
+      IDR_KEYBOARD_IMAGES_SHIFT_DOWN);
+  source->AddResourcePath("images/shift.svg", IDR_KEYBOARD_IMAGES_SHIFT);
+  source->AddResourcePath("images/tab.svg", IDR_KEYBOARD_IMAGES_TAB);
+
+  return source;
+}
+
+}  // namespace
+
+namespace keyboard {
+
+KeyboardUIController::KeyboardUIController(content::WebUI* web_ui)
+    : WebUIController(web_ui) {
+  content::BrowserContext* browser_context =
+      web_ui->GetWebContents()->GetBrowserContext();
+  content::WebUIDataSource::Add(
+      browser_context,
+      CreateKeyboardUIDataSource());
+}
+
+KeyboardUIController::~KeyboardUIController() {}
+
+}  // namespace keyboard

ui/keyboard/keyboard_ui_controller.h

+// Copyright (c) 2013 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.
+
+#ifndef UI_KEYBOARD_KEYBOARD_UI_CONTROLLER_H_
+#define UI_KEYBOARD_KEYBOARD_UI_CONTROLLER_H_
+
+#include "content/public/browser/web_ui_controller.h"
+#include "ui/keyboard/keyboard_export.h"
+
+namespace content {
+class WebUI;
+};
+
+namespace keyboard {
+
+// WebUIController for chrome://keyboard/.
+class KEYBOARD_EXPORT KeyboardUIController : public content::WebUIController {
+ public:
+  explicit KeyboardUIController(content::WebUI* web_ui);
+  virtual ~KeyboardUIController();
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(KeyboardUIController);
+};
+
+}  // namespace keyboard
+
+#endif  // UI_KEYBOARD_KEYBOARD_UI_CONTROLLER_H_

ui/keyboard/resources/images/chevron.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="-0.042 -8.542 50 50" xml:space="preserve">
+<g>
+	<path fill="#bababb" d="M24.958,12.318l11.482-6.646v3.801l-11.482,7.904L13.479,9.473V5.672L24.958,12.318z M24.958,22.06l11.482-6.57v3.726
+		l-11.482,8.031l-11.479-8.031v-3.701L24.958,22.06z"/>
+</g>
+</svg>

ui/keyboard/resources/images/del.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="5 5 40 40" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#bababb" d="M20.8,28.75c-0.043,0-0.087-0.012-0.126-0.034l-6-3.5C14.598,25.17,14.55,25.088,14.55,25
+			s0.047-0.171,0.124-0.216l6-3.5c0.039-0.023,0.083-0.034,0.126-0.034c0.043,0,0.086,0.011,0.125,0.033
+			c0.078,0.044,0.125,0.127,0.125,0.217v7c0,0.09-0.048,0.172-0.125,0.217C20.886,28.739,20.843,28.75,20.8,28.75L20.8,28.75z"/>
+		<path fill="#bababb" d="M20.8,21.5v7l-6-3.5L20.8,21.5 M20.8,21c-0.087,0-0.174,0.022-0.252,0.068l-6,3.5
+			C14.395,24.657,14.3,24.822,14.3,25s0.094,0.342,0.248,0.432l6,3.5C20.626,28.977,20.713,29,20.8,29
+			c0.086,0,0.172-0.022,0.249-0.066c0.155-0.089,0.251-0.255,0.251-0.434v-7c0-0.179-0.096-0.344-0.251-0.434
+			C20.972,21.021,20.886,21,20.8,21L20.8,21z"/>
+	</g>
+	<polygon fill="#bababb" points="33.934,23.5 18.3,23.5 18.3,26.5 35.2,26.5 	"/>
+</g>
+</svg>

ui/keyboard/resources/images/keyboard.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#bababb" fill-rule="evenodd" clip-rule="evenodd" d="M41,12H9c-2.209,0-4,1.791-4,4v18c0,2.209,1.791,4,4,4h32c2.209,0,4-1.791,4-4
+			V16C45,13.791,43.209,12,41,12z M33,18c0-0.552,0.447-1,1-1h2c0.552,0,1,0.448,1,1v2c0,0.552-0.448,1-1,1h-2c-0.553,0-1-0.448-1-1
+			V18z M33,24c0-0.553,0.447-1,1-1h2c0.552,0,1,0.447,1,1v2c0,0.553-0.448,1-1,1h-2c-0.553,0-1-0.447-1-1V24z M28,18
+			c0-0.552,0.447-1,1-1h2c0.553,0,1,0.448,1,1v2c0,0.552-0.447,1-1,1h-2c-0.553,0-1-0.448-1-1V18z M28,24c0-0.553,0.447-1,1-1h2
+			c0.553,0,1,0.447,1,1v2c0,0.553-0.447,1-1,1h-2c-0.553,0-1-0.447-1-1V24z M23,18c0-0.552,0.447-1,1-1h2c0.553,0,1,0.448,1,1v2
+			c0,0.552-0.447,1-1,1h-2c-0.553,0-1-0.448-1-1V18z M23,24c0-0.553,0.447-1,1-1h2c0.553,0,1,0.447,1,1v2c0,0.553-0.447,1-1,1h-2
+			c-0.553,0-1-0.447-1-1V24z M18,18c0-0.552,0.447-1,1-1h2c0.553,0,1,0.448,1,1v2c0,0.552-0.447,1-1,1h-2c-0.553,0-1-0.448-1-1V18z
+			 M18,24c0-0.553,0.447-1,1-1h2c0.553,0,1,0.447,1,1v2c0,0.553-0.447,1-1,1h-2c-0.553,0-1-0.447-1-1V24z M13,18
+			c0-0.552,0.447-1,1-1h2c0.553,0,1,0.448,1,1v2c0,0.552-0.447,1-1,1h-2c-0.553,0-1-0.448-1-1V18z M8,18c0-0.552,0.447-1,1-1h2
+			c0.552,0,1,0.448,1,1v2c0,0.552-0.448,1-1,1H9c-0.553,0-1-0.448-1-1V18z M8,24c0-0.553,0.447-1,1-1h2c0.552,0,1,0.447,1,1v2
+			c0,0.553-0.448,1-1,1H9c-0.553,0-1-0.447-1-1V24z M14,32c0,0.553-0.447,1-1,1H9c-0.553,0-1-0.447-1-1v-2c0-0.553,0.447-1,1-1h4
+			c0.553,0,1,0.447,1,1V32z M13,26v-2c0-0.553,0.447-1,1-1h2c0.553,0,1,0.447,1,1v2c0,0.553-0.447,1-1,1h-2
+			C13.447,27,13,26.553,13,26z M35,32c0,0.553-0.447,1-1,1H16c-0.553,0-1-0.447-1-1v-2c0-0.553,0.447-1,1-1h18c0.553,0,1,0.447,1,1
+			V32z M42,32c0,0.553-0.447,1-1,1h-4c-0.553,0-1-0.447-1-1v-2c0-0.553,0.447-1,1-1h4c0.553,0,1,0.447,1,1V32z M42,26
+			c0,0.553-0.447,1-1,1h-2c-0.553,0-1-0.447-1-1v-2c0-0.553,0.447-1,1-1h2c0.553,0,1,0.447,1,1V26z M42,20c0,0.552-0.447,1-1,1h-2
+			c-0.553,0-1-0.448-1-1v-2c0-0.552,0.447-1,1-1h2c0.553,0,1,0.448,1,1V20z"/>
+	</g>
+</g>
+</svg>

ui/keyboard/resources/images/mic.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
+<g>
+	<line fill="#bababb" stroke="#bababb" stroke-width="10" stroke-linecap="round" x1="25" y1="24.5" x2="25" y2="15.5"/>
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="-295" y="-214.5" width="640" height="480"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  overflow="visible"/>
+		</clipPath>
+		<path clip-path="url(#SVGID_2_)" fill="none" stroke="#bababb" stroke-width="3" stroke-linecap="round" d="M34,24.5
+			c0,4.971-4.029,9-9,9c-4.971,0-9-4.029-9-9"/>
+		
+			<line clip-path="url(#SVGID_2_)" fill="#bababb" stroke="#bababb" stroke-width="3" stroke-linecap="round" x1="25" y1="33.5" x2="25" y2="39.5"/>
+		
+			<line clip-path="url(#SVGID_2_)" fill="#bababb" stroke="#bababb" stroke-width="3" stroke-linecap="round" x1="29" y1="39.5" x2="21" y2="39.5"/>
+	</g>
+</g>
+</svg>

ui/keyboard/resources/images/ret.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#bababb" d="M22.75,31.432c-0.043,0-0.087-0.012-0.126-0.034l-6-3.5c-0.077-0.045-0.124-0.127-0.124-0.216
+			s0.047-0.171,0.124-0.216l6-3.5c0.039-0.023,0.083-0.034,0.126-0.034c0.043,0,0.086,0.011,0.125,0.033
+			C22.952,24.01,23,24.093,23,24.182v7c0,0.09-0.048,0.172-0.125,0.217C22.835,31.421,22.792,31.432,22.75,31.432L22.75,31.432z"/>
+		<path fill="#bababb" d="M22.75,24.182v7l-6-3.5L22.75,24.182 M22.75,23.682c-0.087,0-0.174,0.022-0.252,0.068l-6,3.5
+			c-0.154,0.089-0.248,0.254-0.248,0.432s0.094,0.342,0.248,0.432l6,3.5c0.078,0.046,0.165,0.068,0.252,0.068
+			c0.086,0,0.172-0.022,0.249-0.066c0.155-0.089,0.251-0.255,0.251-0.434v-7c0-0.179-0.096-0.344-0.251-0.434
+			C22.921,23.704,22.835,23.682,22.75,23.682L22.75,23.682z"/>
+	</g>
+	<path fill="#bababb" d="M30.25,20.083v6.1h-10v3h11.5c0.828,0,1.5-0.672,1.5-1.5v-8.865L30.25,20.083z"/>
+</g>
+</svg>

ui/keyboard/resources/images/shift-down.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="10 10 30 30">
+<!-- TODO(fsamuel): remove the width and height workaround above after fixing SVG bug -->
+<g>
+	<path fill="#e0e0e0" d="M23,29.25c-0.138,0-0.25-0.112-0.25-0.25v-2.75H20c-0.101,0-0.192-0.061-0.231-0.154
+		s-0.017-0.201,0.054-0.272l5-5c0.049-0.049,0.113-0.073,0.177-0.073s0.128,0.024,0.177,0.073l5,5
+		c0.071,0.071,0.093,0.179,0.055,0.272c-0.039,0.093-0.13,0.154-0.231,0.154h-2.75V29c0,0.138-0.112,0.25-0.25,0.25H23z"/>
+	<path fill="#e0e0e0" d="M25,21l5,5h-3v3h-4v-3h-3L25,21 M25,20.5c-0.128,0-0.256,0.049-0.354,0.146l-5,5
+		c-0.143,0.143-0.186,0.358-0.108,0.545C19.615,26.377,19.797,26.5,20,26.5h2.5V29c0,0.276,0.224,0.5,0.5,0.5h4
+		c0.276,0,0.5-0.224,0.5-0.5v-2.5H30c0.202,0,0.385-0.122,0.462-0.309c0.077-0.187,0.034-0.402-0.108-0.545l-5-5
+		C25.255,20.548,25.127,20.5,25,20.5L25,20.5z"/>
+</g>
+</svg>

ui/keyboard/resources/images/shift.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="10 10 30 30">
+<!-- TODO(fsamuel): remove the width and height workaround above after fixing SVG bug -->
+<g>
+	<path fill="#bababb" d="M23,29.25c-0.138,0-0.25-0.112-0.25-0.25v-2.75H20c-0.101,0-0.192-0.061-0.231-0.154
+		s-0.017-0.201,0.054-0.272l5-5c0.049-0.049,0.113-0.073,0.177-0.073s0.128,0.024,0.177,0.073l5,5
+		c0.071,0.071,0.093,0.179,0.055,0.272c-0.039,0.093-0.13,0.154-0.231,0.154h-2.75V29c0,0.138-0.112,0.25-0.25,0.25H23z"/>
+	<path fill="#bababb" d="M25,21l5,5h-3v3h-4v-3h-3L25,21 M25,20.5c-0.128,0-0.256,0.049-0.354,0.146l-5,5
+		c-0.143,0.143-0.186,0.358-0.108,0.545C19.615,26.377,19.797,26.5,20,26.5h2.5V29c0,0.276,0.224,0.5,0.5,0.5h4
+		c0.276,0,0.5-0.224,0.5-0.5v-2.5H30c0.202,0,0.385-0.122,0.462-0.309c0.077-0.187,0.034-0.402-0.108-0.545l-5-5
+		C25.255,20.548,25.127,20.5,25,20.5L25,20.5z"/>
+</g>
+</svg>

ui/keyboard/resources/images/tab.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="5 5 40 40" enable-background="new" xml:space="preserve">
+<g>
+	<line fill="none" stroke="#bababb" stroke-width="1.7" stroke-linecap="round" x1="36.377" y1="20.5" x2="36.377" y2="29.5"/>
+	<g>
+		<path fill="#bababb" d="M27.377,28.75c-0.043,0-0.086-0.011-0.125-0.033c-0.077-0.045-0.125-0.127-0.125-0.217v-7
+			c0-0.089,0.048-0.172,0.125-0.217c0.039-0.022,0.082-0.033,0.125-0.033c0.044,0,0.087,0.011,0.126,0.034l6,3.5
+			c0.077,0.045,0.124,0.127,0.124,0.216s-0.047,0.171-0.124,0.216l-6,3.5C27.464,28.738,27.421,28.75,27.377,28.75L27.377,28.75z"/>
+	</g>
+	<polygon fill="#bababb" points="14.888,23.5 13.623,26.5 29.877,26.5 29.877,23.5 	"/>
+</g>
+</svg>

ui/keyboard/resources/index.html

+<!DOCTYPE HTML>
+<html>
+  <head>
+    <link rel="stylesheet" href="main.css">
+    <script src="common.js"></script>
+    <script src="layout_us.js"></script>
+    <script src="main.js"></script>
+  </head>
+  <body id="b"></body>
+</html>

ui/keyboard/resources/layout_us.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.
+ */
+
+/**
+ * All keys for the rows of the keyboard.
+ * NOTE: every row below should have an aspect of 12.6.
+ * @type {Array.<Array.<BaseKey>>}
+ */
+var KEYS_US = [
+  [
+    new Key(C('\`'), C('~')),
+    new Key(C('1'), C('!')),
+    new Key(C('2'), C('@')),
+    new Key(C('3'), C('#')),
+    new Key(C('4'), C('$')),
+    new Key(C('5'), C('%')),
+    new Key(C('6'), C('^')),
+    new Key(C('7'), C('&')),
+    new Key(C('8'), C('*')),
+    new Key(C('9'), C('(')),
+    new Key(C('0'), C(')')),
+    new Key(C('-'), C('_')),
+    new Key(C('='), C('+')),
+    new SvgKey('backspace', 'Backspace', true /* repeat */)
+  ],
+  [
+    new SvgKey('tab', 'Tab'),
+    new Key(C('q'), C('Q')),
+    new Key(C('w'), C('W')),
+    new Key(C('e'), C('E')),
+    new Key(C('r'), C('R')),
+    new Key(C('t'), C('T')),
+    new Key(C('y'), C('Y')),
+    new Key(C('u'), C('U')),
+    new Key(C('i'), C('I')),
+    new Key(C('o'), C('O')),
+    new Key(C('p'), C('P')),
+    new Key(C('['), C('{')),
+    new Key(C(']'), C('}')),
+    new Key(C('\\'), C('|'), 'bar'),
+  ],
+  [
+    new SymbolKey(),
+    new Key(C('a'), C('A')),
+    new Key(C('s'), C('S')),
+    new Key(C('d'), C('D')),
+    new Key(C('f'), C('F')),
+    new Key(C('g'), C('G')),
+    new Key(C('h'), C('H')),
+    new Key(C('j'), C('J')),
+    new Key(C('k'), C('K')),
+    new Key(C('l'), C('L')),
+    new Key(C(';'), C(':')),
+    new Key(C('\''), C('"')),
+    new SvgKey('return', 'Enter')
+  ],
+  [
+    new ShiftKey('left-shift'),
+    new Key(C('z'), C('Z')),
+    new Key(C('x'), C('X')),
+    new Key(C('c'), C('C')),
+    new Key(C('v'), C('V')),
+    new Key(C('b'), C('B')),
+    new Key(C('n'), C('N')),
+    new Key(C('m'), C('M')),
+    new Key(C(','), C('<')),
+    new Key(C('.'), C('>')),
+    new Key(C('/'), C('?')),
+    new ShiftKey('right-shift')
+  ],
+  [
+    new DotComKey(),
+    new SpecialKey('at', '@', '@'),
+    new SpecialKey('space', ' ', 'Spacebar'),
+    new SpecialKey('comma', ',', ','),
+    new SpecialKey('period', '.', '.')
+  ]
+];
+
+// Add layout to KEYBOARDS, which is defined in common.js
+KEYBOARDS['us'] = {
+  'definition': KEYS_US,
+  'aspect': 3.15,
+};

ui/keyboard/resources/main.css

+/*
+ Copyright (c) 2013 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.
+*/
+
+body {
+  -webkit-user-select: none;
+  color: white;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+div.main {
+  -webkit-box-orient: vertical;
+  background: -webkit-linear-gradient(#bababa, #868686) no-repeat;
+  display: -webkit-box;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: -10px;
+}
+
+div.keyboard {
+  -webkit-box-flex: 1;
+  display: -webkit-box;
+  margin: 0 auto;
+  text-align: center;
+}
+
+div.rows {
+  -webkit-box-flex: 1;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  margin-bottom: 5px;
+  text-align: center;
+}
+
+div.row {
+  -webkit-box-flex: 1;
+  display: -webkit-box;
+  margin-right: 5px;
+  margin-top: 5px;
+}
+
+div.row > div {
+  -webkit-box-flex: 1;
+  display: -webkit-box;
+}
+
+.panel {
+  border: 0;
+  clear: both;
+  margin-left: 5px;
+  text-align: left;
+}
+
+.backspace > div {
+  background-image: url('images/del.svg');
+}
+
+.tab > div {
+  background-image: url('images/tab.svg');
+}
+
+.return > div {
+  background-image: url('images/ret.svg');
+}
+
+.mic > div {
+  background-image: url('images/mic.svg');
+}
+
+.button {
+  background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98));
+}
+.button:active {
+  background: -webkit-linear-gradient(rgb(80, 86, 98), rgb(90, 97, 111));
+}
+
+.auxiliary:active {
+  background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98));
+}
+
+.key {
+  -webkit-box-flex: 1;
+  background: -webkit-linear-gradient(#fff, #cacaca);
+  border: 1px solid transparent;
+  border-radius: 6px;
+  /* Reserving equivalent space to .key:active so
+     keys don't shift when selected. */
+  /* Do not use box shadow until performance improves
+   * http://code.google.com/p/chromium/issues/detail?id=99045
+  box-shadow: 0px 1px 1px #000;
+  */
+  color: #535353;
+  display: -webkit-box;
+  font-family: sans-serif;
+  font-weight: 100;
+  margin-left: 5px;
+  position: relative;
+}
+
+.key > div {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.key:active {
+  background: -webkit-linear-gradient(#d6d6d6, #acacac);
+  border: 1px solid rgba(125,125,125,0.5);
+  /* Do not use box shadow until performance improves
+   * http://code.google.com/p/chromium/issues/detail?id=99045
+  box-shadow: 0px 0px 15px #fff;
+  */
+}
+
+div.moddown {
+  background: -webkit-linear-gradient(#d6d6d6, #acacac);
+  border-color: rgb(48, 74, 155);
+}
+
+.image-key {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+}
+
+.text-key {
+  height: 1.2em;
+}
+
+
+.shift > div.image-key {
+  background-image: url('images/shift.svg');
+}
+
+.moddown.shift > div.image-key {
+  background-image: url('images/shift-down.svg');
+}
+
+.hide > div {
+  background-image: url('images/keyboard.svg');
+}
+
+.at,
+.tab,
+.com,
+.comma,
+.hide,
+.mic,
+.period {
+  -webkit-box-flex: 1.3;
+}
+
+.symbol {
+  -webkit-box-flex: 1.4;
+}
+
+.return {
+  -webkit-box-flex: 1.5;
+}
+
+.backspace {
+  -webkit-box-flex: 1.6;
+}
+
+.left-shift {
+  -webkit-box-flex: 1.8;
+}
+
+.right-shift {
+  -webkit-box-flex: 2.0;
+}
+
+.space {
+  -webkit-box-flex: 4.8;
+}
+
+.bar {
+  -webkit-box-flex: 0.6;
+}
+
+.nodisplay {
+  display: none;
+}

ui/keyboard/resources/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 ratio of the row height to the font size.
+ * @type {number}
+ */
+/** @const */ var kFontSizeRatio = 3.5;
+
+/**
+ * Alias for document.getElementById.
+ * @param {string} id The ID of the element to find.
+ * @return {HTMLElement} The found element or null if not found.
+ */
+function $(id) {
+  return document.getElementById(id);
+}
+
+/**
+ * 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.
+ */
+function getKeyboardId(layout) {
+  return 'keyboard_' + layout;
+}
+
+/**
+ * Return the aspect ratio of the current keyboard.
+ * @return {number} The aspect ratio of the current keyboard.
+ */
+function getKeyboardAspect() {
+  return KEYBOARDS[currentKeyboardLayout]['aspect'];
+}
+
+/**
+ * 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;
+  return (x > getKeyboardAspect() * y) ?
+      y : Math.floor(x / getKeyboardAspect());
+}
+
+/**
+ * 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} 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.
+ */
+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) {
+    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 keyboard for the given keyboard layout.
+ * Do nothing if the DOM is already created.
+ * @param {string} layout The keyboard layout for which keyboard is created.
+ * @param {Element} element The DOM Element to which keyboard is appended.
+ */
+function initKeyboard(layout, element) {
+  var keyboard = KEYBOARDS[layout];
+  if (!keyboard || keyboard['keyboardDiv']) {
+    return;
+  }
+  var keyboardDiv = document.createElement('div');
+  keyboardDiv.id = getKeyboardId(layout);
+  keyboardDiv.className = 'keyboard';
+  initRows(layout, keyboardDiv);
+  keyboard['keyboardDiv'] = keyboardDiv;
+  window.onresize();
+  element.appendChild(keyboardDiv);
+}
+
+/**
+ * Resize the keyboard according to the new window size.
+ */
+window.onresize = function() {
+  var keyboardDiv = KEYBOARDS[currentKeyboardLayout]['keyboardDiv'];
+  var height = getKeyboardHeight();
+  keyboardDiv.style.height = height + 'px';
+  var mainDiv = $('main');
+  mainDiv.style.width = Math.floor(getKeyboardAspect() * height) + 'px';
+  var rowsLength = KEYBOARDS[currentKeyboardLayout]['rows'].length;
+  keyboardDiv.style.fontSize = (height / kFontSizeRatio / rowsLength) + 'px';
+};
+
+/**
+ * Init the keyboard.
+ */
+var mainDiv = null;
+
+/**
+ * Initialize keyboard.
+ */
+window.onload = function() {
+  var body = $('b');
+
+  // Catch all unhandled touch events and prevent default, to prevent the
+  // keyboard from responding to gestures like double tap.
+  function disableGestures(evt) {
+    evt.preventDefault();
+  }
+  body.addEventListener('touchstart', disableGestures);
+  body.addEventListener('touchmove', disableGestures);
+  body.addEventListener('touchend', disableGestures);
+
+  mainDiv = document.createElement('div');
+  mainDiv.className = 'main';
+  mainDiv.id = 'main';
+  body.appendChild(mainDiv);
+
+  initKeyboard(currentKeyboardLayout, mainDiv);
+
+  window.onhashchange();
+};
+
+/**
+ * Switch the keyboard layout based on the current URL hash.
+ */
+window.onhashchange = function() {
+  var oldLayout = currentKeyboardLayout;
+  var newLayout = location.hash.replace(/^#/, '');
+  if (oldLayout == newLayout) {
+    return;
+  }
+
+  if (KEYBOARDS[newLayout] === undefined) {
+    // Unsupported layout.
+    newLayout = 'us';
+  }
+  currentKeyboardLayout = newLayout;
+
+  var mainDiv = $('main');
+  initKeyboard(currentKeyboardLayout, mainDiv);
+
+  [newLayout, oldLayout].forEach(function(layout) {
+      var visible = (layout == newLayout);
+      var keyboardDiv = KEYBOARDS[layout]['keyboardDiv'];
+      keyboardDiv.className = visible ? 'keyboard' : 'nodisplay';
+      var canvas = KEYBOARDS[layout]['canvas'];
+      if (canvas !== undefined) {
+        if (!visible) {
+          canvas.clear();
+        }
+      }
+      if (visible) {
+        window.onresize();
+      }
+    });
+};

ui/keyboard/resources/manifest.json

+{
+   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCtEsRXms+bpXbcmBFljmWOKVkVPteGqY376YUY6CRcUNsYft98M41KO+oPURWfbauCErLyJb4Y1xcb4ZrRnwGoNSvLaTY/ij4bdUn8eNPtqviLLrHZCEBaNwHYFNPCOEQqvtmjZ+J0NGCgUbx2bUouD+BDDG30GeMfu7ArzB5RLQIDAQAB",
+  "name": "Virtual Keyboard",
+  "version": "0.0.1",
+  "manifest_version": 2,
+  "description": "Virtual Keyboard",
+  "incognito" : "split",
+  "chrome_url_overrides": {
+    "keyboard": "index.html"
+  },
+  "permissions": [
+    "experimental"
+  ]
+}