Refactor the settings pin keyboard to fix touch ripples

-Now that pin_keyboard uses cr-button(used to be paper-button) there
is no need for an additional paper-ripple.

-cr-button needs logic for being able to customize ripples since
pin_keyboard uses a custom ripple. The same createRipple function
exists in cr-toggle, cr-slider, etc.

Bug: 1007235
Change-Id: Ib391bd45f87c65bf3ae5982dfccc4a61e5fd807d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1829766
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#701742}

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

@@ -116,6 +116,15 @@
         width: var(--pin-button-width);
 
         @apply --pin-keyboard-digit-button;
+
+        --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 {
@@ -140,17 +149,6 @@
         height: 16px;
       }
 
-      paper-ripple {
-        --paper-ripple-opacity: .15;
-        color: var(--google-grey-900);
-        height: var(--pin-button-ripple-height);
-        left: var(--pin-button-ripple-left);
-        top: var(--pin-button-ripple-top);
-        width: var(--pin-button-ripple-width);
-
-        @apply --pin-keyboard-paper-ripple;
-      }
-
       #pinInput {
         --cr-input-error-display: none;
         --cr-input-input: {
@@ -207,81 +205,71 @@
       <div id="rowsContainer">
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="1"
-              noink>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard1')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">&nbsp;</inner-text>
-            <paper-ripple class="circle" center></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="2"
-              noink>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard2')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">ABC</inner-text>
-            <paper-ripple class="circle" center></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="3"
-              noink>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard3')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">DEF</inner-text>
-            <paper-ripple class="circle" center></paper-ripple>
           </cr-button>
         </div>
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="4"
-              noink>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard4')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">GHI</inner-text>
-            <paper-ripple class="circle" center></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="5"
-              noink>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard5')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">JKL</inner-text>
-            <paper-ripple class="circle" center></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="6"
-              noink>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard6')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">MNO</inner-text>
-            <paper-ripple class="circle" center></paper-ripple>
           </cr-button>
         </div>
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="7"
-              noink>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard7')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">PQRS</inner-text>
-            <paper-ripple class="circle" center></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="8"
-              noink>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard8')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">TUV</inner-text>
-            <paper-ripple class="circle" center></paper-ripple>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="9"
-              noink>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard9')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">WXYZ</inner-text>
-            <paper-ripple class="circle" center></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>
+              circle-ripple>
             <inner-text class="number">[[i18n('pinKeyboard0')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">+</inner-text>
-            <paper-ripple class="circle" center></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,22 @@ 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;
+  },
 });