[i18n] chromeos first run, i18n-content to $i18n{}

chrome/browser/resources/chromeos/first_run/app/main.html

Index: chrome/browser/resources/chromeos/first_run/app/main.html
diff --git a/chrome/browser/resources/chromeos/first_run/app/main.html b/chrome/browser/resources/chromeos/first_run/app/main.html
index 32e52a3c0bcdb1d13c29bdbb813cc02c9d3d8687..a8c6df813c6709e75b29d6874880aeedd7a74115 100644
--- a/chrome/browser/resources/chromeos/first_run/app/main.html
+++ b/chrome/browser/resources/chromeos/first_run/app/main.html
@@ -26,14 +26,14 @@
           </div>
         </div>
       </div>
-      <h1 i18n-content="greetingHeader"></h1>
+      <h1>$i18n{greetingHeader}</h1>
       <p>
-        <span i18n-content="greetingText1"></span><br>
-        <span i18n-content="greetingText2"></span>
+        <span>$i18n{greetingText1}</span><br>
+        <span>$i18n{greetingText2}</span>
       </p>

[dschuyler, 2017/01/11 23:06:13]

I'm intentionally resisting the urge to change this <p>, <span>, and <br> so
that this stays as a mechanical change.

[tommycli, 2017/01/12 00:53:14]

Well it looks like the only purpose of those spans before was to hold the
i18n-content. I worry future devs are going to look at this and wonder why these
spans exist.

[dschuyler, 2017/01/12 01:06:54]

It's a good worry. My worry is that if the changes happen together, the i18n
conversion will be reverted to fix a potential layout issue.

It's not trivial (doable, just not trivial) to prove that none of those elements
have unexpected styling by one of the many includes (ya can't just glance at
them and know that it's ok to pull them out). It's also hard to know whether a
UI designer was particular about the exact layout of these lines (the layout may
shift very slightly if these are changed).

My preference would be to do the changes in separate CLs so that if someone does
a git bisect to find out where layout changed, the i18n replacement won't be
compounded in the change. i.e. may I do it in a follow-up CL?

       <div class="controls">
-        <button i18n-content="greetingButton"
-            class="next-button custom-appearance blue-button" tabindex="0">
+        <button class="next-button custom-appearance blue-button" tabindex="0">
+          $i18n{greetingButton}
         </button>
       </div>
       <include src="greeting_image_[GREETING_IMAGE].html">