1133927 - Add a catalog of known devices and their properties.

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Simulator, defect)

Description

[Jan Keromnes [:janx]]

To build useful device emulation tools and features, it's great to have a catalog of common known devices to choose from, in order to simulate their different characteristics (e.g. screen size, user agent, etc).

Comment 1

[Jan Keromnes [:janx]]

I compiled a list of known devices (including Firefox OS devices) from various sources online:

https://gist.github.com/jankeromnes/eb6d371682dc2ed618e6

Comment 2

[Jan Keromnes [:janx]]

Attachment: Add a catalog of known devices with emulation properties.

Comment 3

[Jan Keromnes [:janx]]

Comment on attachment 8565648 [details] [diff] [review]
Add a catalog of known devices with emulation properties.

We talked about this on IRC earlier, what do you think?

Comment 4

[Jan Keromnes [:janx]]

Anthony, you told me you might need such a list. Feel free to use the code in my patch (Firefox OS devices separate from the others) or in my gist mentioned earlier (all devices together + a few extra).

Comment 5

[Jan Keromnes [:janx]]

Comment on attachment 8565648 [details] [diff] [review]
Add a catalog of known devices with emulation properties.

Jeff, we talked about this at the previous work week. Are there additional devices that you'd want to see in this list? I think you mentioned the OnePlus One?

Comment 6

[Jeff Griffiths (:canuckistani) (:⚡︎)]

Comment on attachment 8565648 [details] [diff] [review]
Add a catalog of known devices with emulation properties.

Review of attachment 8565648 [details] [diff] [review]:
-----------------------------------------------------------------

This list looks good at first glance, recognizing that it will be a work in progress. A couple of things:

* copying from chromium seems like the most practical thing to do, to the point where I wonder if this should just be a separate source. We should update regularly ( quarterly ) to ensure we are in syn.

* there may be regionally significant devices people may want to add ( I'm thinking Xiaomi in particular ).

( aside: I seriously doubt the Oneplus One has enough users to be significant )

Comment 7

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

Comment on attachment 8565648 [details] [diff] [review]
Add a catalog of known devices with emulation properties.

Review of attachment 8565648 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good, just needs to move to browser.

::: browser/locales/en-US/chrome/browser/devtools/device.properties
@@ +1,1 @@
> +# This Source Code Form is subject to the terms of the Mozilla Public

I think you need to add this file to browser/locales/jar.mn.

@@ +1,5 @@
> +# This Source Code Form is subject to the terms of the Mozilla Public
> +# License, v. 2.0. If a copy of the MPL was not distributed with this
> +# file, You can obtain one at http://mozilla.org/MPL/2.0/.
> +
> +device.phones=Phones

Maybe a localization note to explain the purpose...?  Or not if it seems obvious.

::: toolkit/devtools/devices.js
@@ +37,5 @@
> +// The `Devices.FirefoxOS` list was put together from various sources online.
> +Devices.FirefoxOS = {
> +  phones: [
> +    {
> +      name: "Firefox OS Flame",

Repeating Firefox OS here seems a bit redundant.

::: toolkit/devtools/moz.build
@@ +29,5 @@
>      'async-utils.js',
>      'content-observer.js',
>      'css-color.js',
>      'deprecated-sync-thenables.js',
> +    'devices.js',

I think this file belongs in browser/devtools/shared, as it seems unlikely to be used outside of desktop Firefox for the moment.

Comment 8

[Jan Keromnes [:janx]]

Attachment: Add a catalog of known devices with emulation properties. r=ochameau,f=jryans,f=canuckistani

Thanks for the feedback Ryan and Jeff! New version of the patch with nits
addressed.

(In reply to Jeff Griffiths (:canuckistani) from comment #6)
> * copying from chromium seems like the most practical thing to do, to the
> point where I wonder if this should just be a separate source. We should
> update regularly ( quarterly ) to ensure we are in syn.

I agree that we'll need regular updates (e.g. the latest Firefox OS devices
have not been added yet).

I don't think we need a separate file for chromium's list though, because
it's easy enough to reformat their list occasionally for comparison.

> * there may be regionally significant devices people may want to add ( I'm
> thinking Xiaomi in particular ).

Having to maintain several regionally significant lists sounds like a bad
idea, so I think we'll aim to keep this catalog as complete as possible.

However, it shouldn't be too hard to write an addon that just pushes new
devices into the catalog. We should make sure that's possible.

(In reply to J. Ryan Stinnett [:jryans] from comment #7)
> I think you need to add this file to browser/locales/jar.mn.

Oops, I did that in a follow-up commit locally. Rebased to the right place.

> Maybe a localization note to explain the purpose...?  Or not if it seems
> obvious.

Added two localization notes, because I'll reuse that file for my Device
Emulation devtools panel (currently a follow-up commit).

> > +      name: "Firefox OS Flame",
> 
> Repeating Firefox OS here seems a bit redundant.

I did that because Flame is still our reference device, and it's produced
for Mozilla as opposed to other OEM devices.

> I think this file belongs in browser/devtools/shared, as it seems unlikely
> to be used outside of desktop Firefox for the moment.

Moved.

Comment 9

[Alexandre Poirot [:ochameau]]

Comment on attachment 8565955 [details] [diff] [review]
Add a catalog of known devices with emulation properties. r=ochameau,f=jryans,f=canuckistani

Review of attachment 8565955 [details] [diff] [review]:
-----------------------------------------------------------------

(In reply to Jan Keromnes [:janx] from comment #8)
> However, it shouldn't be too hard to write an addon that just pushes new
> devices into the catalog. We should make sure that's possible.

It would be fun to document right into this module how to do so.
// Wanna register new devices from an addon? Just do this:
// Cu.import("...").Devices.Others.phones.push({ ...myPhoneDescription... });

::: browser/devtools/shared/devices.js
@@ +15,5 @@
> + * The properties of a device are:
> + * - name: Device brand and model(s).
> + * - width: Viewport width.
> + * - height: Viewport height.
> + * - pixelRation: Screen pixel ratio to viewport.

nit: pixelRation -> pixelRatio

Comment 10

[Jan Keromnes [:janx]]

Attachment: Add a catalog of known devices with emulation properties. r=ochameau f=jryans f=canuckistani

Thanks Alex!

Added a comment explaining how addons can add more devices.

No need to ration pixels, there's plenty enough for everyone ;)

Comment 11

[Jan Keromnes [:janx]]

No try because that file is not used yet.

Comment 12

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

(In reply to Jan Keromnes [:janx] from comment #11)
> No try because that file is not used yet.

Could still break build, blow up other things... any number of other possibilities! :)

Comment 13

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/integration/fx-team/rev/39a485cf11d8

Comment 14

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/39a485cf11d8