This provides a simpler js template engine than JsTemplate. It has been

optimized for the way we do internationalization with JST before
and is about 4 times faster (average 4.8ms vs 22.8ms) for the history
page.

The syntax for this is very similar to JsTemplates. It uses the
attributes i18n-values and i18n-content which worls like jsvalues and
jscontent except that it does not allow arbitrary expressions.

BUG=None

TEST=All UI pages should work as before

Review URL: http://codereview.chromium.org/149420

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

30 files changed, 429 insertions, 230 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index d035b1e..a61314d 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -186,7 +186,7 @@ each locale. -->
       <message name="IDS_APPMENU_TOOLTIP" desc="The tooltip to show for the browser menu">
         Customize and control <ph name="PRODUCT_NAME">$1<ex>Google Chrome</ex></ph>
       </message>
-      
+
       <message name="IDS_ALTERNATE_NAV_URL_VIEW_LABEL" desc="Label displayed in an infobar when a user searches for a term he may have meant to navigate to.">
         Did you mean to go to <ph name="SITE">$1<ex>http://intranetsite/</ex></ph>?
       </message>
@@ -1524,7 +1524,7 @@ each locale. -->
       <message name="IDS_DISCARD_DOWNLOAD"
                desc="Text for the button used to stop a dangerous download.">
         Discard
-      </message>      
+      </message>
 
       <!-- Download Tab Items -->
       <message name="IDS_DOWNLOAD_LINK_PAUSE"
@@ -1822,7 +1822,7 @@ each locale. -->
         Close find bar
       </message>
 
-      
+
       <!-- Fullscreen mode -->
       <message name="IDS_EXIT_FULLSCREEN_MODE" desc="Clickable message displayed on entering fullscreen mode to tell users how to return to normal mode">
         Exit full screen (<ph name="ACCELERATOR">$1<ex>F11</ex></ph>)
@@ -2254,7 +2254,7 @@ each locale. -->
       <message name="IDS_IMPORT_PROGRESS_STATUS_CANCEL" desc="Button text for import cancellation">
         Stop import
       </message>
-      
+
       <message name="IDS_IMPORT_PROGRESS_STATUS_CANCEL_CONFIRM_OK" desc="Import cancellation confirmation accept button">
         Continue Importing
       </message>
@@ -2273,7 +2273,7 @@ each locale. -->
       <message name="IDS_IMPORTER_LOCK_CANCEL" desc="Text for Cancel button on dialog">
         Skip Import
       </message>
-       
+
       <!-- Report Bug or Broken Web Site Dialog -->
       <message name="IDS_BUGREPORT_TITLE" desc="Dialog title for bug report dialog">
         Report Bug or Broken Web Site
@@ -2448,7 +2448,7 @@ each locale. -->
       <message name="IDS_LOAD_STATE_READING_RESPONSE">
         Transferring from <ph name="HOST_NAME">$1<ex>www.google.com</ex></ph>...
       </message>
-      
+
       <!-- Tab Context Menu -->
       <message name="IDS_TAB_CXMENU_NEWTAB" desc="The label of the 'New Tab' Tab context menu item.">
         New tab
@@ -2640,13 +2640,13 @@ each locale. -->
       </message>
 
       <message name="IDS_ERRORPAGES_SUGGESTION_RELOAD" desc="When a page fails to load, we provide a suggestion that the user try reloading the page later">
-        &lt;a jsvalues="href:reloadUrl"&gt;Reload&lt;/a&gt; this web page later.
+        &lt;a i18n-values="href:reloadUrl"&gt;Reload&lt;/a&gt; this web page later.
       </message>
       <message name="IDS_ERRORPAGES_SUGGESTION_HOMEPAGE" desc="When a page fails to load, sometimes we provide a suggesting of trying just the hostname of the site.">
         Go to the homepage of the site:
       </message>
       <message name="IDS_ERRORPAGES_SUGGESTION_LEARNMORE" desc="When a web page fails to load, we provide a link to the help center to learn more about the failure.">
-        <ph name="BEGIN_LINK">&lt;a jsvalues="href:learnMoreUrl"&gt;</ph>Learn more<ph name="END_LINK">&lt;/a&gt;</ph> about this problem.
+        <ph name="BEGIN_LINK">&lt;a i18n-values="href:learnMoreUrl"&gt;</ph>Learn more<ph name="END_LINK">&lt;/a&gt;</ph> about this problem.
       </message>
 
       <message name="IDS_ERRORPAGES_TITLE_NOT_AVAILABLE" desc="Title of the error page when we can't connect to a site.">
@@ -2668,13 +2668,13 @@ each locale. -->
         This webpage has a redirect loop.
       </message>
       <message name="IDS_ERRORPAGES_SUMMARY_NOT_AVAILABLE" desc="Summary in the error page when we can't connect to a site.">
-        The webpage at &lt;strong jscontent="failedUrl"&gt;&lt;/strong&gt; might be temporarily down or it may have moved permanently to a new web address.
+        The webpage at &lt;strong i18n-content="failedUrl"&gt;&lt;/strong&gt; might be temporarily down or it may have moved permanently to a new web address.
       </message>
       <message name="IDS_ERRORPAGES_SUMMARY_NOT_FOUND" desc="Summary in the error page when the server returns a 404.">
-        No webpage was found for the web address: &lt;strong jscontent="failedUrl"&gt;&lt;/strong&gt;
+        No webpage was found for the web address: &lt;strong i18n-content="failedUrl"&gt;&lt;/strong&gt;
       </message>
       <message name="IDS_ERRORPAGES_SUMMARY_TOO_MANY_REDIRECTS" desc="Summary in the error page when there are too many URL redirects.">
-        The webpage at &lt;strong jscontent="failedUrl"&gt;&lt;/strong&gt; has resulted in
+        The webpage at &lt;strong i18n-content="failedUrl"&gt;&lt;/strong&gt; has resulted in
         too many redirects.  Clearing your cookies for this site may fix the problem.  If
         not, it is possibly a server configuration issue and not a problem with your
         computer.
@@ -2709,7 +2709,7 @@ each locale. -->
       <message name="IDS_ERRORPAGES_HTTP_POST_WARNING" desc="The error message displayed when the user navigates back or forward to a page which would resubmit post data. They can hit reload to send POST data again and load the page.">
         This web page requires data that you entered earlier in order to be properly displayed. You can send this data again, but by doing so you will repeat any action this page previously performed. Press Reload to resend that data and display this page.
       </message>
-      
+
       <message name="IDS_SAVEAS_ALL_FILES" desc="Save As dialog box default text">
         All Files
       </message>
@@ -2758,7 +2758,7 @@ each locale. -->
       <message name="IDS_PAGE_INFO_SECURITY_TAB_SECURE_IDENTITY_EV" desc="The text of the identity section when the page is secured with an EV cert.">
         The identity of <ph name="ORGANIZATION">$1<ex>Google</ex></ph> at <ph name="LOCALITY">$2<ex>Mountain View, CA US</ex></ph> has been verified by <ph name="ISSUER">$3<ex>VeriSign</ex></ph>.
       </message>
-      
+
       <message name="IDS_PAGE_INFO_SECURITY_TAB_UNKNOWN_PARTY" desc="The default name used when we did not find a principal name.">
         unknown name
       </message>
@@ -2894,7 +2894,7 @@ each locale. -->
       <message name="IDS_HTTP_POST_WARNING_CANCEL" desc="Cancel button for post warning">
         Cancel
       </message>
-      
+
       <!-- Menus -->
       <message name="IDS_MENU_EMPTY_SUBMENU" desc="Used when a submenu has no entries">
         (empty)
@@ -2951,7 +2951,7 @@ each locale. -->
       <message name="IDS_FIRSTRUN_DLG_CANCEL_CONFIRM_EXIT" desc="Exit installation button for cancel confirmation dialog">
         Exit Install
       </message>
-      
+
       <!-- Customize chrome messages -->
       <message name="IDS_FR_CUSTOMIZE_DLG_TITLE" desc="Dialog title for first run customize dialog">
         Customize Your Settings
@@ -3020,7 +3020,7 @@ each locale. -->
       <message name="IDS_HIDE_ICONS_NOT_SUPPORTED" desc="Message to explain we only support uninstall and not hide-icons.">
         To hide access to this program, you need to uninstall it by using\n<ph name="CONTROL_PANEL_APPLET_NAME">$1<ex>Add/Remove Programs</ex></ph> in Control Panel.\n\nWould you like to start <ph name="CONTROL_PANEL_APPLET_NAME">$1<ex>Add/Remove Programs</ex></ph>?
       </message>
-      
+
       <!-- Options Window -->
       <message name="IDS_OPTIONS_DIALOG_TITLE" desc="The title of the Options dialog box">
         <ph name="PRODUCT_NAME">$1<ex>Google Chrome</ex></ph> Options
@@ -3123,7 +3123,7 @@ each locale. -->
         Clear auto-opening settings
       </message>
 
-      
+
       <message name="IDS_OPTIONS_GEARSSETTINGS_GROUP_NAME" desc="The label of the 'Gears Settings' group">
         Gears:
       </message>
@@ -3137,7 +3137,7 @@ each locale. -->
       <message name="IDS_OPTIONS_CERTIFICATES_MANAGE_BUTTON" desc="The label of the 'Manage Certificates' button">
         Manage certificates
       </message>
-      
+
       <message name="IDS_OPTIONS_PASSWORDS_GROUP_NAME" desc="The title of the 'Passwords' group">
         Passwords:
       </message>
@@ -3621,8 +3621,8 @@ each locale. -->
       <message name="IDS_JS_OUT_OF_MEMORY_PROMPT" desc="Info Bar message to notify JS out of memory">
         Script on the page used too much memory. Reload to enable scripts again.
       </message>
-      
-      <message name="IDS_PAGE_INFO_SECURITY_TAB_PERSONAL_HISTORY_TITLE" 
+
+      <message name="IDS_PAGE_INFO_SECURITY_TAB_PERSONAL_HISTORY_TITLE"
                desc="Title of the personal history section">
         Visit history
       </message>
@@ -3651,7 +3651,7 @@ each locale. -->
       <message name="IDS_EXTERNAL_PROTOCOL_CHECKBOX_TEXT" desc="Checkbox to remember users decision.">
         Remember my choice for all links of this type.
       </message>
-      
+
       <!-- Debugger -->
       <message name="IDS_DEBUGGER_TITLE_BUSY" desc="V8 Debugger title bar displayed when busy (a command is running)">
         JavaScript Debugger - Busy
@@ -3673,7 +3673,7 @@ each locale. -->
       <message name="IDS_SHIFT_MODIFIER" desc="Shift key shortcut modifier">
         Shift+<ph name="KEY_COMBO_NAME">$1<ex>C</ex></ph>
       </message>
-      
+
       <!-- Key names -->
       <message name="IDS_ESC_KEY" desc="Escape key">
         Esc
@@ -3737,7 +3737,7 @@ each locale. -->
       <message name="IDS_DIRECTORY_LISTING_DATE_MODIFIED" desc="When viewing a local directory, this is the text for the column above the last modified dates.">
         Date Modified
       </message>
-      
+
       <!-- Saving Page-->
       <message name="IDS_SAVE_PAGE_DESC_HTML_ONLY" desc="In the Save Page dialog, the description of saving only the HTML of a web page.">
         Web Page, HTML Only
@@ -3757,7 +3757,7 @@ each locale. -->
       <message name="IDS_SAVE_PAGE_PROGRESS" desc="Text string for saving page progress, the number of saved files and total files">
         <ph name="SAVED_FILES">$1<ex>5</ex></ph> / <ph name="TOTAL_FILES">$2<ex>13</ex></ph> files
       </message>
-      
+
       <!-- Report Phishing website -->
       <message name="IDS_PAGE_MENU_REPORT_PHISHING_WEBSITE" desc="The menu label for the menu item that allows the user to report the current page as a phishing website.">
         Report phishing website...
@@ -3769,7 +3769,7 @@ each locale. -->
       <message name="IDS_OPTIONS_LINKDOCTOR_URL" desc="The documentation string of the preference that sets the URL of the link doctor service">
         Service URL:
       </message>
-      
+
       <message name="IDS_OPTIONS_SUGGEST_PREF" desc="The documentation string of the 'Use Suggest' preference">
         Use a suggestion service to help complete searches and URLs typed in the address bar
       </message>
@@ -3783,7 +3783,7 @@ each locale. -->
       <message name="IDS_OPTIONS_FONTSETTINGS_CONFIGUREFONTS_BUTTON" desc="The label of the 'configure fonts' button">
         Change font and language settings
       </message>
-      
+
       <message name="IDS_OPTIONS_CHROME_DICTIONARY_INFO" desc="The documentation string of the 'Spell check dictionary language' section">
         Change the language of the spell-checking dictionary.
       </message>
@@ -3796,7 +3796,7 @@ each locale. -->
       <message name="IDS_OPTIONS_ENABLE_AUTO_SPELL_CORRECTION" desc="The documentation string of the 'Enable auto spell correction' option">
         Correct spelling automatically:
       </message>
-      
+
       <message name="IDS_OPTIONS_RESET" desc="The label of the 'Reset all settings to defaults' button">
         Reset to defaults
       </message>
@@ -3806,7 +3806,7 @@ each locale. -->
       <message name="IDS_OPTIONS_RESET_CANCELLABEL" desc="The label of the Cancel button in the 'Reset Chrome options' confirmation dialog box">
         Don't reset
       </message>
-      
+
       <!-- Can't write to user data directory dialog -->
       <message name="IDS_CANT_WRITE_USER_DIRECTORY_TITLE" desc="Title of dialog that is displayed when we can't create a directory for this user.">
         Failed To Create Data Directory
diff --git a/chrome/browser/browser_about_handler.cc b/chrome/browser/browser_about_handler.cc
index 1e29d7f..4b8da31 100644
--- a/chrome/browser/browser_about_handler.cc
+++ b/chrome/browser/browser_about_handler.cc
@@ -381,8 +381,8 @@ std::string AboutVersion() {
       ResourceBundle::GetSharedInstance().GetRawDataResource(
           IDR_ABOUT_VERSION_HTML));
 
-  return jstemplate_builder::GetTemplateHtml(
-      version_html, &localized_strings, "t" /* template root node id */);
+  return jstemplate_builder::GetI18nTemplateHtml(
+      version_html, &localized_strings);
 }
 
 // AboutSource -----------------------------------------------------------------
diff --git a/chrome/browser/browser_main.cc b/chrome/browser/browser_main.cc
index aef62de..15906f9 100644
--- a/chrome/browser/browser_main.cc
+++ b/chrome/browser/browser_main.cc
@@ -168,11 +168,10 @@ struct LazyDirectoryListerCacher {
                     l10n_util::GetString(IDS_DIRECTORY_LISTING_SIZE));
     value.SetString(L"headerDateModified",
                     l10n_util::GetString(IDS_DIRECTORY_LISTING_DATE_MODIFIED));
-    html_data = jstemplate_builder::GetTemplateHtml(
+    html_data = jstemplate_builder::GetI18nTemplateHtml(
         ResourceBundle::GetSharedInstance().GetRawDataResource(
             IDR_DIR_HEADER_HTML),
-        &value,
-        "t");
+        &value);
   }
 
   std::string html_data;
diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
index a8b8fa7..218cd07 100644
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -29,7 +29,7 @@ without changes to the corresponding grd file.  -->
       <include name="IDR_CREDITS_HTML" file="resources\about_credits.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_HISTORY_HTML" file="resources\history.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_DOWNLOADS_HTML" file="resources\downloads.html" flattenhtml="true" type="BINDATA" />
-      <include name="IDR_LOCAL_STRINGS_JS" file="resources\local_strings.js" flattenhtml="true" type="BINDATA" />
+      <include name="IDR_LOCAL_STRINGS_JS" file="resources\local_strings.js" type="BINDATA" />
       <include name="IDR_DOM_UI_CSS" file="resources\dom_ui.css" flattenhtml="true" type="BINDATA" />
       <include name="IDR_EXTENSIONS_UI_HTML" file="resources\extensions_ui.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_EXTENSIONS_TOOLSTRIP_CSS" file="resources\extensions_toolstrip.css" flattenhtml="true" type="BINDATA" />
diff --git a/chrome/browser/dom_ui/downloads_ui.cc b/chrome/browser/dom_ui/downloads_ui.cc
index 60b5a369..aac3a86 100644
--- a/chrome/browser/dom_ui/downloads_ui.cc
+++ b/chrome/browser/dom_ui/downloads_ui.cc
@@ -99,8 +99,8 @@ void DownloadsUIHTMLSource::StartDataRequest(const std::string& path,
   static const StringPiece downloads_html(
       ResourceBundle::GetSharedInstance().GetRawDataResource(
           IDR_DOWNLOADS_HTML));
-  const std::string full_html = jstemplate_builder::GetTemplateHtml(
-      downloads_html, &localized_strings, "t");
+  const std::string full_html = jstemplate_builder::GetI18nTemplateHtml(
+      downloads_html, &localized_strings);
 
   scoped_refptr<RefCountedBytes> html_bytes(new RefCountedBytes);
   html_bytes->data.resize(full_html.size());
diff --git a/chrome/browser/dom_ui/history_ui.cc b/chrome/browser/dom_ui/history_ui.cc
index 1e0bd75..62e2e5d 100644
--- a/chrome/browser/dom_ui/history_ui.cc
+++ b/chrome/browser/dom_ui/history_ui.cc
@@ -81,8 +81,8 @@ void HistoryUIHTMLSource::StartDataRequest(const std::string& path,
   static const StringPiece history_html(
       ResourceBundle::GetSharedInstance().GetRawDataResource(
           IDR_HISTORY_HTML));
-  const std::string full_html = jstemplate_builder::GetTemplateHtml(
-      history_html, &localized_strings, "t");
+  const std::string full_html = jstemplate_builder::GetI18nTemplateHtml(
+      history_html, &localized_strings);
 
   scoped_refptr<RefCountedBytes> html_bytes(new RefCountedBytes);
   html_bytes->data.resize(full_html.size());
@@ -99,7 +99,6 @@ void HistoryUIHTMLSource::StartDataRequest(const std::string& path,
 BrowsingHistoryHandler::BrowsingHistoryHandler()
     : search_text_(),
       remover_(NULL) {
-  
 }
 
 BrowsingHistoryHandler::~BrowsingHistoryHandler() {
diff --git a/chrome/browser/dom_ui/new_tab_ui.cc b/chrome/browser/dom_ui/new_tab_ui.cc
index 8525e08..3a53b24 100644
--- a/chrome/browser/dom_ui/new_tab_ui.cc
+++ b/chrome/browser/dom_ui/new_tab_ui.cc
@@ -371,8 +371,11 @@ void NewTabHTMLSource::StartDataRequest(const std::string& path,
             IDR_NEW_NEW_TAB_HTML);
   }
 
-  const std::string full_html = jstemplate_builder::GetTemplateHtml(
-      new_tab_html, &localized_strings, "t" /* template root node id */);
+  std::string full_html(new_tab_html.data(), new_tab_html.size());
+  jstemplate_builder::AppendJsonHtml(&localized_strings, &full_html);
+  jstemplate_builder::AppendI18nTemplateSourceHtml(&full_html);
+  jstemplate_builder::AppendI18nTemplateProcessHtml(&full_html);
+  jstemplate_builder::AppendJsTemplateSourceHtml(&full_html);
 
   scoped_refptr<RefCountedBytes> html_bytes(new RefCountedBytes);
   html_bytes->data.resize(full_html.size());
@@ -442,8 +445,8 @@ void IncognitoTabHTMLSource::StartDataRequest(const std::string& path,
       ResourceBundle::GetSharedInstance().GetRawDataResource(
           IDR_INCOGNITO_TAB_HTML));
 
-  const std::string full_html = jstemplate_builder::GetTemplateHtml(
-      incognito_tab_html, &localized_strings, "t" /* template root node id */);
+  const std::string full_html = jstemplate_builder::GetI18nTemplateHtml(
+      incognito_tab_html, &localized_strings);
 
   scoped_refptr<RefCountedBytes> html_bytes(new RefCountedBytes);
   html_bytes->data.resize(full_html.size());
diff --git a/chrome/browser/extensions/extensions_ui.cc b/chrome/browser/extensions/extensions_ui.cc
index 62fb559..ffd2d04 100644
--- a/chrome/browser/extensions/extensions_ui.cc
+++ b/chrome/browser/extensions/extensions_ui.cc
@@ -46,8 +46,11 @@ void ExtensionsUIHTMLSource::StartDataRequest(const std::string& path,
   static const StringPiece extensions_html(
       ResourceBundle::GetSharedInstance().GetRawDataResource(
           IDR_EXTENSIONS_UI_HTML));
-  const std::string full_html = jstemplate_builder::GetTemplateHtml(
-      extensions_html, &localized_strings, "root");
+  std::string full_html(extensions_html.data(), extensions_html.size());
+  jstemplate_builder::AppendJsonHtml(&localized_strings, &full_html);
+  jstemplate_builder::AppendI18nTemplateSourceHtml(&full_html);
+  jstemplate_builder::AppendI18nTemplateProcessHtml(&full_html);
+  jstemplate_builder::AppendJsTemplateSourceHtml(&full_html);
 
   scoped_refptr<RefCountedBytes> html_bytes(new RefCountedBytes);
   html_bytes->data.resize(full_html.size());
@@ -63,7 +66,7 @@ void ExtensionsUIHTMLSource::StartDataRequest(const std::string& path,
 ///////////////////////////////////////////////////////////////////////////////
 
 ExtensionsDOMHandler::ExtensionsDOMHandler(
-    ExtensionsService* extension_service) 
+    ExtensionsService* extension_service)
     : extensions_service_(extension_service) {
  }
 
diff --git a/chrome/browser/resources/about_version.html b/chrome/browser/resources/about_version.html
index 7216c48..6a8489f 100644
--- a/chrome/browser/resources/about_version.html
+++ b/chrome/browser/resources/about_version.html
@@ -6,7 +6,7 @@ about:version template page
 
 <html id="t">
   <head>
-    <title jscontent="title"></title>
+    <title i18n-content="title"></title>
     <style>
       body {
         font-family:arial;
@@ -66,21 +66,21 @@ about:version template page
     <div id="outer">
       <div id="logo">
         <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" />
-        <div id="company" jscontent="company"></div>
-        <div id="copyright" jscontent="copyright"></div>
+        <div id="company" i18n-content="company"></div>
+        <div id="copyright" i18n-content="copyright"></div>
       </div>
       <table id="inner" cellpadding="0" cellspacing="0" border="0">
-        <tr><td class="label" valign="top" id="name" jscontent="name"></td>
-            <td class="version" id="version"><span jscontent="version"></span> (<span jscontent="official"></span> <span jscontent="cl"></span>)</td>
+        <tr><td class="label" valign="top" id="name" i18n-content="name"></td>
+            <td class="version" id="version"><span i18n-content="version"></span> (<span i18n-content="official"></span> <span i18n-content="cl"></span>)</td>
         </tr>
         <tr><td class="label" valign="top">WebKit</td>
-            <td class="version" id="webkit_version" jscontent="webkit_version"></td>
+            <td class="version" id="webkit_version" i18n-content="webkit_version"></td>
         </tr>
-        <tr><td class="label" valign="top" jscontent="js_engine"></td>
-            <td class="version" id="js_version" jscontent="js_version"></td>
+        <tr><td class="label" valign="top" i18n-content="js_engine"></td>
+            <td class="version" id="js_version" i18n-content="js_version"></td>
         </tr>
         <tr><td class="label" valign="top">User Agent</td>
-            <td class="version" id="useragent" jscontent="useragent"></td>
+            <td class="version" id="useragent" i18n-content="useragent"></td>
         </tr>
       </table>
     </div>
diff --git a/chrome/browser/resources/downloads.html b/chrome/browser/resources/downloads.html
index d2daeec..1616491 100644
--- a/chrome/browser/resources/downloads.html
+++ b/chrome/browser/resources/downloads.html
@@ -1,8 +1,8 @@
 <!DOCTYPE HTML>
-<html id="t" jsvalues="dir:textdirection;">
+<html i18n-values="dir:textdirection;">
 <head>
 <meta charset="utf-8">
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <link rel="icon" href="../../app/theme/downloads_favicon.png">
 <style>
 body {
@@ -683,7 +683,7 @@ function downloadUpdated(results) {
 
 </script>
 </head>
-<body onload="load();" jsvalues=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+<body onload="load();" i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 <div class="header">
   <a href="" onclick="setSearch(''); return false;">
     <img src="../../app/theme/downloads_section.png"
@@ -692,13 +692,13 @@ function downloadUpdated(results) {
       onsubmit="setSearch(this.term.value); return false;"
       class="form">
     <input type="text" name="term" id="term" />
-    <input type="submit" name="submit" jsvalues="value:searchbutton" />
+    <input type="submit" name="submit" i18n-values="value:searchbutton" />
   </form>
 </div>
 <div class="main">
   <div id="downloads-summary">
-    <span id="downloads-summary-text" jscontent="downloads">Downloads</span>
-    <a id="clear-all" href="" onclick="clearAll();" jscontent="clear_all">Clear All</a>
+    <span id="downloads-summary-text" i18n-content="downloads">Downloads</span>
+    <a id="clear-all" href="" onclick="clearAll();" i18n-content="clear_all">Clear All</a>
   </div>
   <div id="downloads-display"></div>
 </div>
diff --git a/chrome/browser/resources/extensions_ui.html b/chrome/browser/resources/extensions_ui.html
index d2f3ec8..f956f1e 100644
--- a/chrome/browser/resources/extensions_ui.html
+++ b/chrome/browser/resources/extensions_ui.html
@@ -1,8 +1,8 @@
 <!DOCTYPE HTML>
-<html id="root">
+<html>
 <head>
 <meta charset="utf-8">
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <script>
 /**
  * This variable structure is here to document the structure that the template
@@ -130,7 +130,7 @@ function sendInspectMessage(viewData) {
 function handleUninstallExtension(node) {
   // Tell the C++ ExtensionDOMHandler to uninstall an extension.
   chrome.send('uninstall', [node.extensionId]);
-  
+
   // Find the div above us with class 'extension' and remove it.
   while (node) {
     if (node.className == 'extension') {
@@ -139,7 +139,7 @@ function handleUninstallExtension(node) {
     }
     node = node.parentNode;
   }
-  
+
   throw new Error("Couldn't find containing extension element.");
 }
 </script>
diff --git a/chrome/browser/resources/history.html b/chrome/browser/resources/history.html
index bafc61e..8333a4d 100644
--- a/chrome/browser/resources/history.html
+++ b/chrome/browser/resources/history.html
@@ -1,8 +1,8 @@
 <!DOCTYPE HTML>
-<html id="t" jsvalues="dir:textdirection;">
+<html i18n-values="dir:textdirection;">
 <head>
 <meta charset="utf-8">
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <link rel="icon" href="../../app/theme/history_favicon.png">
 <script src="local_strings.js"></script>
 <script>
@@ -898,7 +898,7 @@ html[dir='rtl'] .entry .title > a {
 
 </style>
 </head>
-<body onload="load();" jsvalues=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+<body onload="load();" i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 <div class="header">
   <a href="" onclick="setSearch(''); return false;">
     <img src="../../app/theme/history_section.png"
@@ -907,7 +907,7 @@ html[dir='rtl'] .entry .title > a {
       onsubmit="setSearch(this.term.value); return false;"
       class="form">
     <input type="text" name="term" id="term" />
-    <input type="submit" name="submit" jsvalues="value:searchbutton" />
+    <input type="submit" name="submit" i18n-values="value:searchbutton" />
   </form>
 </div>
 <div class="main">
diff --git a/chrome/browser/resources/i18n_template.js b/chrome/browser/resources/i18n_template.js
new file mode 100644
index 0000000..7a367f7
--- /dev/null
+++ b/chrome/browser/resources/i18n_template.js
@@ -0,0 +1,91 @@
+/**
+ * @fileoverview This is a simple template engine inspired by JsTemplates
+ * optimized for i18n.
+ *
+ * It currently supports two handlers:
+ *
+ *   * i18n-content which sets the textContent of the element
+ *
+ *     <span i18n-content="myContent"></span>
+ *     i18nTemplate.process(element, {'myContent': 'Content'});
+ *
+ *   * 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>
+ *     i18nTemplate.process(element, {
+ *       'myTitle': 'Title',
+ *       'fontSize': '13px'
+ *     });
+ */
+
+var i18nTemplate = (function() {
+  /**
+   * 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.
+     */
+    'i18n-content': function(element, attributeValue, obj) {
+      element.textContent = obj[attributeValue];
+    },
+
+    /**
+     * This is used to set HTML attributes and DOM properties,. The syntax is:
+     *   attributename:key;
+     *   .domProperty:key;
+     *   .nested.dom.property:key
+     */
+    'i18n-values': function(element, attributeValue, obj) {
+      var parts = attributeValue.replace(/\s/g, '').split(/;/);
+      for (var j = 0; j < parts.length; j++) {
+        var a = parts[j].match(/^([^:]+):(.+)$/);
+        if (a) {
+          var propName = a[1];
+          var propExpr = a[2];
+          var value = obj[propExpr];
+          if (propName.charAt(0) == '.') {
+            var path = propName.slice(1).split('.');
+            var object = element;
+            while (object && path.length > 1) {
+              object = object[path.shift()];
+            }
+            if (object) {
+              object[path] = value;
+            }
+          } else {
+            element.setAttribute(propName, value);
+          }
+        }
+      }
+    }
+  };
+
+  var attributeNames = [];
+  for (var key in handlers) {
+    attributeNames.push(key);
+  }
+  var selector = '[' + attributeNames.join('],[') + ']';
+
+  return {
+    /**
+     * Processes a DOM tree with the {@code obj} map.
+     */
+    process: function(node, obj) {
+      var elements = node.querySelectorAll(selector);
+      for (var element, i = 0; element = elements[i]; i++) {
+        for (var j = 0; j < attributeNames.length; j++) {
+          var name = attributeNames[j];
+          var att = element.getAttribute(name);
+          if (att != null) {
+            handlers[name](element, att, obj);
+          }
+        }
+      }
+    }
+  };
+})();
diff --git a/chrome/browser/resources/incognito_tab.html b/chrome/browser/resources/incognito_tab.html
index 9abb85f..064aa32 100644
--- a/chrome/browser/resources/incognito_tab.html
+++ b/chrome/browser/resources/incognito_tab.html
@@ -1,6 +1,7 @@
-<html id="t" jsvalues="dir:textdirection">
+<!DOCTYPE html>
+<html i18n-values="dir:textdirection">
 <head>
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <style>
 body {
   margin:10px 8px 10px 8px;
@@ -21,9 +22,9 @@ body {
 </style>
 </head>
 <body>
-<div class="content" jsvalues=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+<div class="content" i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
   <img src="../../app/theme/otr_icon_standalone.png" class="icon" />
-  <span jseval="this.innerHTML = $this.content;"></span>
+  <span i18n-values=".innerHTML:content"></span>
 </div>
 </body>
 </html>
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 13a06b2..086553f 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html id="t" jsvalues="dir:textdirection;firstview:firstview;bookmarkbarattached:bookmarkbarattached;hasattribution:hasattribution;anim:anim">
+<html i18n-values="dir:textdirection;firstview:firstview;bookmarkbarattached:bookmarkbarattached;hasattribution:hasattribution;anim:anim">
 
 <meta charset="utf-8">
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <script>
 // Logging info for benchmarking purposes.
 var log = [];
@@ -51,30 +51,30 @@ logEvent('log start');
 <link id="themecss" rel="stylesheet" href="chrome://theme/css/newtab.css">
 </head>
 <body class="loading"
-      jsvalues=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+      i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 
 <div id="main">
 
   <div id="view-toolbar"
       ><input type=checkbox id="thumb-checkbox" checked
-              jsvalues="title:hidethumbnails"
-      ><input type=checkbox id="list-checkbox" jsvalues="title:showlist"
+              i18n-values="title:hidethumbnails"
+      ><input type=checkbox id="list-checkbox" i18n-values="title:showlist"
       ><input type="button" id="option-button"></div>
 
   <div id="option-menu" class="window-menu">
-    <div section="THUMB" show="true" jscontent="showthumbnails"
+    <div section="THUMB" show="true" i18n-content="showthumbnails"
          style="display:none"></div>
-    <div section="THUMB" show="false" jscontent="hidethumbnails"></div>
-    <div section="LIST" show="true" jscontent="showlist"></div>
-    <div section="LIST" show="false" jscontent="hidelist"
+    <div section="THUMB" show="false" i18n-content="hidethumbnails"></div>
+    <div section="LIST" show="true" i18n-content="showlist"></div>
+    <div section="LIST" show="false" i18n-content="hidelist"
          style="display:none"></div>
-    <div section="RECENT" show="true" jscontent="showrecent"
+    <div section="RECENT" show="true" i18n-content="showrecent"
          style="display:none"></div>
-    <div section="RECENT" show="false" jscontent="hiderecent"></div>
+    <div section="RECENT" show="false" i18n-content="hiderecent"></div>
     <div section="TIPS" show="true"
-         jscontent="showtips" style="display:none"></div>
+         i18n-content="showtips" style="display:none"></div>
     <div section="TIPS" show="false"
-         jscontent="hidetips"></div>
+         i18n-content="hidetips"></div>
   </div>
 
   <div id="notification">
@@ -216,12 +216,12 @@ logEvent('log start');
   <div id="lower-sections">
 
     <div id="recent-activities" class="section">
-      <h2 jscontent="recentactivities"></h2>
+      <h2 i18n-content="recentactivities"></h2>
 
       <div class="hbox">
 
         <div id="recent-tabs">
-          <h3 jscontent="recentlyclosed"></h3>
+          <h3 i18n-content="recentlyclosed"></h3>
 
           <div class="item-container">
             <div id="tab-items" jsskip="!processing">
@@ -247,14 +247,14 @@ logEvent('log start');
 
             <div>
               <a href="chrome://history/" class="item nav"
-                  jscontent="viewfullhistory"></a>
+                  i18n-content="viewfullhistory"></a>
             </div>
 
           </div>
         </div>
 
         <div id="downloads">
-          <h3 jscontent="downloads"></h3>
+          <h3 i18n-content="downloads"></h3>
           <div class="item-container">
             <div id="download-items" jsskip="!processing">
               <a class="item" jsselect="$this"
@@ -269,7 +269,7 @@ logEvent('log start');
 
             <div>
               <a href="chrome://downloads/" class="item nav"
-                  jscontent="viewalldownloads"></a>
+                  i18n-content="viewalldownloads"></a>
             </div>
 
           </div>
@@ -280,11 +280,11 @@ logEvent('log start');
     </div><div class="spacer">
 
     </div><div id="tips" class="section">
-      <h2 jscontent="tipsandsuggestions"></h2>
+      <h2 i18n-content="tipsandsuggestions"></h2>
       <div id="tip-items" jsskip="!processing">
         <div class="tips-title item" jsselect="$this"
             jsdisplay="!url"
-            jscontent="localStrings.getString('defaulttipstitle')">
+            i18n-content="defaulttipstitle">
         </div>
         <div class="tips-container item-container">
           <a class="item" jsselect="$this"
diff --git a/chrome/browser/resources/new_tab.html b/chrome/browser/resources/new_tab.html
index e480c66..50f8c1d 100644
--- a/chrome/browser/resources/new_tab.html
+++ b/chrome/browser/resources/new_tab.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html id="t" jsvalues="dir:textdirection;firstview:firstview;bookmarkbarattached:bookmarkbarattached;hasattribution:hasattribution;anim:anim">
+<html i18n-values="dir:textdirection;firstview:firstview;bookmarkbarattached:bookmarkbarattached;hasattribution:hasattribution;anim:anim">
 <!--
  This page is optimized for perceived performance. Our enemies are the time
  taken for the backend to generate our data, and the time taken to parse
@@ -128,7 +128,7 @@ logEvent('log start');
 </script>
 <head>
 <meta charset="utf-8">
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <style>
 html {
   height:100%;
@@ -359,7 +359,7 @@ html[hasattribution='false'] .attribution {
 <link id="themecss" rel="stylesheet" href="chrome://theme/css/newtab.css" />
 </head>
 <body onload="updateAttribution(); logEvent('body onload fired');"
-      jsvalues=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+      i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 <script>
 // We apply the size class here so that we don't trigger layout animations onload.
 handleWindowResize();
@@ -373,11 +373,11 @@ document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
   <div id="mostvisitedsection" class="section">
     <div id="mostvisited" style="position:relative;">
       <div>
-        <span class="section-title non-edit-visible" jscontent="mostvisited"></span>
-        <span class="section-title edit-visible" jseval="this.innerHTML = $this.editmodeheading;"></span>
+        <span class="section-title non-edit-visible" i18n-content="mostvisited"></span>
+        <span class="section-title edit-visible" i18n-values=".innerHTML:editmodeheading"></span>
       </div>
       <div id="mostvisitedintro" style="display:none;">
-        <div class="most-visited-text" style="position:absolute;" jseval="this.innerHTML = $this.mostvisitedintro;"></div>
+        <div class="most-visited-text" style="position:absolute;" i18n-values=".innerHTML:mostvisitedintro"></div>
         <table>
           <tr>
             <td><div class="thumbnail">&nbsp;</div></td>
@@ -417,19 +417,19 @@ document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
        class="manage non-edit-visible"
        onclick="enterEditMode(); return false"
        id="editthumbnails">
-      <span jscontent="editthumbnails"></span></a>
+      <span i18n-content="editthumbnails"></span></a>
     <button type="button" class="edit-visible" onclick="exitEditMode();"
-            jscontent="doneediting"></button>
+            i18n-content="doneediting"></button>
     <button type="button" class="edit-visible" onclick="cancelEdits();"
-            jscontent="cancelediting"></button>
+            i18n-content="cancelediting"></button>
     <a href="#"
        class="manage edit-visible"
        onclick="restoreThumbnails(); return false">
-      <span jscontent="restorethumbnails"></span></a>
+      <span i18n-content="restorethumbnails"></span></a>
     <a href="#"
-       jsvalues="href:showhistoryurl"
+       i18n-values="href:showhistoryurl"
        class="manage non-edit-visible">
-       <span jscontent="showhistory"></span> &raquo;</a>
+       <span i18n-content="showhistory"></span> &raquo;</a>
   </div>
   </td>
   <td valign="top" width="230">
@@ -437,32 +437,34 @@ document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
         <img src="../../app/theme/%DISTRIBUTION%/product_logo.png"
              width="145" height="52" style="padding-bottom:8px;" />
     </div>
+    <!-- This iframe gets shown in resizeP13N -->
     <iframe id="p13n" frameborder="0" width="100%" scrolling="no" height="0"
-            jsdisplay="p13nsrc" style="display:none;"
-            jsvalues="src:p13nsrc"></iframe>
+            style="display:none"
+            i18n-values="src:p13nsrc"></iframe>
+
     <div id="searches" class="sidebar themed">
-      <div class="section-title" jscontent="searches"></div>
+      <div class="section-title" i18n-content="searches"></div>
       <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); return false;">
         <input type="text" class="hint"
                name="search"
                style="background-image:url(chrome://favicon/);"
-               jsvalues="placeholder:searchhistory">
+               i18n-values="placeholder:searchhistory">
       </form>
       <div id='searches-entries'></div>
     </div>
 
     <div id="recentlyBookmarked" class="sidebar themed" style="display:none">
-      <span class="section-title" jscontent="bookmarks"></span>
+      <span class="section-title" i18n-content="bookmarks"></span>
       <div id="recentlyBookmarkedContainer"></div>
     </div>
 
     <div id="recentlyClosedTabs" class="sidebar" style="display:none">
-      <div class="section-title" jscontent="recentlyclosed"></div>
+      <div class="section-title" i18n-content="recentlyclosed"></div>
       <div id="recentlyClosedContainer"></div>
     </div>
 
     <div id="attribution" class="sidebar attribution">
-      <span jscontent="attributionintro"></span><br />
+      <span i18n-content="attributionintro"></span><br />
       <img id="attribution-img" />
     </div>
   </td>
diff --git a/chrome/browser/resources/safe_browsing_malware_block.html b/chrome/browser/resources/safe_browsing_malware_block.html
index 0deaaf1..0bbe205 100644
--- a/chrome/browser/resources/safe_browsing_malware_block.html
+++ b/chrome/browser/resources/safe_browsing_malware_block.html
@@ -1,6 +1,7 @@
-<html id="template_root" jsvalues="dir:textdirection">
+<!DOCTYPE html>
+<html id="template_root" i18n-values="dir:textdirection">
 <head>
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <style>
 body {
   background-color:#500;
@@ -85,15 +86,15 @@ input {
   <td class="cell" valign="middle" align="center">
     <div class="box">
       <div class="icon"><img src="phishing_icon.png" alt="Malware Icon" onmousedown="return false;"/></div>
-      <div class="title" jscontent="headLine"></div>
-      <div class="main" jseval="this.innerHTML = $this.description1;"></div>
-      <div class="main" jseval="this.innerHTML = $this.description2;"></div>
-      <div class="main"><a href="" jscontent="description3" onclick="sendCommand('learnMore'); return false;" onmousedown="return false;"></a></div>
+      <div class="title" i18n-content="headLine"></div>
+      <div class="main" i18n-values=".innerHTML:description1"></div>
+      <div class="main" i18n-values=".innerHTML:description2"></div>
+      <div class="main"><a href="" i18n-content="description3" onclick="sendCommand('learnMore'); return false;" onmousedown="return false;"></a></div>
       <div class="main">
         <form class="submission">
-          <input name="checky" id="checky" type="checkbox" onclick="agreed(this.form)">&nbsp;<label for="checky" jscontent="confirm_text"></label>
-          <input type="button" name="continue_button" jsvalues="value:continue_button" disabled="true" onclick="sendCommand('proceed')"><br>
-          <input type="button" name="back_button" jsvalues="value:back_button" onclick="sendCommand('takeMeBack')">
+          <input name="checky" id="checky" type="checkbox" onclick="agreed(this.form)">&nbsp;<label for="checky" i18n-content="confirm_text"></label>
+          <input type="button" name="continue_button" i18n-values="value:continue_button" disabled="true" onclick="sendCommand('proceed')"><br>
+          <input type="button" name="back_button" i18n-values="value:back_button" onclick="sendCommand('takeMeBack')">
         </form>
       </div>
     </div>
diff --git a/chrome/browser/resources/safe_browsing_multiple_threat_block.html b/chrome/browser/resources/safe_browsing_multiple_threat_block.html
index 8ba9486..03b87a6 100644
--- a/chrome/browser/resources/safe_browsing_multiple_threat_block.html
+++ b/chrome/browser/resources/safe_browsing_multiple_threat_block.html
@@ -1,7 +1,7 @@
-<html id="template_root">
-
+<!DOCTYPE html>
+<html>
 <head>
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <style>
 body {
   background-color:#500;
@@ -115,10 +115,10 @@ function takeMeBack() {
   <td class="cell" valign="middle" align="center">
     <div class="box">
       <div class="icon"><img src="phishing_icon.png" alt="Malware Icon" onmousedown="return false;"/></div>
-      <div class="title" jscontent="headLine"></div>
-      <div class="main" jseval="this.innerHTML = $this.description1;"></div>
-      <div class="main" jscontent="description2"></div>
-      <div class="main">
+      <div class="title" i18n-content="headLine"></div>
+      <div class="main" i18n-values=".innerHTML:description1"></div>
+      <div class="main" i18n-content="description2"></div>
+      <div class="main" id="template_root">
         <table cellpadding="5" jsvalues="$counter:{value: 0}">
           <tr jsselect="errors" class="errorlist">
             <td jscontent="typeLabel"></td>
@@ -128,12 +128,12 @@ function takeMeBack() {
         </table>
       </div>
 
-      <div class="main"><a href="" jscontent="description3" onclick="learnMore(); return false;" onmousedown="return false;"></a></div>
+      <div class="main"><a href="" i18n-content="description3" onclick="learnMore(); return false;" onmousedown="return false;"></a></div>
       <div class="main">
         <form class="submission">
-          <input name="checky" id="checky" type="checkbox" onclick="agreed(this.form)">&nbsp;<label for="checky" jscontent="confirm_text"></label>
-          <input type="button" name="continue_button" jsvalues="value:continue_button" disabled="true" onclick="proceed();"><br>
-          <input type="button" name="back_button" jsvalues="value:back_button" onclick="takeMeBack()">
+          <input name="checky" id="checky" type="checkbox" onclick="agreed(this.form)">&nbsp;<label for="checky" i18n-content="confirm_text"></label>
+          <input type="button" name="continue_button" i18n-values="value:continue_button" disabled="true" onclick="proceed();"><br>
+          <input type="button" name="back_button" i18n-values="value:back_button" onclick="takeMeBack()">
         </form>
       </div>
     </div>
diff --git a/chrome/browser/resources/safe_browsing_phishing_block.html b/chrome/browser/resources/safe_browsing_phishing_block.html
index 6d0cfb6..b3d1c03 100644
--- a/chrome/browser/resources/safe_browsing_phishing_block.html
+++ b/chrome/browser/resources/safe_browsing_phishing_block.html
@@ -1,6 +1,7 @@
-<html id="template_root" jsvalues="dir:textdirection">
+<!DOCTYPE html>
+<html i18n-values="dir:textdirection">
 <head>
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <style>
 body {
   background-color:#500;
@@ -82,21 +83,21 @@ html[dir='rtl'] .helpbutton {
 </script>
 </head>
 <body oncontextmenu="return false;">
-<div class="background"><img src="../security/resources/ssl_roadblock_background.png" width="100%" height="100%" alt="background" onmousedown="return false;"/></div>
+<div class="background"><img src="../security/resources/ssl_roadblock_background.png" width="100%" height="100%" alt="background" onmousedown="return false;"></div>
 <table width="100%" cellspacing="0" cellpadding="0">
   <td class="cell" valign="middle" align="center">
     <div class="box">
-      <div class="icon"><img src="phishing_icon.png" alt="Phishing Warning Icon" onmousedown="return false;"/></div>
-      <div class="title" jscontent="headLine"></div>
-      <div class="main" jseval="this.innerHTML = $this.description1;"></div>
-      <div class="main"><a href="" jscontent="description2" onclick="sendCommand('learnMore'); return false;" onmousedown="return false;"></a></div>
+      <div class="icon"><img src="phishing_icon.png" alt="Phishing Warning Icon" onmousedown="return false;"></div>
+      <div class="title" i18n-content="headLine"></div>
+      <div class="main" i18n-values=".innerHTML:description1"></div>
+      <div class="main"><a href="" i18n-content="description2" onclick="sendCommand('learnMore'); return false;" onmousedown="return false;"></a></div>
       <div class="main">
         <form class="submission">
-          <input type="button" name="continue_button" jsvalues="value:continue_button" onclick="sendCommand('proceed')">
-          <input type="button" name="back_button" jsvalues="value:back_button" onclick="sendCommand('takeMeBack')">
+          <input type="button" name="continue_button" i18n-values="value:continue_button" onclick="sendCommand('proceed')">
+          <input type="button" name="back_button" i18n-values="value:back_button" onclick="sendCommand('takeMeBack')">
         </form>
       </div>
-      <div class="main"><a href="" onclick="sendCommand('reportError'); return false;" onmousedown="return false;" jscontent="report_error"></a></div>
+      <div class="main"><a href="" onclick="sendCommand('reportError'); return false;" onmousedown="return false;" i18n-content="report_error"></a></div>
     </div>
   </td>
 </table>
diff --git a/chrome/browser/safe_browsing/safe_browsing_blocking_page.cc b/chrome/browser/safe_browsing/safe_browsing_blocking_page.cc
index 0e097b1..3a963c3 100644
--- a/chrome/browser/safe_browsing/safe_browsing_blocking_page.cc
+++ b/chrome/browser/safe_browsing/safe_browsing_blocking_page.cc
@@ -137,7 +137,7 @@ std::string SafeBrowsingBlockingPage::GetHTMLContents() {
     html = rb.GetDataResource(IDR_SAFE_BROWSING_PHISHING_BLOCK);
   }
 
-  return jstemplate_builder::GetTemplateHtml(html, &strings, "template_root");
+  return jstemplate_builder::GetTemplatesHtml(html, &strings, "template_root");
 }
 
 void SafeBrowsingBlockingPage::PopulateStringDictionary(
diff --git a/chrome/browser/security/resources/ssl_error.html b/chrome/browser/security/resources/ssl_error.html
index b8b4ad7..ccc978c 100644
--- a/chrome/browser/security/resources/ssl_error.html
+++ b/chrome/browser/security/resources/ssl_error.html
@@ -1,6 +1,7 @@
-<html id="template_root" jsvalues="dir:textdirection">
+<!DOCTYPE html>
+<html i18n-values="dir:textdirection">
 <head>
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <style type="text/css">
 body {
   background-color:#500;
@@ -78,7 +79,7 @@ input {
     div_to_show.style.display = "block";
   }
   function setDirectionSensitiveImages() {
-    if (document.getElementById("template_root").dir == 'rtl') {
+    if (document.documentElement.dir == 'rtl') {
       document.getElementById("twisty_closed_rtl").style.display = "inline";
      } else {
        document.getElementById("twisty_closed").style.display = "inline";
@@ -90,16 +91,16 @@ input {
 <script>
 document.addEventListener('DOMContentLoaded', setDirectionSensitiveImages);
 </script>
-<div class="background"><img src="ssl_roadblock_background.png" width="100%" height="100%" alt="background" onmousedown="return false;"/></div>
+<div class="background"><img src="ssl_roadblock_background.png" width="100%" height="100%" alt="background" onmousedown="return false;"></div>
 <table width="100%"  cellspacing="0" cellpadding="0">
   <td class="cell" valign="middle" align="center">
     <div class="box">
-      <div class="icon"><img src="ssl_roadblock_icon.png" alt="SSL Error Icon" onmousedown="return false;"/></div>
-      <div class="title" jscontent="headLine"></div>
-      <div class="main" jseval="this.innerHTML = $this.description;"></div>
+      <div class="icon"><img src="ssl_roadblock_icon.png" alt="SSL Error Icon" onmousedown="return false;"></div>
+      <div class="title" i18n-content="headLine"></div>
+      <div class="main" i18n-values=".innerHTML:description"></div>
       <div class="main">
         <form class="submission">
-          <input type="button" jsvalues="value:back" name="back" onClick="history.back()" />
+          <input type="button" i18n-values="value:back" name="back" onClick="history.back()">
         </form>
       </div>
       <div class="example" id="more_info_short">
@@ -108,19 +109,19 @@ document.addEventListener('DOMContentLoaded', setDirectionSensitiveImages);
        // resources. The script that does this looks for subresources like
        // images and inlines them, so we need to have references to both the
        // ltr and rtl versions statically. Just doing
-       // jsvalues="src:path_to_correct_image_set_by_c++" won't work, since
+       // i18n-values="src:path_to_correct_image_set_by_c++" won't work, since
        // the inlined version will just end up with that path string rather
        // than the inlined image.
       -->
-      <a href="#" onclick="toggleMoreInfo(false); return false;" onmousedown="return false;"><img id="twisty_closed" src="twisty_closed.png" border="0" style="display:none"/><img id="twisty_closed_rtl" src="twisty_closed_rtl.png" border="0" style="display:none"/><span jscontent="moreInfoTitle" class="moreinfotitle"></span></a>
+      <a href="#" onclick="toggleMoreInfo(false); return false;" onmousedown="return false;"><img id="twisty_closed" src="twisty_closed.png" border="0" style="display:none"><img id="twisty_closed_rtl" src="twisty_closed_rtl.png" border="0" style="display:none"><span i18n-content="moreInfoTitle" class="moreinfotitle"></span></a>
       </div>
       <div class="example" id="more_info_long" style="display:none;">
-        <a href="#" onclick="toggleMoreInfo(true); return false;" onmousedown="return false;"><img src="twisty_open.png" border="0" /><span jscontent="moreInfoTitle" class="moreinfotitle"></span></a>
-        <p jseval="this.innerHTML = $this.moreInfo1;"></p>
-        <p jseval="this.innerHTML = $this.moreInfo2;"></p>
-        <p jseval="this.innerHTML = $this.moreInfo3;"></p>
-        <p jseval="this.innerHTML = $this.moreInfo4;"></p>
-        <p jseval="this.innerHTML = $this.moreInfo5;"></p>
+        <a href="#" onclick="toggleMoreInfo(true); return false;" onmousedown="return false;"><img src="twisty_open.png" border="0"><span i18n-content="moreInfoTitle" class="moreinfotitle"></span></a>
+        <p i18n-values=".innerHTML:moreInfo1"></p>
+        <p i18n-values=".innerHTML:moreInfo2"></p>
+        <p i18n-values=".innerHTML:moreInfo3"></p>
+        <p i18n-values=".innerHTML:moreInfo4"></p>
+        <p i18n-values=".innerHTML:moreInfo5"></p>
       </div>
   </td>
 </table>
diff --git a/chrome/browser/security/resources/ssl_roadblock.html b/chrome/browser/security/resources/ssl_roadblock.html
index aa8f87f..2c16ac4 100644
--- a/chrome/browser/security/resources/ssl_roadblock.html
+++ b/chrome/browser/security/resources/ssl_roadblock.html
@@ -1,6 +1,7 @@
-<html id="template_root" jsvalues="dir:textdirection">
+<!DOCTYPE html>
+<html i18n-values="dir:textdirection">
 <head>
-<title jscontent="title"></title>
+<title i18n-content="title"></title>
 <style type="text/css">
 body {
   background-color:#500;
@@ -87,7 +88,7 @@ input {
     }
   }
   function setDirectionSensitiveImages() {
-    if ($("template_root").dir == 'rtl') {
+    if (document.documentElement.dir == 'rtl') {
       $("twisty_closed_rtl").style.display = "inline";
     } else {
       $("twisty_closed").style.display = "inline";
@@ -99,17 +100,17 @@ input {
 <script>
 document.addEventListener('DOMContentLoaded', setDirectionSensitiveImages);
 </script>
-<div class="background"><img src="ssl_roadblock_background.png" width="100%" height="100%" alt="background" onmousedown="return false;"/></div>
+<div class="background"><img src="ssl_roadblock_background.png" width="100%" height="100%" alt="background" onmousedown="return false;"></div>
 <table width="100%" cellspacing="0" cellpadding="0">
   <td class="cell" valign="middle" align="center">
     <div class="box">
-      <div class="icon"><img src="ssl_roadblock_icon.png" alt="SSL Error Icon" onmousedown="return false;"/></div>
-      <div class="title" jscontent="headLine"></div>
-      <div class="main" jseval="this.innerHTML = $this.description;"></div>
+      <div class="icon"><img src="ssl_roadblock_icon.png" alt="SSL Error Icon" onmousedown="return false;"></div>
+      <div class="title" i18n-content="headLine"></div>
+      <div class="main" i18n-values=".innerHTML:description"></div>
       <div class="main">
         <form class="submission">
-          <input type="button" jsvalues="value:proceed" name="proceed" class="proceedbutton" onClick="sendCommand(1);" />
-          <input type="button" jsvalues="value:exit" name="exit" onClick="sendCommand(0);" />
+          <input type="button" i18n-values="value:proceed" name="proceed" class="proceedbutton" onClick="sendCommand(1);">
+          <input type="button" i18n-values="value:exit" name="exit" onClick="sendCommand(0);">
         </form>
       </div>
       <div class="example" id="more_info_short">
@@ -118,19 +119,19 @@ document.addEventListener('DOMContentLoaded', setDirectionSensitiveImages);
        // resources. The script that does this looks for subresources like
        // images and inlines them, so we need to have references to both the
        // ltr and rtl versions statically. Just doing
-       // jsvalues="src:path_to_correct_image_set_by_c++" won't work, since
+       // i18n-values="src:path_to_correct_image_set_by_c++" won't work, since
        // the inlined version will just end up with that path string rather
        // than the inlined image.
       -->
-        <a href="#" onclick="toggleMoreInfo(false); return false;" onmousedown="return false;"><img id="twisty_closed" src="twisty_closed.png" border="0" style="display:none"/><img id="twisty_closed_rtl" src="twisty_closed_rtl.png" border="0" style="display:none"/><span jscontent="moreInfoTitle" class="moreinfotitle"></span></a>
+        <a href="#" onclick="toggleMoreInfo(false); return false;" onmousedown="return false;"><img id="twisty_closed" src="twisty_closed.png" border="0" style="display:none"><img id="twisty_closed_rtl" src="twisty_closed_rtl.png" border="0" style="display:none"><span i18n-content="moreInfoTitle" class="moreinfotitle"></span></a>
       </div>
       <div class="example" id="more_info_long" style="display:none;">
-        <a href="#" onclick="toggleMoreInfo(true); return false;" onmousedown="return false;"><img src="twisty_open.png" border="0" /><span jscontent="moreInfoTitle" class="moreinfotitle"></span></a>
-        <p jseval="this.innerHTML = $this.moreInfo1;"></p>
-        <p jseval="this.innerHTML = $this.moreInfo2;"></p>
-        <p jseval="this.innerHTML = $this.moreInfo3;"></p>
-        <p jseval="this.innerHTML = $this.moreInfo4;"></p>
-        <p jseval="this.innerHTML = $this.moreInfo5;"></p>
+        <a href="#" onclick="toggleMoreInfo(true); return false;" onmousedown="return false;"><img src="twisty_open.png" border="0"><span i18n-content="moreInfoTitle" class="moreinfotitle"></span></a>
+        <p i18n-values=".innerHTML:moreInfo1"></p>
+        <p i18n-values=".innerHTML:moreInfo2"></p>
+        <p i18n-values=".innerHTML:moreInfo3"></p>
+        <p i18n-values=".innerHTML:moreInfo4"></p>
+        <p i18n-values=".innerHTML:moreInfo5"></p>
       </div>
   </td>
 </table>
diff --git a/chrome/browser/ssl/ssl_blocking_page.cc b/chrome/browser/ssl/ssl_blocking_page.cc
index e7fe5bc..5d3e821 100644
--- a/chrome/browser/ssl/ssl_blocking_page.cc
+++ b/chrome/browser/ssl/ssl_blocking_page.cc
@@ -85,7 +85,7 @@ std::string SSLBlockingPage::GetHTMLContents() {
       ResourceBundle::GetSharedInstance().GetRawDataResource(
           IDR_SSL_ROAD_BLOCK_HTML));
 
-  return jstemplate_builder::GetTemplateHtml(html, &strings, "template_root");
+  return jstemplate_builder::GetI18nTemplateHtml(html, &strings);
 }
 
 void SSLBlockingPage::UpdateEntry(NavigationEntry* entry) {
diff --git a/chrome/browser/ssl/ssl_policy.cc b/chrome/browser/ssl/ssl_policy.cc
index d1b3bf3..4efad66 100644
--- a/chrome/browser/ssl/ssl_policy.cc
+++ b/chrome/browser/ssl/ssl_policy.cc
@@ -293,8 +293,8 @@ void SSLPolicy::ShowErrorPage(SSLCertErrorHandler* handler) {
       ResourceBundle::GetSharedInstance().GetRawDataResource(
           IDR_SSL_ERROR_HTML));
 
-  std::string html_text(jstemplate_builder::GetTemplateHtml(html, &strings,
-                                                            "template_root"));
+  std::string html_text(jstemplate_builder::GetI18nTemplateHtml(html,
+                                                                &strings));
 
   TabContents* tab  = handler->GetTabContents();
   int cert_id = CertStore::GetSharedInstance()->StoreCert(
diff --git a/chrome/common/common_resources.grd b/chrome/common/common_resources.grd
index 271d219..aa8c83a 100644
--- a/chrome/common/common_resources.grd
+++ b/chrome/common/common_resources.grd
@@ -10,6 +10,7 @@
   <release seq="1">
     <includes>
       <include name="IDR_JSTEMPLATE_JS" file="..\third_party\jstemplate\jstemplate_compiled.js" type="BINDATA" />
+      <include name="IDR_I18N_TEMPLATE_JS" file="..\browser\resources\i18n_template.js" type="BINDATA" />
     </includes>
   </release>
 </grit>
\ No newline at end of file
diff --git a/chrome/common/jstemplate_builder.cc b/chrome/common/jstemplate_builder.cc
index 8f2bab7..b47fed1 100644
--- a/chrome/common/jstemplate_builder.cc
+++ b/chrome/common/jstemplate_builder.cc
@@ -19,15 +19,35 @@ namespace jstemplate_builder {
 std::string GetTemplateHtml(const StringPiece& html_template,
                             const DictionaryValue* json,
                             const StringPiece& template_id) {
-  // fetch and cache the pointer of the jstemplate resource source text.
-  static const StringPiece jstemplate_src(
-    ResourceBundle::GetSharedInstance().GetRawDataResource(IDR_JSTEMPLATE_JS));
+  std::string output(html_template.data(), html_template.size());
+  AppendJsonHtml(json, &output);
+  AppendJsTemplateSourceHtml(&output);
+  AppendJsTemplateProcessHtml(template_id, &output);
+  return output;
+}
 
-  if (jstemplate_src.empty()) {
-    NOTREACHED() << "Unable to get jstemplate src";
-    return std::string();
-  }
+std::string GetI18nTemplateHtml(const StringPiece& html_template,
+                                const DictionaryValue* json) {
+  std::string output(html_template.data(), html_template.size());
+  AppendJsonHtml(json, &output);
+  AppendI18nTemplateSourceHtml(&output);
+  AppendI18nTemplateProcessHtml(&output);
+  return output;
+}
+
+std::string GetTemplatesHtml(const StringPiece& html_template,
+                             const DictionaryValue* json,
+                             const StringPiece& template_id) {
+  std::string output(html_template.data(), html_template.size());
+  AppendI18nTemplateSourceHtml(&output);
+  AppendJsTemplateSourceHtml(&output);
+  AppendJsonHtml(json, &output);
+  AppendI18nTemplateProcessHtml(&output);
+  AppendJsTemplateProcessHtml(template_id, &output);
+  return output;
+}
 
+void AppendJsonHtml(const DictionaryValue* json, std::string* output) {
   // Convert the template data to a json string.
   DCHECK(json) << "must include json data structure";
 
@@ -38,19 +58,59 @@ std::string GetTemplateHtml(const StringPiece& html_template,
   // replace </ with <\/.  The extra \ will be ignored by the JS engine.
   ReplaceSubstringsAfterOffset(&jstext, 0, "</", "<\\/");
 
-  std::string output(html_template.data(), html_template.size());
-  output.append("<script>");
-  output.append(jstemplate_src.data(), jstemplate_src.size());
-  output.append("var tp = document.getElementById('");
-  output.append(template_id.data(), template_id.size());
-  output.append("');");
-  output.append("var templateData = ");
-  output.append(jstext);
-  output.append(";");
-  output.append("jstProcess(new JsEvalContext(templateData), tp);");
-  output.append("</script>");
+  output->append("<script>");
+  output->append("var templateData = ");
+  output->append(jstext);
+  output->append(";");
+  output->append("</script>");
+}
 
-  return output;
+void AppendJsTemplateSourceHtml(std::string* output) {
+  // fetch and cache the pointer of the jstemplate resource source text.
+  static const StringPiece jstemplate_src(ResourceBundle::GetSharedInstance().
+      GetRawDataResource(IDR_JSTEMPLATE_JS));
+
+  if (jstemplate_src.empty()) {
+    NOTREACHED() << "Unable to get jstemplate src";
+    return;
+  }
+
+  output->append("<script>");
+  output->append(jstemplate_src.data(), jstemplate_src.size());
+  output->append("</script>");
+}
+
+void AppendJsTemplateProcessHtml(const StringPiece& template_id,
+                                 std::string* output) {
+  output->append("<script>");
+  output->append("var tp = document.getElementById('");
+  output->append(template_id.data(), template_id.size());
+  output->append("');");
+  output->append("jstProcess(new JsEvalContext(templateData), tp);");
+  output->append("</script>");
+}
+
+void AppendI18nTemplateSourceHtml(std::string* output) {
+  // fetch and cache the pointer of the jstemplate resource source text.
+  static const StringPiece i18n_template_src(
+      ResourceBundle::GetSharedInstance().GetRawDataResource(
+          IDR_I18N_TEMPLATE_JS));
+
+  if (i18n_template_src.empty()) {
+    NOTREACHED() << "Unable to get i18n template src";
+    return;
+  }
+
+  output->append("<script>");
+  output->append(i18n_template_src.data(), i18n_template_src.size());
+  output->append("</script>");
+}
+
+void AppendI18nTemplateProcessHtml(std::string* output) {
+  output->append("<script>");
+  output->append("i18nTemplate.process(document.documentElement, ");
+  output->append("templateData);");
+  output->append("</script>");
 }
 
 }  // namespace jstemplate_builder
diff --git a/chrome/common/jstemplate_builder.h b/chrome/common/jstemplate_builder.h
index 6d3d8d0..e1861d2 100644
--- a/chrome/common/jstemplate_builder.h
+++ b/chrome/common/jstemplate_builder.h
@@ -19,11 +19,49 @@ class DictionaryValue;
 class StringPiece;
 
 namespace jstemplate_builder {
-  // A helper function that generates a string of HTML to be loaded.  The
-  // string includes the HTML and the javascript code necessary to generate the
-  // full page.
-  std::string GetTemplateHtml(const StringPiece& html_template,
-                              const DictionaryValue* json,
-                              const StringPiece& template_id);
+
+// A helper function that generates a string of HTML to be loaded.  The
+// string includes the HTML and the javascript code necessary to generate the
+// full page with support for JsTemplates.
+std::string GetTemplateHtml(const StringPiece& html_template,
+                            const DictionaryValue* json,
+                            const StringPiece& template_id);
+
+// A helper function that generates a string of HTML to be loaded.  The
+// string includes the HTML and the javascript code necessary to generate the
+// full page with support for i18n Templates.
+std::string GetI18nTemplateHtml(const StringPiece& html_template,
+                                const DictionaryValue* json);
+
+// A helper function that generates a string of HTML to be loaded.  The
+// string includes the HTML and the javascript code necessary to generate the
+// full page with support for both i18n Templates and JsTemplates.
+std::string GetTemplatesHtml(const StringPiece& html_template,
+                             const DictionaryValue* json,
+                             const StringPiece& template_id);
+
+// The following functions build up the different parts that the above
+// templates use.
+
+// Appends a script tag with a variable name |templateData| that has the JSON
+// assigned to it.
+void AppendJsonHtml(const DictionaryValue* json, std::string* output);
+
+// Appends the source for JsTemplates in a script tag.
+void AppendJsTemplateSourceHtml(std::string* output);
+
+// Appends the code that processes the JsTemplate with the JSON. You should
+// call AppendJsTemplateSourceHtml and AppendJsonHtml before calling this.
+void AppendJsTemplateProcessHtml(const StringPiece& template_id,
+                                 std::string* output);
+
+// Appends the source for i18n Templates in a script tag.
+void AppendI18nTemplateSourceHtml(std::string* output);
+
+// Appends the code that processes the i18n Template with the JSON. You
+// should call AppendJsTemplateSourceHtml and AppendJsonHtml before calling
+// this.
+void AppendI18nTemplateProcessHtml(std::string* output);
+
 }  // namespace jstemplate_builder
 #endif  // CHROME_COMMON_JSTEMPLATE_BUILDER_H_
diff --git a/chrome/renderer/render_view.cc b/chrome/renderer/render_view.cc
index abe0cde..d9df8e4 100644
--- a/chrome/renderer/render_view.cc
+++ b/chrome/renderer/render_view.cc
@@ -2775,8 +2775,9 @@ std::string RenderView::GetAltHTMLForTemplate(
     NOTREACHED() << "unable to load template. ID: " << template_resource_id;
     return "";
   }
+
   // "t" is the id of the templates root node.
-  return jstemplate_builder::GetTemplateHtml(
+  return jstemplate_builder::GetTemplatesHtml(
       template_html, &error_strings, "t");
 }
 
diff --git a/chrome/renderer/resources/error_no_details.html b/chrome/renderer/resources/error_no_details.html
index 414be9a..2ae90e5 100644
--- a/chrome/renderer/resources/error_no_details.html
+++ b/chrome/renderer/resources/error_no_details.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html id="t" jsvalues="dir:textdirection">
+<!DOCTYPE html>
+<html id="t" i18n-values="dir:textdirection">
 <head>
-<title jscontent="title">
+<title i18n-content="title">
 </title>
-<style type="text/css"><!--
+<style>
 body {
  background-color: #fff;
  color: #000;
@@ -42,30 +42,28 @@ a:visited {
 #errorSummary, #suggestions, #search {
  margin-bottom: 2.5em;
 }
-//-->
 </style>
 </head>
-
 <body>
 
-<h1 jscontent="heading"></h1>
+<h1 i18n-content="heading"></h1>
 
 <div id="errorSummary" jsselect="summary">
- <p jseval="this.innerHTML = $this.msg;"></p>
+ <p jsvalues=".innerHTML:msg"></p>
 </div>
 
 <div id="suggestions">
- <h2 jscontent="suggestionsHeading"></h2>
+ <h2 i18n-content="suggestionsHeading"></h2>
  <ul>
   <li jsselect="suggestionsReload">
-    <span jseval="this.innerHTML = $this.msg;"></span>
+    <span jsvalues=".innerHTML:msg"></span>
   </li>
   <li jsselect="suggestionsHomepage">
     <span jscontent="suggestionsHomepageMsg"></span>
     <a jscontent="hostName" jsvalues="href:homePage"></a>
   </li>
   <li jsselect="suggestionsLearnMore">
-    <span jseval="this.innerHTML = $this.msg;"></span>
+    <span jsvalues=".innerHTML:msg"></span>
   </li>
  </ul>
 </div>
diff --git a/chrome/renderer/resources/neterror.html b/chrome/renderer/resources/neterror.html
index 4625561..1a2406a 100644
--- a/chrome/renderer/resources/neterror.html
+++ b/chrome/renderer/resources/neterror.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html id="t" jsvalues="dir:textdirection">
+<!DOCTYPE html>
+<html i18n-values="dir:textdirection">
 <head>
-<title jscontent="title">
+<title i18n-content="title">
 </title>
-<style type="text/css"><!--
+<style>
 body {
  background-color: #fff;
  color: #000;
@@ -56,7 +56,6 @@ a:visited {
   max-width: 30em;
   padding: 1em;
 }
-//-->
 </style>
 <script>
 function toggleDiv(id) {
@@ -66,26 +65,26 @@ function toggleDiv(id) {
 </script>
 </head>
 
-<body>
+<body id="t">
 
-<h1 jscontent="heading"></h1>
+<h1 i18n-content="heading"></h1>
 
 <div id="errorSummary" jsselect="summary">
- <p jseval="this.innerHTML = $this.msg;"></p>
+ <p jsvalues=".innerHTML:msg"></p>
 </div>
 
 <div id="suggestions">
- <h2 jscontent="suggestionsHeading"></h2>
+ <h2 i18n-content="suggestionsHeading"></h2>
  <ul>
   <li jsselect="suggestionsReload">
-    <span jseval="this.innerHTML = $this.msg;"></span>
+    <span jsvalues=".innerHTML:msg"></span>
   </li>
   <li jsselect="suggestionsHomepage">
     <span jscontent="suggestionsHomepageMsg"></span>
     <a jscontent="hostName" jsvalues="href:homePage"></a>
   </li>
   <li jsselect="suggestionsLearnMore">
-    <span jseval="this.innerHTML = $this.msg;"></span>
+    <span jsvalues=".innerHTML:msg"></span>
   </li>
  </ul>
 </div>
@@ -93,11 +92,11 @@ function toggleDiv(id) {
 <div>
  <a href="javascript:void(0);" style="text-decoration:none" onclick="toggleDiv('zipInfo')">
   <img id="plus" src="data:image/png;base64,R0lGODlhDAAMAMQAAAAAzOjp7lVmrezt8Zmlztja4c/R2Gx9te/x9srN1PHz9+7w9Ofp7eHj5/f4+vDx89bZ3t3g5eTn6/P19/v8+/////39/fj4+P///wAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABgALAAAAAAMAAwAAAVFYEUIZEkSolCt7CocKgsALdnOrGXLdEVdJMdsOHyQJkTigLRAKBQzxWIQIDGugRlD0miQIoXwDEKGCEaGhHqdeKVMJVQIADs=">
-  <span id="errorExpander" jscontent="detailsLink" style="text-decoration:underline"></span>
+  <span id="errorExpander" i18n-content="detailsLink" style="text-decoration:underline"></span>
  </a>
  <div id="zipInfo">
-  <p jscontent="detailsHeading"></p>
-  <div id="details" jscontent="details"></div>
+  <p i18n-content="detailsHeading"></p>
+  <div id="details" i18n-content="details"></div>
  </div>
 </div>
 </body>