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

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

 <!--
   -- Copyright 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.
   -->
 
 <polymer-element name="kb-keyboard" on-key-over="{{keyOver}}"
     on-key-up="{{keyUp}}" on-key-down="{{keyDown}}"
     on-key-longpress="{{keyLongpress}}" on-pointerup="{{up}}"
     on-pointerdown="{{down}}" on-pointerout="{{out}}"
     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">
   <template>
     <style>
       @host {
         * {
           position: relative;
         }
       }
     </style>
     <!-- The ID for a keyset follows the naming convention of combining the
       -- layout name with a base keyset name. This convention is used to
       -- allow multiple layouts to be loaded (enablign fast switching) while
       -- 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>
   <script>
     /**
      * The repeat delay in milliseconds before a key starts repeating. Use the
      * same rate as Chromebook.
      * (See chrome/browser/chromeos/language_preferences.cc)
      * @const
      * @type {number}
@@ skipping 290 matching lines @@
         }
         var toKeyset = detail.toKeyset;
         if (toKeyset) {
           this.keyset = toKeyset;
           this.activeKeyset.nextKeyset = detail.nextKeyset;
           return true;
         }
         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);
       },
 
       /**
        * Registers a callback for state change events. Lazy initializes a
        * mutation observer used to detect when the keyset selection is changed.
        * @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;
           var observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(m) {
               if (m.type == 'attributes' && m.attributeName == 'select') {
                 var value = m.target.getAttribute('select');
                 self.fire('stateChange', {
                   state: 'keysetChanged',
                   value: value
                 });
               }
             });
           });
 
           observer.observe(target, {
             attributes: true,
             childList: true,
             subtree: true
           });
           this.keysetChangedObserver = observer;
-
         }
+        */
         this.addEventListener('stateChange', callback);
       },
 
       /**
        * Called when the type of focused input box changes. If a keyboard layout
        * is defined for the current input type, that layout will be loaded.
        * Otherwise, the keyboard layout for 'text' type will be loaded.
        */
       inputTypeChanged: function() {
         // TODO(bshe): Toggle visibility of some keys in a keyboard layout
@@ skipping 411 matching lines @@
        * @param {{layout: string}} details Details of the event, which contains
        *     the name of the layout to activate.
        */
       setLayout: function(event, details) {
         this.layout = details.layout;
       },
 
       /**
        * 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'});
 
           // Keyset selection fails if the keysets have not been loaded yet.
           var keysets = document.querySelector('#' + this.layout);
           if (keysets && keysets.content) {
             var content = flattenKeysets(keysets.content);
             this.appendChild(content);
             this.selectDefaultKeyset();
           } else {
             // Add link for the keysets if missing from the document. Force
             // a layout change after resolving the import of the link.
             var query = 'link[id=' + this.layout + ']';
             if (!document.querySelector(query)) {
               // Layout has not beeen loaded yet.
               var link = document.createElement('link');
               link.id = this.layout;
               link.setAttribute('rel', 'import');
               link.setAttribute('href', 'layouts/' + this.layout + '.html');
               document.head.appendChild(link);
 
               // Load content for the new link element.
               var self = this;
               HTMLImports.importer.load(document, function() {
                 HTMLImports.parser.parseLink(link);
                 self.layoutChanged();
               });
             }
           }
+        // New keyset has already been loaded, can show immediately.
+        // TODO(rsadam): Remove once content select supports touch on children.
+        } else {
+          this.activeKeyset.show();
         }
       },
 
       /**
        * Notifies the modifier keys that a non-control key was typed. This
        * lets them reset sticky behaviour. A non-control key is defined as
        * any key that is not Control, Alt, or Shift.
        */
       onNonControlKeyTyped: function() {
         if (this.shift)
@@ skipping 44 matching lines @@
 
       /**
        * The keyboard is ready for input once the target keyset appears
        * in the distributed nodes for the keyboard.
        * @return {boolean} Indicates if the keyboard is ready for input.
        */
       isReady: function() {
         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;
       },
 
       /**
        * Generates fabricated key events to simulate typing on a
        * physical keyboard.
        * @param {Object} detail Attributes of the key being typed.
        * @return {boolean} Whether the key type succeeded.
        */
       keyTyped: function(detail) {
         var builder = this.$.keyCodeMetadata;
@@ skipping 58 matching lines @@
              }
           }
         }
         if (keysetsLoaded)
           console.error('No default keyset found for ' + this.layout);
         return false;
       }
     });
   </script>
 </polymer-element>