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 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! : 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?
(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
Created attachment 8796392 [details] general-view The general view offers a summary of the settings.
Created attachment 8796393 [details] opera-devtools-custom-device When you add the custom device you can really configure things.
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.
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.
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.