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 3702c841d2..c910d8f003 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 f15b554183..0e5eb25633 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 @@ -235,7 +235,7 @@ limitations under the License. }).then(function() { assert.isTrue(isVisible(element.$.reviewerConfirmationOverlay)); observer = overlayObserver('closed'); - MockInteractions.tap(yesButton); // confirm the group + MockInteractions.tap(yesButton); // Confirm the group. return observer; }).then(function() { assert.isFalse(isVisible(element.$.reviewerConfirmationOverlay)); @@ -430,5 +430,51 @@ limitations under the License. MockInteractions.tap(element.$$('.send')); }); }); + + test('do not display tooltips on touch devices', function() { + element._account = {_account_id: 1}; + element.set(['change', 'labels', 'Verified', 'all'], + [{_account_id: 1, value: -1}]); + 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 + } + }; + + flushAsynchronousOperations(); + + 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); + }); });