Move the shared JS and CSS out of the HTML files and into separate files.

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

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

6 files changed, 113 insertions, 117 deletions

diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
index 8ca4fd0..51ee1b0 100644
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -25,6 +25,8 @@ 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_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" />
       <if expr="os == 'linux2'">
diff --git a/chrome/browser/resources/dom_ui.css b/chrome/browser/resources/dom_ui.css
new file mode 100644
index 0000000..13e3756
--- /dev/null
+++ b/chrome/browser/resources/dom_ui.css
@@ -0,0 +1,32 @@
+body {

+  background-color:white;

+  color:black;

+  margin:10px;

+}

+.header {

+  overflow:auto;

+  clear:both;

+}

+.header .logo {

+  float:left;

+}

+.header .form {

+  float:left;

+  margin-top:22px;

+  margin-left:12px;

+}

+html[dir='rtl'] .logo {

+  float:right;

+}

+html[dir='rtl'] .form {

+  float:right;

+  margin-right:12px;

+}

+.page-navigation {

+  padding:8px;

+  background-color:#ebeff9;

+  margin-right:4px;

+}

+.footer {

+  height:24px;

+}
\ No newline at end of file
diff --git a/chrome/browser/resources/history.html b/chrome/browser/resources/history.html
index a33b821..c9ecac7 100644
--- a/chrome/browser/resources/history.html
+++ b/chrome/browser/resources/history.html
@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <title jscontent="title"></title>
 <link rel="icon" href="../../app/theme/history_favicon.png">
+<script src="local_strings.js"></script>
 <script>
 ///////////////////////////////////////////////////////////////////////////////
 // Globals:
@@ -37,45 +38,6 @@ var pageState;
 var deleteQueue = [];
 var deleteInFlight = false;
 
-///////////////////////////////////////////////////////////////////////////////
-// 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);
-}
 
 ///////////////////////////////////////////////////////////////////////////////
 // Page:
@@ -805,31 +767,8 @@ function historyDeleted() {
   historyView.reload();
 }
 </script>
+<link rel="stylesheet" href="dom_ui.css">
 <style>
-body {
-  background-color:white;
-  color:black;
-  margin:10px;
-}
-.header {
-  overflow:auto;
-  clear:both;
-}
-.header .logo {
-  float:left;
-}
-.header .form {
-  float:left;
-  margin-top:22px;
-  margin-left:12px;
-}
-html[dir='rtl'] .logo {
-  float:right;
-}
-html[dir='rtl'] .form {
-  float:right;
-  margin-right:12px;
-}
 #results-summary {
   margin-top:12px;
   border-top:1px solid #9cc2ef;
@@ -909,14 +848,7 @@ html[dir='rtl'] .entry .title a {
   padding-top:24px;
   margin-left:18px;
 }
-.page-navigation {
-  padding:8px;
-  background-color:#ebeff9;
-  margin-right:4px;
-}
-.footer {
-  height:24px;
-}
+
 </style>
 </head>
 <body onload="load();" jsvalues=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
diff --git a/chrome/browser/resources/local_strings.js b/chrome/browser/resources/local_strings.js
new file mode 100644
index 0000000..a7ea225
--- /dev/null
+++ b/chrome/browser/resources/local_strings.js
@@ -0,0 +1,39 @@
+///////////////////////////////////////////////////////////////////////////////

+// 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);

+};
\ No newline at end of file
diff --git a/chrome/browser/resources/new_tab.html b/chrome/browser/resources/new_tab.html
index c1dab9c..586d1cf 100644
--- a/chrome/browser/resources/new_tab.html
+++ b/chrome/browser/resources/new_tab.html
@@ -15,6 +15,7 @@
  If the requests for content come back before the content-rendering functions
  are defined, the data is held until those functions are defined.
 -->
+<script src="local_strings.js"></script>
 <script>
 /* Logging info for benchmarking purposes. */
 var log = [];
@@ -33,7 +34,6 @@ var unprocessedData = {
 
 var renderFunctionsDefined = false;
 
-// TODO(glen): Merge into common file used by this and history.
 var localStrings;
 
 // The list of URLs that have been blacklisted (so that thumbnails are not
@@ -41,46 +41,6 @@ var localStrings;
 // button is pressed.
 var blacklistedURLs = [];
 
-///////////////////////////////////////////////////////////////////////////////
-// 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);
-}
-
 function $(o) {return document.getElementById(o);}
 
 /**
diff --git a/tools/grit/grit/format/html_inline.py b/tools/grit/grit/format/html_inline.py
index 9871fbd..e5bb2f4 100755
--- a/tools/grit/grit/format/html_inline.py
+++ b/tools/grit/grit/format/html_inline.py
@@ -37,7 +37,7 @@ def ReadFile(input_filename):
   f.close()
   return file_contents
 
-def SrcInline(src_match, base_path, distribution):
+def SrcInlineAsDataURL(src_match, base_path, distribution):
   """regex replace function.
 
   Takes a regex match for src="filename", attempts to read the file
@@ -88,16 +88,47 @@ def InlineFile(input_filename, output_filename):
       distribution = distribution[1:].lower()
 
   def SrcReplace(src_match):
-    """Helper function to provide SrcInline with the base file path"""
-    return SrcInline(src_match, input_filepath, distribution)
+    """Helper function to provide SrcInlineAsDataURL with the base file path"""
+    return SrcInlineAsDataURL(src_match, input_filepath, distribution)
+
+  def InlineFileContents(src_match, pattern):
+    """Helper function to inline external script and css files"""
+    filename = src_match.group('filename')
+
+    if filename.find(':') != -1:
+      # filename is probably a URL, which we don't want to bother inlining
+      return src_match.group(0)
+
+    filename = filename.replace('%DISTRIBUTION%', distribution)
+    filepath = os.path.join(input_filepath, filename)
+
+    return pattern % ReadFile(filepath)
+
+  def InlineScript(src_match):
+    """Helper function to inline external script files"""
+    return InlineFileContents(src_match, '<script>%s</script>')
+
+  def InlineCss(src_match):
+    """Helper function to inline external css files"""
+    return InlineFileContents(src_match, '<style>%s</style>')
+
+  # We need to inline css and js before we inline images so that image
+  # references gets inlined in the css and js
+  flat_text = re.sub('<script .*?src="(?P<filename>[^"\']*)".*?></script>',
+                     InlineScript,
+                     ReadFile(input_filename))
+
+  flat_text = re.sub('<link rel="stylesheet".+?href="(?P<filename>[^"\']*)".*?>',
+                     InlineCss,
+                     flat_text)
 
   # TODO(glen): Make this regex not match src="" text that is not inside a tag
   flat_text = re.sub('src="(?P<filename>[^"\']*)"',
                      SrcReplace,
-                     ReadFile(input_filename))
+                     flat_text)
 
   # TODO(glen): Make this regex not match url('') that is not inside a style
-  flat_text = re.sub('background:[ ]*url\(\'(?P<filename>[^"\']*)\'',
+  flat_text = re.sub('background(?:-image)?:[ ]*url\(\'(?P<filename>[^"\']*)\'',
                      SrcReplace,
                      flat_text)