Diagnostics: Use data point in Memory card

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

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

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

@@ -324,15 +324,12 @@ suite('MemoryCardTest', () => {
 
   test('MemoryCardPopulated', () => {
     return initializeMemoryCard(fakeMemoryUsage).then(() => {
+      const dataPoints =
+          diagnostics_test_utils.getDataPointElements(memoryElement);
+      assertEquals(fakeMemoryUsage[0].total_memory_kib, dataPoints[0].value);
       assertEquals(
-          fakeMemoryUsage[0].total_memory_kib.toString(),
-          memoryElement.$$('#memoryTotal').textContent);
-      assertEquals(
-          fakeMemoryUsage[0].available_memory_kib.toString(),
-          memoryElement.$$('#memoryAvailable').textContent);
-      assertEquals(
-          fakeMemoryUsage[0].free_memory_kib.toString(),
-          memoryElement.$$('#memoryFree').textContent);
+          fakeMemoryUsage[0].available_memory_kib, dataPoints[1].value);
+      assertEquals(fakeMemoryUsage[0].free_memory_kib, dataPoints[2].value);
     });
   });
 });

chromeos/components/diagnostics_ui/resources/BUILD.gn

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

chromeos/components/diagnostics_ui/resources/memory_card.html

@@ -6,9 +6,13 @@
     <!-- TODO(zentaro) Localize once strings are confirmed -->
     <div id="cardTitle">Memory</div>
   </div>
-  <div slot="body">
-    <div id="memoryTotal">[[memoryUsage_.total_memory_kib]]</div>
-    <div id="memoryAvailable">[[memoryUsage_.available_memory_kib]]</div>
-    <div id="memoryFree">[[memoryUsage_.free_memory_kib]]</div>
-  </div>
+  <data-point slot="body" id="memoryTotal"
+    value="[[memoryUsage_.total_memory_kib]]">
+  </data-point>
+  <data-point slot="body" id="memoryAvailable"
+    value="[[memoryUsage_.available_memory_kib]]">
+  </data-point>
+  <data-point slot="body" id="memoryFree"
+    value="[[memoryUsage_.free_memory_kib]]">
+  </data-point>
 </diagnostics-card>

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