WebUI: Disallow the "Tap_" suffix in favor of "Click_" via ESLint.

"Tap_" is an old terminology from Polymer1 where synthetic "tap" events
where used instead of native "click" events. Even though "tap" events
are no longer used anywhere (crbug.com/812035), occasionally cases of
handlers named with the "Tap_" suffix occur, which will be
automatically flagged from now on.

Most violations revealed by the following command have been fixed in
eiter in precursor CLs or in this CL.

git cl presubmit --files="*.ts"

Bug: 720034
Change-Id: I96cc798872a2d0066d32acf5ed460d55b42db4a5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4436109
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1149803}

.eslintrc.js

@@ -144,6 +144,14 @@ module.exports = {
           format: ['strictCamelCase'],
           modifiers: ['private'],
           trailingUnderscore: 'allow',
+
+          // Disallow the 'Tap_' suffix, in favor of 'Click_' in event handlers.
+          // Note: Unfortunately this ESLint rule does not provide a way to
+          // customize the error message to better inform developers.
+          custom: {
+            regex: '^on[a-zA-Z0-9]+Tap$',
+            match: false,
+          },
         },
         {
           selector: 'classProperty',

ash/webui/common/resources/quick_unlock/pin_keyboard.html

@@ -163,7 +163,7 @@
   }
 </style>
 
-<div id="root" on-click="onRootTap_">
+<div id="root" on-click="onRootClick_">
   <div id="pinInputDiv">
     <cr-input id="pinInput" type="password" value="{{value}}"
         is-input-rtl$="[[isInputRtl_(value)]]" aria-label="[[ariaLabel]]"
@@ -178,51 +178,51 @@
   </div>
   <div id="rowsContainer">
     <div class="row">
-      <cr-button class="digit-button" on-click="onNumberTap_" value="1"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="1"
           id="digitButton1" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard1')]]</inner-text>
       </cr-button>
-      <cr-button class="digit-button" on-click="onNumberTap_" value="2"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="2"
           id="digitButton2" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard2')]]</inner-text>
       </cr-button>
-      <cr-button class="digit-button" on-click="onNumberTap_" value="3"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="3"
           id="digitButton3" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard3')]]</inner-text>
       </cr-button>
     </div>
     <div class="row">
-      <cr-button class="digit-button" on-click="onNumberTap_" value="4"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="4"
           id="digitButton4" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard4')]]</inner-text>
       </cr-button>
-      <cr-button class="digit-button" on-click="onNumberTap_" value="5"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="5"
           id="digitButton5" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard5')]]</inner-text>
       </cr-button>
-      <cr-button class="digit-button" on-click="onNumberTap_" value="6"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="6"
           id="digitButton6" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard6')]]</inner-text>
       </cr-button>
     </div>
     <div class="row">
-      <cr-button class="digit-button" on-click="onNumberTap_" value="7"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="7"
           id="digitButton7" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard7')]]</inner-text>
       </cr-button>
-      <cr-button class="digit-button" on-click="onNumberTap_" value="8"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="8"
           id="digitButton8" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard8')]]</inner-text>
       </cr-button>
-      <cr-button class="digit-button" on-click="onNumberTap_" value="9"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="9"
           id="digitButton9" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard9')]]</inner-text>
@@ -232,7 +232,7 @@
       <cr-icon-button id="backspaceButton"
           disabled$="[[!hasInput_(value)]]"
           iron-icon="pin-keyboard:backspace"
-          on-click="onBackspaceTap_"
+          on-click="onBackspaceClick_"
           on-pointerdown="onBackspacePointerDown_"
           on-pointerout="clearAndReset_"
           on-pointerup="onBackspacePointerUp_"
@@ -240,7 +240,7 @@
           title="[[i18n('pinKeyboardDeleteAccessibleName')]]"
           custom-tab-index="-1">
       </cr-icon-button>
-      <cr-button class="digit-button" on-click="onNumberTap_" value="0"
+      <cr-button class="digit-button" on-click="onNumberClick_" value="0"
           id="digitButton0" disabled="[[disabled]]" circle-ripple
           custom-tab-index="-1">
         <inner-text class="number">[[i18n('pinKeyboard0')]]</inner-text>

ash/webui/common/resources/quick_unlock/pin_keyboard.ts

@@ -278,7 +278,7 @@ export class PinKeyboardElement extends PinKeyboardElementBase {
    * Transfers focus to the input. Called when a non button element on the
    * PIN button area is clicked to prevent focus from leaving the input.
    */
-  private onRootTap_(): void {
+  private onRootClick_(): void {
     // Focus the input and place the selected region to its exact previous
     // location, as this function will not be called by something that will also
     // modify the input value.
@@ -294,9 +294,9 @@ export class PinKeyboardElement extends PinKeyboardElementBase {
   }
 
   /**
-   * Called when a keypad number has been tapped.
+   * Called when a keypad number has been clicked.
    */
-  private onNumberTap_(event: Event): void {
+  private onNumberClick_(event: Event): void {
     const button = event.target;
     assertInstanceof(button, CrButtonElement);
     const numberValue = button.getAttribute('value');
@@ -367,7 +367,7 @@ export class PinKeyboardElement extends PinKeyboardElementBase {
    * touch. Note: This does not support repeatedly backspacing by holding down
    * the space or enter key like touch or mouse does.
    */
-  private onBackspaceTap_(event: Event): void {
+  private onBackspaceClick_(event: Event): void {
     if (!receivedEventFromKeyboard(event)) {
       return;
     }