Ability to tap words on Firefox Android

[birtles]

Per a report on twitter it seems like you can't tap words in Firefox Android to look them up.

I seem to recall this working on iPhone but I just tried and indeed it doesn't work on Firefox Android.

Hopefully this still works on iOS and we just need to fix a compat issue to get it to work on Firefox Android 🤞

[birtles]

I started digging into this and I can see that tapping doesn't work anywhere any more.

At least on desktop, it seems like the issue is that while the lookup is triggered correctly from the mousemove event, when we get the following mousedown event we effectively cancel the lookup because we don't want to interfere with selection actions:

10ten-ja-reader/src/content/content.ts

Lines 553 to 554 in 68c599c

	// Clear the highlight since it interferes with selection.
	this.clearResult({ currentElement: ev.target as Element });

(Note that, per spec, the mousemove may appear before the mousedown for touch events: https://w3c.github.io/touch-events/#mouse-events)

Given that I'm not quite sure why it ever worked (unless it only worked in Safari for some other reason), but it's probably not worth investigating either.

I guess we could distinguish between mouse events and touch events but would we then end up interfering with selection actions?

[birtles]

I implemented a fix for this in 0ca9032 based on testing how longs taps are pressed for. However, I think there might be an easier route where we re-use the browser's click detection.

We can take advantage of the fact that touchend always fires before click. By tracking if the previous click was preceded by a touchend we should be able to differentiate touch taps from mouse clicks / keyboard activation. This also has the advantage that we can check if the target is an <a> element and not activate the popup in that case.

[birtles]

I've implemented an alternative fix and I think it works pretty well. However, I'm a bit concerned that it might be annoying if users are used to dismissing the popup by tapping outside it.

With this new behaviour, if they tap outside and happen to land on other Japanese text (very common in the case of something like Wikipedia or an e-book), then it will trigger another lookup. Instead, they'll have to try to tap the little x button in the top-right.

Perhaps the interaction should be to only trigger a lookup if the popup is not showing? That way, if you want to tap around every second tap would trigger the popup. That's a little bit annoying if you're on a big screen but probably makes sense otherwise.

Alternatively, we could make it so that if the last popup was triggered by a tap, then we allow subsequent taps to trigger further lookups. Otherwise, if the last popup was triggered by using the puck/mouse then we wouldn't trigger a popup from a tap.

I think it's probably safest to go with the "every second tap triggers a popup" approach for now.

Update: That didn't work. We clear the popup in the mousedown handler just before the click event arrives so we can't tell if the popup was showing or not.