891656 - Defect - wallpaper solution - navigation app bar icons cut off

Status: RESOLVED FIXED

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

Description

[juan becerra [:juanb]]

Tested on 2013-07-08 with latest nightly on a Surface Pro.

I noticed that the back, downloads, bookmarks, pin, and find in page icons are slightly cut off at the bottom. They are missing a few pixels. The pin icon is also missing some pixels on the right edge.

I have default screen settings on this machine.

Steps:
1. Launch Firefox Metro and open a new tab.

Expected: Round, complete icons for all buttons.

Actual: They seem cut off ever so slightly at the bottom, and in the case of the pin icon it also seems cut off on the right edge.

Comment 1

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

Attachment: Screenshot at 100%/default scaling

Juan, can you still reproduce this? I cannot. I tried with both 100% (default) and 150% scaling and I see no clipping. The attached screenshot is using 100% scaling, on my x1 carbon touch thinkpad which has a 1600/900px display.

Comment 2

[juan becerra [:juanb]]

Attachment: Icons slightly cut off.

This is on a Surface Pro with default resolution settings. I could be doing something wrong, but Samvedna can also reproduce on her machine, running Windows 8.1.

Comment 3

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

Ok I see it in your screenshot - its subtle but definitely there. This might be some kind of a rounding error. I have seen similar issues with graphics and borders in the about:start tiles occasionally. Could be tricky to pin down. I'm unassigning myself as I can't reproduce though.

Comment 4

[Marco Mucci [:MarcoM]]

Hi Yuan, can you see Sam's comment #3 and provide feedback.  Can we make this work item invalid or is this a defect that needs to be fixed as part of the story?

Comment 5

[Jonathan Wilde [:jwilde]]

Attachment: a wallpaper patch that mostly fixes the clipping

Comment 6

[Jonathan Wilde [:jwilde]]

After poking at this for a while, it looks like the clipping is actually happening inside -moz-image-rect itself (as opposed to us having a situation where a container is clipping its contents). We can alleviate the clipping at most resolutions by stretching the image a little bit, but that also makes things appear a little bit fuzzy. There's also some clipping added around 1.6 dppx.

This is feeling like it's probably related to bug 895277. I'm going to see if I can create a reduced testcase that has issues right around the same areas as the existing one on that bug to check this hypothesis.

In terms of options without a layout change related to bug 895277 (assuming that's actually the root cause of this):

- Use the attached 1px stretching hack. Adds fuzziness (though, it's not awful and looks better than the clipping). Doesn't entirely fix the clipping.

- Add some padding around the sections of the sprites, make the buttons a little larger to accommodate. Will likely fix the clipping entirely, but makes some extra work for shorlander (or anybody who has a Photoshop license--I'm happy to volunteer for slicing/spriting duty to take some load off shorlander). But, there'll be one- or two-pixel alignment issues with the toolbar buttons at other dppx values than 1.4. I'd imagine that this would look better than the clipping, but it still sucks.

- Other things I'm not thinking about?

Comment 7

[Jonathan Wilde [:jwilde]]

Attachment: screenshot of another wallpaper patch

Curiously, if we make the navbar one pixel taller, much of the vertical clipping disappears. There's still some horizontal clipping, but it only appears on the forward and pin buttons. Working on getting a reduced testcase over into core.

Comment 8

[Jonathan Wilde [:jwilde]]

Per discussion with sfoster in #windev, plan is to land a short-term solution here. Bug to find a longer term solution is bug 905453.

Comment 9

[Marco Mucci [:MarcoM]]

Adding updated wallpaper patch for Iteration #13.

Comment 10

[Jonathan Wilde [:jwilde]]

Attachment: a somewhat better wallpaper patch

Comment 11

[Jonathan Wilde [:jwilde]]

Comment on attachment 792618 [details] [diff] [review]
a somewhat better wallpaper patch

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

I haven't pulled/clobbered in a week or so, so I've kicked off a try job (https://tbpl.mozilla.org/?tree=Try&rev=667d54796435) and can double-check the patch in the morning.

Comment 12

[Jonathan Wilde [:jwilde]]

Okay, looks good on my local build. Pushing to fx-team.

Comment 13

[Jonathan Wilde [:jwilde]]

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

Comment 14

[Ed Morley [:emorley]]

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

Comment 15

[Asa Dotzler [:asa]]

This wallpaper fixes the clipping at the bottom of buttons I was seeing but doesn't fix the clipping of the right sides of buttons -- at least the Forward button and the Pin to Start button.  I don't think we can ship with such an obvious visual glitch.  If there are no other easy wallpaper fixes (even ugly hacks :) that can get us proper clipping in high-dpi mode, I think we'll need to work on the re-architecting and longer term solution now rather than later.