[i18n] options chromeos to $i18n{}

This CL updates the options/chromeos html from the old i18n-content and
values to $i18n{} replacements.

TBR=stevenjb@chromium.org

Bug: 677338
Change-Id: I24685ac591b8116baa52fe059f5076d7c1674232
Reviewed-on: https://chromium-review.googlesource.com/563608
Commit-Queue: Dave Schuyler <dschuyler@chromium.org>
Reviewed-by: Tommy Li <tommycli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#485111}

chrome/browser/resources/options/chromeos/accounts_options.html

 <div id="accountsPage" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="accountsPage"></h1>
+  <h1>$i18n{accountsPage}</h1>
   <div class="content-area">
     <div class="option">
       <div id="ownerOnlyWarning" hidden>
-        <span i18n-content="owner_only"></span>
-        <span i18n-content="ownerUserId"></span>
+        <span>$i18n{owner_only}</span>
+        <span>$i18n{ownerUserId}</span>
       </div>
       <table class="option-control-table">
       <tr>
@@ -15,7 +15,7 @@
               <input id="allowBwsiCheck" type="checkbox"
                      metric="Options_GuestBrowsing"
                      pref="cros.accounts.allowBWSI">
-              <span i18n-content="allow_BWSI"></span>
+              <span>$i18n{allow_BWSI}</span>
             </label>
           </div>
         </td>
@@ -27,7 +27,7 @@
               <input id="allowSupervisedCheck" type="checkbox"
                      metric="Options_SupervisedUsers"
                      pref="cros.accounts.supervisedUsersEnabled">
-              <span i18n-content="allow_supervised_users"></span>
+              <span>$i18n{allow_supervised_users}</span>
             </label>
           </div>
         </td>
@@ -39,7 +39,7 @@
               <input id="showUserNamesCheck" type="checkbox"
                      metric="Options_ShowUserNamesOnSignin"
                      pref="cros.accounts.showUserNamesOnSignIn">
-              <span i18n-content="show_user_on_signin"></span>
+              <span>$i18n{show_user_on_signin}</span>
             </label>
           </div>
         </td>
@@ -52,7 +52,7 @@
                      metric="Options_AllowAllUsers"
                      pref="cros.accounts.allowGuest"
                      inverted_pref>
-              <span i18n-content="use_whitelist"></span>
+              <span>$i18n{use_whitelist}</span>
             </label>
           </div>
         </td>
@@ -64,9 +64,9 @@
             <list id="userList"></list>
           </td></tr>
           <tr><td class="user-name-edit-row">
-            <label><span i18n-content="add_users"></span><br>
+            <label><span>$i18n{add_users}</span><br>
             <input id="userNameEdit" type="text"
-                i18n-values="placeholder:username_edit_hint">
+                placeholder="$i18n{username_edit_hint}">
             </span>
             </label>
           </td></tr>
@@ -77,8 +77,8 @@
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="accounts-options-overlay-confirm" class="default-button"
-          i18n-content="done">
+      <button id="accounts-options-overlay-confirm" class="default-button">
+        $i18n{done}
       </button>
     </div>
   </div>

chrome/browser/resources/options/chromeos/arc_opt_out_confirm_overlay.html

 <div id="arc-opt-out-confirm-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="arcOptOutDialogHeader"></h1>
+  <h1>$i18n{arcOptOutDialogHeader}</h1>
   <div class="content-area">
-    <span id="arc-opt-out-confirm-text"
-          i18n-values=".innerHTML:arcOptOutDialogDescription">
+    <span id="arc-opt-out-confirm-text">
+      $i18nRaw{arcOptOutDialogDescription}
     </span>
   </div>
   <div class="action-area">
     <div class="action-area-right">
       <div class="button-strip">
-        <button id="arc-opt-out-confirm-cancel"
-            i18n-content="arcOptOutDialogButtonCancel">
+        <button id="arc-opt-out-confirm-cancel">
+          $i18n{arcOptOutDialogButtonCancel}
         </button>
-        <button id="arc-opt-out-confirm-ok"
-            i18n-content="arcOptOutDialogButtonConfirmDisable">
+        <button id="arc-opt-out-confirm-ok">
+          $i18n{arcOptOutDialogButtonConfirmDisable}
         </button>
       </div>
     </div>

chrome/browser/resources/options/chromeos/bluetooth_add_device_overlay.html

 <div id="bluetooth-options" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="bluetoothAddDeviceTitle"></h1>
+  <h1>$i18n{bluetoothAddDeviceTitle}</h1>
   <div class="settings-list bluetooth-device-list content-area">
     <list id="bluetooth-unpaired-devices-list"></list>
     <div id="bluetooth-unpaired-devices-list-empty-placeholder"
         class="bluetooth-empty-list-label" hidden>
-      <span i18n-content="bluetoothNoDevicesFound"></span>
+      <span>$i18n{bluetoothNoDevicesFound}</span>
     </div>
   </div>
   <div class="action-area button-strip">
-    <button id="bluetooth-add-device-cancel-button" type="reset"
-        i18n-content="cancel">
+    <button id="bluetooth-add-device-cancel-button" type="reset">
+      $i18n{cancel}
     </button>
     <button id="bluetooth-add-device-apply-button" type="submit"
-        class="default-button" i18n-content="bluetoothConnectDevice" disabled>
+        class="default-button" disabled>
+      $i18n{bluetoothConnectDevice}
     </button>
-    <span id="bluetooth-scanning-label"
-        i18n-content="bluetoothScanning">
-    </span>
-    <span id="bluetooth-scan-stopped-label"
-        i18n-content="bluetoothScanStopped">
-    </span>
+    <span id="bluetooth-scanning-label">$i18n{bluetoothScanning}</span>
+    <span id="bluetooth-scan-stopped-label">$i18n{bluetoothScanStopped}</span>
     <div id="bluetooth-scanning-icon" class="inline-spinner"></div>
   </div>
 </div>

chrome/browser/resources/options/chromeos/bluetooth_pair_device_overlay.html

 <div id="bluetooth-pairing" class="page" hidden>
   <div id="bluetooth-pairing-close-button" class="close-button"></div>
-  <h1 i18n-content="bluetoothAddDeviceTitle"></h1>
+  <h1>$i18n{bluetoothAddDeviceTitle}</h1>
   <div id="bluetooth-pairing-message-area" class="content-area">
     <div id="bluetooth-pairing-message-contents">
       <div id="bluetooth-pairing-instructions"></div>
@@ -14,15 +14,20 @@
     </div>
   </div>
   <div class="action-area button-strip">
-    <button id="bluetooth-pair-device-cancel-button" type="reset"
-        i18n-content="cancel" hidden></button>
-    <button id="bluetooth-pair-device-connect-button" type="reset"
-        i18n-content="bluetoothConnectDevice" hidden></button>
-    <button id="bluetooth-pair-device-reject-button" type="reset"
-        i18n-content="bluetoothRejectPasskey" hidden></button>
-    <button id="bluetooth-pair-device-accept-button" type="reset"
-        i18n-content="bluetoothAcceptPasskey" hidden></button>
-    <button id="bluetooth-pair-device-dismiss-button" type="reset"
-        i18n-content="bluetoothDismissError" hidden></button>
+    <button id="bluetooth-pair-device-cancel-button" type="reset" hidden>
+      $i18n{cancel}
+    </button>
+    <button id="bluetooth-pair-device-connect-button" type="reset" hidden>
+      $i18n{bluetoothConnectDevice}
+    </button>
+    <button id="bluetooth-pair-device-reject-button" type="reset" hidden>
+      $i18n{bluetoothRejectPasskey}
+    </button>
+    <button id="bluetooth-pair-device-accept-button" type="reset" hidden>
+      $i18n{bluetoothAcceptPasskey}
+    </button>
+    <button id="bluetooth-pair-device-dismiss-button" type="reset" hidden>
+      $i18n{bluetoothDismissError}
+    </button>
   </div>
 </div>

chrome/browser/resources/options/chromeos/change_picture_options.html

 <div id="change-picture-page" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="changePicturePage"></h1>
+  <h1>$i18n{changePicturePage}</h1>
   <div class="content-area">
-    <div i18n-content="changePicturePageDescription"></div>
+    <div>$i18n{changePicturePageDescription}</div>
     <div id="user-images-area">
       <grid id="user-image-grid" class="user-image-picker" tabindex="1"></grid>
       <div id="user-image-preview">
-        <img id="user-image-preview-img" i18n-values="alt:previewAltText">
+        <img id="user-image-preview-img" alt="$i18n{previewAltText}">
         <div class="user-image-stream-area">
           <div class="perspective-box">
             <div id="user-image-stream-crop">
@@ -15,24 +15,25 @@
           </div>
           <div class="spinner"></div>
         </div>
-        <button id="discard-photo" i18n-values="title:discardPhoto"
-            tabindex="2"></button>
-        <button id="take-photo" i18n-values="title:takePhoto" tabindex="2">
+        <button id="discard-photo" title="$i18n{discardPhoto}" tabindex="2">
+        </button>
+        <button id="take-photo" title="$i18n{takePhoto}" tabindex="2">
         </button>
         <button id="flip-photo" class="custom-appearance"
-            i18n-values="title:flipPhoto" tabindex="1"></button>
+            title="$i18n{flipPhoto}" tabindex="1"></button>
       </div>
     </div>
     <div id="user-image-attribution">
-      <span i18n-content="authorCredit"></span>
+      <span>$i18n{authorCredit}</span>
       <strong id="user-image-author-name"></strong>
       <a id="user-image-author-website" target="_blank"></a>
     </div>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="change-picture-overlay-confirm" i18n-content="done"
-              tabindex="2"></button>
+      <button id="change-picture-overlay-confirm" tabindex="2">
+        $i18n{done}
+      </button>
     </div>
   </div>
 </div>

chrome/browser/resources/options/chromeos/display_options.html

 <div id="display-options-page" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="displayOptionsPage"></h1>
+  <h1>$i18n{displayOptionsPage}</h1>
   <div class="content-area" id="display-options-content-area">
     <div id="display-options-displays-view-host">
     </div>
@@ -8,16 +8,17 @@
       <div id="selected-display-data-container">
         <div id="selected-display-name"></div>
         <div class="selected-display-option-row">
-          <div class="selected-display-option-title"
-              i18n-content="selectedDisplayTitleOptions">
+          <div class="selected-display-option-title">
+            $i18n{selectedDisplayTitleOptions}
           </div>
           <select id="display-options-select-mirroring"
               class="display-options-button">
-            <option value="extended" i18n-content="extendedMode"></option>
-            <option value="mirroring" i18n-content="mirroringMode"></option>
+            <option value="extended">$i18n{extendedMode}</option>
+            <option value="mirroring">$i18n{mirroringMode}</option>
           </select>
           <button id="display-options-set-primary"
-              class="display-options-button2" i18n-content="setPrimary">
+              class="display-options-button2">
+            $i18n{setPrimary}
           </button>
         </div>
         <div id="display-options-unified-desktop"
@@ -27,43 +28,44 @@
           </div>
           <label>
             <input id="display-options-toggle-unified-desktop" type="checkbox">
-            <span class="controlled-setting-with-label"
-                i18n-content="enableUnifiedDesktop"></span>
+            <span class="controlled-setting-with-label">
+              $i18n{enableUnifiedDesktop}
+            </span>
           </label>
         </div>
         <div class="selected-display-option-row">
-          <div class="selected-display-option-title"
-              i18n-content="selectedDisplayTitleResolution">
+          <div class="selected-display-option-title">
+            $i18n{selectedDisplayTitleResolution}
           </div>
           <select id="display-options-resolution-selection"
               class="display-options-button">
           </select>
         </div>
         <div class="selected-display-option-row">
-          <div class="selected-display-option-title"
-              i18n-content="selectedDisplayTitleOrientation">
+          <div class="selected-display-option-title">
+            $i18n{selectedDisplayTitleOrientation}
           </div>
           <select id="display-options-orientation-selection"
               class="display-options-button">
-            <option value="0" i18n-content="orientation0"></option>
-            <option value="90" i18n-content="orientation90"></option>
-            <option value="180" i18n-content="orientation180"></option>
-            <option value="270" i18n-content="orientation270"></option>
+            <option value="0">$i18n{orientation0}</option>
+            <option value="90">$i18n{orientation90}</option>
+            <option value="180">$i18n{orientation180}</option>
+            <option value="270">$i18n{orientation270}</option>
           </select>
         </div>
         <div class="selected-display-option-row">
-          <div class="selected-display-option-title"
-              i18n-content="selectedDisplayTitleOverscan">
+          <div class="selected-display-option-title">
+            $i18n{selectedDisplayTitleOverscan}
           </div>
           <button id="selected-display-start-calibrating-overscan"
-              class="display-options-button"
-              i18n-content="startCalibratingOverscan">
+              class="display-options-button">
+            $i18n{startCalibratingOverscan}
           </button>
         </div>
         <div class="selected-display-option-row"
             id="selected-display-color-profile-row" hidden>
-          <div class="selected-display-option-title"
-              i18n-content="selectedDisplayColorProfile">
+          <div class="selected-display-option-title">
+            $i18n{selectedDisplayColorProfile}
           </div>
           <select id="display-options-color-profile-selection"
               class="display-options-button">
@@ -78,8 +80,9 @@
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="display-options-done" i18n-content="done"
-          class="default-button"></button>
+      <button id="display-options-done" class="default-button">
+        $i18n{done}
+      </button>
     </div>
   </div>
 </div>

chrome/browser/resources/options/chromeos/display_overscan.html

@@ -9,22 +9,20 @@
           <div id="display-overscan-operation-shift"></div></td>
       </tr>
       <tr>
-        <td><span i18n-content="shrinkAndExpand"></span></td>
-        <td><span i18n-content="move"></span></td>
+        <td><span>$i18n{shrinkAndExpand}</span></td>
+        <td><span>$i18n{move}</span></td>
       </tr>
     </table>
     <!-- Specify 'reversed' to prevernt re-reversing the button order by
          options_page. -->
     <div class="button-strip" id="display-overscan-button-strip" reversed>
-      <button id="display-overscan-operation-reset"
-          i18n-content="overscanReset">
+      <button id="display-overscan-operation-reset">
+        $i18n{overscanReset}
       </button>
       <div id="display-overscan-buttons-spacer"></div>
-      <button id="display-overscan-operation-ok"
-          i18n-content="overscanOK">
-      </button>
-      <button id="display-overscan-operation-cancel"
-          i18n-content="overscanCancel">
+      <button id="display-overscan-operation-ok">$i18n{overscanOK}</button>
+      <button id="display-overscan-operation-cancel">
+        $i18n{overscanCancel}
       </button>
     </div>
   </div>

chrome/browser/resources/options/chromeos/keyboard_overlay.html

 <div id="keyboard-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="keyboardOverlay"></h1>
+  <h1>$i18n{keyboardOverlay}</h1>
   <div class="content-area">
     <table class="option-control-table">
        <tr>
-         <td class="option-name" id="remap-search-key-to-label"
-             i18n-content="remapSearchKeyToContent">
+         <td class="option-name" id="remap-search-key-to-label">
+           $i18n{remapSearchKeyToContent}
          </td>
          <td class="option-value">
            <select class="control"
@@ -17,8 +17,8 @@
          </td>
        </tr>
        <tr>
-         <td class="option-name" id="remap-control-key-to-label"
-             i18n-content="remapControlKeyToContent">
+         <td class="option-name" id="remap-control-key-to-label">
+           $i18n{remapControlKeyToContent}
          </td>
          <td class="option-value">
            <select class="control"
@@ -30,8 +30,8 @@
          </td>
        </tr>
        <tr>
-         <td class="option-name" id="remap-alt-key-to-label"
-             i18n-content="remapAltKeyToContent">
+         <td class="option-name" id="remap-alt-key-to-label">
+           $i18n{remapAltKeyToContent}
          </td>
          <td class="option-value">
            <select class="control" data-type="number"
@@ -44,8 +44,8 @@
        <!-- The caps lock section is hidden by default. This is only visible
             when --has-chromeos-keyboard flag is not passed. -->
        <tr id="caps-lock-remapping-section" hidden>
-         <td class="option-name" id="remap-caps-lock-key-to-label"
-               i18n-content="remapCapsLockKeyToContent">
+         <td class="option-name" id="remap-caps-lock-key-to-label">
+           $i18n{remapCapsLockKeyToContent}
          </td>
          <td class="option-value">
            <select class="control"
@@ -60,8 +60,8 @@
        <!-- The diamond key section is hidden by default. This is only visible
             when --has-chromeos-diamond-key flag is passed. -->
        <tr id="diamond-key-remapping-section" hidden>
-         <td class="option-name" id="remap-diamond-key-to-label"
-             i18n-content="remapDiamondKeyToContent">
+         <td class="option-name" id="remap-diamond-key-to-label">
+           $i18n{remapDiamondKeyToContent}
          </td>
          <td class="option-value">
            <select class="control"
@@ -74,8 +74,8 @@
          </td>
        </tr>
        <tr>
-         <td class="option-name" id="remap-backspace-key-to-label"
-             i18n-content="remapBackspaceKeyToContent">
+         <td class="option-name" id="remap-backspace-key-to-label">
+           $i18n{remapBackspaceKeyToContent}
          </td>
          <td class="option-value">
            <select class="control" data-type="number"
@@ -87,8 +87,8 @@
          </td>
        </tr>
        <tr>
-         <td class="option-name" id="remap-escape-key-to-label"
-             i18n-content="remapEscapeKeyToContent">
+         <td class="option-name" id="remap-escape-key-to-label">
+           $i18n{remapEscapeKeyToContent}
          </td>
          <td class="option-value">
            <select class="control" data-type="number"
@@ -106,14 +106,15 @@
               pref="settings.language.send_function_keys"
               aria-describedby="send-function-keys-description" dialog-pref>
           <span>
-            <span i18n-content="sendFunctionKeys"></span>
+            <span>$i18n{sendFunctionKeys}</span>
             <span class="bubble-button controlled-setting-indicator"
                 pref="settings.language.send_function_keys"></span>
           </span>
         </label>
       </div>
-      <span id="send-function-keys-description"
-          i18n-content="sendFunctionKeysDescription"></span>
+      <span id="send-function-keys-description">
+        $i18n{sendFunctionKeysDescription}
+      </span>
     </div>
     <div class="settings-row">
       <div class="checkbox">
@@ -121,39 +122,41 @@
           <input id="enable-auto-repeat" type="checkbox"
               pref="settings.language.xkb_auto_repeat_enabled_r2"
               metric="Options_KeyboardAutoRepeat" dialog-pref>
-          <span i18n-content="enableAutoRepeat"></span>
+          <span>$i18n{enableAutoRepeat}</span>
         </label>
       </div>
       <div id="auto-repeat-settings-section">
         <div class="row">
-          <span class="option-name" i18n-content="autoRepeatDelay"></span>
-            <span i18n-content="autoRepeatDelayLong"></span>
+          <span class="option-name">$i18n{autoRepeatDelay}</span>
+            <span>$i18n{autoRepeatDelayLong}</span>
             <input id="auto-repeat-delay-range" type="range"
                 class="touch-slider" metric="Options_KeyboardAutoRepeat_Delay"
                 pref="settings.language.xkb_auto_repeat_delay_r2" dialog-pref>
-            <span i18n-content="autoRepeatDelayShort"></span>
+            <span>$i18n{autoRepeatDelayShort}</span>
           </div>
           <div class="row">
-            <span class="option-name" i18n-content="autoRepeatRate"></span>
-            <span i18n-content="autoRepeatRateSlow"></span>
+            <span class="option-name">$i18n{autoRepeatRate}</span>
+            <span>$i18n{autoRepeatRateSlow}</span>
             <input id="auto-repeat-interval-range" type="range"
                 class="touch-slider"
                 pref="settings.language.xkb_auto_repeat_interval_r2"
                 metric="Options_KeyboardAutoRepeat_Interval" dialog-pref>
-            <span i18n-content="autoRepeatRateFast"></span>
+            <span>$i18n{autoRepeatRateFast}</span>
           </div>
       </div>
     </div>
-    <a is="action-link" id="keyboard-shortcuts" class="settings-row"
-        i18n-content="showKeyboardShortcuts"></a>
-    <a is="action-link" id="languages-and-input-settings" class="settings-row"
-        i18n-content="changeLanguageAndInputSettings"></a>
+    <a is="action-link" id="keyboard-shortcuts" class="settings-row">
+      $i18n{showKeyboardShortcuts}
+    </a>
+    <a is="action-link" id="languages-and-input-settings" class="settings-row">
+      $i18n{changeLanguageAndInputSettings}
+    </a>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="keyboard-cancel" type="reset" i18n-content="cancel"></button>
-      <button id="keyboard-confirm" class="default-button" type="submit"
-          i18n-content="ok">
+      <button id="keyboard-cancel" type="reset">$i18n{cancel}</button>
+      <button id="keyboard-confirm" class="default-button" type="submit">
+        $i18n{ok}
       </button>
     </div>
   </div>

chrome/browser/resources/options/chromeos/pointer_overlay.html

@@ -2,12 +2,12 @@
   <div class="close-button"></div>
   <div class="content-area">
     <section id="pointer-section-touchpad" hidden>
-      <h3 i18n-content="pointerOverlaySectionTitleTouchpad"></h3>
+      <h3>$i18n{pointerOverlaySectionTitleTouchpad}</h3>
       <div class="checkbox">
         <label>
           <input type="checkbox" metric="Options_TouchpadTapToClick"
               pref="settings.touchpad.enable_tap_to_click" dialog-pref>
-          <span i18n-content="enableTapToClick"></span>
+          <span>$i18n{enableTapToClick}</span>
         </label>
       </div>
       <div class="radio" id="touchpad-scroll-direction">
@@ -15,7 +15,7 @@
           <input type="radio" name="touchpad-scroll-direction" value="false"
               metric="Options_TouchpadNaturalScroll"
               pref="settings.touchpad.natural_scroll" dialog-pref>
-          <span i18n-content="traditionalScroll"></span>
+          <span>$i18n{traditionalScroll}</span>
         </label>
       </div>
       <div class="radio">
@@ -23,27 +23,26 @@
           <input type="radio" name="touchpad-scroll-direction" value="true" 
               metric="Options_TouchpadNaturalScroll"
               pref="settings.touchpad.natural_scroll" dialog-pref>
-          <span i18n-values=".innerHTML:naturalScroll"></span>
+          <span>$i18nRaw{naturalScroll}</span>
         </label>
       </div>
     </section>
     <section id="pointer-section-mouse" hidden>
-      <h3 i18n-content="pointerOverlaySectionTitleMouse"></h3>
+      <h3>$i18n{pointerOverlaySectionTitleMouse}</h3>
       <div class="checkbox">
         <label>
           <input type="checkbox" metric="Options_MousePrimaryRight"
               pref="settings.mouse.primary_right" dialog-pref>
-          <span i18n-content="primaryMouseRight"></span>
+          <span>$i18n{primaryMouseRight}</span>
         </label>
       </div>
     </section>
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="pointer-overlay-cancel" type="reset" i18n-content="cancel">
-      </button>
-      <button id="pointer-overlay-confirm" class="default-button" type="submit"
-          i18n-content="ok">
+      <button id="pointer-overlay-cancel" type="reset">$i18n{cancel}</button>
+      <button id="pointer-overlay-confirm" class="default-button" type="submit">
+        $i18n{ok}
       </button>
     </div>
   </div>

chrome/browser/resources/options/chromeos/power_overlay.html

 <div id="power-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="powerOverlay"></h1>
+  <h1>$i18n{powerOverlay}</h1>
   <div class="content-area">
     <table>
       <tr>
-        <td class="option-name" i18n-content="batteryStatusLabel">
-        </td>
+        <td class="option-name">$i18n{batteryStatusLabel}</td>
         <td id="battery-status-value" class="option-value">
         </td>
       </tr>
       <tr id="power-sources" hidden>
         <td class="option-name">
-          <label id="power-source-label" i18n-content="powerSourceLabel">
-          </label>
+          <label id="power-source-label">$i18n{powerSourceLabel}</label>
         </td>
         <td class="option-value">
           <select id="power-source-dropdown"
@@ -20,8 +18,7 @@
         </td>
       </tr>
       <tr id="power-source-charger" hidden>
-        <td class="option-name" i18n-content="powerSourceLabel">
-        </td>
+        <td class="option-name">$i18n{powerSourceLabel}</td>
         <td id="power-source-charger-type" class="option-value">
         </td>
       </tr>
@@ -29,8 +26,8 @@
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="power-confirm" class="default-button" type="submit"
-          i18n-content="done">
+      <button id="power-confirm" class="default-button" type="submit">
+        $i18n{done}
       </button>
     </div>
   </div>

chrome/browser/resources/options/chromeos/preferred_networks.html

 <div id="preferredNetworksPage" class="page" hidden>
   <div class="close-button"></div>
-  <h1 id="preferred-networks-page-title" 
-      i18n-content="preferredNetworksPage"></h1>
+  <h1 id="preferred-networks-page-title" >$i18n{preferredNetworksPage}</h1>
   <div class="content-area">
     <div class="settings-list">
       <list id="remembered-network-list"></list>
@@ -9,8 +8,8 @@
   </div>
   <div class="action-area">
     <div class="button-strip">
-      <button id="preferred-networks-confirm" class="default-button"
-          i18n-content="done">
+      <button id="preferred-networks-confirm" class="default-button">
+        $i18n{done}
       </button>
     </div>
   </div>

chrome/browser/resources/options/chromeos/quick_unlock_configure_overlay.html

 <div id="quick-unlock-configure-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="lockScreenTitle"></h1>
+  <h1>$i18n{lockScreenTitle}</h1>
   <settings-lock-screen prefs="{{prefs}}" tabindex=0>
   </settings-lock-screen>
 

chrome/browser/resources/options/chromeos/storage_clear_drive_cache_overlay.html

 <div id="clear-drive-cache-overlay-page" class="page" role="dialog" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="storageClearDriveCacheDialogTitle"></h1>
+  <h1>$i18n{storageClearDriveCacheDialogTitle}</h1>
   <div class="content-area">
-    <div i18n-content="storageClearDriveCacheDescription"></div>
+    <div>$i18n{storageClearDriveCacheDescription}</div>
   </div>
   <div class="action-area button-strip">
-    <button id="clear-drive-cache-overlay-cancel-button" i18n-content="cancel">
-    </button>
-    <button id="clear-drive-cache-overlay-delete-button" class="default-button"
-        i18n-content="storageDeleteAllButtonTitle">
+    <button id="clear-drive-cache-overlay-cancel-button">$i18n{cancel}</button>
+    <button id="clear-drive-cache-overlay-delete-button" class="default-button">
+      $i18n{storageDeleteAllButtonTitle}
     </button>
   </div>
 </div>

chrome/browser/resources/options/chromeos/storage_manager.html

 <div id="storageManagerPage" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="storageManagerPage"></h1>
+  <h1>$i18n{storageManagerPage}</h1>
 
   <div id="storage-manager-message-low-space"
        class="storage-manager-message-area">
     <div class="storage-manager-message-title">
       <img src="space_low.svg"></img>
-      <span i18n-content="storageLowMessageTitle"></span>
+      <span>$i18n{storageLowMessageTitle}</span>
     </div>
-    <p i18n-content="storageLowMessageLine1"></p>
-    <p i18n-content="storageLowMessageLine2"></p>
+    <p>$i18n{storageLowMessageLine1}</p>
+    <p>$i18n{storageLowMessageLine2}</p>
   </div>
   <div id="storage-manager-message-critically-low-space"
        class="storage-manager-message-area">
     <div class="storage-manager-message-title">
       <img src="space_critically_low.svg"></img>
-      <span i18n-content="storageCriticallyLowMessageTitle"></span>
+      <span>$i18n{storageCriticallyLowMessageTitle}</span>
     </div>
-    <p i18n-content="storageCriticallyLowMessageLine1"></p>
-    <p i18n-content="storageCriticallyLowMessageLine2"></p>
+    <p>$i18n{storageCriticallyLowMessageLine1}</p>
+    <p>$i18n{storageCriticallyLowMessageLine2}</p>
   </div>
 
   <div class="content-area">
     <div id="storage-manager-section-capacity" class="storage-manager-section">
       <div class="storage-manager-item">
-        <span i18n-content="storageItemLabelCapacity"
-              class="storage-manager-item-label"></span>
+        <span class="storage-manager-item-label">
+          $i18n{storageItemLabelCapacity}
+        </span>
         <span id="storage-manager-size-capacity"
               class="storage-manager-item-size"></span>
       </div>
@@ -33,58 +34,64 @@
     </div>
     <div id="storage-manager-section-in-use" class="storage-manager-section">
       <div class="storage-manager-item">
-        <span i18n-content="storageItemLabelInUse"
-              class="storage-manager-item-label"></span>
+        <span class="storage-manager-item-label">
+          $i18n{storageItemLabelInUse}
+        </span>
         <span id="storage-manager-size-in-use"
               class="storage-manager-item-size"></span>
       </div>
       <div class="storage-manager-subitem">
-        <a is="action-link"
-           id="storage-manager-label-downloads"
-           i18n-content="storageSubitemLabelDownloads"></a>
+        <a is="action-link" id="storage-manager-label-downloads">
+          $i18n{storageSubitemLabelDownloads}
+        </a>
         <span id="storage-manager-size-downloads"
-              class="storage-manager-item-size"
-              i18n-content="storageSizeCalculating"></span>
+            class="storage-manager-item-size">
+          $i18n{storageSizeCalculating}
+        </span>
       </div>
       <div id="storage-manager-item-drive-cache"
            class="storage-manager-subitem" hidden>
-        <a is="action-link"
-           id="storage-manager-label-drive-cache"
-           i18n-content="storageSubitemLabelDriveCache"></a>
+        <a is="action-link" id="storage-manager-label-drive-cache">
+          $i18n{storageSubitemLabelDriveCache}
+        </a>
         <span id="storage-manager-size-drive-cache"
-              class="storage-manager-item-size"
-              i18n-content="storageSizeCalculating"></span>
+            class="storage-manager-item-size">
+          $i18n{storageSizeCalculating}
+        </span>
       </div>
       <div class="storage-manager-subitem">
-        <a is="action-link"
-           id="storage-manager-label-browsing-data"
-           i18n-content="storageSubitemLabelBrowsingData"></a>
+        <a is="action-link" id="storage-manager-label-browsing-data">
+          $i18n{storageSubitemLabelBrowsingData}
+        </a>
         <span id="storage-manager-size-browsing-data"
-              class="storage-manager-item-size"
-              i18n-content="storageSizeCalculating"></span>
+            class="storage-manager-item-size">
+          $i18n{storageSizeCalculating}
+        </span>
       </div>
       <div id="storage-manager-item-arc"
            class="storage-manager-subitem" hidden>
-        <a is="action-link"
-           id="storage-manager-label-arc"
-           i18n-content="storageSubitemLabelArc"></a>
-        <span id="storage-manager-size-arc"
-              class="storage-manager-item-size"
-              i18n-content="storageSizeCalculating"></span>
+        <a is="action-link" id="storage-manager-label-arc">
+          $i18n{storageSubitemLabelArc}
+        </a>
+        <span id="storage-manager-size-arc" class="storage-manager-item-size">
+          $i18n{storageSizeCalculating}
+        </span>
       </div>
       <div class="storage-manager-subitem">
-        <a is="action-link"
-           id="storage-manager-label-other-users"
-           i18n-content="storageSubitemLabelOtherUsers"></a>
+        <a is="action-link" id="storage-manager-label-other-users">
+          $i18n{storageSubitemLabelOtherUsers}
+        </a>
         <span id="storage-manager-size-other-users"
-              class="storage-manager-item-size"
-              i18n-content="storageSizeCalculating"></span>
+            class="storage-manager-item-size">
+          $i18n{storageSizeCalculating}
+        </span>
       </div>
     </div>
     <div id="storage-manager-section-available" class="storage-manager-section">
       <div class="storage-manager-item">
-        <span i18n-content="storageItemLabelAvailable"
-              class="storage-manager-item-label"></span>
+        <span class="storage-manager-item-label">
+          $i18n{storageItemLabelAvailable}
+        </span>
         <span id="storage-manager-size-available"
               class="storage-manager-item-size"></span>
       </div>
@@ -93,9 +100,7 @@
 
   <div class="action-area">
     <div class="button-strip">
-      <button id="storage-confirm" class="default-button"
-          i18n-content="done">
-      </button>
+      <button id="storage-confirm" class="default-button">$i18n{done}</button>
     </div>
   </div>
 </div>

chrome/browser/resources/options/chromeos/stylus_overlay.html

 <div id="stylus-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="stylusOverlay"></h1>
+  <h1>$i18n{stylusOverlay}</h1>
   <div class="content-area">
     <div class="option-control-table">
       <div class="option-name">
@@ -8,7 +8,7 @@
           <label>
             <input pref="settings.enable_stylus_tools" type="checkbox"
                 dialog-pref>
-            <span i18n-content="stylusEnableStylusTools"></span>
+            <span>$i18n{stylusEnableStylusTools}</span>
           </label>
         </div>
         <div class="checkbox controlled-setting-with-label">
@@ -16,15 +16,14 @@
             <input id="launch-palette-on-eject-input"
                    pref="settings.launch_palette_on_eject_event"
                    type="checkbox" dialog-pref>
-            <span i18n-content="stylusAutoOpenStylusTools"></span>
+            <span>$i18n{stylusAutoOpenStylusTools}</span>
           </label>
         </div>
       </div>
       <div class="settings-row">
         <div class="controlled-setting-with-label">
           <label>
-            <span class="option-name"
-                i18n-content="stylusNoteTakingApp"></span>
+            <span class="option-name">$i18n{stylusNoteTakingApp}</span>
             <select id="stylus-note-taking-app-select" class="option-value">
             </select>
           </label>
@@ -32,16 +31,17 @@
       </div>
     </div>
     <div class="settings-row">
-      <a is="action-link" i18n-content="stylusFindMoreApps"
-         id='stylus-find-more-link'></a>
+      <a is="action-link" id='stylus-find-more-link'>
+        $i18n{stylusFindMoreApps}
+      </a>
     </div>
   </div>
 
   <div class="action-area">
     <div class="button-strip">
-      <button id="stylus-cancel" type="reset" i18n-content="cancel"></button>
-      <button id="stylus-confirm" class="default-button" type="submit"
-          i18n-content="ok">
+      <button id="stylus-cancel" type="reset">$i18n{cancel}</button>
+      <button id="stylus-confirm" class="default-button" type="submit">
+        $i18n{ok}
       </button>
     </div>
   </div>

chrome/browser/resources/options/chromeos/third_party_ime_confirm_overlay.html

 <div id="third-party-ime-confirm-overlay" class="page" hidden>
   <div class="close-button"></div>
-  <h1 i18n-content="thirdPartyImeConfirmOverlay"></h1>
+  <h1>$i18n{thirdPartyImeConfirmOverlay}</h1>
   <div class="content-area">
-    <span id="third-party-ime-confirm-text"
-        i18n-content="thirdPartyImeConfirmMessage">
+    <span id="third-party-ime-confirm-text">
+      $i18n{thirdPartyImeConfirmMessage}
     </span>
   </div>
   <div class="action-area">
     <div class="action-area-right">
       <div class="button-strip">
-        <button id="third-party-ime-confirm-cancel"
-            i18n-content="thirdPartyImeConfirmDisable">
+        <button id="third-party-ime-confirm-cancel">
+          $i18n{thirdPartyImeConfirmDisable}
         </button>
-        <button id="third-party-ime-confirm-ok" class="default-button"
-            i18n-content="thirdPartyImeConfirmEnable">
+        <button id="third-party-ime-confirm-ok" class="default-button">
+          $i18n{thirdPartyImeConfirmEnable}
         </button>
       </div>
     </div>