WebUI: cr-icon-button, create and show ripple if needed on

'pointerdown' event

This worked in most other situations because the cr-icon-button ripple
is either created when the button gains focus through a click or
keyboard. When the ripple is present, it is listening for the 'down'
event synthetic Polymer event similar to 'pointerdown'.

This issue arose in settings due to the use of cr.ui.focusWithoutInk
which will focus on the button with 'noink' set. |ensureRipple| can
take an event which can be used to determine if a ripple should also
be shown.

Bug: 999070
Change-Id: I355a6a835627e628b88e3eb3b6737354034fc67d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1775200Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#692089}

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

@@ -50,4 +50,18 @@ suite('cr-icon-button-focus-tests', function() {
     button.noink = true;
     assertTrue(button.getRipple().holdDown);
   });
+
+  test('no ripple until focus', () => {
+    assertFalse(button.hasRipple());
+    button.focus();
+    assertTrue(button.hasRipple());
+  });
+
+  test('when noink, no ripple until mouse down', () => {
+    button.noink = true;
+    button.focus();
+    assertFalse(button.hasRipple());
+    button.dispatchEvent(new PointerEvent('pointerdown'));
+    assertTrue(button.hasRipple());
+  });
 });

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

@@ -59,6 +59,7 @@ Polymer({
     focus: 'showRipple_',
     keydown: 'onKeyDown_',
     keyup: 'onKeyUp_',
+    pointerdown: 'ensureRipple',
     up: 'hideRipple_',
   },