Page MenuHomePhorge

Make User-Agent regex detect Firefox on Android
ClosedPublic

Authored by aklapper on Fri, May 16, 13:19.

Details

Summary

Set the device-phone CSS class also for Firefox on Android to (hopefully) avoid or decrease large layout shifts.
See https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/User-Agent/Firefox

Closes T16071

Test Plan

Check if the given regex matches User-Agent strings.

Also, emulate a desktop and a mobile visit with cURL, and check their HTML body CSS classes:

curl --silent --user-agent "Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0" http://phorge.localhost | grep -Po '<body class=".*?"'
curl --silent --user-agent "Mozilla/5.0 (Android 11; Mobile; rv:138.0) Gecko/138.0 Firefox/138.0"   http://phorge.localhost | grep -Po '<body class=".*?"'

Output before the change, observe that the second line is recognized as desktop by mistake:

<body class="device-desktop platform-linux phui-theme-blindigo phabricator-home"
<body class="device-desktop phui-theme-blindigo phabricator-home"

Output after the change, observe that the second line is finally recognized as mobile:

<body class="device-desktop platform-linux phui-theme-blindigo phabricator-home"
<body class="device-phone device phui-theme-blindigo phabricator-home"

Diff Detail

Repository
rP Phorge
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

src/view/page/PhabricatorStandardPageView.php
629–630

In Chrome the "Mobile" is after the version so it's more complicated,

but in Firefox seems easier, we can just match "Mobile.*Firefox" probably

P.S. feel free to implode by | and have an array if it helps in getting rid of the linter

but in Firefox seems easier, we can just match "Mobile.*Firefox" probably

I prefer that more specific regex as you never know which completely random user-agent strings are out there. It's consistent with the Chrome pattern.

wrap long string to make lint happy

src/view/page/PhabricatorStandardPageView.php
629–630

Thanks. In case you don't like Mobile.*Firefox (that was proposed just because it's simpler and shorter and faster) at least evaluate Mobile.*Firefox/ (that is still simpler and shorter and faster but more strict with that added slash, since the specification says that there is that slash).

(This is just a non blocking tip - the block is because people have to test lol)

There is something wrong now nearby the |((Chrome, that should be enclosed by pipes and just one bracket, like an hamburger of pipes, like @stuff|(Chromestuff)|(Firefox stuff)@

Premising that I do not understand the old legacy code, that could be this, without brackets:

@iPhone|iPod|Android.*Chrome/[.0-9]* Mobile@

So it should really work with just this without the slash:

@iPhone|iPod|Android.*Chrome/[.0-9]* Mobile|Mobile.*Firefox@

or with the slash:

@iPhone|iPod|Android.*Chrome/[.0-9]* Mobile|Mobile.*Firefox/@

or with slash and version:

@iPhone|iPod|Android.*Chrome/[.0-9]* Mobile|Mobile.*Firefox/[.0-9]*@

e.g. https://regex101.com/r/PDyAGh/1 (then the slash, or the slash and the version - but that is)

Right...hmm, now I also wonder. :)
Should probably be iPhone|iPod|Android.*(Chrome/[.0-9]* Mobile|Mobile.*Firefox/[.0-9]*) (it's still that Firefox on Android has that Android string first, thus the brackets).

or with slash and version:

We shall keep version. There"s a good number of user-agent strings out there concatenating random browser names while not being these browsers.

remove some unneeded brackets in regex

valerio.bozzolan edited the test plan for this revision. (Show Details)

Love this, thanks

This revision is now accepted and ready to land.Sun, May 18, 15:56