Diagnostics: Localize strings

- Implement i18n for strings.
- Localize CPU card title
- Localize Battery Status card title
- Localize Memory card title
- Localize Diagnostics app title

Bug:1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*

Change-Id: Icf9dbb0b0a19c4d3d216548460c21a89fd178ecf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2433126Reviewed-by: Scott Violet <sky@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Michael Checo <michaelcheco@google.com>
Cr-Commit-Position: refs/heads/master@{#812811}

chromeos/chromeos_strings.grd

@@ -472,6 +472,22 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_SOURCE_DROPDOWN_LABEL" desc="The label for the dropdown that displays available scan sources (e.g. flatbed, document feeder, etc.).">
         Source
       </message>
+
+      <!-- Diagnostics App -->
+      <!-- TODO(michaelcheco): Update with finalized copies of the strings -->
+      <message name="IDS_DIAGNOSTICS_TITLE" desc="The title of the diagnostics app." translateable="false">
+        Diagnostics
+      </message>
+      <message name="IDS_DIAGNOSTICS_MEMORY_TITLE" desc="The title of the diagnostics memory section which shows users' information about their computer memory." translateable="false">
+        Memory
+      </message>
+      <message name="IDS_DIAGNOSTICS_BATTERY_TITLE" desc="The title of the diagnostics battery section which shows users' information about their computer battery." translateable="false">
+        Battery
+      </message>
+      <message name="IDS_DIAGNOSTICS_CPU_TITLE" desc="The title of the diagnostics CPU section which shows users' information about their computer CPU usage." translateable="false">
+        CPU
+      </message>
+
     </messages>
   </release>
 </grit>

chromeos/components/diagnostics_ui/BUILD.gn

@@ -17,7 +17,9 @@ static_library("diagnostics_ui") {
     "//chromeos/components/diagnostics_ui/mojom",
     "//chromeos/constants",
     "//chromeos/resources:diagnostics_app_resources",
+    "//chromeos/strings/",
     "//content/public/browser",
+    "//ui/base",
     "//ui/resources",
     "//ui/webui",
   ]

chromeos/components/diagnostics_ui/DEPS

 include_rules = [
   "-chrome",
   "+chromeos/grit/chromeos_diagnostics_app_resources.h",
+  "+chromeos/strings/grit/chromeos_strings.h",
   "+content/public/browser",
+  "+ui/base",
   "+ui/resources",
   "+ui/webui",
 ]

chromeos/components/diagnostics_ui/diagnostics_ui.cc

@@ -11,10 +11,12 @@
 #include "chromeos/components/diagnostics_ui/url_constants.h"
 #include "chromeos/grit/chromeos_diagnostics_app_resources.h"
 #include "chromeos/grit/chromeos_diagnostics_app_resources_map.h"
+#include "chromeos/strings/grit/chromeos_strings.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui.h"
 #include "content/public/browser/web_ui_data_source.h"
 #include "services/network/public/mojom/content_security_policy.mojom.h"
+#include "ui/base/webui/web_ui_util.h"
 #include "ui/resources/grit/webui_resources.h"
 
 namespace chromeos {
@@ -24,6 +26,18 @@ namespace {
 constexpr char kGeneratedPath[] =
     "@out_folder@/gen/chromeos/components/diagnostics_ui/resources/";
 
+void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
+  static constexpr webui::LocalizedString kLocalizedStrings[] = {
+      {"batteryTitle", IDS_DIAGNOSTICS_BATTERY_TITLE},
+      {"cpuTitle", IDS_DIAGNOSTICS_CPU_TITLE},
+      {"diagnosticsTitle", IDS_DIAGNOSTICS_TITLE},
+      {"memoryTitle", IDS_DIAGNOSTICS_MEMORY_TITLE},
+  };
+  for (const auto& str : kLocalizedStrings) {
+    html_source->AddLocalizedString(str.name, str.id);
+  }
+  html_source->UseStringsJs();
+}
 // TODO(jimmyxgong): Replace with webui::SetUpWebUIDataSource() once it no
 // longer requires a dependency on //chrome/browser.
 void SetUpWebUIDataSource(content::WebUIDataSource* source,
@@ -58,7 +72,7 @@ DiagnosticsUI::DiagnosticsUI(content::WebUI* web_ui)
                                          kChromeosDiagnosticsAppResourcesSize);
   SetUpWebUIDataSource(html_source.get(), resources, kGeneratedPath,
                        IDR_DIAGNOSTICS_APP_INDEX_HTML);
-
+  AddDiagnosticsStrings(html_source.get());
   content::WebUIDataSource::Add(web_ui->GetWebContents()->GetBrowserContext(),
                                 html_source.release());
 }

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -32,6 +32,7 @@ js_library("battery_status_card") {
   deps = [
     ":data_point",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
 }
 
@@ -39,6 +40,7 @@ js_library("cpu_card") {
   deps = [
     ":data_point",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
 }
 
@@ -57,6 +59,7 @@ js_library("diagnostics_app") {
     ":overview_card",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
 }
 
@@ -89,6 +92,7 @@ js_library("memory_card") {
   deps = [
     ":data_point",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
 }
 

chromeos/components/diagnostics_ui/resources/battery_status_card.html

@@ -3,8 +3,7 @@
 
 <diagnostics-card>
   <div slot="title">
-    <!-- TODO(zentaro) Localize once strings are confirmed -->
-    <div id="cardTitle">Battery Status</div>
+    <div id="cardTitle">[[i18n('batteryTitle')]]</div>
   </div>
   <data-point slot="body" id="currentNow"
     value="[[batteryChargeStatus_.current_now_milliamps]]">

chromeos/components/diagnostics_ui/resources/battery_status_card.js

@@ -10,6 +10,8 @@ import './percent_bar_chart.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {BatteryChargeStatus, BatteryHealth, BatteryInfo, SystemDataProviderInterface} from './diagnostics_types.js'
 import {getSystemDataProvider} from './mojo_interface_provider.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import './strings.js';
 
 /**
  * @fileoverview
@@ -20,6 +22,8 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  behaviors: [I18nBehavior],
+
   /**
    * @private {?SystemDataProviderInterface}
    */

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -3,8 +3,7 @@
 
 <diagnostics-card>
   <div slot="title">
-    <!-- TODO(zentaro) Localize once strings are confirmed -->
-    <div id="cardTitle">CPU</div>
+    <div id="cardTitle">[[i18n('cpuTitle')]]</div>
   </div>
   <data-point slot="body" id="cpuTemp"
     value="[[cpuUsage_.cpu_temp_degrees_celcius]]">

chromeos/components/diagnostics_ui/resources/cpu_card.js

@@ -9,6 +9,8 @@ import './diagnostics_shared_css.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {CpuUsage, SystemDataProviderInterface} from './diagnostics_types.js'
 import {getSystemDataProvider} from './mojo_interface_provider.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import './strings.js';
 
 /**
  * @fileoverview
@@ -19,6 +21,8 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  behaviors: [I18nBehavior],
+
   /**
    * @private {?SystemDataProviderInterface}
    */

chromeos/components/diagnostics_ui/resources/diagnostics_app.html

@@ -30,9 +30,8 @@
     padding: 5px;
   }
 </style>
-<div id="diagnosticsContainer" class="cr-centered-card-container">
-  <!-- TODO(zentaro) Localize once strings are confirmed -->
-  <div id="header">Diagnostics</div>
+<div id="diagnosticsContainer"class="cr-centered-card-container">
+  <div id="header">[[i18n('diagnosticsTitle')]]</div>
   <div class="overview-container">
     <overview-card id="overviewCard"></overview-card>
   </div>

chromeos/components/diagnostics_ui/resources/diagnostics_app.js

@@ -11,6 +11,8 @@ import './memory_card.js';
 import './overview_card.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import './strings.js';
 
 /**
  * @fileoverview
@@ -22,6 +24,8 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  behaviors: [I18nBehavior],
+
   /** @override */
   ready() {
   },

chromeos/components/diagnostics_ui/resources/memory_card.html

@@ -3,8 +3,7 @@
 
 <diagnostics-card>
   <div slot="title">
-    <!-- TODO(zentaro) Localize once strings are confirmed -->
-    <div id="cardTitle">Memory</div>
+    <div id="cardTitle">[[i18n('memoryTitle')]]</div>
   </div>
   <data-point slot="body" id="memoryTotal"
     value="[[memoryUsage_.total_memory_kib]]">

chromeos/components/diagnostics_ui/resources/memory_card.js

@@ -10,6 +10,8 @@ import './percent_bar_chart.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {MemoryUsage, SystemDataProviderInterface} from './diagnostics_types.js'
 import {getSystemDataProvider} from './mojo_interface_provider.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import './strings.js';
 
 /**
  * @fileoverview
@@ -20,6 +22,8 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  behaviors: [I18nBehavior],
+
   /**
    * @private {?SystemDataProviderInterface}
    */