Add material design toggle ripple element.

ui/file_manager/gallery/elements/gallery_toggle_button.js

Index: ui/file_manager/gallery/elements/gallery_toggle_button.js
diff --git a/ui/file_manager/gallery/elements/gallery_toggle_button.js b/ui/file_manager/gallery/elements/gallery_toggle_button.js
new file mode 100644
index 0000000000000000000000000000000000000000..a81957b498f3172db6c3715250c6048087a32c4d
--- /dev/null
+++ b/ui/file_manager/gallery/elements/gallery_toggle_button.js
@@ -0,0 +1,139 @@
+// 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.
+
+/**
+ * Toggle Button.
+ *
+ * activated or deactivated events are dispatched when the state of the button
+ * is toggled.
+ *
+ * You can change ripple color by the following CSS selector.
+ *
+ * gallery-toggle-button#my-button::shadow .ripple {
+ *   background-color: black;
+ * }
+ */
+var GalleryToggleButton = Polymer({
+  is: 'gallery-toggle-button',
+
+  properties: {
+    'activated': {
+      type: Boolean,
+      value: false,
+      observer: 'onActivatedChanged_'

[fukino, 2015/06/10 08:28:52]

nit: 'activatedChanged' or 'activatedChanged_' looks more consistent with
existing code.

[yawano, 2015/06/10 08:55:19]

Done.

+    },
+  },
+
+  /**
+   * Called when button is tapped or clicked.
+   * @private
+   */
+  onTapped_: function() {

[fukino, 2015/06/10 08:28:53]

I'm not sure if TAP is the trigger for this animation.
I thought the effect was for FOCUSED state. If so, tab key etc. can trigger the
effect.
Maybe we should clarify the spec.

[yawano, 2015/06/11 03:21:31]

The active state here means "pressed", e.g. showing context menu. It does not
include "focus".

+    this.activated = !this.activated;
+  },
+
+  /**
+   * Called when value of activated property is changed.
+   * @param {boolean} newValue New value.
+   * @param {boolean} oldValue Old value.
+   * @private
+   */
+  onActivatedChanged_: function(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+
+    if (newValue) {
+      this.fire('activated');
+      this.performActivateAnimation_();
+    } else {
+      this.fire('deactivated');
+      this.performDeactivateAnimation_();
+    }
+  },
+
+  /**
+   * Perform activate animation.
+   * @private
+   */
+  performActivateAnimation_: function() {
+    this.$.ripple.animate([
+        {opacity: 0, offset: 0, easing: 'linear'},
+        {opacity: 0.2, offset: 1}
+    ], 50);
+    this.$.ripple.animate([
+        {
+          width: '38.5%',
+          height: '38.5%',
+          offset: 0,
+          easing: 'cubic-bezier(0, 0, 0.330066603741, 0.931189591041)'
+        },
+        {
+          width: '97.4%',
+          height: '97.4%',
+          offset: 0.5,
+          easing: 'cubic-bezier(0.435623148352, 0.141946042876, 0.2, 1.0)'
+        },
+        {
+          width: '60.3%',
+          height: '60.3%',
+          offset: 1
+        }
+    ], 500);
+    this.$.ripple.animate([
+        {
+          'border-radius': '48.7%',
+          offset: 0,
+          easing: 'linear'
+        },
+        {
+          'border-radius': '48.7%',
+          offset: 0.333,
+          easing: 'cubic-bezier(0.109613342381, 0.32112094549, 0.2, 1.0)'
+        },
+        {
+          'border-radius': '2.56%',
+          offset: 1
+        }
+    ], 750);
+
+    this.$.ripple.classList.add('activated');
+  },
+
+  /**
+   * Perform deactivate animation.
+   * @private
+   */
+  performDeactivateAnimation_: function() {
+    this.$.ripple.animate([
+      {opacity: 0.2, offset: 0, easing: 'linear'},
+      {opacity: 0, offset: 1}
+    ], 150);
+    this.$.ripple.animate([
+      {
+        width: '60.3%',
+        height: '60.3%',
+        offset: 0,
+        easing: 'cubic-bezier(0, 0, 0.6, 1)'
+      },
+      {
+        width: '100%',
+        height: '100%',
+        offset: 1
+      }
+    ], 150);
+    this.$.ripple.animate([
+      {
+        'border-radius': '2.56%',

[fukino, 2015/06/10 08:28:52]

nit: These single quotation marks looks unnecessary.

[yawano, 2015/06/10 08:55:19]

If we remove single quotes, it becomes syntax error.
Key: symbol cannot contain '-'.
Value: % is parsed as operator.

+        offset: 0,
+        easing: 'cubic-bezier(0, 0, 0.2, 1)'
+      },
+      {
+        'border-radius': '50%',

[fukino, 2015/06/10 08:28:53]

ditto

+        offset: 1
+      }
+    ], 150);
+
+    this.$.ripple.classList.remove('activated');
+  }
+});