Convert cr_expand_button to Polymer v0_8

BUG=485381

Review URL: https://codereview.chromium.org/1131903006

Cr-Commit-Position: refs/heads/master@{#331835}

4 files changed, 66 insertions, 4 deletions

diff --git a/ui/webui/resources/cr_elements/v0_8/cr_expand_button/cr_expand_button.html b/ui/webui/resources/cr_elements/v0_8/cr_expand_button/cr_expand_button.html
new file mode 100644
index 0000000..888b49d
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v0_8/cr_expand_button/cr_expand_button.html
@@ -0,0 +1,12 @@
+<link rel="import" href="chrome://resources/polymer/v0_8/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/iron-icons/iron-icons.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/paper-icon-button/paper-icon-button.html">
+
+<dom-module id="cr-expand-button">
+  <template>
+    <paper-icon-button toggles active="{{expanded}}" disabled="[[disabled]]"
+        icon="[[iconName_(expanded)]]">
+    </paper-icon-button>
+  </template>
+  <script src="cr_expand_button.js"></script>
+</dom-module>
diff --git a/ui/webui/resources/cr_elements/v0_8/cr_expand_button/cr_expand_button.js b/ui/webui/resources/cr_elements/v0_8/cr_expand_button/cr_expand_button.js
new file mode 100644
index 0000000..c75d362
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v0_8/cr_expand_button/cr_expand_button.js
@@ -0,0 +1,44 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ * 'cr-expand-button' is a chrome-specific wrapper around paper-icon-button that
+ * toggles between an opened (expanded) and closed state.
+ *
+ * Example:
+ *
+ *    <cr-expand-button expanded="{{sectionIsExpanded}}"></cr-expand-button>
+ *
+ * @group Chrome Elements
+ * @element cr-expand-button
+ */
+Polymer({
+  is: 'cr-expand-button',
+
+  properties: {
+    /**
+     * If true, the button is in the expanded state and will show the
+     * 'expand-less' icon. If false, the button shows the 'expand-more' icon.
+     */
+    expanded: {
+      type: Boolean,
+      value: false,
+      notify: true
+    },
+
+    /**
+     * If true, the button will be disabled and greyed out.
+     */
+    disabled: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true
+    },
+  },
+
+  iconName_: function(expanded) {
+    return expanded ? 'expand-less' : 'expand-more';
+  }
+});
diff --git a/ui/webui/resources/cr_elements/v0_8/demo_element.html b/ui/webui/resources/cr_elements/v0_8/demo_element.html
index 99152a1..2788cfc 100644
--- a/ui/webui/resources/cr_elements/v0_8/demo_element.html
+++ b/ui/webui/resources/cr_elements/v0_8/demo_element.html
@@ -2,6 +2,7 @@
 <link rel="import" href="chrome://resources/cr_elements/v0_8/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/v0_8/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/v0_8/cr_collapse/cr_collapse.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/v0_8/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/v0_8/cr_network_icon/cr_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/v0_8/cr_toggle_button/cr_toggle_button.html">
@@ -19,10 +20,9 @@
     </div>
     <div>
       <h3>cr-collapse</h3>
-      <paper-toggle-button checked="{{collapseOpened}}">
-        Toggle Collapse
-      </paper-toggle-button>
-      <cr-collapse opened="{{collapseOpened}}">
+      <cr-expand-button expanded="{{collapseOpened}}"></cr-expand-button>
+      <span>Toggle Collapse</span>
+      <cr-collapse opened="[[collapseOpened]]">
         <div>
           <span>Collapsable section</span>
         </div>
diff --git a/ui/webui/resources/cr_elements_resources.grdp b/ui/webui/resources/cr_elements_resources.grdp
index 120e8dd..99a570b 100644
--- a/ui/webui/resources/cr_elements_resources.grdp
+++ b/ui/webui/resources/cr_elements_resources.grdp
@@ -147,6 +147,12 @@
   <structure name="IDR_CR_ELEMENTS_08_CR_EVENTS_JS"
              file="../../webui/resources/cr_elements/v0_8/cr_events/cr_events.js"
              type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_08_CR_EXPAND_BUTTON_HTML"
+             file="../../webui/resources/cr_elements/v0_8/cr_expand_button/cr_expand_button.html"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_08_CR_EXPAND_BUTTON_JS"
+             file="../../webui/resources/cr_elements/v0_8/cr_expand_button/cr_expand_button.js"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_08_CR_INPUT_CSS"
              file="../../webui/resources/cr_elements/v0_8/cr_input/cr_input.css"
              type="chrome_html" />