Removing legacy on-tap
Recommended by polymer team to remove legacy on tap for on click.
On click has better performance and is well supported by browsers.
If you register tap on gr-button, it will still work, since both click
and tap are notified when user clicks on button.
Change-Id: If683f2ca9b4a2df2270c2df8bce5da3f865f524b
(cherry picked from commit 54f8e3a273207963ab7dfef6c0755396592f679e)
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.html b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
index ee75673..ca4600b 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.html
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
@@ -176,7 +176,7 @@
<div class$="[[_computeClass(_expanded, showAvatar, message)]]">
<gr-avatar account="[[author]]" image-size="100"></gr-avatar>
<div class="contentContainer">
- <div class="author" on-tap="_handleAuthorTap">
+ <div class="author" on-click="_handleAuthorClick">
<span hidden$="[[!showOnBehalfOf]]">
<span class="name">[[message.real_author.name]]</span>
on behalf of
@@ -233,7 +233,7 @@
</span>
</template>
<template is="dom-if" if="[[message.id]]">
- <span class="date" on-tap="_handleAnchorTap">
+ <span class="date" on-click="_handleAnchorClick">
<gr-date-formatter
has-tooltip
show-date-and-time
@@ -242,7 +242,7 @@
</template>
<iron-icon
id="expandToggle"
- on-tap="_toggleExpanded"
+ on-click="_toggleExpanded"
title="Toggle expanded state"
icon="[[_computeExpandToggleIcon(_expanded)]]">
</span>
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.js b/polygerrit-ui/app/elements/change/gr-message/gr-message.js
index 29abaa0..d2dff92 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.js
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.js
@@ -37,7 +37,7 @@
*/
listeners: {
- tap: '_handleTap',
+ click: '_handleClick',
},
properties: {
@@ -163,13 +163,13 @@
}
},
- _handleTap(e) {
+ _handleClick(e) {
if (this.message.expanded) { return; }
e.stopPropagation();
this.set('message.expanded', true);
},
- _handleAuthorTap(e) {
+ _handleAuthorClick(e) {
if (!this.message.expanded) { return; }
e.stopPropagation();
this.set('message.expanded', false);
@@ -232,7 +232,7 @@
return classes.join(' ');
},
- _handleAnchorTap(e) {
+ _handleAnchorClick(e) {
e.preventDefault();
this.dispatchEvent(new CustomEvent('message-anchor-tap', {
bubbles: true,
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
index c9aea58..3a4f8a7 100644
--- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
+++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
@@ -109,7 +109,7 @@
hide-automated="[[_hideAutomated]]"
project-name="[[projectName]]"
show-reply-button="[[showReplyButtons]]"
- on-message-anchor-tap="_handleAnchorTap"
+ on-message-anchor-tap="_handleAnchorClick"
label-extremes="[[_labelExtremes]]"
data-message-id$="[[message.id]]"></gr-message>
</template>
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.js b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.js
index 9fa0290..6e4ddc9 100644
--- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.js
+++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.js
@@ -194,7 +194,7 @@
this.handleExpandCollapse(!this._expanded);
},
- _handleAnchorTap(e) {
+ _handleAnchorClick(e) {
this.scrollToMessage(e.detail.id);
},
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.js b/polygerrit-ui/app/elements/shared/gr-button/gr-button.js
index 5988cde..d88fdb5 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.js
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.js
@@ -53,7 +53,6 @@
},
listeners: {
- tap: '_handleAction',
click: '_handleAction',
keydown: '_handleKeydown',
},
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button_test.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button_test.html
index 807d095..2593ed1 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button_test.html
@@ -41,7 +41,11 @@
const addSpyOn = function(eventName) {
const spy = sandbox.spy();
- element.addEventListener(eventName, spy);
+ if (eventName == 'tap') {
+ Polymer.Gestures.addListener(element, eventName, spy);
+ } else {
+ element.addEventListener(eventName, spy);
+ }
return spy;
};
@@ -64,6 +68,8 @@
assert.isTrue(element.$$('paper-button').disabled);
});
+ // 'tap' event is tested so we don't loose backward compatibility with older
+ // plugins who didn't move to on-click which is faster and well supported.
for (const eventName of ['tap', 'click']) {
test('dispatches ' + eventName + ' event', () => {
const spy = addSpyOn(eventName);
@@ -74,16 +80,16 @@
// Keycodes: 32 for Space, 13 for Enter.
for (const key of [32, 13]) {
- test('dispatches tap event on keycode ' + key, () => {
+ test('dispatches click event on keycode ' + key, () => {
const tapSpy = sandbox.spy();
- element.addEventListener('tap', tapSpy);
+ element.addEventListener('click', tapSpy);
MockInteractions.pressAndReleaseKeyOn(element, key);
assert.isTrue(tapSpy.calledOnce);
});
- test('dispatches no tap event with modifier on keycode ' + key, () => {
+ test('dispatches no click event with modifier on keycode ' + key, () => {
const tapSpy = sandbox.spy();
- element.addEventListener('tap', tapSpy);
+ element.addEventListener('click', tapSpy);
MockInteractions.pressAndReleaseKeyOn(element, key, 'shift');
MockInteractions.pressAndReleaseKeyOn(element, key, 'ctrl');
MockInteractions.pressAndReleaseKeyOn(element, key, 'meta');
@@ -107,9 +113,9 @@
// Keycodes: 32 for Space, 13 for Enter.
for (const key of [32, 13]) {
- test('stops tap event on keycode ' + key, () => {
+ test('stops click event on keycode ' + key, () => {
const tapSpy = sandbox.spy();
- element.addEventListener('tap', tapSpy);
+ element.addEventListener('click', tapSpy);
MockInteractions.pressAndReleaseKeyOn(element, key);
assert.isFalse(tapSpy.called);
});
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html
index 883798e..8b69d2e 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html
@@ -244,7 +244,7 @@
</style>
<div id="container" class="container">
- <div class="header" id="header" on-tap="_handleToggleCollapsed">
+ <div class="header" id="header" on-click="_handleToggleCollapsed">
<div class="headerLeft">
<span class="authorName">[[comment.author.name]]</span>
<span class="draftLabel">DRAFT</span>
@@ -265,7 +265,7 @@
on-click="_handleCommentDelete">
(Delete)
</gr-button>
- <span class="date" on-tap="_handleAnchorTap">
+ <span class="date" on-click="_handleAnchorClick">
<gr-date-formatter
has-tooltip
date-str="[[comment.updated]]"></gr-date-formatter>
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
index 50dfdce..ecfbf60 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
@@ -416,7 +416,7 @@
}, STORAGE_DEBOUNCE_INTERVAL);
},
- _handleAnchorTap(e) {
+ _handleAnchorClick(e) {
e.preventDefault();
if (!this.comment.line) {
return;
