860081 - Higher-resolution overlay button icons

Status: RESOLVED FIXED

(Firefox for Metro Graveyard :: Theme, defect, P2)

Description

[Frank Yan (:fryn)]

Attachment: plus button icon that is in need of rounded corners and shadow

The back and plus button icons are currently 90px square.

We need higher-resolution versions of these images for higher-dpi displays.
It seems like the convention is to use 1.4x scaling, so 126px square perhaps will do.

Also, the plus button icon that I'm currently using doesn't have rounded corners (good eye, Yuan!) and the shadow. Could you make both regular and 1.4x versions of the plus button icon image with the rounded corners and shadow, Stephen?

Thank you in advance! :)

Comment 1

[Frank Yan (:fryn)]

We made some changes since I wrote the original description:

In the non-hovered state, the button icons are now 60px square.
In the hovered state, the button icons are now 108px square.

Applying 1.4x scaling, we get 84px square and 151.2px square, respectively, the latter of which is not even an integer. :/

Stephen, what sizes do you think we should include then?
As you said, SVG would solve this problem, but it's slow, and the buttons are already borderline janky.

Comment 2

[Sam Foster [:sfoster] (he/him)]

Seems like a job for a font glyph? Not something we'd want to take on for just this bug, but moving some of our icons, symbols and other UI graphics into a font would give us better tools for creating sharp UI at any size/density. I guess engineering a cross-platform symbol font is a larger task than managing the bitmaps and spritesheeets we use today, but I expect that gap to close. 

E.g. http://fortawesome.github.io/Font-Awesome/

Comment 3

[Marco Mucci [:MarcoM]]

Are the high resolution overlay button icons still required?

Comment 4

[Frank Yan (:fryn)]

Yes. We also need an updated normal-resolution plus icon as I described in comment 0.

Comment 5

[Tim Nguyen :ntim]

For the plus button, you guys could just use : image-rendering:-moz-crisp-edges

Comment 6

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: overlay-navigation.zip

Includes:

• overlay-back at default, 1.4x and 1.8x

• overlay-plus at default, 1.4x and 1.8x

Comment 7

[Matt Brubeck (:mbrubeck)]

Design-only bug; setting status-firefox28 to get this off our uplift radar.  (The uplift will happen in bug 961123 instead.)