Reland pin keyboard touch ripples

-My original CL(https://crrev.com/c/1829766) was reverted due to the bug
 mentioned here http:crbug/1012102.

-New changes made in http://crbug/1023394 made it safe to reapply my original
 CL

-I am applying these changes in this new CL because there were issues with
 merge conflicts in the reverted CL.

Fixed: 1007235
Change-Id: I22b6608396238367cb2a7dd520d877c4ea78d767
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1967806Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#726272}

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -105,6 +105,15 @@
         opacity: 0.87;
         padding: 0;
         width: var(--pin-button-size);
+
+        --ink-color: var(--google-grey-900);
+        --paper-ripple-height: var(--pin-button-ripple-height);
+        --paper-ripple-left: var(--pin-button-ripple-left);
+        --paper-ripple-opacity: .15;
+        --paper-ripple-top: var(--pin-button-ripple-top);
+        --paper-ripple-width: var(--pin-button-ripple-width);
+
+        @apply --pin-keyboard-paper-ripple;
       }
 
       :host-context(.focus-outline-visible) .digit-button:focus {
@@ -133,11 +142,6 @@
         font-size: 20px;
       }
 
-      paper-ripple {
-        --paper-ripple-opacity: .15;
-        color: var(--google-grey-900);
-      }
-
       #pinInput {
         --cr-input-error-display: none;
         --cr-input-input: {
@@ -193,81 +197,71 @@
       <div id="rowsContainer">
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="1"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard1')]]</inner-text>
             <inner-text class="letter empty"
                 hidden="[[!enableLetters]]">ABC</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="2"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard2')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">ABC</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="3"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard3')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">DEF</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
         </div>
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="4"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard4')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">GHI</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="5"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard5')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">JKL</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="6"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard6')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">MNO</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
         </div>
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="7"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard7')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">PQRS</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="8"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard8')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">TUV</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="9"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard9')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">WXYZ</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
         </div>
         <div class="row bottom-row">
           <div class="digit-button"></div>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="0"
-              noink disabled="[[disabled]]">
+              disabled="[[disabled]]" circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard0')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">+</inner-text>
-            <paper-ripple class="circle"></paper-ripple>
           </cr-button>
           <cr-icon-button id="backspaceButton"
               disabled$="[[!hasInput_(value)]]"

ui/webui/resources/cr_elements/cr_button/cr_button.html

@@ -151,6 +151,12 @@
 
       paper-ripple {
         color: var(--ink-color);
+        height: var(--paper-ripple-height);
+        width: var(--paper-ripple-width);
+        /* Fallback to 0 to match the values in paper-ripple.html. Falls back
+         * to null without this. */
+        left: var(--paper-ripple-left, 0);
+        top: var(--paper-ripple-top, 0);
       }
     </style>
     <slot></slot>

ui/webui/resources/cr_elements/cr_button/cr_button.js

@@ -21,6 +21,15 @@ Polymer({
       reflectToAttribute: true,
       observer: 'disabledChanged_',
     },
+
+    /**
+    * Flag used for formatting ripples on circle shaped cr-buttons.
+    * @private
+    */
+    circleRipple: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   hostAttributes: {
@@ -149,5 +158,21 @@ Polymer({
    *     longer uses tap event at least with addEventListener().
    * @private
    */
-  onTap_: function() {}
+  onTap_: function() {},
+
+  /**
+   * Customize the element's ripple. Overriding the '_createRipple' function
+   * from PaperRippleBehavior.
+   * @return {PaperRippleElement}
+   */
+  _createRipple: function() {
+    const ripple = Polymer.PaperRippleBehavior._createRipple();
+
+    if (this.circleRipple) {
+      ripple.setAttribute('center', '');
+      ripple.classList.add('circle');
+    }
+
+    return ripple;
+  },
 });