fix: let clients detect touch screen

Adds a default preference to Firefox to make navigator.maxTouchPoints return 1.

Websites use navigator.maxTouchPoints to check if the device has touch screen support. Ideally this would be set for the real maximum value the device supports, but as this is for a variety of devices, and I'm not aware of a more agnostic way to get this information, I have hard-coded it to 1 for now which covers the most important case.

The motivation for the value 1 is:

• By having a value > 0, websites can now detect that this is a touch device properly.
• In Firefox, when one simulates a touch pointer, it uses a value of 1, which has never failed me during frontend development at least.

From testing manually, it looks my PinePhone Pro's real maxTouchPoints should be 5. However, I do not know if this varies across batches, and it probably does vary between models or other devices, so I've opted to stick with 1.

Practicality

I discovered the issue while on CrazyGames. CrazyGames has logic to redirect touch screen devices to the mobile/tablet optimized site and show touch optimized games, however this wasn't occurring on my phone.

After investigation, I found it was because the site (rightfully) uses navigator.maxTouchPoints instead of user-agent sniffing.

I've tested this PR on my phone, which fixes the issue.

Alternative Approaches

Instead of amending the Firefox preferences, it could be better to have the system report touch capabilities properly, then Firefox would presumably handle this for us, similarly to how Firefox handles desktop touchscreen devices already. I thought it would be good to see specifically how Firefox determines this value normally itself, but I've had trouble finding the relavent code in Searchfox.

I've also looked into if we can set the preference conditionally based on the output from xinput (X11) or libinput (Wayland) respectively to check screen capabilities. I have checked the output of libinput list-devices myself, and it is capable of listing if the device is a touch screen, but on my PinePhone Pro, it does not list any information regarding touch points.

It would still be better if we conditionally set the preference to 1 based on if we found a device with the touch capability. I will look into this further later, and if reviewers know how to do this already, advice is welcome.

References

The maxTouchPoints read-only property of the Navigator interface returns the maximum number of simultaneous touch contact points are supported by the current device.

— https://developer.mozilla.org/docs/Web/API/Navigator/maxTouchPoints

So, user agent sniffing is definitely not the way to go. Thankfully, there are much better alternatives. Use Navigator.maxTouchPoints to detect if the user's device has a touchscreen.

— https://developer.mozilla.org/docs/Web/HTTP/Browser_detection_using_the_user_agent

Screenshots

Before:

After:

src/mobile-config-autoconfig.js

@@ -315,6 +315,11 @@ function set_default_prefs() {
     // makes a lot of sense to enable it unconditionally, as cameras usually
     // only work with libcamera, not via plain v4l2.
     defaultPref('media.webrtc.camera.allow-pipewire', true);
+
+    // Make navigator.maxTouchPoints return 1 for clients to determine this is a
+    // touch device. This is the same value used by Web Developer Tools ->
+    // Responsive Design Mode -> Enable touch simulation.
+    defaultPref('dom.maxtouchpoints.testing.value', 1);
 }
 
 function main() {