Making the popup interactive with the mouse

[birtles]

Hi!

I've been working really hard on the most requested feature of late: mouse support. 10ten is finally entering the 1980s!

There are different approaches but we have a lot of very loyal and supportive users who depend on 10ten every day for their work and livelihood so I've tried to make this change as gentle as possible.

That's proved very hard. Originally I thought this would take a day or two but so far I've been working on it full time, six days a week, for three weeks and it's still not done 😅

I've been showing @shirakaba my attempts and he keeps finding problems and potential frustrations. I'm very grateful for his help.

I think it's nearly there, however, so here's a summary of where we're up to.

You can turn it off

Firstly, there is a pref to turn off mouse support which should make things work almost identically to how they currently do.

Furthermore, this will allow you to turn off the larger tabs that show up on touchscreen devices for those users who have complained that the popup takes up more room due to being on a touchscreen device.

What's more, you can opt-in to the interactive popups when you decide you need it with a tap of the keyboard (see later).

It tries really hard to get out of your way

People like scanning around Web pages and light novels and the last thing we want is for mouse support to mean that the popup starts interfering by sticking in place and covering up the things you want to look up.

How it works depends on how you're using 10ten:

1. If you don't have "hold-to-show" keys set up, which is the default, the popup is not interactive until it has been showing for about 400ms. This tends to mean you can scan around without it getting in the way.

   After 400ms the popup changes visually: the dotted border becomes solid and a little arrow appears "anchoring" the popup to the text you're viewing. From there you can guide the cursor across the arrow onto the popup and interact with it: click the entries to copy them, switch tabs, etc.

   Before:

   

   After:

   

   (Originally I made the arrow animate it. I thought it was so slick but when I showed @shirakaba he agreed it was cute, but pointed out that it will probably distract you from what you're trying to do. So we scrapped it 😅)

2. If you do have "hold-to-show" keys set up (e.g. Ctrl) then the popup is not interactive until you let go of those keys at which point it immediately becomes interactive in the same way as (1).

You can always dismiss the popup with the keyboard

I've added support for customizable keys to close the popup (Esc or x or both). If ever the popup does get in your way, you can tap Esc and get rid of it.

You can pin the popup

If you're finding it hard to keep your mouse inside the window or you simply know you want to keep the window around for a while, you can hit a (configurable) key like Ctrl to force the popup to stay fixed.

For example, if you use Ctrl to activate looking up (case 2 above), then once you've found the word you want to deal with, you can tap Ctrl once more and the popup will be stuck there until you click the close button, press Esc, or click outside it.

If you tab Ctrl again, the popup will be unpinned.

Note that you can use this even if you disable mouse interactivity so you can opt-in to making the popup interactive only when you want it to be.

When you pin the popup, a little pin icon in the tab bar will change from hollow to filled. You can also click that to pin/unpin the popup but it's pretty small so I don't think anyone will use that.

That's it for now. Thanks for reading all this. This has been a major feature with an unbelievable number of edge cases (e.g. what happens if you pin the popup while in full-screen mode and then leave it?) but hopefully we're nearly there.

I still need to do various device testing (especially touch screen laptops, iPhones etc.) and prepare all sorts of onboarding help but hopefully we can release this some time next week.