Merge "Don't display tooltips on touch devices"
diff --git a/polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js b/polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js
index 3702c84..c910d8f 100644
--- a/polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js
+++ b/polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js
@@ -22,6 +22,12 @@
properties: {
hasTooltip: Boolean,
+ _isTouchDevice: {
+ type: Boolean,
+ value: function() {
+ return 'ontouchstart' in document.documentElement;
+ },
+ },
_tooltip: Element,
_titleText: String,
},
@@ -29,10 +35,10 @@
attached: function() {
if (!this.hasTooltip) { return; }
- this.addEventListener('mouseover', this._handleShowTooltip.bind(this));
- this.addEventListener('mouseout', this._handleHideTooltip.bind(this));
- this.addEventListener('focusin', this._handleShowTooltip.bind(this));
- this.addEventListener('focusout', this._handleHideTooltip.bind(this));
+ this.addEventListener('mouseenter', this._handleShowTooltip.bind(this));
+ this.addEventListener('mouseleave', this._handleHideTooltip.bind(this));
+ this.addEventListener('tap', this._handleHideTooltip.bind(this));
+
this.listen(window, 'scroll', '_handleWindowScroll');
},
@@ -41,6 +47,8 @@
},
_handleShowTooltip: function(e) {
+ if (this._isTouchDevice) { return; }
+
if (!this.hasAttribute('title') ||
this.getAttribute('title') === '' ||
this._tooltip) {
@@ -66,9 +74,11 @@
},
_handleHideTooltip: function(e) {
+ if (this._isTouchDevice) { return; }
if (!this.hasAttribute('title') ||
- this._titleText == null ||
- this === document.activeElement) { return; }
+ this._titleText == null) {
+ return;
+ }
this.setAttribute('title', this._titleText);
if (this._tooltip && this._tooltip.parentNode) {
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.html b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.html
index f15b554..6e2c058 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.html
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.html
@@ -430,5 +430,45 @@
MockInteractions.tap(element.$$('.send'));
});
});
+
+ test('don"t display tooltips on touch devices', function() {
+ element.labels = {
+ Verified: {
+ values: {
+ '-1': 'Fails',
+ ' 0': 'No score',
+ '+1': 'Verified'
+ },
+ default_value: 0
+ },
+ 'Code-Review': {
+ values: {
+ '-2': 'Do not submit',
+ '-1': 'I would prefer that you didn\'t submit this',
+ ' 0': 'No score',
+ '+1': 'Looks good to me, but someone else must approve',
+ '+2': 'Looks good to me, approved'
+ },
+ default_value: 0
+ }
+ };
+ var verifiedBtn = element.$$(
+ 'iron-selector[data-label="Verified"] > ' +
+ 'gr-button[data-value="-1"]');
+
+ // On touch devices, tooltips should not be shown
+ verifiedBtn._isTouchDevice = true;
+ verifiedBtn._handleShowTooltip();
+ assert.isNotOk(verifiedBtn._tooltip);
+ verifiedBtn._handleHideTooltip();
+ assert.isNotOk(verifiedBtn._tooltip);
+
+ // On other devices, tooltips should be shown.
+ verifiedBtn._isTouchDevice = false;
+ verifiedBtn._handleShowTooltip();
+ assert.isOk(verifiedBtn._tooltip);
+ verifiedBtn._handleHideTooltip();
+ assert.isNotOk(verifiedBtn._tooltip);
+ });
});
</script>