connectivity-diagnostics: add arrow icon to routine group

This arrow icon is used to indicate that there is additional information
inside the routine group if clicked out. The arrow toggles when the
routine group is expanded to show it can be closed again.

Screenshot: https://screenshot.googleplex.com/5rk7VW6yFE4brfW

Bug: chromium:1142857
Change-Id: Ifc6163a2a5f394d2692911046a7ac38399e9f040
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2577722
Commit-Queue: Trent Begin <tbegin@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834466}

ui/webui/resources/cr_components/chromeos/network_health/BUILD.gn

@@ -110,6 +110,7 @@ js_library("routine_group.m") {
   deps = [
     ":network_diagnostics_mojo.m",
     ":network_diagnostics_types.m",
+    "//third_party/polymer/v3_0/components-chromium/iron-icon:iron-icon",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]

ui/webui/resources/cr_components/chromeos/network_health/routine_group.html

 <link rel="import" href="../../../html/i18n_behavior.html">
 <link rel="import" href="../../../html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="network_diagnostics_mojo.html">
 <link rel="import" href="network_diagnostics_types.html">
 
@@ -54,6 +56,7 @@
         </template>
         <img class="routine-icon" hidden="[[!showGroupIcon]]"
             src="[[getGroupIcon_(routines.*)]]">
+        <iron-icon icon="[[getArrowIcon_(expanded)]]"></iron-icon>
       </div>
       <template is="dom-if" if="[[expanded]]">
         <template is="dom-repeat" items="[[routines]]" as="routine"

ui/webui/resources/cr_components/chromeos/network_health/routine_group.js

@@ -60,6 +60,15 @@ Polymer({
     },
   },
 
+  /**
+   * Returns the correct arrow icon depending on if the routine group is
+   * expanded.
+   * @param {boolean} expanded
+   */
+  getArrowIcon_(expanded) {
+    return expanded ? 'cr:expand-less' : 'cr:expand-more';
+  },
+
   /**
    * Helper function to get the icon for a group of routines based on all of
    * their results.