Diagnostics: Update CPU card markup

Screenshots:
- Diagnostics App (before) http://shortn/_F7krCJQK2W
- Diagnostics App (after) http://shortn/_Wg8IygL5Iu

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

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

@@ -59,11 +59,11 @@ suite('CpuCardTest', () => {
     return initializeCpuCard(fakeCpuUsage).then(() => {
       const dataPoints =
           diagnostics_test_utils.getDataPointElements(cpuElement);
-
+      const currentlyUsingValue = fakeCpuUsage[0].percent_usage_user +
+          fakeCpuUsage[0].percent_usage_system;
+      assertEquals(currentlyUsingValue, dataPoints[0].value);
       assertEquals(
-          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);
+          fakeCpuUsage[0].cpu_temp_degrees_celcius, dataPoints[1].value);
     });
   });
 });
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -5,13 +5,14 @@
   <div slot="title">
     <div id="cardTitle">[[i18n('cpuTitle')]]</div>
   </div>
-  <data-point slot="body" id="cpuTemp"
-    value="[[cpuUsage_.cpu_temp_degrees_celcius]]">
-  </data-point>
+  <!-- TODO(michaelcheco): Add i18n string for percent number format -->
   <data-point slot="body" id="cpuUsageUser"
-    value="[[cpuUsage_.percent_usage_user]]">
+    value="[[computeCurrentlyUsing_(cpuUsage_.percent_usage_system,
+        cpuUsage_.percent_usage_user)]]">
   </data-point>
-  <data-point slot="body" id="cpuUsageSystem"
-    value="[[cpuUsage_.percent_usage_system]]">
+  <!-- TODO(michaelcheco): Investigate whether or not temperature can be
+  localized. -->
+  <data-point slot="body" id="cpuTemp"
+    value="[[cpuUsage_.cpu_temp_degrees_celcius]]">
   </data-point>
 </diagnostics-card>

chromeos/components/diagnostics_ui/resources/cpu_card.js

@@ -54,4 +54,12 @@ Polymer({
     this.cpuUsage_ = cpuUsage;
   },
 
+  /**
+   * @param {number} percentUsageSystem
+   * @param {number} percentUsageUser
+   * @private
+   */
+  computeCurrentlyUsing_(percentUsageSystem, percentUsageUser) {
+    return percentUsageSystem + percentUsageUser;
+  },
 });