Diagnostics: Add skeleton memory card

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I6803159034e11ce0a7e7df7b903f0b6043fb7048
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2419268
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#808698}

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

@@ -76,6 +76,10 @@ suite('DiagnosticsAppTest', () => {
     // Verify the overview card is in the page.
     const overview = page.$$('#overviewCard');
     assertTrue(!!overview);
+
+    // Verify the memory card is in the page.
+    const memory = page.$$('#memoryCard');
+    assertTrue(!!memory);
   });
 });
 
@@ -134,6 +138,49 @@ suite('OverviewCardTest', () => {
   });
 });
 
+suite('MemoryCardTest', () => {
+  /** @type {?HTMLElement} */
+  let memoryElement = null;
+
+  /** @type {?FakeSystemDataProvider} */
+  let provider = null;
+
+  suiteSetup(() => {
+    provider = new FakeSystemDataProvider();
+    setSystemDataProviderForTesting(provider);
+  });
+
+  setup(function() {
+    PolymerTest.clearBody();
+  });
+
+  teardown(function() {
+    if (memoryElement) {
+      memoryElement.remove();
+    }
+    memoryElement = null;
+    provider = null;
+  });
+
+  function initializeMemoryCard() {
+    assertFalse(!!memoryElement);
+
+    // Add the memory card to the DOM.
+    memoryElement = document.createElement('memory-card');
+    assertTrue(!!memoryElement);
+    document.body.appendChild(memoryElement);
+
+    return flushTasks();
+  }
+
+  test('MemoryCardPopulated', () => {
+    return initializeMemoryCard().then(() => {
+      // TODO(zentaro): Update when strings are finalized.
+      assertEquals('Memory', memoryElement.$$('#cardTitle').textContent);
+    });
+  });
+});
+
 suite('FakeMojoProviderTest', () => {
   test('SettingGettingTestProvider', () => {
     // TODO(zentaro): Replace with fake when built.

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -16,6 +16,7 @@ js_type_check("closure_compile_module") {
     ":fake_data",
     ":fake_method_resolver",
     ":fake_system_data_provider",
+    ":memory_card",
     ":mojo_interface_provider",
     ":overview_card",
   ]
@@ -24,6 +25,7 @@ js_type_check("closure_compile_module") {
 js_library("diagnostics_app") {
   deps = [
     ":diagnostics_card",
+    ":memory_card",
     ":overview_card",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
@@ -50,6 +52,12 @@ js_library("fake_system_data_provider") {
   deps = [ "//ui/webui/resources/js:cr.m" ]
 }
 
+js_library("memory_card") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("mojo_interface_provider") {
   deps = [
     ":diagnostics_types",
@@ -71,6 +79,7 @@ html_to_js("web_components") {
     "diagnostics_app.js",
     "diagnostics_card.js",
     "diagnostics_shared_css.js",
+    "memory_card.js",
     "overview_card.js",
   ]
 }

chromeos/components/diagnostics_ui/resources/diagnostics_app.html

@@ -4,4 +4,6 @@
     <hr>
     <overview-card id="overviewCard"></overview-card>
     <hr>
+    <memory-card id="memoryCard"></memory-card>
+    <hr>
 </div>

chromeos/components/diagnostics_ui/resources/diagnostics_app.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import './diagnostics_shared_css.js';
+import './memory_card.js';
 import './overview_card.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -20,6 +20,7 @@
       <include name="IDR_DIAGNOSTICS_FAKE_DATA_JS" file="fake_data.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_FAKE_METHOD_RESOLVER_JS" file="fake_method_resolver.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_FAKE_SYSTEM_DATA_PROVIDER_JS" file="fake_system_data_provider.js" type="BINDATA"/>
+      <include name="IDR_DIAGNOSTICS_MEMORY_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/memory_card.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_MOJO_INTERFACE_PROVIDER_JS" file="mojo_interface_provider.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_OVERVIEW_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/overview_card.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_SHARED_CSS_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.js" use_base_dir="false" type="BINDDATA"/>

chromeos/components/diagnostics_ui/resources/memory_card.html

+<style include="diagnostics-shared">
+</style>
+
+<diagnostics-card>
+  <div slot="title">
+    <!-- TODO(zentaro) Localize once strings are confirmed -->
+    <div id="cardTitle">Memory</div>
+  </div>
+  <div slot="body">
+  </div>
+</diagnostics-card>

chromeos/components/diagnostics_ui/resources/memory_card.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import './diagnostics_card.js';
+import './diagnostics_shared_css.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {SystemDataProviderInterface} from './diagnostics_types.js'
+import {getSystemDataProvider} from './mojo_interface_provider.js';
+
+/**
+ * @fileoverview
+ * 'memory-card' shows information about system memory.
+ */
+Polymer({
+  is: 'memory-card',
+
+  _template: html`{__html_template__}`,
+
+  /**
+   * @private {?SystemDataProviderInterface}
+   */
+  systemDataProvider_: null,
+
+  /** @override */
+  created() {
+    this.systemDataProvider_ = getSystemDataProvider();
+  },
+
+});