1306198 - [UX] No way to know what user agent will be applied for a device

Status: RESOLVED FIXED

(DevTools :: Responsive Design Mode, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Attachment: devices-list

After activating the responsive design mode. The list make the assumption of one device == one browser (which is something we are fighting against).

Two issues with the current setup:

* The default list doesn't contain any Firefox on Android choice (Ooops).
* The list doesn't say which browsers and its version we are talking about (aka Chrome 42 for example)

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

(In reply to Karl Dubost :karlcow from comment #0)
> Created attachment 8795981 [details]
> devices-list
> 
> After activating the responsive design mode. The list make the assumption of
> one device == one browser (which is something we are fighting against).
> 
> Two issues with the current setup:
> 
> * The default list doesn't contain any Firefox on Android choice (Ooops).

The default enabled set was taken from BrowserStack's list[1] for the "Growing Business" segment in bug 1247302 comment 2.  Looks like it has changed a bit already since first looked at their data ~8 months ago.

For the UA string for each device, I believe we've tried to use whatever the default browser is that ships with the device, at least to have a starting point.  Since Firefox for Android is not a default browser (AFAIK) on any device, it happens to mean that it's not represented at the moment.

Anyway, I think it would be fine to add a few device entries to cover this case (since they aren't user editable yet).  Maybe you know of a few that would be good to include?  The device list is maintained at https://github.com/mozilla/simulated-devices, feel free to submit a PR to add them!

[1]: https://www.browserstack.com/test-on-the-right-mobile-devices

Comment 2

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

> * The list doesn't say which browsers and its version we are talking about
> (aka Chrome 42 for example)

Right, I agree that's confusing especially for UA issues (when you need more than just the device size).  Maybe we could show browser's logo next to device name, and when you hover the icon, it could show the browser name and version?  I'm trying to think of a way to represent this info without add lots of extra text (the modal UI is already somewhat busy).

Helen, any thoughts about this?

Comment 3

[Karl Dubost💡 :karlcow]

(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #2)
> Maybe we could show browser's logo next to
> device name, and when you hover the icon, it could show the browser name and
> version?  

That sounds like a good compromise.
you could have a pop-up infocard for each browser with an icon.

Pitching the why this is important:
Some JS libraries and CSS will react to different type of parameters and displays a very different site depending on the user agent. It's not only about the form factor (screen size), but also ua string, dpi, touch or not. So having a full picture of what scenario we are in is really helpful.

Let me add a couple of screenshots for Opera devtools

Comment 4

[Karl Dubost💡 :karlcow]

Attachment: general-view

The general view offers a summary of the settings.

Comment 5

[Karl Dubost💡 :karlcow]

Attachment: opera-devtools-custom-device

When you add the custom device you can really configure things.

Comment 6

[Karl Dubost💡 :karlcow]

Opera has the same issue about not showing which browser we are talking about.

Comment 7

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Karl Dubost :karlcow from comment #4)
> Created attachment 8796392 [details]
> general-view
> 
> The general view offers a summary of the settings.

Our plan was to capture this kind of information in the same place, instead of in the device picker itself.

Comment 8

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

This is related to bug 1297431, which is about the UA _currently_ applied.  This bug is more about the UA that _will_ be applied when a device is chosen.

Comment 9

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Bug 1321675 has just landed in Nightly, and along with allowing devices to be added, the device modal also learned how to show the properties of existing devices in a tooltip on hover.

I am definitely not saying that's a _good_ UI to show the info at all, but it's more than nothing! :) I'd still eventually like to summarize the UA with an icon.

Comment 10

[Patrick Brosset <:pbro>]

Hi Gabriel, do you think this is now fixed since bug 1297431 landed in 64?
If so, could you please close this one?

Comment 11

[Gabriel Luong [:gl] (ΦωΦ)]

Honestly, I am not sure since Bug 1297431 is about what UA is applied versus this bug is about what will be applied as described in Comment 8. Forwarding this to Karl to see if this kind of feature is still needed. It is a bit niche of a feature I think, so, I think it is most appropriate if the WebCompat team determines if this is really essential or if we should just close it.

Comment 12

[Karl Dubost💡 :karlcow]

Attachment: responsive design mode with firefox android UA

Bug 1297431 gives the possibility to give a User Agent on the fly. This is useful.

This issue here is a bit different and about pre-recorded profiles. It also depends on expectations for Web developers in general (apart of webcompat team).

Basically Websites currently offer different behaviors on mobile, tablets, touch screens, depending on the user-agent string and a couple of other things. Different behaviors mean:

* server-side UA sniffing for CSS and JS
* client-side UA sniffing for JS

Sometimes you will get a totally different UX, user experience, or specific code paths in a JS.


In this screenshot for example, I have added 
* Firefox Mobile on Android
* Firefox Tablet on Android

(I had to reset recently, but usually I have a longer list of custom profiles. Another pain point being able to export/import a list of profiles will save time ;) I'll open a different issue for this.)

If we (Mozilla) want to invite web developers to test a bit more on Firefox Android, they can use remote debugging, but responsive design mode is a quicker path and cover often 80% of the cases. 

In the next comment, I will address the current list with a screenshot.

Comment 13

[Karl Dubost💡 :karlcow]

Attachment: current list of devices in Nightly 65

So this screenshot is the current list of devices in Nightly 65.

This devices list associates
* iOS -> Safari UA
* Android -> Chrome UA

The issue with this is that testing a website on an Android device is about testing:

* Android:
  - Firefox 
  - Chrome
  - sometimes other

This will lead to very different results in some circumstances outside of the Gecko rendering engine.


* iOS
  - Firefox 
  - Safari

This one is a bit funkier. Firefox on iOS is using WebKitView but with a specific UA. This sometimes creates differences in what we receive. 


Hope it helps.

Comment 14

[Karl Dubost💡 :karlcow]

As for the initial summary 
   [UX] No way to know what user agent will be applied for a device
I guess this is indeed solved by Bug 1297431 in the sense that it makes it visible. 
It addresses my second point in Comment #1, not the first one. I guess my initial summary was… lacking of substance. :) Sorry about that.

Comment 15

[Martin Balfanz [:mbalfanz]]

To add to that, in bug 1317721 we described that we actually want to switch all UAs to be Firefox on the device (where possible).  That will make things at least a little bit more predictable, though I see that other issues remain.

Comment 16

[Daisuke Akatsuka (:daisuke)]

Attachment: ua-prototype.mp4

Hi, I have made the first prototype which shows the browser and os information which the user agent string has.
The changes are the followings:

• Show the browser and os info on the device menu items.
• Show the browser and os info on the device list of the popup.
• Reduce the device list column from 3 to 2 in order to show the text as one line.

Comment 17

[Daisuke Akatsuka (:daisuke)]

Hi! I'd like to hear your opinion about the prototype above.
What do you think??

Comment 18

[Karl Dubost💡 :karlcow]

Attachment: browser-list

Daisuke,
Very cool.
I think you can probably drop the parenthesis by making the information glanceable.
https://codepen.io/webcompat/pen/oNNGGyG

That should be easier on the eyes.

Comment 19

[Daisuke Akatsuka (:daisuke)]

Indeed! Thank you very much for your feedback, Karl-san!

Comment 20

[Martin Balfanz [:mbalfanz]]

Thanks Daisuke, this looks great!

I agree with Karls comment. Also, we could consider using the icons again similar to the webcompat tool, this might help us to save some space.

Comment 21

[Daisuke Akatsuka (:daisuke)]

Thanks, Martin!
Yeah, it seems that the icon helps to reduce the space. If we introduce icons, I'm wondering how we should show the version. Tooltip? But we are using a tooltip to show the device all info which includes the entire UA string.
And, can we also show the OS as an icon?

Comment 22

[Patrick Brosset <:pbro>]

Clearing my needinfo on this one as I agree with what has been said so far: this is a great prototype!

Comment 23

[Victoria Wang [:victoria]]

Attachment: image.png

This is looking great, and I like the idea for adding the browser icons!

It would be nice to use icons for the OS as well. Attached tiny mockup for how this could look.

I think it would be fine to add the browser name/version to the beginning of the tooltip (in its own row). The full tooltip could look like this:

Firefox 68 on Android 5
DPR: 3
Touch: True
UA: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:72.0) Gecko/20100101 Firefox/72.0

(When a version number ends in '.0' we can truncate that part for the top line)

I'll attach the Android and iOS icons separately.

Comment 24

[Victoria Wang [:victoria]]

On second thought, do we really need Android/iOS indicators? It seems intuitive enough that everything is Android, besides iPhone (and Nokia?). Is it fine to just have that in the tooltip?

Comment 25

[Daisuke Akatsuka (:daisuke)]

Thank you very much for the mockup, Victoria!
Yep, the mockup and the tooltip idea is great :)
And regarding the OS icon, we don't have to use it for the mobile but may be able to use for other devices such as laptop type (windows, osx, linux and so on?).
I'll proceed using the browser icon at least.
Thanks!

Comment 26

[Victoria Wang [:victoria]]

Laptop OS would only show for custom devices, right? Maybe we can follow up in a later patch since it seems like a much less common need.

Comment 27

[Karl Dubost💡 :karlcow]

In fact Laptop OS are parts of the use cases, some issues happens only on certain OSes (it's more rare indeed). So yes please, we need to open another issue if it's not part of the MVP for this one :)

Comment 28

[Victoria Wang [:victoria]]

Ah, I see. To clarify, is this mostly an internal WebCompat use case, with custom Laptop entries? In that case, could the OS be indicated in the title of the device? The icon part is what I'm suggesting can come later. I'll check with UX to see if someone might already have a set somewhere.

Comment 29

[Daisuke Akatsuka (:daisuke)]

Attachment: prototype-with-icon.mp4

Hi Victoria!
Because I made a new prototype, could you confirm the UI??
I used the icon for browsers, but I changed the order of displaying from device name, os name, icon to icon, device name, os name.
The reason why I changed the order is that the menu to select the device is created by xul menu, then we can't put the icon to except most left place on the menu. So, in order to keep the UI consistency, I changed.
What do you think??

Comment 30

[Victoria Wang [:victoria]]

Awesome, this is looking great! Would you mind attaching a hi-resolution screenshot as well? I'll mark up a few minor tweaks to spacing.

Comment 31

[Daisuke Akatsuka (:daisuke)]

Attachment: device-settings.png

Thank you, Victoria! I'll attach the screenshots.

Comment 32

[Daisuke Akatsuka (:daisuke)]

Attachment: device-selection.png

Comment 33

[Daisuke Akatsuka (:daisuke)]

Attachment: selected-device.png

Comment 34

[Victoria Wang [:victoria]]

Attachment: image.png

Thank you! Attached is some minor spacing tweaks. I forgot to mention that this doesn't actually need to block this work and can be done in a followup polish bug.

A bit more polish re: the OS version numbers:

• We can remove the trailing zeros from the iOS version numbers
• Android 8.0.0 can just be 8.0
• We can remove the parentheses from the numbers

Comment 35

[Daisuke Akatsuka (:daisuke)]

Thank you so much, Victoria!
I will introduce your suggestions!

Comment 36

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1306198: Show browser and os info which is from the UA in the device list. r?pbro!,mtigley!

Comment 37

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1306198: Reduce the device list column. r?pbro!,mtigley!

Depends on D55250

Comment 38

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1306198: Show browser and os info on the device menu item. r?pbro!,mtigley!

Depends on D55251

Comment 39

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1306198: Show device info on device selector button. r?pbro!,flod!,mtigley!

Depends on D55252

Comment 40

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1306198: Change the tooltip of device items in the device modal. r?pbro!,mtigley!

Depends on D55253

Comment 41

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1306198: Add an unit test for user agent parser. r?pbro!,mtigley!

Depends on D55254

Comment 42

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1306198: Add a test to confirm the content of device item in the modal. r?pbro,mtigley!

Depends on D55255

Comment 43

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1306198: Introduce user agent parser. r?pbro,mtigley

Comment 44

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1306198: Introduce user agent parser. r?pbro!,r?mtigley!

Comment 45

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d0a20aae4d2a
Introduce user agent parser. r=pbro,mtigley
https://hg.mozilla.org/integration/autoland/rev/975949070c3b
Show browser and os info which is from the UA in the device list. r=pbro,mtigley
https://hg.mozilla.org/integration/autoland/rev/c446bdb23bd1
Show browser and os info on the device menu item. r=pbro,mtigley
https://hg.mozilla.org/integration/autoland/rev/d374533152c9
Show device info on device selector button. r=pbro,mtigley
https://hg.mozilla.org/integration/autoland/rev/f038e448c900
Change the tooltip of device items in the device modal. r=pbro,mtigley,flod
https://hg.mozilla.org/integration/autoland/rev/7800ce1ac4df
Add an unit test for user agent parser. r=pbro,mtigley
https://hg.mozilla.org/integration/autoland/rev/b7864d9346d5
Add a test to confirm the content of device item in the modal. r=pbro,mtigley

Comment 46

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/d0a20aae4d2a
https://hg.mozilla.org/mozilla-central/rev/975949070c3b
https://hg.mozilla.org/mozilla-central/rev/c446bdb23bd1
https://hg.mozilla.org/mozilla-central/rev/d374533152c9
https://hg.mozilla.org/mozilla-central/rev/f038e448c900
https://hg.mozilla.org/mozilla-central/rev/7800ce1ac4df
https://hg.mozilla.org/mozilla-central/rev/b7864d9346d5

Comment 47

[Sören Hentzschel]

The Kindle Fire HDX is the only tablet without icon. Is this intended?

The Firefox icon is truncated. Also the decice name no longer fits the device field and is truncated.

Comment 48

[Sören Hentzschel]

Attachment: screen.png

Comment 49

[Daisuke Akatsuka (:daisuke)]

Hello Sören, thank you very much for your reporting!

Regarding Kindle Fire HDX icon:
We support only the following major browsers for now.
https://searchfox.org/mozilla-central/source/devtools/client/responsive/utils/ua.js#7-33
Thus, silk browser is not supported yet.

Regarding the truncated icon and the label:
Thank you for finding this!
I'll file the bug.

Comment 50

[Daisuke Akatsuka (:daisuke)]

Filed

• Bug 1601853 - Firefox icon is truncated on the device list modal in RDM
• Bug 1601854 - The device label of the menu button is truncated