kb-key-sequence: placeholder for dynamic DOM generation/replacement

kb-key-import: placeholder for import predefined DOM

How to use:
<kb-key-sequence keys="qwertyuiop" [superscripts="1234567890"]> will be replaced by
<kb-key superscript="1">q</kb-key>....<kb-key superscript="0">p</kb-key>

<kb-key-import importid="qwertyrow4"></kb-key-import>
will be replaced by imported content referred by importid at runtime. Imported content can be specified this way:
<link id="qwertyrow4" rel="import" src="qwerty_row4.html">

BUG=None
R=bryeung@chromium.org, kevers@chromium.org

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

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

9 files changed, 162 insertions, 42 deletions

diff --git a/ui/keyboard/keyboard_resources.grd b/ui/keyboard/keyboard_resources.grd
index b8a0d40..238cc37 100644
--- a/ui/keyboard/keyboard_resources.grd
+++ b/ui/keyboard/keyboard_resources.grd
@@ -22,6 +22,8 @@
       <include name="IDR_KEYBOARD_ELEMENTS_ACCENT_SET" file="resources/elements/kb-accent-set.html" type="BINDATA" />
       <include name="IDR_KEYBOARD_ELEMENTS_KEY" file="resources/elements/kb-key.html" type="BINDATA" />
       <include name="IDR_KEYBOARD_ELEMENTS_KEY_BASE" file="resources/elements/kb-key-base.html" type="BINDATA" />
+      <include name="IDR_KEYBOARD_ELEMENTS_KEY_IMPORT" file="resources/elements/kb-key-import.html" type="BINDATA" />
+      <include name="IDR_KEYBOARD_ELEMENTS_KEY_SEQUENCE" file="resources/elements/kb-key-sequence.html" type="BINDATA" />
       <include name="IDR_KEYBOARD_ELEMENTS_KEYBOARD" file="resources/elements/kb-keyboard.html" type="BINDATA" />
       <include name="IDR_KEYBOARD_ELEMENTS_KEYSET" file="resources/elements/kb-keyset.html" type="BINDATA" />
       <include name="IDR_KEYBOARD_ELEMENTS_ROW" file="resources/elements/kb-row.html" type="BINDATA" />
@@ -35,6 +37,7 @@
       <include name="IDR_KEYBOARD_MAIN_CSS" file="resources/main.css" type="BINDATA" />
       <include name="IDR_KEYBOARD_POLYMER" file="resources/polymer.min.js" flattenhtml="true" type="BINDATA" />
       <include name="IDR_KEYBOARD_QWERTY" file="resources/layouts/qwerty.html" type="BINDATA" />
+      <include name="IDR_KEYBOARD_SPACEBAR_ROW" file="resources/layouts/spacebar-row.html" type="BINDATA" />
       <include name="IDR_KEYBOARD_VOICE_INPUT_JS" file="resources/voice_input.js" type="BINDATA" />
       <include name="IDR_KEYBOARD_WEBUI_API_ADAPTER_JS" file="resources/webui/api_adapter.js" type="BINDATA" />
       <include name="IDR_KEYBOARD_WEBUI_CONSTANTS_JS" file="resources/webui/constants.js" type="BINDATA" />
diff --git a/ui/keyboard/keyboard_util.cc b/ui/keyboard/keyboard_util.cc
index 0188e8d..7721db6 100644
--- a/ui/keyboard/keyboard_util.cc
+++ b/ui/keyboard/keyboard_util.cc
@@ -77,6 +77,10 @@ const GritResourceMap* GetKeyboardExtensionResources(size_t* size) {
     {"keyboard/elements/kb-accent-set.html", IDR_KEYBOARD_ELEMENTS_ACCENT_SET},
     {"keyboard/elements/kb-key.html", IDR_KEYBOARD_ELEMENTS_KEY},
     {"keyboard/elements/kb-key-base.html", IDR_KEYBOARD_ELEMENTS_KEY_BASE},
+    {"keyboard/elements/kb-key-import.html",
+        IDR_KEYBOARD_ELEMENTS_KEY_IMPORT},
+    {"keyboard/elements/kb-key-sequence.html",
+        IDR_KEYBOARD_ELEMENTS_KEY_SEQUENCE},
     {"keyboard/elements/kb-keyboard.html", IDR_KEYBOARD_ELEMENTS_KEYBOARD},
     {"keyboard/elements/kb-keyset.html", IDR_KEYBOARD_ELEMENTS_KEYSET},
     {"keyboard/elements/kb-row.html", IDR_KEYBOARD_ELEMENTS_ROW},
@@ -86,6 +90,7 @@ const GritResourceMap* GetKeyboardExtensionResources(size_t* size) {
         IDR_KEYBOARD_IMAGES_MICROPHONE_GREEN},
     {"keyboard/index.html", IDR_KEYBOARD_INDEX},
     {"keyboard/layouts/qwerty.html", IDR_KEYBOARD_QWERTY},
+    {"keyboard/layouts/spacebar-row.html", IDR_KEYBOARD_SPACEBAR_ROW},
     {"keyboard/main.js", IDR_KEYBOARD_MAIN_JS},
     {"keyboard/manifest.json", IDR_KEYBOARD_MANIFEST},
     {"keyboard/main.css", IDR_KEYBOARD_MAIN_CSS},
diff --git a/ui/keyboard/resources/elements/kb-key-base.html b/ui/keyboard/resources/elements/kb-key-base.html
index f0ccbe5..c774706 100644
--- a/ui/keyboard/resources/elements/kb-key-base.html
+++ b/ui/keyboard/resources/elements/kb-key-base.html
@@ -33,7 +33,6 @@
               char: this.char || this.textContent,
               accents: this.accents
             };
-            this.classList.remove('active');
             this.send('key-longpress', detail);
           }, null, LONGPRESS_DELAY_MSEC);
         }
diff --git a/ui/keyboard/resources/elements/kb-key-import.html b/ui/keyboard/resources/elements/kb-key-import.html
new file mode 100644
index 0000000..d631b8c
--- /dev/null
+++ b/ui/keyboard/resources/elements/kb-key-import.html
@@ -0,0 +1,34 @@
+<!--
+  -- 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.
+  -->
+
+<element name="kb-key-import" attributes="importId">
+  <template>
+    <style>
+      @host {
+        * {
+          display: none;
+        }
+      }
+    </style>
+  </template>
+  <script>
+    Polymer.register(this, {
+      /**
+      * The id of the document fragment that will be imported.
+       */
+      importId: null,
+
+      /**
+       * Import content from a document fragment.
+       * @param {!DocumentFragment} content Document fragment that contains
+       *     the content to import.
+       */
+      importDoc: function(content) {
+        return content.querySelector('#' + this.importId).content;
+      }
+    });
+  </script>
+</element>
diff --git a/ui/keyboard/resources/elements/kb-key-sequence.html b/ui/keyboard/resources/elements/kb-key-sequence.html
new file mode 100644
index 0000000..7a8d3f1
--- /dev/null
+++ b/ui/keyboard/resources/elements/kb-key-sequence.html
@@ -0,0 +1,46 @@
+<!--
+  -- 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.
+  -->
+
+<element name="kb-key-sequence" attributes="keys superscripts">
+  <template>
+    <style>
+      @host {
+        * {
+          display: none;
+        }
+      }
+    </style>
+  </template>
+  <script>
+    Polymer.register(this, {
+      /**
+       * Generates the DOM structure to replace (expand) this kb-key-sequence.
+       */
+      generateDom: function() {
+        var result;
+        if (this.keys) {
+          var newKeys = this.keys;
+          var newSuperScripts = this.superscripts;
+          if (newSuperScripts && newKeys.length != newSuperScripts.length) {
+            console.error('keys and superscripts do not match');
+            return;
+          }
+          var replacement = document.createDocumentFragment();
+          for (var i = 0; i < newKeys.length; i++) {
+            var key = document.createElement('kb-key');
+            key.innerText = newKeys[i];
+            key.accents = newKeys[i];
+            if (newSuperScripts)
+              key.superscript = newSuperScripts[i];
+            replacement.appendChild(key);
+          }
+          result = replacement;
+        }
+        return result;
+      }
+    });
+  </script>
+</element>
diff --git a/ui/keyboard/resources/elements/kb-keyset.html b/ui/keyboard/resources/elements/kb-keyset.html
index ea93627..20fe352 100644
--- a/ui/keyboard/resources/elements/kb-keyset.html
+++ b/ui/keyboard/resources/elements/kb-keyset.html
@@ -25,9 +25,12 @@
       keyLongpress: function(event, detail) {
         if (detail.accents) {
           var accentContainer = this.$.accentContainer.getDistributedNodes()[0];
-          accentContainer.keyset = detail.accents;
           var activeAccentKeySet = accentContainer.querySelector('#' +
               detail.accents);
+          if (!activeAccentKeySet)
+            return;
+          accentContainer.keyset = detail.accents;
+          event.target.classList.remove('active');
           activeAccentKeySet.style.width = event.target.clientWidth *
               activeAccentKeySet.childElementCount + 'px';
           activeAccentKeySet.style.height = event.target.clientHeight + 'px';
diff --git a/ui/keyboard/resources/layouts/qwerty.html b/ui/keyboard/resources/layouts/qwerty.html
index a0fe590..82c3be8 100644
--- a/ui/keyboard/resources/layouts/qwerty.html
+++ b/ui/keyboard/resources/layouts/qwerty.html
@@ -4,41 +4,32 @@
   -- found in the LICENSE file.
   -->
 
+<link rel="import" href="../elements/kb-key-sequence.html">
+<link rel="import" href="../elements/kb-key-import.html">
+<link id="spacebar-row" rel="import" href="spacebar-row.html">
+
 <template>
   <kb-keyset id="upper" toKeyset="lower">
     <kb-row>
       <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key>
-      <kb-key superscript="1" accents="Q">Q</kb-key>
-      <kb-key superscript="2" accents="W">W</kb-key>
-      <kb-key superscript="3" accents="E">E</kb-key>
-      <kb-key superscript="4" accents="R">R</kb-key>
-      <kb-key superscript="5" accents="T">T</kb-key>
-      <kb-key superscript="6" accents="Y">Y</kb-key>
-      <kb-key superscript="7" accents="U">U</kb-key>
-      <kb-key superscript="8" accents="I">I</kb-key>
-      <kb-key superscript="9" accents="O">O</kb-key>
-      <kb-key superscript="0" accents="P">P</kb-key>
+      <kb-key-sequence keys="QWERTYUIOP" superscripts="1234567890"></kb-key-sequence>
       <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
     </kb-row>
     <kb-row>
       <kb-key class="microphone dark" char="Microphone"></kb-key>
-      <kb-key accents="A">A</kb-key><kb-key accents="S">S</kb-key><kb-key>D</kb-key>
-      <kb-key>F</kb-key><kb-key>G</kb-key><kb-key>H</kb-key><kb-key>J</kb-key>
-      <kb-key>K</kb-key><kb-key>L</kb-key>
+      <kb-key-sequence keys="ASDFGHJKL"></kb-key-sequence>
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
       <kb-key class="left-shift dark" toKeyset="lower" char="Invalid" align="left">shift</kb-key>
-      <kb-key>Z</kb-key><kb-key>X</kb-key><kb-key accents="C">C</kb-key><kb-key>V</kb-key>
-      <kb-key>B</kb-key><kb-key accents="N">N</kb-key><kb-key>M</kb-key>
+      <kb-key-sequence keys="ZXCVBNM"></kb-key-sequence>
       <kb-key invert superscript="!" char="!">,</kb-key>
       <kb-key invert superscript="?" char="?">.</kb-key>
       <kb-key class="right-shift dark" toKeyset="lower" char="Invalid" align="right">shift</kb-key>
     </kb-row>
     <kb-row>
       <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
-      <kb-key class="dotcom dark" align="left">.com</kb-key>
-      <kb-key char=" " class="space dark" toKeyset="upper"></kb-key>
+      <kb-key-import importId="spacebar-row"></kb-key-import>
       <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="right">#123</kb-key>
       <kb-key class="hide dark"></kb-key>
     </kb-row>
@@ -134,36 +125,23 @@
   <kb-keyset id="lower">
     <kb-row>
       <kb-key class="tab dark" char="&#x0009;" align="left">tab</kb-key>
-      <kb-key superscript="1" accents="q">q</kb-key>
-      <kb-key superscript="2" accents="w">w</kb-key>
-      <kb-key superscript="3" accents="e">e</kb-key>
-      <kb-key superscript="4" accents="r">r</kb-key>
-      <kb-key superscript="5" accents="t">t</kb-key>
-      <kb-key superscript="6" accents="y">y</kb-key>
-      <kb-key superscript="7" accents="u">u</kb-key>
-      <kb-key superscript="8" accents="i">i</kb-key>
-      <kb-key superscript="9" accents="o">o</kb-key>
-      <kb-key superscript="0" accents="p">p</kb-key>
+      <kb-key-sequence keys="qwertyuiop" superscripts="1234567890"></kb-key-sequence>
       <kb-key class="backspace dark" char="&#x0008;" repeat align="right">backspace</kb-key>
     </kb-row>
     <kb-row>
       <kb-key class="microphone dark" char="Microphone"></kb-key>
-      <kb-key accents="a">a</kb-key><kb-key accents="s">s</kb-key>
-      <kb-key>d</kb-key><kb-key>f</kb-key><kb-key>g</kb-key><kb-key>h</kb-key>
-      <kb-key>j</kb-key><kb-key>k</kb-key><kb-key>l</kb-key>
+      <kb-key-sequence keys="asdfghjkl"></kb-key-sequence>
       <kb-key class='return dark' char="&#x000A;" align="right">enter</kb-key>
     </kb-row>
     <kb-row>
       <kb-key class="left-shift dark" toKeyset="upper" char="Invalid" align="left">shift</kb-key>
-      <kb-key>z</kb-key><kb-key>x</kb-key><kb-key accents="c">c</kb-key><kb-key>v</kb-key>
-      <kb-key>b</kb-key><kb-key accents="n">n</kb-key><kb-key>m</kb-key>
+      <kb-key-sequence keys="zxcvbnm"></kb-key-sequence>
       <kb-key superscript="!" accents="comma">,</kb-key><kb-key superscript="?" accents="period">.</kb-key>
       <kb-key class="right-shift dark" toKeyset="upper" char="Invalid" align="right">shift</kb-key>
     </kb-row>
     <kb-row>
       <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="left">#123</kb-key>
-      <kb-key class="dotcom dark" align="left">.com</kb-key>
-      <kb-key class="space dark" char=" "></kb-key>
+      <kb-key-import importId="spacebar-row"></kb-key-import>
       <kb-key class="symbol dark" toKeyset="symbol" char="Invalid" align="right">#123</kb-key>
       <kb-key class="hide dark"></kb-key>
     </kb-row>
@@ -290,8 +268,7 @@
     </kb-row>
     <kb-row>
       <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="left">abc</kb-key>
-      <kb-key class="dotcom dark" align="left">.com</kb-key>
-      <kb-key class="space dark" char=" "></kb-key>
+      <kb-key-import importId="spacebar-row"></kb-key-import>
       <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="right">abc</kb-key>
       <kb-key class="hide dark"></kb-key>
     </kb-row>
@@ -411,8 +388,7 @@
     </kb-row>
     <kb-row>
       <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="left">abc</kb-key>
-      <kb-key class="dotcom dark" align="left">.com</kb-key>
-      <kb-key class="space dark" char=" "></kb-key>
+      <kb-key-import importId="spacebar-row"></kb-key-import>
       <kb-key class="symbol dark" toKeyset="lower" char="Invalid" align="right">abc</kb-key>
       <kb-key class="hide dark"></kb-key>
     </kb-row>
diff --git a/ui/keyboard/resources/layouts/spacebar-row.html b/ui/keyboard/resources/layouts/spacebar-row.html
new file mode 100644
index 0000000..15938e3
--- /dev/null
+++ b/ui/keyboard/resources/layouts/spacebar-row.html
@@ -0,0 +1,10 @@
+<!--
+  -- 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.
+  -->
+
+<template>
+  <kb-key class="dotcom dark" align="left">.com</kb-key>
+  <kb-key char=" " class="space dark" toKeyset="upper"></kb-key>
+</template>
diff --git a/ui/keyboard/resources/main.js b/ui/keyboard/resources/main.js
index 6b73a50..61d09b3 100644
--- a/ui/keyboard/resources/main.js
+++ b/ui/keyboard/resources/main.js
@@ -11,9 +11,53 @@ var onResize = function() {
   keyboard.style.fontSize = (height / FONT_SIZE_RATIO / ROW_LENGTH) + 'px';
 };
 
+/**
+ * Recursively replace all kb-key-import elements with imported documents.
+ * @param {!Document} content Document to process.
+ */
+function importHTML(content) {
+  var dom = content.querySelector('template').createInstance();
+  var keyImports = dom.querySelectorAll('kb-key-import');
+  if (keyImports.length != 0) {
+    keyImports.forEach(function(element) {
+      if (element.importDoc(content)) {
+        var generatedDom = importHTML(element.importDoc(content));
+        element.parentNode.replaceChild(generatedDom, element);
+      }
+    });
+  }
+  return dom;
+};
+
+/**
+ * Replace all kb-key-sequence elements with generated kb-key elements.
+ * @param {!DocumentFragment} importedContent The imported dom structure.
+ */
+function expandHTML(importedContent) {
+  var keySequences = importedContent.querySelectorAll('kb-key-sequence');
+  if (keySequences.length != 0) {
+    keySequences.forEach(function(element) {
+      var generatedDom = element.generateDom();
+      element.parentNode.replaceChild(generatedDom, element);
+    });
+  }
+};
+
+/**
+  * Flatten the keysets which represents a keyboard layout. It has two steps:
+  * 1) Replace all kb-key-import elements with imported document that associated
+  *   with linkid.
+  * 2) Replace all kb-key-sequence elements with generated DOM structures.
+  * @param {!Document} content Document to process.
+  */
+function flattenKeysets(content) {
+  var importedContent = importHTML(content);
+  expandHTML(importedContent);
+  return importedContent;
+};
+
 addEventListener('WebComponentsReady', function() {
-  keyboard.appendChild(
-      keysets.content.body.firstElementChild.createInstance());
+  keyboard.appendChild(flattenKeysets(keysets.content));
 });
 
 addEventListener('resize', onResize);