Diagnostics: Percent bar chart header icons

https://screenshot.googleplex.com/3D6kchnMu4Dx2Ez

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I17237736ae391af7e82bc747b09bbb4749a3c548
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2492969
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#820329}

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

@@ -28,8 +28,9 @@ suite('PercentBarChartTest', () => {
    * @param {string} header
    * @param {number} value
    * @param {number} max
+   * @param {string=} headerIcon
    */
-  function initializePercentBarChart(header, value, max) {
+  function initializePercentBarChart(header, value, max, headerIcon) {
     assertFalse(!!percentBarChartElement);
 
     // Add the element to the DOM.
@@ -38,6 +39,7 @@ suite('PercentBarChartTest', () => {
     percentBarChartElement.header = header;
     percentBarChartElement.value = value;
     percentBarChartElement.max = max;
+    percentBarChartElement.headerIcon = headerIcon || '';
     document.body.appendChild(percentBarChartElement);
 
     return flushTasks();
@@ -57,6 +59,19 @@ suite('PercentBarChartTest', () => {
           header, percentBarChartElement.$$('#chartName').textContent.trim());
       diagnostics_test_utils.assertElementContainsText(
           percentBarChartElement.$$('#percentageLabel'), `${percent}`);
+
+      assertFalse(!!percentBarChartElement.$$('#headerIcon'));
+    });
+  });
+
+  test('WithHeaderIcon', () => {
+    const header = 'Test header';
+    const value = 10;
+    const max = 30;
+    const icon = 'cr:warning';
+    return initializePercentBarChart(header, value, max, icon).then(() => {
+      assertEquals(icon, percentBarChartElement.headerIcon);
+      assertTrue(!!percentBarChartElement.$$('#headerIcon'));
     });
   });
 });

chromeos/components/diagnostics_ui/resources/percent_bar_chart.html

@@ -4,6 +4,14 @@
     color: var(--diagnostics-overview-text-color);
   }
 
+  #headerIcon {
+    /*
+     * TODO(joonbug): Replace w/ real colors, and also extend as a property
+     * if dynamic colors.
+     */
+    --iron-icon-fill-color: rgb(26,115,232);
+  }
+
   paper-progress {
     border-radius: 5px;
     display: inline-block;
@@ -22,7 +30,12 @@
 </style>
 
 <div id="barChartContainer">
-  <label id="chartName">[[header]]</label>
+  <label id="chartName">
+    <template is="dom-if" if="[[headerIcon.length]]">
+      <iron-icon id="headerIcon" icon="[[headerIcon]]"></iron-icon>
+    </template>
+    [[header]]
+  </label>
   <div class="body">
     <paper-progress id="barChart" value="[[value]]" max="[[max]]"></paper-progress>
     <label id="percentageLabel">[[computePercentage_(value, max)]]</label>

chromeos/components/diagnostics_ui/resources/percent_bar_chart.js

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/cr_elements/icons.m.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import 'chrome://resources/polymer/v3_0/paper-progress/paper-progress.js';
 import './diagnostics_fonts_css.js';
 import './diagnostics_shared_css.js';
 import './strings.m.js';
-import 'chrome://resources/polymer/v3_0/paper-progress/paper-progress.js';
 
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -25,6 +27,11 @@ Polymer({
       type: String,
     },
 
+    headerIcon: {
+      type: String,
+      value: '',
+    },
+
     value: {
       type: Number,
       value: 0,