Diagnostics: Add data-point Polymer element

- Encapsulates a data point in a diagnostics card.

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

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

@@ -6,6 +6,7 @@
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
 import 'chrome://diagnostics/battery_status_card.js';
 import 'chrome://diagnostics/cpu_card.js';
+import 'chrome://diagnostics/data_point.js';
 import 'chrome://diagnostics/diagnostics_app.js';
 import 'chrome://diagnostics/memory_card.js';
 import 'chrome://diagnostics/overview_card.js';
@@ -19,6 +20,7 @@ import {getSystemDataProvider, setSystemDataProviderForTesting} from 'chrome://d
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.m.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {flushTasks} from 'chrome://test/test_util.m.js';
+import * as diagnostics_test_utils from './diagnostics_test_utils.js';
 
 suite('DiagnosticsFakeMethodResolver', () => {
   /** @type {?FakeMethodResolver} */
@@ -539,3 +541,44 @@ suite('FakeSystemDataProviderTest', () => {
     return provider.observeMemoryUsage(memoryUsageObserverRemote);
   });
 });
+
+suite('DataPointTest', () => {
+  /** @type {?HTMLElement} */
+  let dataPointElement = null;
+
+  setup(() => {
+    PolymerTest.clearBody();
+  });
+
+  teardown(() => {
+    if (dataPointElement) {
+      dataPointElement.remove();
+    }
+    dataPointElement = null;
+  });
+
+  /**
+   * @param {string} title
+   * @param {string} value
+   */
+  function initializeDataPoint(title, value) {
+    assertFalse(!!dataPointElement);
+
+    // Add the data point to the DOM.
+    dataPointElement = document.createElement('data-point');
+    assertTrue(!!dataPointElement);
+    document.body.appendChild(dataPointElement);
+    dataPointElement.title = title;
+    dataPointElement.value = value;
+    return flushTasks();
+  }
+
+  test('InitializeDataPoint', () => {
+    const title = 'Test title';
+    const value = 'Test value';
+    return initializeDataPoint(title, value).then(() => {
+      assertEquals(title, dataPointElement.$$('.title').textContent.trim());
+      assertEquals(value, dataPointElement.$$('.value').textContent.trim());
+    });
+  });
+});

chrome/test/data/webui/chromeos/diagnostics/diagnostics_test_utils.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.
+
+/**
+ * Helper function for getting an array of data-point elements from a
+ * diagnostics card.
+ * @param {!HTMLElement} element
+ * @return {!Array<!HTMLElement>}
+ */
+export function getDataPointElements(element) {
+  return element.shadowRoot.querySelectorAll('data-point');
+}

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -12,6 +12,7 @@ js_type_check("closure_compile_module") {
   deps = [
     ":battery_status_card",
     ":cpu_card",
+    ":data_point",
     ":diagnostics_app",
     ":diagnostics_card",
     ":diagnostics_types",
@@ -37,6 +38,12 @@ js_library("cpu_card") {
   ]
 }
 
+js_library("data_point") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("diagnostics_app") {
   deps = [
     ":battery_status_card",
@@ -99,6 +106,7 @@ html_to_js("web_components") {
   js_files = [
     "battery_status_card.js",
     "cpu_card.js",
+    "data_point.js",
     "diagnostics_app.js",
     "diagnostics_card.js",
     "diagnostics_fonts_css.js",

chromeos/components/diagnostics_ui/resources/data_point.html

+<style include="diagnostics-shared diagnostics-fonts">
+  .data-point {
+    display: flex;
+    flex-direction: column;
+    height: 45px;
+    justify-content: space-between;
+  }
+
+  .title {
+    @apply --diagnostics-data-point-title-font;
+    color: var(--diagnostics-overview-text-color);
+  }
+
+  .value {
+    @apply --diagnostics-data-point-subtitle-font;
+  }
+</style>
+<div class="data-point">
+  <div class="title">[[title]]</div>
+  <div class="value">[[value]]</div>
+</div>
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/data_point.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_fonts_css.js';
+import './diagnostics_shared_css.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/**
+ * @fileoverview
+ * 'data-point' shows a single piece of information related to a component. It
+ *  consists of a title and description.
+ */
+Polymer({
+  is: 'data-point',
+
+  _template: html`{__html_template__}`,
+
+  properties: {
+    title: {
+      type: String,
+      // TODO(michaelcheco): Remove when localized strings are added.
+      value: 'Xxxx',
+    },
+    value: {
+      type: String,
+      value: '',
+    },
+  },
+});

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -19,6 +19,7 @@
       <include name="IDR_DIAGNOSTICS_BATTERY_STATUS_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/battery_status_card.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_CPU_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/cpu_card.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_DIAGNOSTICS_DATA_POINT_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/data_point.js" use_base_dir="false" type="BINDATA"/>
       <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_OBSERVABLES_JS" file="fake_observables.js" type="BINDATA"/>

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

@@ -6,6 +6,12 @@
     margin: 10px 0;
   }
 
+  .body-container {
+    column-gap: 15px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 100px);
+  }
+
   .title-container {
     @apply --diagnostics-default-font;
   }

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.html

@@ -6,9 +6,13 @@
 
       --diagnostics-default-font-size: 14px;
       --diagnostics-header-font-size: 22px;
+      --diagnostics-data-point-title-font-size: 12px;
+      --diagnostics-data-point-subtitle-font-size: 15px;
 
       --diagnostics-default-font-weight: 500;
       --diagnostics-header-font-weight: 600;
+      --diagnostics-data-point-title-font-weight: 500;
+      --diagnostics-data-point-subtitle-font-weight: 550;
 
       --diagnostics-default-text-color: var(--google-grey-900);
       --diagnostics-header-text-color: var(--google-grey-900);
@@ -23,6 +27,16 @@
           font-family: var(--diagnostics-header-font-family);
           font-size: var(--diagnostics-header-font-size);
           font-weight: var(--diagnostics-header-font-weight);
+      }
+      --diagnostics-data-point-title-font: {
+          font-family: var(--diagnostics-default-font-family);
+          font-size: var(--diagnostics-data-point-title-font-size);
+          font-weight: var(--diagnostics-data-point-title-font-weight);
+      };
+      --diagnostics-data-point-subtitle-font: {
+          font-family: var(--diagnostics-default-font-family);
+          font-size: var(--diagnostics-data-point-subtitle-font-size);
+          font-weight: var(--diagnostics-data-point-subtitle-font-weight);
       };
     }
   </style>