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

ui/webui/resources/js/i18n_template_no_process.js

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview This is a simple template engine inspired by JsTemplates
  * optimized for i18n.
  *
  * It currently supports three handlers:
  *
  *   * i18n-content which sets the textContent of the element.
  *
  *     <span i18n-content="myContent"></span>
  *
  *   * i18n-options which generates <option> elements for a <select>.
  *
  *     <select i18n-options="myOptionList"></select>
  *
  *   * i18n-values is a list of attribute-value or property-value pairs.
  *     Properties are prefixed with a '.' and can contain nested properties.
  *
  *     <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span>
  *
  * This file is a copy of i18n_template.js, with minor tweaks to support using
  * load_time_data.js. It should replace i18n_template.js eventually.
  */
 
 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
    * single node that has this attribute.
    * @type {!Object}
    */
   var handlers = {
     /**
      * This handler sets the textContent of the element.
      * @param {HTMLElement} element The node to modify.
@@ skipping 65 matching lines @@
               process(element, dictionary);
           }
         } else {
           element.setAttribute(propName, /** @type {string} */(value));
         }
       });
     }
   };
 
   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');
   }
 
   return {
     process: process
   };
 }());