Merge "Replace tap by click event"

polygerrit-ui/app/elements/admin/gr-permission/gr-permission_html.ts

@@ -93,7 +93,7 @@ export const htmlTemplate = html`
               checked="{{permission.value.exclusive}}"
               on-change="_handleValueChange"
               disabled$="[[!editing]]"
-              on-tap="_onTapExclusiveToggle"
+              on-click="_onTapExclusiveToggle"
             ></paper-toggle-button
             >Exclusive
           </template>

polygerrit-ui/app/elements/admin/gr-repo-plugin-config/gr-repo-plugin-config_html.ts

@@ -63,7 +63,7 @@ export const htmlTemplate = html`
                 on-change="_handleBooleanChange"
                 data-option-key$="[[option._key]]"
                 disabled$="[[_computeDisabled(option.info.editable)]]"
-                on-tap="_onTapPluginBoolean"
+                on-click="_onTapPluginBoolean"
               ></paper-toggle-button>
             </template>
             <template is="dom-if" if="[[_isList(option.info.type)]]">

polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_html.ts

@@ -62,7 +62,7 @@ export const htmlTemplate = html`
           checked="{{_showAllActivity}}"
           aria-labelledby="showAllEntriesLabel"
           role="switch"
-          on-tap="_onTapShowAllActivityToggle"
+          on-click="_onTapShowAllActivityToggle"
         ></paper-toggle-button>
         <div id="showAllEntriesLabel" aria-hidden="true">
           <span>Show all entries</span>

polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list_html.ts

@@ -79,7 +79,7 @@ export const htmlTemplate = html`
           <paper-toggle-button
             id="unresolvedToggle"
             checked="{{!unresolvedOnly}}"
-            on-tap="_onTapUnresolvedToggle"
+            on-click="_onTapUnresolvedToggle"
             >All comments</paper-toggle-button
           >
         </div>
@@ -89,7 +89,7 @@ export const htmlTemplate = html`
           <paper-toggle-button
             id="draftToggle"
             checked="{{_draftsOnly}}"
-            on-tap="_onTapUnresolvedToggle"
+            on-click="_onTapUnresolvedToggle"
             >Comments with drafts</paper-toggle-button
           >
         </div>

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_html.ts

@@ -225,7 +225,7 @@ export const htmlTemplate = html`
         <iron-icon
           id="mobileSearch"
           icon="gr-icons:search"
-          on-tap="_onMobileSearchTap"
+          on-click="_onMobileSearchTap"
           role="button"
           aria-label="[[_computeShowHideAriaLabel(mobileSearchHidden)]]"
         ></iron-icon>

polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.ts

@@ -31,6 +31,7 @@ import {DiffInfo, DiffPreferencesInfo} from '../../../types/diff';
 import {DiffViewMode, Side} from '../../../constants/constants';
 import {DiffLayer} from '../../../types/types';
 import {pluralize} from '../../../utils/string-util';
+import {fire} from '../../../utils/event-util';
 
 /**
  * In JS, unicode code points above 0xFFFF occupy two elements of a string.
@@ -62,12 +63,16 @@ enum ContextButtonType {
   ALL = 'all',
 }
 
-export interface ContextEvent extends Event {
-  detail: {
-    groups: GrDiffGroup[];
-    section: HTMLElement;
-    numLines: number;
-  };
+export interface DiffContextExpandedEventDetail {
+  groups: GrDiffGroup[];
+  section: HTMLElement;
+  numLines: number;
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    'diff-context-expanded': CustomEvent<DiffContextExpandedEventDetail>;
+  }
 }
 
 export abstract class GrDiffBuilder {
@@ -492,7 +497,7 @@ export abstract class GrDiffBuilder {
     button.appendChild(textSpan);
 
     if (requiresLoad) {
-      button.addEventListener('tap', e => {
+      button.addEventListener('click', e => {
         e.stopPropagation();
         const firstRange = groups[0].lineRange;
         const lastRange = groups[groups.length - 1].lineRange;
@@ -506,25 +511,18 @@ export abstract class GrDiffBuilder {
             end_line: lastRange.right.end_line,
           },
         };
-        button.dispatchEvent(
-          new CustomEvent<ContentLoadNeededEventDetail>('content-load-needed', {
-            detail: {
-              lineRange,
-            },
-            bubbles: true,
-            composed: true,
-          })
-        );
+        fire<ContentLoadNeededEventDetail>(button, 'content-load-needed', {
+          lineRange,
+        });
       });
     } else {
-      button.addEventListener('tap', e => {
-        const event = e as ContextEvent;
-        event.detail = {
+      button.addEventListener('click', e => {
+        e.stopPropagation();
+        fire<DiffContextExpandedEventDetail>(button, 'diff-context-expanded', {
           groups,
           section,
           numLines,
-        };
-        // Let it bubble up the DOM tree.
+        });
       });
     }
 

polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts

@@ -78,6 +78,7 @@ import {
 } from '../../../utils/event-util';
 import {getPluginLoader} from '../../shared/gr-js-api-interface/gr-plugin-loader';
 import {assertIsDefined} from '../../../utils/common-util';
+import {DiffContextExpandedEventDetail} from '../gr-diff-builder/gr-diff-builder';
 
 const MSG_EMPTY_BLAME = 'No blame information for this diff.';
 
@@ -1065,9 +1066,9 @@ export class GrDiffHost extends PolymerElement {
     });
   }
 
-  _handleDiffContextExpanded(event: CustomEvent) {
+  _handleDiffContextExpanded(e: CustomEvent<DiffContextExpandedEventDetail>) {
     this.reporting.reportInteraction('diff-context-expanded', {
-      numLines: event.detail.numLines,
+      numLines: e.detail.numLines,
     });
   }
 
@@ -1153,7 +1154,7 @@ declare global {
     /* prettier-ignore */
     'render': CustomEvent;
     'normalize-range': CustomEvent;
-    'diff-context-expanded': CustomEvent;
+    'diff-context-expanded': CustomEvent<DiffContextExpandedEventDetail>;
     'create-comment': CustomEvent;
     'comment-discard': CustomEvent;
     'comment-update': CustomEvent;

polygerrit-ui/app/elements/diff/gr-diff/gr-diff.ts

@@ -75,6 +75,7 @@ import {
 import {isSafari, toggleClass} from '../../../utils/dom-util';
 import {assertIsDefined} from '../../../utils/common-util';
 import {debounce, DelayedTask} from '../../../utils/async-util';
+import {DiffContextExpandedEventDetail} from '../gr-diff-builder/gr-diff-builder';
 
 const NO_NEWLINE_BASE = 'No newline at end of base file.';
 const NO_NEWLINE_REVISION = 'No newline at end of revision file.';
@@ -523,21 +524,15 @@ export class GrDiff extends PolymerElement {
     return classes.join(' ');
   }
 
+  _handleDiffContextExpanded(e: CustomEvent<DiffContextExpandedEventDetail>) {
+    // Don't stop propagation. The host may listen for reporting or resizing.
+    this.$.diffBuilder.showContext(e.detail.groups, e.detail.section);
+  }
+
   _handleTap(e: CustomEvent) {
     const el = (dom(e) as EventApi).localTarget as Element;
 
-    if (el.classList.contains('showContext')) {
-      this.dispatchEvent(
-        new CustomEvent('diff-context-expanded', {
-          detail: {
-            numLines: e.detail.numLines,
-          },
-          composed: true,
-          bubbles: true,
-        })
-      );
-      this.$.diffBuilder.showContext(e.detail.groups, e.detail.section);
-    } else if (
+    if (
       el.getAttribute('data-value') !== 'LOST' &&
       (el.classList.contains('lineNum') ||
         el.classList.contains('lineNumButton'))

polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.ts

@@ -580,7 +580,8 @@ export const htmlTemplate = html`
   </div>
   <div
     class$="[[_computeContainerClass(loggedIn, viewMode, displayLine)]]"
-    on-tap="_handleTap"
+    on-click="_handleTap"
+    on-diff-context-expanded="_handleDiffContextExpanded"
   >
     <gr-diff-selection diff="[[diff]]">
       <gr-diff-highlight

polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.js

@@ -462,7 +462,7 @@ suite('gr-diff tests', () => {
       const el = document.createElement('div');
       el.className = 'showContext';
       el.addEventListener('click', e => {
-        element._handleTap(e);
+        element._handleDiffContextExpanded(e);
         assert.isTrue(showContextStub.called);
         done();
       });

polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_html.ts

@@ -107,7 +107,7 @@ export const htmlTemplate = html`
             aria-labelledby="darkThemeToggleLabel"
             checked="[[_isDark]]"
             on-change="_handleToggleDark"
-            on-tap="_onTapDarkToggle"
+            on-click="_onTapDarkToggle"
           ></paper-toggle-button>
           <div id="darkThemeToggleLabel">Dark theme (alpha)</div>
         </div>

polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard_html.ts

@@ -59,7 +59,7 @@ export const htmlTemplate = html`
       class="copyText"
       type="text"
       bind-value="[[text]]"
-      on-tap="_handleInputClick"
+      on-click="_handleInputClick"
       readonly=""
     >
       <input