1162930 - Update Firstrun background image to fix scrolling/measure problems

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Florian Quèze [:florian]]

Attachment: Screenshot_2015-05-08-13-53-32.png

See attached screenshot where the last line is cut. Yet, there's no scrollbar. If I hold the phone in the landscape orientation, then I can scroll and read the last line.

Comment 1

[Chenxia Liu [:liuche]]

Florian, what device is this? I thought we had a fix for this in bug 1128431, but it looks like this is a case that that we didn't cover in that bug.

This might be because this fix was a hack, and only tested on non-localized builds...

Of note, the user studies builds in bug 1148460 that Gemma is testing don't have this problem (because they have a different layout), so when we switch to that, this bug will go away.

In the meantime, it depends on if we want to figure out the real fix for this, versus using the hack. mcomella suggested that maybe this is an onMeasure problem, where the welcome screen isn't taking into account the height of the title bar, so it thinks the screen is big enough to show everything (and doesn't display the scrollbar).

Ally, since you did the work on the original bug, do you want to take this bug?

Comment 2

[Florian Quèze [:florian]]

(In reply to Chenxia Liu [:liuche] from comment #1)
> Florian, what device is this?

Sony Xperia Z3C running Android 5.0.2.

Comment 3

[Allison Naaktgeboren :ally]

Do we have one of these phones floating about mozpdx that I could borrow for this?

Comment 4

[Kevin Brosnan [Ex-Mozilla]]

No.

Comment 5

[:Margaret Leibovic]

It looks like this issue would appear on any small-screen device with a french build. Can you try installing a french build on one of the other small-screen devices you have laying around?

Comment 6

[Allison Naaktgeboren :ally]

Yea, thats my next plan of attack.

Comment 7

[:Margaret Leibovic]

Chenxia, can this be a mentor bug? Or can this be part of our "first run v2" work? We should try to fix this, since it leaves a bad first impression for users.

Comment 8

[Chenxia Liu [:liuche]]

This would be fixed in the v2, that's in bug 1172623 - we're using pngs instead of colors, so it doesn't require the somewhat hacky solution in bug 1128431. I could update the screen with one of the images of the new screens, which would fix the problem.

Antlam, if I were to use one of the images from bug 1172623 for the existing first run copy/buttons, which should I use? The messy desk or the devices?

Comment 9

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to Chenxia Liu [:liuche] from comment #8)
> This would be fixed in the v2, that's in bug 1172623 - we're using pngs
> instead of colors, so it doesn't require the somewhat hacky solution in bug
> 1128431. I could update the screen with one of the images of the new
> screens, which would fix the problem.
> 
> Antlam, if I were to use one of the images from bug 1172623 for the existing
> first run copy/buttons, which should I use? The messy desk or the devices?

This works out! I actually wanted to see if we could get these illustrations in to replace the single slide app icon. But, I was going to wait for our second slide. After some thought, we should just replace it with one of those illustrations since we have them and they are quite nice ;)

So, maybe we can kill 2 birds here! Let's use the desk illustration in the opening slide. I think its more whimsical as well! :)

Comment 10

[Chenxia Liu [:liuche]]

Okay, I'll do that :)

Morphing the bug name to better reflect what we'll be doing.

Comment 11

[Chenxia Liu [:liuche]]

Antlam: Can you get me the images for this? Specifically, hdpi/xhdpi/xxhdpi versions of the messy desk with the phone centered.

Comment 12

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: defaultslides.zip

Note: We'll need to update the build icon size to be placed in the middle there. In the design, it should be 48 dp wide :)

But, I'm also realizing that we need to think about tablets in this case so we should see what this looks like on a tablet too. We might have to end up splitting the illustration into multiple parts...

Want to give it a crack and show me some builds Chenxia? :D

Comment 13

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

^ also, I updated these sizes too to fit nicer with the 48 dp tall tabs header.

Comment 14

[Chenxia Liu [:liuche]]

Ah okay, I didn't realize we needed the build icon to be specific to each channel.

So actually, can you upload the icons for just the phone + dropshadow then? It'll be easier for me to center the build icon on the phone if I'm doing both of them, rather than trying to find where the phone is in the background, and centering over that.

Comment 15

[Chenxia Liu [:liuche]]

Attachment: Screenshot: Firstrun with centered phone

Actually, this is what it looks like - what do you think?

Eventually, I will still need these images separately, if we want to support multiple screens with a "floating phone":
1. Phone + dropshadow
2. Background with blue w/o phone

But for the moment, it's fewer resources to just include the phone in the background!

Comment 16

[Chenxia Liu [:liuche]]

Attachment: Screenshot: Nexus 7" portrait

Comment 17

[Chenxia Liu [:liuche]]

Attachment: Screenshot: Nexus 9" landscape

40dp looks a bit small for the icon on the Nexus 9 - also the image is kind of blurry :/

Comment 18

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: defaultslides2.zip

Try these. We should also figure out tablets eventually. :)

Comment 19

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Comment on attachment 8641946 [details]
Screenshot: Nexus 9" landscape

Yeah, this is weird... hm, why is it spanning the full screen? where's the white content area?

Comment 20

[Chenxia Liu [:liuche]]

Attachment: MozReview Request: Bug 1162930 - Update Firstrun background image to fix scrolling/measure problems. r=mhaigh

Bug 1162930 - Update Firstrun background image to fix scrolling/measure problems. r=mhaigh

Comment 21

[Chenxia Liu [:liuche]]

Attachment: MozReview Request: Bug 1162930 - Remove mdpi from branding/. r=mhaigh

Bug 1162930 - Remove mdpi from branding/. r=mhaigh

Comment 22

[Chenxia Liu [:liuche]]

Attachment: MozReview Request: Bug 1162930 - Remove branding/large-icon. r=mhaigh

Bug 1162930 - Remove branding/large-icon. r=mhaigh

Comment 23

[Chenxia Liu [:liuche]]

Attachment: MozReview Request: Bug 1162930 - Fix first run in portrait mode. f?mhaigh

Bug 1162930 - Fix first run in portrait mode. f?mhaigh

Comment 24

[Chenxia Liu [:liuche]]

Comment on attachment 8642702 [details]
MozReview Request: Bug 1162930 - Fix first run in portrait mode. f?mhaigh

I'm trying to make this stick in Portrait mode, but what this code really seems to do is use up so many cycles constantly checking (because the actual configuration doesn't match the one that's passed in as newConfig) that the phone gets "stuck" in portrait mode - but also feels super laggy. Any ideas?

Comment 25

[Chenxia Liu [:liuche]]

Anthony, getting this to stay in Portrait mode for the duration of Firstrun is actually pretty hard, and I can't figure out a way to get Android to stop trying to check the orientation (and then overriding it every time). While it stays in Portrait mode, the app feels super laggy and doesn't scroll very well, and occasionally actually switches back to landscape anyways before flipping back to Portrait.

Is there something we can do with the image to make it look better when it's in landscape mode, instead of forcing it to portrait mode? (I also wonder if that gives a broken feel to Firefox - "does Firefox only work in portrait mode?") I could fix the width of the image so it doesn't expand as tall as it is in this image, or we could use a different image for landscape, or...?

Comment 26

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: defaultslides3.zip

Try these slides!

Comment 27

[Martyn Haigh (:mhaigh)]

Comment on attachment 8642699 [details]
MozReview Request: Bug 1162930 - Update Firstrun background image to fix scrolling/measure problems. r=mhaigh

https://reviewboard.mozilla.org/r/14773/#review13919

What does the desk part of the image names refer to?  Perhaps change to something more obvious?

Did you optimise the images?

Comment 28

[Martyn Haigh (:mhaigh)]

Comment on attachment 8642700 [details]
MozReview Request: Bug 1162930 - Remove mdpi from branding/. r=mhaigh

https://reviewboard.mozilla.org/r/14775/#review13921

Awesome!  I love removing assets

Comment 29

[Martyn Haigh (:mhaigh)]

Comment on attachment 8642701 [details]
MozReview Request: Bug 1162930 - Remove branding/large-icon. r=mhaigh

https://reviewboard.mozilla.org/r/14777/#review13923

Ship It!

Comment 30

[Martyn Haigh (:mhaigh)]

Comment on attachment 8642702 [details]
MozReview Request: Bug 1162930 - Fix first run in portrait mode. f?mhaigh

https://reviewboard.mozilla.org/r/14779/#review13925

Ship It!

::: mobile/android/base/BrowserApp.java:8
(Diff revision 1)
> +import android.content.pm.ActivityInfo;

Move these imports to beneath the mozilla ones.

Comment 31

[Chenxia Liu [:liuche]]

Attachment: Screenshot: Tablet portrait

Comment 32

[Chenxia Liu [:liuche]]

Attachment: Screenshot: Tablet landscape

Comment 33

[Chenxia Liu [:liuche]]

Attachment: Screenshot: Phone landscape

Comment 34

[Chenxia Liu [:liuche]]

Attachment: Screenshot: Phone portrait

Comment 35

[Chenxia Liu [:liuche]]

Antlam, what do you think about these screenshots? Here's the build: http://people.mozilla.org/~liuche/bug-1162930/phone-tablet1.apk

Comment 36

[Chenxia Liu [:liuche]]

Talked to antlam: tablet res for icon should be 72dp, and 48dp for phones.

Comment 37

[Chenxia Liu [:liuche]]

Attachment: Screenshot: Tablet portrait 72dp brand icon

Comment 38

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

These shots look good but I ran into some issues with the build. Also, does that build icon look blurry to you in comment 37? ^

Comment 39

[Chenxia Liu [:liuche]]

(In reply to Martyn Haigh (:mhaigh) from comment #27)
> Comment on attachment 8642699 [details]
> MozReview Request: Bug 1162930 - Update Firstrun background image to fix
> scrolling/measure problems. r=mhaigh
> 
> https://reviewboard.mozilla.org/r/14773/#review13919
> 
> What does the desk part of the image names refer to?  Perhaps change to
> something more obvious?
> 
> Did you optimise the images?

Good call, I just ran ImageOptim on these, and renamed them (and also updated the images to the new set that Anthony gave me).

Comment 40

[Pulsebot]

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

Comment 41

[Chenxia Liu [:liuche]]

Attachment: Patch: Update image and fix scrolling problem

Carrying over r+ from mhaigh on reviewboard.

Approval Request Comment
[Feature/regressing bug #]: bug 1128431 didn't completely fix the scrolling issue
[User impact if declined]: Some users will not be able to scroll on first run
[Describe test coverage new/current, TreeHerder]: local, nightly
[Risks and why]: low, updates an image and layout
[String/UUID change made/needed]: none

Comment 42

[Pulsebot]

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

Comment 43

[Chenxia Liu [:liuche]]

Comment 42 is the relanding after backing this out for using the wrong (non-existent) resource.

Comment 44

[Chenxia Liu [:liuche]]

Attachment: Patch: Update image and fix scrolling problem

Using the right resource this time.

Approval Request Comment
[Feature/regressing bug #]: bug 1128431 didn't completely fix the scrolling issue
[User impact if declined]: Some users will not be able to scroll on first run
[Describe test coverage new/current, TreeHerder]: local, nightly
[Risks and why]: low, updates an image and layout
[String/UUID change made/needed]: none

Comment 45

[Pulsebot]

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

Comment 46

[Ryan VanderMeulen [:RyanVM]]

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

Comment 47

[Sylvestre Ledru [:Sylvestre]]

Comment on attachment 8646679 [details] [diff] [review]
Patch: Update image and fix scrolling problem

Not a great UX on the first run without this patch, taking it.

Comment 48

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/5ae2ab4052b8