Make LocalStrings work without manipulating the DOM.

BUG=None

TEST=Make sure that localized text on NTP, History and Downloads still
look the same.

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

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

6 files changed, 20 insertions, 102 deletions

diff --git a/chrome/browser/resources/downloads.html b/chrome/browser/resources/downloads.html
index 1678357..342ac42 100644
--- a/chrome/browser/resources/downloads.html
+++ b/chrome/browser/resources/downloads.html
@@ -142,46 +142,8 @@ html[dir='rtl'] .name {
   height:24px;
 }
 </style>
+<script src="local_strings.js"></script>
 <script>
-///////////////////////////////////////////////////////////////////////////////
-// localStrings:
-/**
- * We get strings into the page by using JSTemplate to populate some elements
- * with localized content, then reading the content of those elements into
- * this global strings object.
- * @param {Node} node The DOM node containing all our strings.
- */
-function LocalStrings(node) {
-  this.strings_ = {};
-
-  var children = node.children;
-  for (var i = 0, child; child = children[i]; i++) {
-    var id = child.id;
-    if (id) {
-      this.strings_[id] = child.innerHTML;
-    }
-  }
-}
-
-/**
- * Gets a localized string by its id.
- * @param {string} s The id of the string we want
- * @return {string} The localized string
- */
-LocalStrings.prototype.getString = function(s) {
-  return this.strings_[s] || '';
-}
-
-/**
- * Returns a formatted localized string (where all %s contents are replaced
- * by the second argument).
- * @param {string} s The id of the string we want
- * @param {string} d The string to include in the formatted string
- * @return {string} The formatted string.
- */
-LocalStrings.prototype.formatString = function(s, d) {
-  return this.getString(s).replace(/\%s/, d);
-}
 
 ///////////////////////////////////////////////////////////////////////////////
 // Helper functions
@@ -664,7 +626,7 @@ Download.prototype.cancel_ = function() {
 var downloads, localStrings, resultsTimeout;
 
 function load() {
-  localStrings = new LocalStrings($('l10n'));
+  localStrings = new LocalStrings();
   downloads = new Downloads();
   $('term').focus();
   setSearch("");
@@ -741,22 +703,5 @@ function downloadUpdated(results) {
 </div>
 <div class="footer">
 </div>
-<div id="l10n" style="display:none;">
-  <span id="searchresultsfor" jscontent="searchresultsfor">Search results for '%s'</span>
-  <span id="no_results" jscontent="no_results">No results found.</span>
-  <span id="downloads" jscontent="downloads">Downloads</span>
-
-  <span id="status_cancelled" jscontent="status_cancelled">Cancelled</span>
-  <span id="status_paused" jscontent="status_paused">Paused</span>
-
-  <span id="danger_desc" jscontent="danger_desc">This is a dangerous file</span>
-  <span id="danger_save" jscontent="danger_save">Save</span>
-  <span id="danger_discard" jscontent="danger_discard">Discard</span>
-
-  <span id="control_pause" jscontent="control_pause">Pause</span>
-  <span id="control_showinfolder" jscontent="control_showinfolder">Show in folder</span>
-  <span id="control_cancel" jscontent="control_cancel">Cancel</span>
-  <span id="control_resume" jscontent="control_resume">Resume</span>
-</div>
 </body>
 </html>
diff --git a/chrome/browser/resources/history.html b/chrome/browser/resources/history.html
index e3cee3c..bafc61e 100644
--- a/chrome/browser/resources/history.html
+++ b/chrome/browser/resources/history.html
@@ -700,7 +700,7 @@ PageState.getHashString = function(term, page) {
 function load() {
   $('term').focus();
 
-  localStrings = new LocalStrings($('l10n'));
+  localStrings = new LocalStrings();
   historyModel = new HistoryModel();
   historyView = new HistoryView(historyModel);
   pageState = new PageState(historyModel, historyView);
@@ -917,18 +917,5 @@ html[dir='rtl'] .entry .title > a {
 </div>
 <div class="footer">
 </div>
-<div id="l10n" style="display:none;">
-  <span id="loading" jscontent="loading">Loading...</span>
-  <span id="newest" jscontent="newest">&laquo; Newest</span>
-  <span id="newer" jscontent="newer">&#8249; Newer</span>
-  <span id="older" jscontent="older">Older &#8250;</span>
-  <span id="searchresultsfor" jscontent="searchresultsfor">Search results for '%s'</span>
-  <span id="history" jscontent="history">History</span>
-  <span id="cont" jscontent="cont">(cont.)</span>
-  <span id="noresults" jscontent="noresults">No results</span>
-  <span id="noitems" jscontent="noitems">No items</span>
-  <span id="deleteday" jscontent="deleteday">Delete history for this day</span>
-  <span id="deletedaywarning" jscontent="deletedaywarning">Are you sure you want to delete this day?</span>
-</div>
 </body>
 </html>
diff --git a/chrome/browser/resources/local_strings.js b/chrome/browser/resources/local_strings.js
index a7ea225..caeea36 100644
--- a/chrome/browser/resources/local_strings.js
+++ b/chrome/browser/resources/local_strings.js
@@ -1,21 +1,10 @@
-///////////////////////////////////////////////////////////////////////////////

-// localStrings:

 /**

- * We get strings into the page by using JSTemplate to populate some elements

- * with localized content, then reading the content of those elements into

- * this global strings object.

- * @param {Node} node The DOM node containing all our strings.

+ * The local strings get injected into the page usig a varaible named

+ * {@code templateData}. This class provides a simpler interface to access those

+ * strings.

+ * @constructor

  */

-function LocalStrings(node) {

-  this.strings_ = {};

-

-  var children = node.children;

-  for (var i = 0, child; child = children[i]; i++) {

-    var id = child.id;

-    if (id) {

-      this.strings_[id] = child.innerHTML;

-    }

-  }

+function LocalStrings() {

 }

 

 /**

@@ -24,7 +13,7 @@ function LocalStrings(node) {
  * @return {string} The localized string.

  */

 LocalStrings.prototype.getString = function(s) {

-  return this.strings_[s] || '';

+  return templateData[s] || '';

 };

 

 /**

@@ -35,5 +24,5 @@ LocalStrings.prototype.getString = function(s) {
  * @return {string} The formatted string.

  */

 LocalStrings.prototype.formatString = function(s, d) {

-  return this.getString(s).replace(/\%s/, d);

-};
\ No newline at end of file
+  return this.getString(s).replace(/%s/, d);

+};

diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index bae7d2f..7897c44 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -710,10 +710,6 @@ html[dir='rtl'] #searches input {
 </head>
 <body onload="logEvent('body onload fired');"
       jsvalues=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
-<div id="l10n" style="display:none;">
-  <span id="closedwindowsingle" jscontent="closedwindowsingle">1 Tab</span>
-  <span id="closedwindowmultiple" jscontent="closedwindowmultiple">% Tabs</span>
-</div>
 <script>
 // We apply the size class here so that we don't trigger layout animations onload.
 handleWindowResize();
@@ -1185,6 +1181,8 @@ function renderRecentlyClosedTabs(entries) {
 function recentlyClosedWindowText(numTabs) {
   if (numTabs == 1)
     return localStrings.getString('closedwindowsingle');
+  // TODO(arv): This should use localStrings.formatString but we need to update
+  // the grd file for that.
   return localStrings.getString('closedwindowmultiple').replace('%', numTabs);
 }
 
@@ -1356,7 +1354,7 @@ function viewLog() {
 
 logEvent('end of second script block');
 
-localStrings = new LocalStrings($('l10n'));
+localStrings = new LocalStrings();
 
 // We've got all the JS we need, render any unprocessed data.
 renderFunctionsDefined = true;
diff --git a/chrome/browser/resources/new_tab.html b/chrome/browser/resources/new_tab.html
index e65e0e8..59f2c70 100644
--- a/chrome/browser/resources/new_tab.html
+++ b/chrome/browser/resources/new_tab.html
@@ -360,10 +360,6 @@ html[hasattribution='false'] .attribution {
 </head>
 <body onload="updateAttribution(); logEvent('body onload fired');"
       jsvalues=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
-<div id="l10n" style="display:none;">
-  <span id="closedwindowsingle" jscontent="closedwindowsingle">1 Tab</span>
-  <span id="closedwindowmultiple" jscontent="closedwindowmultiple">% Tabs</span>
-</div>
 <script>
 // We apply the size class here so that we don't trigger layout animations onload.
 handleWindowResize();
@@ -987,7 +983,7 @@ function viewLog() {
 
 logEvent('end of second script block');
 
-localStrings = new LocalStrings($('l10n'));
+localStrings = new LocalStrings();
 
 // We've got all the JS we need, render any unprocessed data.
 renderFunctionsDefined = true;
diff --git a/chrome/common/jstemplate_builder.cc b/chrome/common/jstemplate_builder.cc
index 62e6a0f..8f2bab7 100644
--- a/chrome/common/jstemplate_builder.cc
+++ b/chrome/common/jstemplate_builder.cc
@@ -43,9 +43,12 @@ std::string GetTemplateHtml(const StringPiece& html_template,
   output.append(jstemplate_src.data(), jstemplate_src.size());
   output.append("var tp = document.getElementById('");
   output.append(template_id.data(), template_id.size());
-  output.append("'); var cx = new JsEvalContext(");
+  output.append("');");
+  output.append("var templateData = ");
   output.append(jstext);
-  output.append("); jstProcess(cx, tp);</script>");
+  output.append(";");
+  output.append("jstProcess(new JsEvalContext(templateData), tp);");
+  output.append("</script>");
 
   return output;
 }