Diagnostics: Use data point in CPU card

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

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

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

@@ -214,15 +214,13 @@ suite('CpuCardTest', () => {
 
   test('CpuCardPopulated', () => {
     return initializeCpuCard(fakeCpuUsage).then(() => {
+      const dataPoints =
+          diagnostics_test_utils.getDataPointElements(cpuElement);
+
       assertEquals(
-          fakeCpuUsage[0].cpu_temp_degrees_celcius.toString(),
-          cpuElement.$$('#cpuTemp').textContent);
-      assertEquals(
-          fakeCpuUsage[0].percent_usage_user.toString(),
-          cpuElement.$$('#cpuUsageUser').textContent);
-      assertEquals(
-          fakeCpuUsage[0].percent_usage_system.toString(),
-          cpuElement.$$('#cpuUsageSystem').textContent);
+          fakeCpuUsage[0].cpu_temp_degrees_celcius, dataPoints[0].value);
+      assertEquals(fakeCpuUsage[0].percent_usage_user, dataPoints[1].value);
+      assertEquals(fakeCpuUsage[0].percent_usage_system, dataPoints[2].value);
     });
   });
 });

chromeos/components/diagnostics_ui/resources/BUILD.gn

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

chromeos/components/diagnostics_ui/resources/cpu_card.html

-<style include="diagnostics-shared">
+<style include="diagnostics-shared diagnostics-fonts">
 </style>
 
 <diagnostics-card>
@@ -6,9 +6,13 @@
     <!-- TODO(zentaro) Localize once strings are confirmed -->
     <div id="cardTitle">CPU</div>
   </div>
-  <div slot="body">
-    <div id="cpuTemp">[[cpuUsage_.cpu_temp_degrees_celcius]]</div>
-    <div id="cpuUsageUser">[[cpuUsage_.percent_usage_user]]</div>
-    <div id="cpuUsageSystem">[[cpuUsage_.percent_usage_system]]</div>
-  </div>
+  <data-point slot="body" id="cpuTemp"
+    value="[[cpuUsage_.cpu_temp_degrees_celcius]]">
+  </data-point>
+  <data-point slot="body" id="cpuUsageUser"
+    value="[[cpuUsage_.percent_usage_user]]">
+  </data-point>
+  <data-point slot="body" id="cpuUsageSystem"
+    value="[[cpuUsage_.percent_usage_system]]">
+  </data-point>
 </diagnostics-card>

chromeos/components/diagnostics_ui/resources/cpu_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';