Commit aedd4f9a authored by Trent Begin's avatar Trent Begin Committed by Chromium LUCI CQ

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: default avatarSteven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834466}
parent ca3939ec
...@@ -110,6 +110,7 @@ js_library("routine_group.m") { ...@@ -110,6 +110,7 @@ js_library("routine_group.m") {
deps = [ deps = [
":network_diagnostics_mojo.m", ":network_diagnostics_mojo.m",
":network_diagnostics_types.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", "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/js:i18n_behavior.m", "//ui/webui/resources/js:i18n_behavior.m",
] ]
......
<link rel="import" href="../../../html/i18n_behavior.html"> <link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="../../../html/polymer.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/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_mojo.html">
<link rel="import" href="network_diagnostics_types.html"> <link rel="import" href="network_diagnostics_types.html">
...@@ -54,6 +56,7 @@ ...@@ -54,6 +56,7 @@
</template> </template>
<img class="routine-icon" hidden="[[!showGroupIcon]]" <img class="routine-icon" hidden="[[!showGroupIcon]]"
src="[[getGroupIcon_(routines.*)]]"> src="[[getGroupIcon_(routines.*)]]">
<iron-icon icon="[[getArrowIcon_(expanded)]]"></iron-icon>
</div> </div>
<template is="dom-if" if="[[expanded]]"> <template is="dom-if" if="[[expanded]]">
<template is="dom-repeat" items="[[routines]]" as="routine" <template is="dom-repeat" items="[[routines]]" as="routine"
......
...@@ -60,6 +60,15 @@ Polymer({ ...@@ -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 * Helper function to get the icon for a group of routines based on all of
* their results. * their results.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment