Diagnostics: Rename percent_bar_chart title property to header

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

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

@@ -26,35 +26,36 @@ suite('PercentBarChartTest', () => {
   });
 
   /**
-   * @param {string} title
+   * @param {string} header
    * @param {number} value
    * @param {number} max
    */
-  function initializePercentBarChart(title, value, max) {
+  function initializePercentBarChart(header, value, max) {
     assertFalse(!!percentBarChartElement);
 
     // Add the element to the DOM.
     percentBarChartElement = document.createElement('percent-bar-chart');
     assertTrue(!!percentBarChartElement);
-    document.body.appendChild(percentBarChartElement);
-    percentBarChartElement.title = title;
+    percentBarChartElement.header = header;
     percentBarChartElement.value = value;
     percentBarChartElement.max = max;
+    document.body.appendChild(percentBarChartElement);
+
     return flushTasks();
   }
 
   test('InitializePercentBarChart', () => {
-    const title = 'Test title';
+    const header = 'Test header';
     const value = 10;
     const max = 30;
     const percent = Math.round(100 * value / max);
-    return initializePercentBarChart(title, value, max).then(() => {
+    return initializePercentBarChart(header, value, max).then(() => {
       const paperProgress = percentBarChartElement.$$('paper-progress');
       assertEquals(value, paperProgress.value);
       assertEquals(max, paperProgress.max);
 
       assertEquals(
-          title, percentBarChartElement.$$('#chartName').textContent.trim());
+          header, percentBarChartElement.$$('#chartName').textContent.trim());
       assertEquals(
           `${percent}`,
           percentBarChartElement.$$('#percentageLabel').textContent.trim());

chromeos/components/diagnostics_ui/resources/battery_status_card.html

@@ -4,7 +4,7 @@
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('batteryTitle')]]</div>
   <!-- TODO(joonbug): Localize once strings are confirmed -->
-  <percent-bar-chart slot="left-panel" title="Remaining charge"
+  <percent-bar-chart slot="left-panel" header="Remaining charge"
     value="[[batteryChargeStatus_.charge_now_milliamp_hours]]"
     max="[[batteryChargeStatus_.charge_full_now_milliamp_hours]]">
   </percent-bar-chart>

chromeos/components/diagnostics_ui/resources/memory_card.html

@@ -4,7 +4,7 @@
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('memoryTitle')]]</div>
   <!-- TODO(joonbug): Localize once strings are confirmed -->
-  <percent-bar-chart slot="left-panel" title="Used memory"
+  <percent-bar-chart slot="left-panel" header="Used memory"
     value="[[getTotalUsedMemory_(memoryUsage_)]]"
     max="[[memoryUsage_.total_memory_kib]]">
   </percent-bar-chart>

chromeos/components/diagnostics_ui/resources/percent_bar_chart.html

@@ -6,7 +6,7 @@
 </style>
 
 <div id="barChartContainer">
-  <label id="chartName">[[title]]</label>
+  <label id="chartName">[[header]]</label>
   <paper-progress id="barChart" value="[[value]]" max="[[max]]"></paper-progress>
   <!-- TODO(joonbug): Add i18n string for percent number format -->
   <label id="percentageLabel">[[computePercentage_(value, max)]]</label>

chromeos/components/diagnostics_ui/resources/percent_bar_chart.js

@@ -19,7 +19,7 @@ Polymer({
   _template: html`{__html_template__}`,
 
   properties: {
-    title: {
+    header: {
       type: String,
     },