Minimize flicker by adding a   to nodes that will have

their content replaced by i18n_process.js.

R=estade@chromium.org
BUG=466914

Review URL: https://codereview.chromium.org/1076093002

Cr-Commit-Position: refs/heads/master@{#324767}

4 files changed, 25 insertions, 10 deletions

diff --git a/ui/webui/resources/css/chrome_shared.css b/ui/webui/resources/css/chrome_shared.css
index 785e9d5..1cbafdd 100644
--- a/ui/webui/resources/css/chrome_shared.css
+++ b/ui/webui/resources/css/chrome_shared.css
@@ -6,6 +6,7 @@
  * chrome:// pages. */
 
 @import url(chrome://resources/css/text_defaults.css);
+@import url(i18n_process.css);
 @import url(widgets.css);
 <if expr="chromeos">
 @import url(chromeos/ui_account_tweaks.css);
diff --git a/ui/webui/resources/css/i18n_process.css b/ui/webui/resources/css/i18n_process.css
new file mode 100644
index 0000000..44ca4b2
--- /dev/null
+++ b/ui/webui/resources/css/i18n_process.css
@@ -0,0 +1,9 @@
+/* Copyright 2015 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+html:not(.i18n-processed) [i18n-content]::before,
+html:not(.i18n-processed) [i18n-values*=".innerHTML:"]::before {
+  /* Insert a non-breaking space into nodes that have i18n'd content. */
+  content: '\00a0';
+}
diff --git a/ui/webui/resources/js/i18n_template_no_process.js b/ui/webui/resources/js/i18n_template_no_process.js
index 6f1f715..4426281 100644
--- a/ui/webui/resources/js/i18n_template_no_process.js
+++ b/ui/webui/resources/js/i18n_template_no_process.js
@@ -122,11 +122,11 @@ var i18nTemplate = (function() {
 
   /**
    * Processes a DOM tree with the {@code dictionary} map.
-   * @param {HTMLElement} node The root of the DOM tree to process.
+   * @param {Document|Element} root The root of the DOM tree to process.
    * @param {LoadTimeData} dictionary The dictionary to draw from.
    */
-  function process(node, dictionary) {
-    var elements = node.querySelectorAll(selector);
+  function process(root, dictionary) {
+    var elements = root.querySelectorAll(selector);
     for (var element, i = 0; element = elements[i]; i++) {
       for (var j = 0; j < attributeNames.length; j++) {
         var name = attributeNames[j];
@@ -135,6 +135,9 @@ var i18nTemplate = (function() {
           handlers[name](element, attribute, dictionary);
       }
     }
+    var doc = root instanceof Document ? root : root.ownerDocument;
+    if (doc)
+      doc.documentElement.classList.add('i18n-processed');
   }
 
   return {
diff --git a/ui/webui/resources/webui_resources.grd b/ui/webui/resources/webui_resources.grd
index 7294e50..1ff2110 100644
--- a/ui/webui/resources/webui_resources.grd
+++ b/ui/webui/resources/webui_resources.grd
@@ -209,20 +209,25 @@ without changes to the corresponding grd file. -->
     <structures>
       <structure name="IDR_WEBUI_CSS_ALERT_OVERLAY"
                  file="css/alert_overlay.css" type="chrome_html" />
+      <structure name="IDR_WEBUI_CSS_APPS_COMMON"
+                 file="css/apps/common.css" type="chrome_html" />
+      <structure name="IDR_WEBUI_CSS_APPS_TOPBUTTON_BAR"
+                 file="css/apps/topbutton_bar.css" type="chrome_html" />
       <structure name="IDR_WEBUI_CSS_BUBBLE"
                  file="css/bubble.css" type="chrome_html" />
       <structure name="IDR_WEBUI_CSS_BUBBLE_BUTTON"
                  file="css/bubble_button.css" type="chrome_html" />
       <structure name="IDR_WEBUI_CSS_BUTTER_BAR"
                  file="css/butter_bar.css" type="chrome_html" />
+      <structure name="IDR_WEBUI_CSS_CHROME"
+                 file="css/chrome_shared.css" type="chrome_html"
+                 flattenhtml="true" />
       <structure name="IDR_WEBUI_CSS_CONTROLLED_INDICATOR"
                  file="css/controlled_indicator.css" type="chrome_html" />
-      <structure name="IDR_WEBUI_CSS_APPS_COMMON"
-                 file="css/apps/common.css" type="chrome_html" />
-      <structure name="IDR_WEBUI_CSS_APPS_TOPBUTTON_BAR"
-                 file="css/apps/topbutton_bar.css" type="chrome_html" />
       <structure name="IDR_WEBUI_CSS_DIALOGS"
                  file="css/dialogs.css" type="chrome_html" />
+      <structure name="IDR_WEBUI_CSS_I18N_PROCESS"
+                 file="css/i18n_process.css" type="chrome_html" />
       <structure name="IDR_WEBUI_CSS_LIST"
                  file="css/list.css" type="chrome_html" />
       <structure name="IDR_WEBUI_CSS_MENU"
@@ -231,9 +236,6 @@ without changes to the corresponding grd file. -->
       <structure name="IDR_WEBUI_CSS_MENU_BUTTON"
                  file="css/menu_button.css" type="chrome_html"
                  flattenhtml="true" />
-      <structure name="IDR_WEBUI_CSS_CHROME"
-                 file="css/chrome_shared.css" type="chrome_html"
-                 flattenhtml="true" />
       <structure name="IDR_WEBUI_CSS_TEXT_DEFAULTS"
                  file="css/text_defaults.css" type="chrome_html" />
       <structure name="IDR_WEBUI_CSS_OVERLAY"