Work around for content select not supporting touch events on it's children.

ui/keyboard/resources/elements/kb-keyboard.html

Index: ui/keyboard/resources/elements/kb-keyboard.html
diff --git a/ui/keyboard/resources/elements/kb-keyboard.html b/ui/keyboard/resources/elements/kb-keyboard.html
index d47ca6d9ebe97e7388686a85e0ac549e215e6f8b..e02f0a7cc148a68918807d6998118768385c738f 100644
--- a/ui/keyboard/resources/elements/kb-keyboard.html
+++ b/ui/keyboard/resources/elements/kb-keyboard.html
@@ -26,7 +26,7 @@
       -- allowing the shift and spacebar keys to be common across multiple
       -- keyboard layouts.
       -->
-    <content id="content" select="#{{layout}}-{{keyset}}"></content>
+    <content id="content"></content>
     <kb-keyboard-overlay id="overlay" hidden></kb-keyboard-overlay>
     <kb-key-codes id="keyCodeMetadata"></kb-key-codes>
   </template>
@@ -337,6 +337,20 @@
         return false;
       },
 
+      keysetChanged: function(old) {
+        // TODO(rsadam): Remove once content select support touch events on
+        // children.

[kevers, 2014/01/15 23:33:07]

Don't think it's necessary to revert to old method once supported.

[rsadam, 2014/01/17 15:43:53]

Done.

+        if (old) {
+          var keyset = this.querySelector("#" + this.layout + "-" + old);
+          if (keyset)
+            keyset.hide();
+        }
+        var keyset = this.activeKeyset;
+        // Show the keyset if it has been initialized.
+        if (keyset)
+          keyset.show();
+      },
+
       ready: function() {
         this.voiceInput_ = new VoiceInput(this);
         this.swipeHandler = this.move.bind(this);
@@ -348,6 +362,9 @@
        * @param{!Function} callback Callback function to register.
        */
       addKeysetChangedObserver: function(callback) {
+        // TODO(rsadam): Uncomment this when we switch back to keysets being
+        // displayed by content-select.

[kevers, 2014/01/15 23:33:07]

Nuke it.  Content select offers no real advantage over "display: none" for our
use case.

[rsadam, 2014/01/17 15:43:53]

Done.

+        /*
         if (!this.keysetChangedObserver) {
           var target = this.$.content;
           var self = this;
@@ -369,8 +386,8 @@
             subtree: true
           });
           this.keysetChangedObserver = observer;
-
         }
+        */
         this.addEventListener('stateChange', callback);
       },
 
@@ -802,8 +819,14 @@
       /**
        * Handles a change in the keyboard layout. Auto-selects the default
        * keyset for the new layout.
+       * @param {string | null} oldLayout The previous layout.

[kevers, 2014/01/15 23:33:07]

?string

[rsadam, 2014/01/17 15:43:53]

No longer needed

        */
-      layoutChanged: function() {
+      layoutChanged: function(oldLayout) {
+        if (oldLayout){
+          var keyset = this.querySelector("#" + oldLayout + "-" + this.keyset);
+          if(keyset)
+            keyset.classList.remove("activeKeyset");

[kevers, 2014/01/15 23:33:07]

keyset.hide() or alternatively why not leave the old keyset visible until the
new one is ready to display in order to avoid a flicker.  keyset.show() can take
care of hiding the previous keyset since only one keyset can be visible at a
time.

[rsadam, 2014/01/17 15:43:53]

Done.

+        }
         if (!this.selectDefaultKeyset()) {
           this.fire('stateChange', {state: 'loadingKeyset'});
 
@@ -833,6 +856,10 @@
               });
             }
           }
+        // New keyset has already been loaded, can show immediately.
+        // TODO(rsadam): Remove once content select supports touch on children.
+        } else {
+          this.activeKeyset.show();
         }
       },
 
@@ -897,8 +924,12 @@
         var keyset =  this.activeKeyset;
         if (!keyset)
           return false;
-        var content = this.$.content.getDistributedNodes()[0];
-        return content == keyset;
+        var nodes = this.$.content.getDistributedNodes();

[kevers, 2014/01/15 23:33:07]

If we simply append children to the keyboard, I don't think there is any need to
use distributed nodes.

[rsadam, 2014/01/17 15:43:53]

As we discussed offline, Polymer replaces appendChild, meaning it gets added
into the shadow dom.

+        for (var i = 0; i < nodes.length; i++) {
+          if (nodes[i].id && nodes[i].id == keyset.id)
+            return true;
+        }
+        return false;
       },
 
       /**