Diagnostics: Use data point in Battery card

Screenshots:
 - Diagnostics Page (before) http://shortn/_h8KubnXkcH
 - Diagnostics Page (after) http://shortn/_NHJD1CxaNh

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: Ic6fe3463c089d1f0b5150f1be128621cbb28623a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2432125
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811061}

chrome/test/data/webui/chromeos/diagnostics/diagnostics_test.js

@@ -147,25 +147,27 @@ suite('BatteryStatusCardTest', () => {
     return initializeBatteryStatusCard(
                fakeBatteryInfo, fakeBatteryChargeStatus, fakeBatteryHealth)
         .then(() => {
+          const dataPoints =
+            diagnostics_test_utils.getDataPointElements(batteryStatusElement);
           assertEquals(
               fakeBatteryInfo.manufacturer,
-              batteryStatusElement.$$('#manufacturer').textContent);
+              dataPoints[0].value);
           assertEquals(
-              fakeBatteryHealth[0].charge_full_design_milliamp_hours.toString(),
-              batteryStatusElement.$$('#chargeFullDesign').textContent);
+              fakeBatteryHealth[0].charge_full_design_milliamp_hours,
+              dataPoints[1].value);
           assertEquals(
               fakeBatteryChargeStatus[0]
-                  .charge_full_now_milliamp_hours.toString(),
-              batteryStatusElement.$$('#chargeFullNow').textContent);
+                  .charge_full_now_milliamp_hours,
+                  dataPoints[2].value);
           assertEquals(
-              fakeBatteryChargeStatus[0].charge_now_milliamp_hours.toString(),
-              batteryStatusElement.$$('#chargeNow').textContent);
+              fakeBatteryChargeStatus[0].charge_now_milliamp_hours,
+              dataPoints[3].value);
           assertEquals(
               fakeBatteryChargeStatus[0].power_time,
-              batteryStatusElement.$$('#powerTime').textContent);
+              dataPoints[4].value);
           assertEquals(
-              fakeBatteryChargeStatus[0].power_adapter_status.toString(),
-              batteryStatusElement.$$('#adapterStatus').textContent);
+              fakeBatteryChargeStatus[0].power_adapter_status,
+              dataPoints[5].value);
         });
   });
 });

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -28,6 +28,7 @@ js_type_check("closure_compile_module") {
 
 js_library("battery_status_card") {
   deps = [
+    ":data_point",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }

chromeos/components/diagnostics_ui/resources/battery_status_card.html

@@ -6,12 +6,22 @@
     <!-- TODO(zentaro) Localize once strings are confirmed -->
     <div id="cardTitle">Battery Status</div>
   </div>
-  <div slot="body">
-    <div id="manufacturer">[[batteryInfo_.manufacturer]]</div>
-    <div id="chargeFullDesign">[[batteryHealth_.charge_full_design_milliamp_hours]]</div>
-    <div id="chargeFullNow">[[batteryChargeStatus_.charge_full_now_milliamp_hours]]</div>
-    <div id="chargeNow">[[batteryChargeStatus_.charge_now_milliamp_hours]]</div>
-    <div id="powerTime">[[batteryChargeStatus_.power_time]]</div>
-    <div id="adapterStatus">[[batteryChargeStatus_.power_adapter_status]]</div>
-  </div>
+  <data-point slot="body" id="manufacturer"
+    value="[[batteryInfo_.manufacturer]]">
+  </data-point>
+  <data-point slot="body" id="chargeFullDesign"
+    value="[[batteryHealth_.charge_full_design_milliamp_hours]]">
+  </data-point>
+  <data-point slot="body" id="chargeFullNow"
+    value="[[batteryChargeStatus_.charge_full_now_milliamp_hours]]">
+  </data-point>
+  <data-point slot="body" id="chargeNow"
+    value="[[batteryChargeStatus_.charge_now_milliamp_hours]]">
+  </data-point>
+  <data-point slot="body" id="powerTime"
+    value="[[batteryChargeStatus_.power_time]]">
+  </data-point>
+  <data-point slot="body" id="adapterStatus"
+    value="[[batteryChargeStatus_.power_adapter_status]]">
+  </data-point>
 </diagnostics-card>

chromeos/components/diagnostics_ui/resources/battery_status_card.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './data_point.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';