Diagnostics: Add a skeleton Overview card

- Has no content yet

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

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

@@ -66,9 +66,12 @@ suite('DiagnosticsAppTest', () => {
   });
 
   test('LandingPageLoaded', () => {
-    // TODO(jimmyxgong): Remove this stub test once the page has more
-    // capabilities to test.
+    // TODO(zentaro): Update when strings are finalized and localized.
     assertEquals('Diagnostics', page.$$('#header').textContent);
+
+    // Verify the overview card is in the page.
+    const overview = page.$$('#overviewCard');
+    assertTrue(!!overview);
   });
 });
 

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -16,12 +16,14 @@ js_type_check("closure_compile_module") {
     ":fake_method_resolver",
     ":fake_system_data_provider",
     ":mojo_interface_provider",
+    ":overview_card",
   ]
 }
 
 js_library("diagnostics_app") {
   deps = [
     ":diagnostics_card",
+    ":overview_card",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
@@ -47,10 +49,18 @@ js_library("mojo_interface_provider") {
   deps = [ "//ui/webui/resources/js:cr.m" ]
 }
 
+js_library("overview_card") {
+  deps = [
+    ":diagnostics_card",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 html_to_js("web_components") {
   js_files = [
     "diagnostics_app.js",
     "diagnostics_card.js",
     "diagnostics_shared_css.js",
+    "overview_card.js",
   ]
 }

chromeos/components/diagnostics_ui/resources/diagnostics_app.html

-<div id="header"></div>
\ No newline at end of file
+<div class="main-container">
+    <!-- TODO(zentaro) Localize once strings are confirmed -->
+    <div id="header">Diagnostics</div>
+    <hr>
+    <overview-card id="overviewCard"></overview-card>
+    <hr>
+</div>

chromeos/components/diagnostics_ui/resources/diagnostics_app.js

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './diagnostics_shared_css.js';
+import './overview_card.js';
+
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 /**
@@ -16,8 +19,6 @@ Polymer({
 
   /** @override */
   ready() {
-    // TODO(jimmyxgong): Remove this once the app has more capabilities.
-    this.$$('#header').textContent = 'Diagnostics';
   },
 
 });
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -16,9 +16,11 @@
       <include name="IDR_DIAGNOSTICS_APP_ICON" file="app_icon_192.png" type="BINDATA" />
       <include name="IDR_DIAGNOSTICS_APP_INDEX_HTML" file="index.html" type="BINDATA" />
       <include name="IDR_DIAGNOSTICS_APP_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_app.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_DIAGNOSTICS_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_card.js" use_base_dir="false" 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_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"/>
       <include name="IDR_DIAGNOSTICS_TYPES_JS" file="diagnostics_types.js" type="BINDATA"/>
     </includes>

chromeos/components/diagnostics_ui/resources/overview_card.html

+<style include="diagnostics-shared">
+</style>
+
+<div id="overviewCardContainer"></div>

chromeos/components/diagnostics_ui/resources/overview_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_shared_css.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/**
+ * @fileoverview
+ * 'overview-card' shows an overview of system information such
+ * as CPU type, version, board name, and memory.
+ */
+Polymer({
+  is: 'overview-card',
+
+  _template: html`{__html_template__}`,
+
+});