Implement md-settings network lists.

ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html

Index: ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html
diff --git a/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html b/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html
new file mode 100644
index 0000000000000000000000000000000000000000..ee53731b9d23ba1bbffe1462b39987326171c09e
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html
@@ -0,0 +1,13 @@
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/paper-button/paper-button.html">

[michaelpg, 2015/04/23 02:16:29]

import core-icon as well

[stevenjb, 2015/04/24 01:25:26]

Done.

+
+<polymer-element name="cr-expand-button">
+  <template>
+    <paper-button id="expand" disabled="{{disabled}}"

[michaelpg, 2015/04/23 02:16:29]

If there's no need to give the button an ID, let's leave it out.

[michaelpg, 2015/04/23 02:16:29]

paper-button (through CoreFocusable) has a "toggle" attribute which will make
the "active" attribute do what you currently do for "expanded" -- so you might
be able to just set <paper-button toggle active="{{expanded}}"
disabled="{{disabled}}"> and not have to manually wire up click click events.

See "Toggle buttons" in
https://www.polymer-project.org/0.5/components/paper-button/demo.html

[Jeremy Klein, 2015/04/23 18:21:15]

It seems like core-icon-button or paper-icon-button is a better fit here. 

[stevenjb, 2015/04/24 01:25:26]

paper-icon-button only has a single icon.

Using 'active' (not mentioned in paper-button docs, thankyouverymuch) highlights
the button, which looks a little odd, but we can probably change that with
styling, and will give the UX folks more to think about :) Done.

[michaelpg, 2015/04/24 19:35:37]

Yeah, you have to click through the whole inheritance chain because they don't
show "inherited" attributes for mixins :-( But I'm glad we made this work.

[Jeremy Klein, 2015/04/27 22:36:10]

I'm not suggesting we get rid of this wrapper, just that we wrap
paper-icon-button instead of paper-button and core-icon. paper-icon-button
essentially does exactly what you're doing here and you could use the same exact
binding in the icon attribute.

[stevenjb, 2015/04/28 01:05:02]

Ah. Yes, that works, and we get a cute round hilight instead of a squarish one.
Done.

+        on-click="{{toggleExpanded}}">
+      <core-icon icon="{{expanded ? 'expand-less' : 'expand-more'}}">
+      </core-icon>
+    </paper-button>
+  </template>
+  <script src="cr_expand_button.js"></script>
+</polymer-element>