CrIconButton: Disable ripple animation capability

Adds support for cr-icon-button with no ripple animations required for
certain UX scenarios.

Bug: 1128599
Change-Id: Icd3f6749fd268b4548ea6f9639ec8340ed2da8d5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2441041Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Roman Arora <romanarora@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812539}

chrome/test/data/webui/cr_elements/cr_icon_button_tests.js

@@ -167,4 +167,13 @@ suite('cr-icon-button', function() {
     assertEquals('icon1', elements[0].icon);
     assertEquals('icon2', elements[1].icon);
   });
+
+  test('disable ripple property prevents showing ripple', () => {
+    document.body.innerHTML =
+        '<cr-icon-button disable-ripple></cr-icon-button>';
+    button = /** @type {!CrIconButtonElement} */ (
+        document.body.querySelector('cr-icon-button'));
+    button.focus();
+    assertFalse(button.hasRipple());
+  });
 });

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js

@@ -63,6 +63,11 @@ Polymer({
       observer: 'applyTabIndex_',
     },
 
+    disableRipple: {
+      type: Boolean,
+      value: false,
+    },
+
     ironIcon: {
       type: String,
       observer: 'onIronIconChanged_',
@@ -115,7 +120,7 @@ Polymer({
 
   /** @private */
   showRipple_() {
-    if (!this.noink && !this.disabled) {
+    if (!this.noink && !this.disabled && !this.disableRipple) {
       this.getRipple().showAndHoldDown();
       this.rippleShowing_ = true;
     }