Teach i18nTemplate.process() to handle <link rel=import> and <template>

ui/webui/resources/js/i18n_template_no_process.js

Index: ui/webui/resources/js/i18n_template_no_process.js
diff --git a/ui/webui/resources/js/i18n_template_no_process.js b/ui/webui/resources/js/i18n_template_no_process.js
index 44262810b0328671273ec433f4b6a5b0f2c24496..535d5a8661330a66dd24d096674de67b7c56ea50 100644
--- a/ui/webui/resources/js/i18n_template_no_process.js
+++ b/ui/webui/resources/js/i18n_template_no_process.js
@@ -26,6 +26,7 @@
  */
 
 var i18nTemplate = (function() {
+  'use strict';
   /**
    * This provides the handlers for the templating engine. The key is used as
    * the attribute name and the value is the function that gets called for every
@@ -111,32 +112,44 @@ var i18nTemplate = (function() {
   };
 
   var attributeNames = Object.keys(handlers);
-  // Chrome for iOS must use Apple's UIWebView, which (as of April 2015) does
-  // not have native shadow DOM support. If shadow DOM is supported (or
-  // polyfilled), search for i18n attributes using the /deep/ selector;
-  // otherwise, do not attempt to search within the shadow DOM.
-  var selector =
-      (window.document.body && window.document.body.createShadowRoot) ?
-      'html /deep/ [' + attributeNames.join('],[') + ']' :
-      '[' + attributeNames.join('],[') + ']';
+  var selector = '[' + attributeNames.join('],[') + ']';
 
   /**
    * Processes a DOM tree with the {@code dictionary} map.
-   * @param {Document|Element} root The root of the DOM tree to process.
+   * @param {Document|DocumentFragment|Element} root The root of the DOM tree to
+   *     process.
    * @param {LoadTimeData} dictionary The dictionary to draw from.
    */
   function process(root, dictionary) {
-    var elements = root.querySelectorAll(selector);
-    for (var element, i = 0; element = elements[i]; i++) {
-      for (var j = 0; j < attributeNames.length; j++) {
-        var name = attributeNames[j];
-        var attribute = element.getAttribute(name);
+    let importLinks = root.querySelectorAll('link[rel=import]');
+    for (let i = 0; i < importLinks.length; ++i) {
+      let importLink = /** @type {!HTMLLinkElement} */(importLinks[i]);
+      if (!importLink.import) {
+        // Happens when a <link rel=import> is inside a <template>.
+        // TODO(dbeam): should we log an error if we detect that here?
+        continue;
+      }
+      process(importLink.import, dictionary);
+    }
+
+    let templates = root.querySelectorAll('template');
+    for (let i = 0; i < templates.length; ++i) {
+      let template = /** @type {HTMLTemplateElement} */(templates[i]);
+      process(template.content, dictionary);
+    }
+
+    let elements = root.querySelectorAll(selector);
+    for (let element, i = 0; element = elements[i]; i++) {
+      for (let j = 0; j < attributeNames.length; j++) {
+        let name = attributeNames[j];
+        let attribute = element.getAttribute(name);
         if (attribute != null)
           handlers[name](element, attribute, dictionary);
       }
     }
-    var doc = root instanceof Document ? root : root.ownerDocument;
-    if (doc)
+
+    let doc = root instanceof Document ? root : root.ownerDocument;
+    if (doc && doc.documentElement)
       doc.documentElement.classList.add('i18n-processed');
   }