564815 - implement window.devicePixelRatio

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, enhancement)

Description

[Benjamin Stover (:stechz)]

Android browser commit here: https://android.git.kernel.org/?p=platform/external/webkit.git;a=commit;h=f10585d69aaccf4c1b021df143ee0f08e338cf31

Should Fennec implement this?  I could see this being of use to Javascript widget libraries that want an easy way to guarantee buttons are of a touchable size.

Comment 1

[Daniel Brooks [:db48x]]

This is available to chrome (under a different name), see https://bugzilla.mozilla.org/show_bug.cgi?id=486200. To be honest, I doubt that this is ever needed for content. Content should just use units such as mm. See http://mxr.mozilla.org/mobile-browser/source/themes/wince/platform.css?mark=136-137#135 for an example.

Comment 2

[Stuart Parmenter]

you can't use things like mm because they're not actually physical units.  We need to add new unit types

Comment 3

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

We've got mozmm for that.

Comment 4

[Brion Vibber]

http://www.apple.com/ currently has a pretty retina display demo image; it appears to use window.devicePixelRatio to determine whether to load the high-resolution images.

Comment 6

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

Mobile needs this as well -- we need to be able to figure out what the actual pixel ratio is on high dpi displays, for being able to appropriately choose backing store size for canvas and similar.

Comment 7

[Matt Brubeck (:mbrubeck)]

Attachment: patch

This patch appears to work, although I it always returns 1 on Android, which I think is because of bug 779527.

This patch basically reverts part of bug 507755, though it keeps the nsIDOMWindowUtils method around too for add-on compatibility.  I still need to add tests, but first I'd like to know if this is basically correct, and if it's a change that we want to ship.

Comment 8

[Matt Brubeck (:mbrubeck)]

http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html has some notes about how this is implemented in other browsers.  Similar to bug 779527, there may be special concerns on mobile where we use a pannable/zoomable "virtual" viewport.

Comment 9

[FX]

The popular retina.js solution for transparently serving high-res images when necessary (http://retinajs.com) uses "root.devicePixelRatio" as a test for HiDPI displays (https://github.com/imulus/retinajs/blob/master/src/retina.js#L107). This works on Safari (Mobile and Desktop), Google Chrome, but fails with the Firefox HiDPI-enable nightly builds (https://bugzilla.mozilla.org/show_bug.cgi?id=674373).

Comment 10

[Sergey Sokoloff]

The updated QuirksBlog entry is out:

http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

Also, "root.devicePixelRatio" instead of "window.devicePixelRatio" would probably fail in Firefox anyway.

Comment 11

[Sergey Sokoloff]

Ignore me, that was not an update, but a QuirksBlog entry from June, actually older.

Comment 12

[Matt Brubeck (:mbrubeck)]

(In reply to Sergey «Mithgol the Webmaster» Sokoloff from comment #10)
> Also, "root.devicePixelRatio" instead of "window.devicePixelRatio" would
> probably fail in Firefox anyway.

"root" is just an alias for "window" in the code referenced above:
https://github.com/imulus/retinajs/blob/master/src/retina.js#L3

Comment 13

[Johnny Stenback (:jst)]

Comment on attachment 652534 [details] [diff] [review]
patch

I think we should take this, it's basically a defacto standard at this point... Is someone raising this is the standards world already? If not, that needs to happen as well.

Comment 14

[Matt Brubeck (:mbrubeck)]

Attachment: test

Adds some simple assertions to match the ones for screenPixelsPerCSSPixel.  Pushed to Try: https://tbpl.mozilla.org/?tree=Try&rev=420ebbefd766

Comment 15

[Matt Brubeck (:mbrubeck)]

Comment on attachment 652534 [details] [diff] [review]
patch

Pushed the reviewed patch to inbound so that we can start getting coverage of this in nightlies:
https://hg.mozilla.org/integration/mozilla-inbound/rev/84b9f209a913

The other patch is a trivial test-only change; I'll push that whenever it's reviewed.

Comment 16

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/84b9f209a913

Comment 17

[Matt Brubeck (:mbrubeck)]

Comment on attachment 656949 [details] [diff] [review]
test

This test-only patch adds two assertions to check the value of window.devicePixelRatio.  Since this new property is an alias for nsIDOMWindowUtils.screenPixelsPerCSSPixel, we expect it to have the same value.

Comment 18

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 656949 [details] [diff] [review]
test

r=me

Comment 19

[Jonathan Kew [:jfkthame]]

I notice that the test patch here hasn't landed yet... be aware that bug 809788 is proposing to change window.devicePixelRatio (to make it independent of page zoom), so it has a modified version of the test that will supersede this one, assuming we accept that behavior change.

Comment 20

[Matt Brubeck (:mbrubeck)]

(In reply to Jonathan Kew (:jfkthame) from comment #19)
> I notice that the test patch here hasn't landed yet...

Oops! I guess that slipped through the cracks here.

> be aware that bug
> 809788 is proposing to change window.devicePixelRatio (to make it
> independent of page zoom), so it has a modified version of the test that
> will supersede this one, assuming we accept that behavior change.

Thanks for the heads-up.  If bug 809788 is not already landed soon, then I'll push my test patch so we have basic testing in the meantime.

Comment 21

[Matt Brubeck (:mbrubeck)]

Comment on attachment 656949 [details] [diff] [review]
test

https://hg.mozilla.org/integration/mozilla-inbound/rev/abfb3201b753

Comment 22

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/abfb3201b753

Comment 23

[krzbor]

Unfortunately, in version 18 window.devicePixelRatio not working properly. For Samsung Galaxy S II is 1.0, should be 1.5. For Google Nexus 7 is 1.0, should be 1.3. It should see the page: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Comment 24

[Kevin Brosnan [Ex-Mozilla]]

krzbor please file a new bug and cc me on it.

Comment 25

[Matt Brubeck (:mbrubeck)]

(In reply to krzbor from comment #23)
> Unfortunately, in version 18 window.devicePixelRatio not working properly.
> For Samsung Galaxy S II is 1.0, should be 1.5. For Google Nexus 7 is 1.0,
> should be 1.3. It should see the page:
> http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Yes, window.devicePixelRatio and related properties are broken on Android; see bug 794056 and bug 803207.