1023546 - DevTools - Support HDPI resolutions for Windows

Status: RESOLVED FIXED

(DevTools :: Framework, defect)

Description

[Tim Nguyen :ntim]

With bug 837188, 2x resolution is pretty much done.

It'd be nice if 125%/150%/180% dpi settings were also supported on Windows.

Now there are 3 solutions possible :
(1) Use SVG assets everywhere
(2) Downscale 2x icons for those dpi settings
(3) Include assets of each of those dpi settings

Solution (2) sounds best to me, as it requires not much work.

Comment 1

[Tim Nguyen :ntim]

What would you go for to fix this bug ?

Comment 2

[Brian Grinstead [:bgrins]]

(In reply to Tim Nguyen [:ntim] from comment #0)
> With bug 837188, 2x resolution is pretty much done.
> 
> It'd be nice if 125%/150%/180% dpi settings were also supported on Windows.
> 
> Now there are 3 solutions possible :
> (1) Use SVG assets everywhere
> (2) Downscale 2x icons for those dpi settings
> (3) Include assets of each of those dpi settings
> 
> Solution (2) sounds best to me, as it requires not much work.

Does (2) require adding new images for each dpi setting or just modifying the existing 2x images?

Comment 3

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

What systems or scenarios exist where these dpi settings are common?

Comment 4

[Tim Nguyen :ntim]

(In reply to Brian Grinstead [:bgrins] from comment #2)
> (In reply to Tim Nguyen [:ntim] from comment #0)
> > With bug 837188, 2x resolution is pretty much done.
> > 
> > It'd be nice if 125%/150%/180% dpi settings were also supported on Windows.
> > 
> > Now there are 3 solutions possible :
> > (1) Use SVG assets everywhere
> > (2) Downscale 2x icons for those dpi settings
> > (3) Include assets of each of those dpi settings
> > 
> > Solution (2) sounds best to me, as it requires not much work.
> 
> Does (2) require adding new images for each dpi setting or just modifying
> the existing 2x images?

(2) just requires updating CSS code.

Comment 5

[Tim Nguyen :ntim]

(In reply to Jeff Griffiths (:canuckistani) from comment #3)
> What systems or scenarios exist where these dpi settings are common?

Windows has DPI settings from 125% to 200%, and currently, those dpi settings use upscaled 1x graphics.

Comment 6

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

(In reply to Tim Nguyen [:ntim] from comment #5)
> (In reply to Jeff Griffiths (:canuckistani) from comment #3)
> Windows has DPI settings from 125% to 200%, and currently, those dpi
> settings use upscaled 1x graphics.

Ah, got it. If this is just css changes eg really shallow, looks good. IMO the usage of these settings on Windows systems is probably not high enough to worry too much about. If we had data that told me significant numbers of web developers used our tools with these oddball dpi settings, I'd get more interested in custom assets.

Comment 7

[Tim Nguyen :ntim]

Attachment: Patch

Mass change from 2dppx to 1.25dppx. (Please also ask people in the future to use 1.25 instead of 2 too).

I only tested this on retina OSX, and it doesn't regress anything. But I'll need to test this on Windows tomorrow to see if it really works.

Comment 8

[Tim Nguyen :ntim]

(In reply to Tim Nguyen [:ntim] from comment #7)
> Created attachment 8598285 [details] [diff] [review]
> Patch
> 
> Mass change from 2dppx to 1.25dppx.
This is the approach taken on the Firefox Desktop side FYI.

Comment 9

[Brian Grinstead [:bgrins]]

(In reply to Tim Nguyen [:ntim] from comment #8)
> This is the approach taken on the Firefox Desktop side FYI.

A quick search seems to indicate there is still more 2dppx usage: https://dxr.mozilla.org/mozilla-central/search?q=2dppx&redirect=true vs https://dxr.mozilla.org/mozilla-central/search?q=1.25dppx&redirect=true.

I'm not necessarily against this, but I'm going to ask around to see if someone else who knows about this can advise.

Comment 10

[Tim Nguyen :ntim]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=6d7ac80a379a

Comment 11

[Tim Nguyen :ntim]

(In reply to Tim Nguyen [:ntim] from comment #10)
> https://treeherder.mozilla.org/#/jobs?repo=try&revision=6d7ac80a379a
This try push is just for faster testing (which is why there are not tests being ran).

(In reply to Brian Grinstead [:bgrins] from comment #9)
> (In reply to Tim Nguyen [:ntim] from comment #8)
> > This is the approach taken on the Firefox Desktop side FYI.
> 
> A quick search seems to indicate there is still more 2dppx usage:
> https://dxr.mozilla.org/mozilla-central/search?q=2dppx&redirect=true vs
> https://dxr.mozilla.org/mozilla-central/search?q=1.25dppx&redirect=true.

If you remove the devtools results and the OSX files, the difference is slight. Also, newer code being written is using 1.25dppx : see attachment 8598235 [details] [diff] [review] for example

Comment 12

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Brian Grinstead [:bgrins] from comment #9)
> (In reply to Tim Nguyen [:ntim] from comment #8)
> > This is the approach taken on the Firefox Desktop side FYI.
> 
> A quick search seems to indicate there is still more 2dppx usage:
> https://dxr.mozilla.org/mozilla-central/search?q=2dppx&redirect=true vs
> https://dxr.mozilla.org/mozilla-central/search?q=1.25dppx&redirect=true.

Not all icons have been switched over yet, but this is the plan until everything is converted to SVG (longer term).

Comment 13

[Brian Grinstead [:bgrins]]

Comment on attachment 8598285 [details] [diff] [review]
Patch

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

OK, sounds good.  Can you add the couple of instances in browser/devtools to this patch?

Comment 14

[Tim Nguyen :ntim]

Attachment: Patch

Tested, and it looks much better on Windows.

Comment 15

[Ryan VanderMeulen [:RyanVM]]

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

Comment 16

[Ryan VanderMeulen [:RyanVM]]

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