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

BUG=327528

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

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

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

@@ -152,7 +152,7 @@
        */
       weightChanged: function() {
         if (this.weight > 0)
-          this.style['webkitBoxFlex'] = this.weight;
+          this.style.webkitBoxFlex = this.weight;
       },
     });
   </script>

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,40 +337,23 @@
         return false;
       },
 
+      keysetChanged: function() {
+        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.
+       * Registers a callback for state change events.
        * @param{!Function} callback Callback function to register.
        */
       addKeysetChangedObserver: function(callback) {
-        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);
       },
 
@@ -833,6 +816,9 @@
               });
             }
           }
+        // New keyset has already been loaded, can show immediately.
+        } else {
+          this.activeKeyset.show();
         }
       },
 
@@ -897,8 +883,12 @@
         var keyset =  this.activeKeyset;
         if (!keyset)
           return false;
-        var content = this.$.content.getDistributedNodes()[0];
-        return content == keyset;
+        var nodes = this.$.content.getDistributedNodes();
+        for (var i = 0; i < nodes.length; i++) {
+          if (nodes[i].id && nodes[i].id == keyset.id)
+            return true;
+        }
+        return false;
       },
 
       /**

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

@@ -13,6 +13,9 @@
         -webkit-box-orient: vertical;
         display: -webkit-box;
       }
+      :host:not(.activeKeyset) {
+        display: none;
+      }
     </style>
     <content select="kb-row"></content>
     <content select="kb-altkey-container" id="altkeyContainer"
@@ -77,6 +80,26 @@
         var nodes = activeAltKeySet.childNodes;
         nodes[activeAltKeySet.offset].classList.add('active');
         altkeyContainer.hidden = false;
+      },
+
+      show: function() {
+        var old = $('keyboard').querySelector('.activeKeyset');
+        if (old && old != this)
+          old.classList.remove('activeKeyset');
+        this.classList.add('activeKeyset');
+        this.fire('stateChange', {
+          state: 'keysetChanged',
+          value: this.id
+        });
+      },
+
+      enteredView: function() {
+        if (this.isDefault) {
+          var self = this;
+          Platform.endOfMicrotask(function() {
+            self.show();
+          });
+        }
       }
     });
   </script>

ui/keyboard/resources/main.js

@@ -53,6 +53,15 @@ function expandHTML(importedContent) {
 function flattenKeysets(content) {
   var importedContent = importHTML(content);
   expandHTML(importedContent);
+  var rows = importedContent.querySelectorAll('kb-row');
+  for (var i = 0 ; i < rows.length; i++) {
+    var allKeys = rows[i].children;
+    for (var j = 0; j< allKeys.length; j++) {
+      var weight = allKeys[j].getAttribute('weight');
+      if (weight)
+        allKeys[j].style.webkitBoxFlex = weight;
+    }
+  }
   return importedContent;
 }