Closed Bug 860081 Opened 8 years ago Closed 7 years ago

Higher-resolution overlay button icons


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

Windows 8.1


(firefox28 wontfix)

Firefox 29
Tracking Status
firefox28 --- wontfix


(Reporter: fryn, Assigned: mmaslaney)



(Whiteboard: [beta28] [ux] p=0 [qa-])


(2 files)

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! :)
No longer blocks: 836791
Depends on: 835628
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.
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. 

Blocks: 836791
Are the high resolution overlay button icons still required?
Flags: needinfo?(fyan)
Yes. We also need an updated normal-resolution plus icon as I described in comment 0.
Flags: needinfo?(fyan)
Assignee: shorlander → mmaslaney
Blocks: metrov1it22
No longer blocks: Backlog-MetroDesign
Priority: -- → P2
QA Contact: jbecerra
Summary: Work - Higher-resolution overlay button icons → Higher-resolution overlay button icons
Whiteboard: [beta28] [feature] p=0
For the plus button, you guys could just use : image-rendering:-moz-crisp-edges
Whiteboard: [beta28] [feature] p=0 → [beta28] [ux] p=0
Attached file

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

• overlay-plus at default, 1.4x and 1.8x
Closed: 7 years ago
Resolution: --- → FIXED
Blocks: 961123
Target Milestone: --- → Firefox 29
Whiteboard: [beta28] [ux] p=0 → [beta28] [ux] p=0 [qa-]
Design-only bug; setting status-firefox28 to get this off our uplift radar.  (The uplift will happen in bug 961123 instead.)
OS: Windows 8 Metro → Windows 8.1
You need to log in before you can comment on or make changes to this bug.