Implement sounds for the vk.

BUG=339320

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

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

13 files changed, 131 insertions, 23 deletions

diff --git a/ui/keyboard/keyboard_resources.grd b/ui/keyboard/keyboard_resources.grd
index e10031b3..e2ec663 100644
--- a/ui/keyboard/keyboard_resources.grd
+++ b/ui/keyboard/keyboard_resources.grd
@@ -70,6 +70,10 @@
       <include name="IDR_KEYBOARD_MAIN_CSS" file="resources/main.css" type="BINDATA" />
       <include name="IDR_KEYBOARD_POLYMER_LOADER" file="resources/polymer_loader.js" flattenhtml="true" type="BINDATA" />
       <include name="IDR_KEYBOARD_ROBOTO_BOLD_TTF" file="resources/roboto_bold.ttf" type="BINDATA" />
+      <include name="IDR_KEYBOARD_SOUNDS_KEYPRESS_DELETE" file="resources/sounds/keypress-delete.wav" type="BINDATA" />
+      <include name="IDR_KEYBOARD_SOUNDS_KEYPRESS_RETURN" file="resources/sounds/keypress-return.wav" type="BINDATA" />
+      <include name="IDR_KEYBOARD_SOUNDS_KEYPRESS_SPACEBAR" file="resources/sounds/keypress-spacebar.wav" type="BINDATA" />
+      <include name="IDR_KEYBOARD_SOUNDS_KEYPRESS_STANDARD" file="resources/sounds/keypress-standard.wav" type="BINDATA" />
       <include name="IDR_KEYBOARD_SPACEBAR_ROW" file="resources/layouts/spacebar-row.html" type="BINDATA" />
       <include name="IDR_KEYBOARD_TOUCH_FUZZING_JS" file="resources/touch_fuzzing.js" type="BINDATA" />
       <include name="IDR_KEYBOARD_VOICE_INPUT_JS" file="resources/voice_input.js" type="BINDATA" />
diff --git a/ui/keyboard/keyboard_ui_controller.cc b/ui/keyboard/keyboard_ui_controller.cc
index 3dc295c..f67c4a4 100644
--- a/ui/keyboard/keyboard_ui_controller.cc
+++ b/ui/keyboard/keyboard_ui_controller.cc
@@ -97,6 +97,14 @@ content::WebUIDataSource* CreateKeyboardUIDataSource() {
   source->AddResourcePath("main.js", IDR_KEYBOARD_MAIN_JS);
   source->AddResourcePath("polymer_loader.js", IDR_KEYBOARD_POLYMER_LOADER);
   source->AddResourcePath("roboto_bold.ttf", IDR_KEYBOARD_ROBOTO_BOLD_TTF);
+  source->AddResourcePath("sounds/keypress-delete.wav",
+                          IDR_KEYBOARD_SOUNDS_KEYPRESS_DELETE);
+  source->AddResourcePath("sounds/keypress-return.wav",
+                          IDR_KEYBOARD_SOUNDS_KEYPRESS_RETURN);
+  source->AddResourcePath("sounds/keypress-spacebar.wav",
+                          IDR_KEYBOARD_SOUNDS_KEYPRESS_SPACEBAR);
+  source->AddResourcePath("sounds/keypress-standard.wav",
+                          IDR_KEYBOARD_SOUNDS_KEYPRESS_STANDARD);
   source->AddResourcePath("touch_fuzzing.js", IDR_KEYBOARD_TOUCH_FUZZING_JS);
   source->AddResourcePath("voice_input.js", IDR_KEYBOARD_VOICE_INPUT_JS);
 
diff --git a/ui/keyboard/keyboard_util.cc b/ui/keyboard/keyboard_util.cc
index 0085c0a..16da1a2 100644
--- a/ui/keyboard/keyboard_util.cc
+++ b/ui/keyboard/keyboard_util.cc
@@ -279,6 +279,14 @@ const GritResourceMap* GetKeyboardExtensionResources(size_t* size) {
     {"keyboard/main.css", IDR_KEYBOARD_MAIN_CSS},
     {"keyboard/polymer_loader.js", IDR_KEYBOARD_POLYMER_LOADER},
     {"keyboard/roboto_bold.ttf", IDR_KEYBOARD_ROBOTO_BOLD_TTF},
+    {"keyboard/sounds/keypress-delete.wav",
+        IDR_KEYBOARD_SOUNDS_KEYPRESS_DELETE},
+    {"keyboard/sounds/keypress-return.wav",
+        IDR_KEYBOARD_SOUNDS_KEYPRESS_RETURN},
+    {"keyboard/sounds/keypress-spacebar.wav",
+        IDR_KEYBOARD_SOUNDS_KEYPRESS_SPACEBAR},
+    {"keyboard/sounds/keypress-standard.wav",
+        IDR_KEYBOARD_SOUNDS_KEYPRESS_STANDARD},
     {"keyboard/touch_fuzzing.js", IDR_KEYBOARD_TOUCH_FUZZING_JS},
     {"keyboard/voice_input.js", IDR_KEYBOARD_VOICE_INPUT_JS},
   };
diff --git a/ui/keyboard/resources/constants.js b/ui/keyboard/resources/constants.js
index 8f9d00e..d944d8e 100644
--- a/ui/keyboard/resources/constants.js
+++ b/ui/keyboard/resources/constants.js
@@ -22,7 +22,17 @@ var FONT_SIZE_RATIO = 2.5;
 var LayoutAlignment = {
   CENTER: "center",
   STRETCH: "stretch",
-}
+};
+
+/**
+ * The enumerations of key sounds.
+ * @const
+ * @type {enum}
+ */
+var Sound = {
+  NONE: "none",
+  DEFAULT: "keypress-standard",
+};
 
 /**
  * The enumeration of swipe directions.
@@ -56,3 +66,9 @@ var DEFAULT_KEY_WEIGHT_Y = 70;
 // number before the key is rendered.
 var KEY_PADDING_TOP = 1;
 var KEY_PADDING_BOTTOM = 1;
+
+/**
+ * The default volume for keyboard sounds.
+ * @type {number}
+ */
+var DEFAULT_VOLUME = 0.3;
diff --git a/ui/keyboard/resources/elements/kb-key.html b/ui/keyboard/resources/elements/kb-key.html
index b0743e7..159f0df 100644
--- a/ui/keyboard/resources/elements/kb-key.html
+++ b/ui/keyboard/resources/elements/kb-key.html
@@ -5,7 +5,7 @@
   -->
 
 <polymer-element name="kb-key" extends="kb-key-base"
-    attributes="image keyCode keyName shiftModifier stretch weight">
+    attributes="image keyCode keyName shiftModifier sound stretch weight">
   <template>
     <style>
       :host {
@@ -115,6 +115,12 @@
       shiftModifier: false,
 
       /**
+       * The sound to play when this key is pressed.
+       * @type {Sound}
+       */
+      sound: Sound.DEFAULT,
+
+      /**
        * Whether the key can be stretched to accomodate pixel rounding errors.
        */
       stretch: false,
@@ -149,6 +155,7 @@
         details.keyCode = this.keyCode;
         details.keyName = this.keyName;
         details.shiftModifier = this.shiftModifier;
+        details.sound = this.sound;
         return details;
       },
     });
diff --git a/ui/keyboard/resources/elements/kb-keyboard.html b/ui/keyboard/resources/elements/kb-keyboard.html
index 8398673..1ea4bcf 100644
--- a/ui/keyboard/resources/elements/kb-keyboard.html
+++ b/ui/keyboard/resources/elements/kb-keyboard.html
@@ -11,7 +11,7 @@
     on-enable-sel="{{enableSel}}" on-enable-dbl="{{enableDbl}}"
     on-key-out="{{keyOut}}" on-show-options="{{showOptions}}"
     on-set-layout="{{setLayout}}" on-type-key="{{type}}"
-    attributes="keyset layout inputType inputTypeToLayoutMap">
+    attributes="inputType inputTypeToLayoutMap keyset layout volume">
   <template>
     <style>
       :host {
@@ -307,9 +307,12 @@
       inputType: null,
       lastPressedKey: null,
       shift: null,
+      sounds: {},
       stale: true,
       swipeHandler: null,
       voiceInput_: null,
+      //TODO(rsadam@): Add a control to let users change this.
+      volume: DEFAULT_VOLUME,
 
       /**
        * The default input type to keyboard layout map. The key must be one of
@@ -323,6 +326,23 @@
       },
 
       /**
+       * Caches the specified sound on the keyboard.
+       * @param {string} soundId The name of the .wav file in the "sounds"
+           directory.
+       */
+      addSound: function(soundId) {
+        // Check if already loaded.
+        if (soundId == Sound.NONE || this.sounds[soundId])
+          return;
+        var audio = document.createElement('audio');
+        audio.preload = "auto";
+        audio.id = soundId;
+        audio.src = "../sounds/" + soundId + ".wav";
+        audio.volume = this.volume;
+        this.sounds[soundId] = audio;
+      },
+
+      /**
        * Changes the current keyset.
        * @param {Object} detail The detail of the event that called this
        *     function.
@@ -481,6 +501,7 @@
         this.lastPressedKey = event.target;
         this.lastPressedKey.classList.add('active');
         repeatKey.cancel();
+        this.playSound(detail.sound);
 
         var char = detail.char;
         switch(char) {
@@ -761,6 +782,20 @@
       },
 
       /**
+       * Plays the specified sound.
+       * @param {Sound} sound The id of the audio tag.
+       */
+      playSound: function(sound) {
+        if (!sound || sound == Sound.NONE)
+          return;
+        var soundElement = this.sounds[sound];
+        if (!soundElement)
+          console.error("Cannot find audio tag: " + sound);
+        else
+          soundElement.play();
+      },
+
+      /**
        * Whether we should transit to upper case when seeing a space after
        * punctuation.
        * @return {boolean}
@@ -863,6 +898,16 @@
       },
 
       /**
+       * Callback function for when volume is changed.
+       */
+      volumeChanged: function() {
+        var toChange = keys(this.sounds);
+        for (var i = 0; i < toChange.length; i++) {
+          this.sounds[toChange[i]].volume = this.volume;
+        }
+      },
+
+      /**
        * Id for the active keyset.
        * @type {string}
        */
diff --git a/ui/keyboard/resources/layouts/qwerty.html b/ui/keyboard/resources/layouts/qwerty.html
index 5a7cc69..7ac76bd 100644
--- a/ui/keyboard/resources/layouts/qwerty.html
+++ b/ui/keyboard/resources/layouts/qwerty.html
@@ -10,12 +10,12 @@
       <kb-key-sequence keys="QWERTYUIOP" hintTexts="1234567890">
       </kb-key-sequence>
       <kb-key class="dark" char="&#x0008;" image="backspace"
-          repeat stretch weight="110"></kb-key>
+          repeat sound="keypress-delete" stretch weight="110"></kb-key>
     </kb-row>
     <kb-row align="right">
       <kb-key-sequence keys="ASDFGHJKL"></kb-key-sequence>
       <kb-key class="dark" char="&#x000A;" align="right"
-          image="return" weight="175"></kb-key>
+          image="return" sound="keypress-return" weight="175"></kb-key>
     </kb-row>
     <kb-row>
       <kb-shift-key weight="105" align="left"></kb-shift-key>
@@ -27,7 +27,8 @@
           align="center" weight="105">?123</kb-key>
       <kb-key class="dark">_</kb-key>
       <kb-key class="dark" stretch>/</kb-key>
-      <kb-key char=" " class="space" weight="540"></kb-key>
+      <kb-key char=" " class="space" sound="keypress-spacebar" weight="540">
+      </kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="dark">.</kb-key>
       <kb-hide-keyboard-key stretch weight="105">hide</kb-hide-keyboard-key>
@@ -41,12 +42,12 @@
       <kb-key-sequence keys="qwertyuiop" hintTexts="1234567890">
       </kb-key-sequence>
       <kb-key class="dark" char="&#x0008;" repeat stretch align="right"
-          image="backspace" weight="110"></kb-key>
+          image="backspace" sound="keypress-delete" weight="110"></kb-key>
     </kb-row>
     <kb-row align="right">
       <kb-key-sequence keys="asdfghjkl"></kb-key-sequence>
       <kb-key class="dark" char="&#x000A;" align="right"
-          image="return" weight="175"></kb-key>
+          image="return" sound="keypress-return" weight="175"></kb-key>
     </kb-row>
     <kb-row>
       <kb-shift-key weight="105" align="left"></kb-shift-key>
@@ -58,7 +59,8 @@
           align="center" weight="105">?123</kb-key>
       <kb-key class="dark">_</kb-key>
       <kb-key class="dark" stretch>/</kb-key>
-      <kb-key char=" " class="space" weight="540"></kb-key>
+      <kb-key char=" " class="space" sound="keypress-spacebar" weight="540">
+      </kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="dark">.</kb-key>
       <kb-hide-keyboard-key stretch weight="105">hide</kb-hide-keyboard-key>
@@ -70,13 +72,13 @@
   <kb-keyset id="qwerty-symbol" align="stretch">
     <kb-row>
       <kb-key-sequence keys="1234567890"></kb-key-sequence>
-      <kb-key class="dark" char="&#x0008;" repeat align="right"
-          stretch image="backspace" weight="110"></kb-key>
+      <kb-key class="dark" char="&#x0008;" align="right" image="backspace"
+          repeat sound="keypress-delete" stretch weight="110"></kb-key>
     </kb-row>
     <kb-row align="right">
       <kb-key-sequence keys="@#$%&-+()"></kb-key-sequence>
       <kb-key class="dark" char="&#x000A;" align="right"
-          image="return" weight="175"></kb-key>
+          image="return" sound="keypress-return" weight="175"></kb-key>
     </kb-row>
     <kb-row>
       <kb-key class="dark" toKeyset="down:more" char="Invalid" align="center"
@@ -89,7 +91,8 @@
       <kb-abc-key align="center" weight="105">ABC</kb-abc-key>
       <kb-key class="dark">_</kb-key>
       <kb-key class="dark" stretch>/</kb-key>
-      <kb-key char=" " class="space" weight="540"></kb-key>
+      <kb-key char=" " class="space" sound="keypress-spacebar" weight="540">
+      </kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="dark">.</kb-key>
       <kb-hide-keyboard-key stretch weight="105">hide</kb-hide-keyboard-key>
@@ -103,15 +106,15 @@
       <kb-key-sequence
           keys="~`|&#x2022;&radic;&Pi;&divide;&times;&para;&Delta;">
       </kb-key-sequence>
-      <kb-key class="dark" char="&#x0008;" repeat stretch align="right"
-          image="backspace" weight="110"></kb-key>
+      <kb-key class="dark" align="right" char="&#x0008;" image="backspace"
+          repeat sound="keypress-delete" stretch weight="110"></kb-key>
     </kb-row>
     <kb-row align="right">
       <kb-key-sequence
           keys="&pound;&#x00A2;&#x20AC;&yen;^&deg;={}">
       </kb-key-sequence>
       <kb-key class="dark" char="&#x000A;" align="right"
-          image="return" weight="175"></kb-key>
+          image="return" sound="keypress-return" weight="175"></kb-key>
     </kb-row>
     <kb-row>
       <kb-key class="dark" toKeyset="down:symbol" char="Invalid"
@@ -126,7 +129,8 @@
       <kb-abc-key align="center" weight="105">ABC</kb-abc-key>
       <kb-key class="dark">&lt;</kb-key>
       <kb-key class="dark" stretch>&gt;</kb-key>
-      <kb-key char=" " class="space" weight="540"></kb-key>
+      <kb-key char=" " class="space" sound="keypress-spacebar" weight="540">
+      </kb-key>
       <kb-key class="dark">,</kb-key>
       <kb-key class="dark">.</kb-key>
       <kb-hide-keyboard-key stretch weight="105">hide</kb-hide-keyboard-key>
diff --git a/ui/keyboard/resources/layouts/system-qwerty.html b/ui/keyboard/resources/layouts/system-qwerty.html
index 0d74419..cc1b33a 100644
--- a/ui/keyboard/resources/layouts/system-qwerty.html
+++ b/ui/keyboard/resources/layouts/system-qwerty.html
@@ -12,7 +12,8 @@
       <kb-key-sequence invert=true keys="'1234567890-="
           hintTexts="~!@#$%^&*()_+"> </kb-key-sequence>
       <kb-key class="dark" char="&#x0008;" repeat align="right"
-          image="backspace" stretch weight="190"></kb-key>
+          image="backspace" sound="keypress-delete" stretch weight="190">
+      </kb-key>
     </kb-row>
     <kb-row align="left">
       <kb-key class="dark" char="&#x0009;" align="center"
@@ -28,7 +29,7 @@
       <kb-key-sequence invert=true keys=";&apos;" hintTexts=':"'>
       </kb-key-sequence>
       <kb-key class="dark" char="&#x000A;" align="right"
-          image="return" stretch weight="170"></kb-key>
+          image="return" sound="keypress-return" stretch weight="170"></kb-key>
     </kb-row>
     <kb-row>
       <kb-shift-key weight="265" align="left"></kb-shift-key>
@@ -42,7 +43,8 @@
           align="left">ctrl</kb-modifier-key>
       <kb-modifier-key class="dark" stretch weight="150" char="Alt"
           align="left">alt</kb-modifier-key>
-      <kb-key char=" " class="space" weight="760"></kb-key>
+      <kb-key char=" " class="space" sound="keypress-spacebar" weight="760">
+      </kb-key>
       <kb-key class="cursor dark" repeat char="Arrow-Left" image="left"
           weight="75"> </kb-key>
       <kb-key class="cursor dark" repeat char="Arrow-Up" image="up"
@@ -62,7 +64,8 @@
       <kb-key-sequence keys="'1234567890-=" hintTexts="~!@#$%^&*()_+">
       </kb-key-sequence>
       <kb-key class="dark" weight="190" char="&#x0008;"
-          image="backspace" repeat stretch align="right"></kb-key>
+          image="backspace" repeat sound="keypress-delete" stretch
+          align="right"></kb-key>
     </kb-row>
     <kb-row align="left">
       <kb-key class="dark" char="&#x0009;" align="center"
@@ -76,7 +79,7 @@
       <kb-key-sequence keys="asdfghjkl"></kb-key-sequence>
       <kb-key-sequence keys=";&apos;" hintTexts=':"'></kb-key-sequence>
       <kb-key class="dark" char="&#x000A;" align="right"
-          image="return" stretch weight="170"></kb-key>
+          image="return" sound="keypress-return" stretch weight="170"></kb-key>
     </kb-row>
     <kb-row>
       <kb-shift-key weight="265" align="left"></kb-shift-key>
@@ -89,7 +92,8 @@
           align="left">ctrl</kb-modifier-key>
       <kb-modifier-key class="symbol dark" stretch weight="150" char="Alt"
           align="left">alt</kb-modifier-key>
-      <kb-key char=" " class="space" weight="760"></kb-key>
+      <kb-key char=" " sound="keypress-spacebar" class="space" weight="760">
+      </kb-key>
       <kb-key class="cursor dark" repeat char="Arrow-Left" image="left"
           weight="75"> </kb-key>
       <kb-key class="cursor dark" repeat char="Arrow-Up" image="up"
diff --git a/ui/keyboard/resources/main.js b/ui/keyboard/resources/main.js
index 6c41b39..33eb8a0 100644
--- a/ui/keyboard/resources/main.js
+++ b/ui/keyboard/resources/main.js
@@ -629,9 +629,21 @@ function expandHTML(importedContent) {
 function flattenKeysets(content) {
   var importedContent = importHTML(content);
   expandHTML(importedContent);
+  resolveAudio(importedContent);
   return importedContent;
 }
 
+function resolveAudio(content) {
+  var keyboard = $('keyboard');
+  keyboard.addSound(Sound.DEFAULT);
+  var nodes = content.querySelectorAll('[sound]').array();
+  // Get id's of all unique sounds.
+  for (var i = 0; i < nodes.length; i++) {
+    var id = nodes[i].getAttribute('sound');
+    keyboard.addSound(id);
+  }
+}
+
 // Prevents all default actions of touch. Keyboard should use its own gesture
 // recognizer.
 addEventListener('touchstart', function(e) { e.preventDefault() });
diff --git a/ui/keyboard/resources/sounds/keypress-delete.wav b/ui/keyboard/resources/sounds/keypress-delete.wav
new file mode 100644
index 0000000..fb8b018
--- /dev/null
+++ b/ui/keyboard/resources/sounds/keypress-delete.wav
diff --git a/ui/keyboard/resources/sounds/keypress-return.wav b/ui/keyboard/resources/sounds/keypress-return.wav
new file mode 100644
index 0000000..491333b
--- /dev/null
+++ b/ui/keyboard/resources/sounds/keypress-return.wav
diff --git a/ui/keyboard/resources/sounds/keypress-spacebar.wav b/ui/keyboard/resources/sounds/keypress-spacebar.wav
new file mode 100644
index 0000000..2d58c6d
--- /dev/null
+++ b/ui/keyboard/resources/sounds/keypress-spacebar.wav
diff --git a/ui/keyboard/resources/sounds/keypress-standard.wav b/ui/keyboard/resources/sounds/keypress-standard.wav
new file mode 100644
index 0000000..aa54b4c
--- /dev/null
+++ b/ui/keyboard/resources/sounds/keypress-standard.wav