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

NEW
Unassigned

Status

()

Firefox
Developer Tools: Responsive Design Mode
P3
normal
a year ago
9 months ago

People

(Reporter: karlcow, Unassigned)

Tracking

(Blocks: 1 bug)

49 Branch
Points:
---
Bug Flags:
qe-verify -

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [multiviewport][reserve-rdm][ux])

Attachments

(3 attachments)

(Reporter)

Description

a year ago
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 list doesn't say which browsers and its version we are talking about (aka Chrome 42 for example)
(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
> * 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?
Flags: needinfo?(hholmes)
(Reporter)

Comment 3

a year ago
(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
(Reporter)

Comment 4

a year ago
Created attachment 8796392 [details]
general-view

The general view offers a summary of the settings.
(Reporter)

Comment 5

a year ago
Created attachment 8796393 [details]
opera-devtools-custom-device

When you add the custom device you can really configure things.
(Reporter)

Comment 6

a year ago
Opera has the same issue about not showing which browser we are talking about.
(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.
Flags: needinfo?(hholmes)
Summary: List of browser/devices lacks information → No way to know what user agent will be applied for a device
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.
Flags: qe-verify-
Priority: -- → P3
See Also: → bug 1297431
Summary: No way to know what user agent will be applied for a device → [UX] No way to know what user agent will be applied for a device
Whiteboard: [multiviewport][reserve-rdm][ux]
Blocks: 1317772
See Also: → bug 1317721
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.
You need to log in before you can comment on or make changes to this bug.