Diagnostics: Rename data-point title property to header

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

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

@@ -26,26 +26,27 @@ suite('DataPointTest', () => {
   });
 
   /**
-   * @param {string} title
+   * @param {string} header
    * @param {string} value
    */
-  function initializeDataPoint(title, value) {
+  function initializeDataPoint(header, 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.header = header;
     dataPointElement.value = value;
+    document.body.appendChild(dataPointElement);
+
     return flushTasks();
   }
 
   test('InitializeDataPoint', () => {
-    const title = 'Test title';
+    const header = 'Test header';
     const value = 'Test value';
-    return initializeDataPoint(title, value).then(() => {
-      assertEquals(title, dataPointElement.$$('.title').textContent.trim());
+    return initializeDataPoint(header, value).then(() => {
+      assertEquals(header, dataPointElement.$$('.header').textContent.trim());
       assertEquals(value, dataPointElement.$$('.value').textContent.trim());
     });
   });

chromeos/components/diagnostics_ui/resources/data_point.html

@@ -6,7 +6,7 @@
     justify-content: space-between;
   }
 
-  .title {
+  .header {
     @apply --diagnostics-data-point-title-font;
     color: var(--diagnostics-overview-text-color);
   }
@@ -16,6 +16,6 @@
   }
 </style>
 <div class="data-point">
-  <div class="title">[[title]]</div>
+  <div class="header">[[header]]</div>
   <div class="value">[[value]]</div>
 </div>
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/data_point.js

@@ -10,7 +10,7 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
 /**
  * @fileoverview
  * 'data-point' shows a single piece of information related to a component. It
- *  consists of a title and description.
+ *  consists of a header and value.
  */
 Polymer({
   is: 'data-point',
@@ -18,7 +18,7 @@ Polymer({
   _template: html`{__html_template__}`,
 
   properties: {
-    title: {
+    header: {
       type: String,
       // TODO(michaelcheco): Remove when localized strings are added.
       value: 'Xxxx',