cros: Removed some zones in the middle of the pin keyboard that do not accept touches.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

 <!-- TODO(crbug.com/603217): Use i18n instead of string literals. Figure out
                              what i18n to use for keypad, ie, does 1 ABC make
                              sense in every scenario? -->
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
@@ skipping 26 matching lines @@
         display: flex;
       }
 
       .row {
         display: flex;
       }
 
       .digit-button {
         align-items: center;
         background: none;
-        border-radius: 100px;
+        border-radius: 0;
         box-sizing: border-box;
         color: #000;
         display: flex;
         flex-direction: column;
         font-size: 18px;
         height: 48px;
         justify-content: center;
-        margin: 0 6px;
+        margin: 0;
         min-height: 48px;
         min-width: 48px;
         opacity: 0.87;
-        padding: 15px;
-        width: 48px;
+        padding: 15px 21px;
+        width: 60px;
       }
 
       [hidden=true] {
         display: none;
       }
 
       .bottom-row {
         margin-bottom: 6px;
       }
 
       .top-row {
         margin-top: 6px;
       }
 
+      .backspace-button-container {
+        position: relative;
+      }
+
+      .backspace-button-container paper-ripple {
+        position: absolute;
+        top: 0;
+      }
+
+      paper-ripple {
+        border-radius: 100px;
+        color: #000;
+        height: 48px;
+        left: 6px;
+        width: 48px;
+      }
+
       .digit-button.backspace-button {
+        left: 0;
         opacity: var(--dark-primary-opacity);
         padding: 14px;
+        position: absolute;
+        top: 0;
       }
 
       .digit-button.backspace-button:not([has-content]) {
         color: #000;
         opacity: 0.26;
       }
 
       .digit-button inner-text {
         color: var(--paper-blue-grey-700);
         display: flex;
@@ skipping 66 matching lines @@
                  placeholder="[[getInputPlaceholder_(enablePassword)]]"
                  value="{{value::input}}"
                  on-keydown="onInputKeyDown_"
                  is-invisible$=[[hideInput]]>
           </input>
         </div>
         <hr>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="1">
             <inner-text>$i18n{pinKeyboard1}</inner-text>
+            <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="2">
             <inner-text>$i18n{pinKeyboard2}</inner-text>
+            <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="3">
             <inner-text>$i18n{pinKeyboard3}</inner-text>
+            <paper-ripple>
           </paper-button>
         </div>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="4">
             <inner-text>$i18n{pinKeyboard4}</inner-text>
+            <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="5">
             <inner-text>$i18n{pinKeyboard5}</inner-text>
+            <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="6">
             <inner-text>$i18n{pinKeyboard6}</inner-text>
+            <paper-ripple>
           </paper-button>
         </div>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="7">
             <inner-text>$i18n{pinKeyboard7}</inner-text>
+            <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="8">
             <inner-text>$i18n{pinKeyboard8}</inner-text>
+            <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="9">
             <inner-text>$i18n{pinKeyboard9}</inner-text>
+            <paper-ripple>
           </paper-button>
         </div>
         <div class="row keyboard bottom-row">
           <div class="digit-button"></div>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="0">
             <inner-text>$i18n{pinKeyboard0}</inner-text>
+            <paper-ripple>
           </paper-button>
-          <paper-icon-button class="digit-button backspace-button"
-                             has-content$="[[hasInput_(value)]]"
-                             icon="pin-keyboard:backspace"
-                             on-pointerdown="onBackspacePointerDown_"
-                             on-pointerout="onBackspacePointerOut_"
-                             on-pointerup="onBackspacePointerUp_">
-          </paper-icon-button>
+          <div class="backspace-button-container">
+            <paper-icon-button class="digit-button backspace-button"
+                               has-content$="[[hasInput_(value)]]"
+                               icon="pin-keyboard:backspace"
+                               on-pointerdown="onBackspacePointerDown_"
+                               on-pointerout="onBackspacePointerOut_"
+                               on-pointerup="onBackspacePointerUp_">
+            </paper-icon-button>
+            <paper-ripple>
+          </div>
         </div>
       </div>
     </div>
   </template>
   <script src="pin_keyboard.js"></script>
 </dom-module>