Wesley Johnston (:wesj) Assignee
	Description • 12 years ago

One way to help with perceived app startup is to show a splashscreen. Perhaps a screenshot of the app or a bitmap provided by the manifest.

I had neither of those, so this is an earlier first step. Mostly putting this us to save my place. mfinkle mentioned the facebook app showing a solid color with their name. This does the same (slight gradient using the favicon's dominant color + the app name). Isn't great. Isn't horrible either.

	Mark Finkle (:mfinkle) (use needinfo?)
	Comment 2 • 12 years ago

Screenshot?

	Aaron Train [:aaronmt]
	Comment 3 • 12 years ago

Is this going to show the same ugly low-res icons majority of the applications are sporting? Is that what we really want to present on as a first run experience?

	Wesley Johnston (:wesj) Assignee
	Comment 4 • 12 years ago

This has no plan. The current WIP doesn't show favicons. TBH, I think most apps favicons look fine. What device are you on? File a separate bug?

	Wesley Johnston (:wesj) Assignee
	Comment 5 • 12 years ago

Screenshot of evernote. I'm not trying to sell this as done or shippable, but I'm happy to take feedback/ideas on how to make it better.

	Jason Smith [:jsmith]
	Comment 6 • 12 years ago

(In reply to Wesley Johnston (:wesj) from comment #5)
> Created attachment 649494 [details]
> Evernote
> 
> Screenshot of evernote. I'm not trying to sell this as done or shippable,
> but I'm happy to take feedback/ideas on how to make it better.

I like the concept. Would be curious to hear what UX's opinion is on this.

Maria - In the context of Mozilla Marketplace, what's your thoughts on having a splash screen for the Mozilla Marketplace on Android? The context behind the implementation of this is trying to figure out a way to improve perceived performance of an app by an end-user, especially for the Mozilla Marketplace.

Ian - What's your thoughts on this for web apps as a whole with splashscreens on startup?

	Maria Sandberg [:mushi]
	Comment 7 • 12 years ago

(In reply to Jason Smith [:jsmith] from comment #6) 
> Maria - In the context of Mozilla Marketplace, what's your thoughts on
> having a splash screen for the Mozilla Marketplace on Android? The context
> behind the implementation of this is trying to figure out a way to improve
> perceived performance of an app by an end-user, especially for the Mozilla
> Marketplace.

Just to clarify, I interpret this as us having problems with slow load times of the Mozilla Marketplace as well as webapps in general on Android. The suggestion is to use a splash screen to cover this up a little?

In general, splash screens aren't amazing but can be an okay way to communicate to the user that progress is being made. I'm open to using one for the Marketplace but ideally I would like us to make something smarter than just showing an image while the app loads. It will all depend on how long the delay is, but we could have a staggered load for example. I think Flipboard for iPhone does this nicely - first they show their logo on a gray screen, then the lines for their grid show up with load indicators in each square, and then the content fills in. 

If we go the splash screen route we should look at how much time we are trying to cover up, what can be done, and then I can design the look as well as duration of the splash screen sequence. 

For webapps in general it seems like it could (or should?) be up to the developer. I'd be hesitant about a solution where we ask developers to give us a splash screen - or create one for them, but I'll let Ian speak to this as well.

	Mark Finkle (:mfinkle) (use needinfo?)
	Comment 8 • 12 years ago

More clarification: Since we are using the splashscreen idea to soften the startup time, we are limited to what we can show in Java: text and images. We have no plans to implement any complicated/rich splashscreen system.

	Ian Barlow (:ibarlow)
	Comment 9 • 12 years ago

(In reply to Jason Smith [:jsmith] from comment #6)

> Ian - What's your thoughts on this for web apps as a whole with
> splashscreens on startup?

I am generally pretty against the use of splash screens -- at least the kind of splash screen where you show a logo on a background colour. While they used to be the norm, they are now a pretty obvious sign of "sorry, my app is too slow". 

If you need something to pad the perceived startup time, a screenshot of the app's previous state, or a "fake" screenshot of an empty UI is often an effective trick.

	Maria Sandberg [:mushi]
	Comment 10 • 12 years ago

I agree with Ian, who did a much better job of explaining what I was trying to. Even just showing an image of the navigation bar and no content

	Maria Sandberg [:mushi]
	Comment 11 • 12 years ago

(In reply to Maria Sandberg [:mushi] from comment #10)
> I agree with Ian, who did a much better job of explaining what I was trying
> to. Even just showing an image of the navigation bar and no content

Bah, bugzilla! That was half done.
ccing fligtar and potch. When it comes to the Marketplace I'd like to avoid the splash screen, I'll leave it to them to argue why we won't need one.

	Wesley Johnston (:wesj) Assignee
	Comment 12 • 12 years ago

This is most of what ian sent me in a mockup. I'd like to tweak the "entrance" animation a bit, but overall it looks good. The icons look bad too. We're scaling them to 64x64 in js right now and I'm saving those off as logo.png in the profile.

Since I'm digging into those in bug 783921 I figured I would fix it there as well.

	Wesley Johnston (:wesj) Assignee
	Comment 13 • 12 years ago

Screenshot of this. Each of these elements (the background, the logo, and the progress spinner) fade in separate so that things feel like they're progressing. The spinner is tied to START messages so it gives us a feel for whether Gecko is slow or page load is slow. Turns out that depends on your network!

	Wesley Johnston (:wesj) Assignee
	Comment 14 • 12 years ago

Same shot from my old DroidX with its custom themed spinner. Its ugly. I'm... willing to overlook this, but I bet UX won't be.

	Wesley Johnston (:wesj) Assignee
	Comment 15 • 12 years ago

Here's a build with this too:

http://people.mozilla.com/~wjohnston/splashscreen.apk

	Wesley Johnston (:wesj) Assignee
	Comment 16 • 12 years ago

OK. I think this is ready for reviews. There's basically two parts to this:

1.) During app install we cache the app icon into the apps profile as logo.png. We also pass the icon to the WebAppAllocator (we're already passing it to java for the launcher icon) and pull out its dominant colors. We store that in Android prefs.

2.) When we show the webapp I set its theme to Transparent because out of a million things I tried that was the first that killed the normal apps start animation. Then we fade+grow to the splashscreen, then we fade+grow in the logo. At network start we also fade in the throbber. Once the page has loaded we cross-fade the splashscreen out and show the content.

Seems to work well. Will not work for already installed apps where logo.png isn't saved and the dominant color hasn't been set. In those cases it will show a white-gray gradient background and fade in the throbber when network activity starts. Then cross fade to the page once it has loaded.

Build at:
http://people.mozilla.org/~wjohnston/splash.apk

	Mark Finkle (:mfinkle) (use needinfo?)
	Comment 17 • 12 years ago

Comment on attachment 656119 [details] [diff] [review]
Pach v1

>diff --git a/mobile/android/base/GeckoApp.java b/mobile/android/base/GeckoApp.java

>-    public static Intent getWebAppIntent(String aURI, String aUniqueURI, boolean forInstall) {
>+    public static Intent getWebAppIntent(String aURI, String aUniqueURI, String aTitle, Bitmap aIcon) {
>         int index;
> 
>-        if (forInstall)
>-            index = WebAppAllocator.getInstance(GeckoApp.mAppContext).findAndAllocateIndex(aUniqueURI);
>+        if (aIcon != null && !TextUtils.isEmpty(aTitle))
>+            index = WebAppAllocator.getInstance(GeckoApp.mAppContext).findAndAllocateIndex(aUniqueURI, aTitle, aIcon);
>         else
>             index = WebAppAllocator.getInstance(GeckoApp.mAppContext).getIndexForApp(aUniqueURI);
> 
>         if (index == -1)
>             return null;
> 
>         return getWebAppIntent(index, aURI);
>     }

First pass nit: I still don't like this method. I read the code a bit more to better understand the difference between findAndAllocateIndex and getIndexForApp

	Maria Sandberg [:mushi]
	Comment 18 • 12 years ago

Adding Harald to this thread, looks like we'll need something similar on FFOS

	Jason Smith [:jsmith]
	Comment 19 • 12 years ago

(In reply to Maria Sandberg [:mushi] from comment #18)
> Adding Harald to this thread, looks like we'll need something similar on FFOS

In what sense? Why do we need this in FF OS? I thought this was only going to be implemented for Android.

	:Harald Kirschner :digitarald
	Comment 20 • 12 years ago

The same problem exists on FF OS (1+ seconds of white screen before HTML is rendered, even for offline apps). So any acceptable solution we find for Android, we should also look into porting to FF OS.

	Jason Smith [:jsmith]
	Comment 21 • 12 years ago

(In reply to Harald Kirschner from comment #20)
> The same problem exists on FF OS (1+ seconds of white screen before HTML is
> rendered, even for offline apps). So any acceptable solution we find for
> Android, we should also look into porting to FF OS.

That's https://github.com/mozilla-b2g/gaia/issues/4213. There's other proposals going on in that thread, so I'd suggest looking there. I don't know if we should move to proposing splashscreens yet, as we have more control over the start-up performance on FF OS, unlike Android. Josh - Thoughts?

	Mark Finkle (:mfinkle) (use needinfo?)
	Comment 22 • 12 years ago

Comment on attachment 656119 [details] [diff] [review]
Pach v1

>diff --git a/mobile/android/base/WebApp.java.in b/mobile/android/base/WebApp.java.in

>+            case LOADED:
>+                if (mSplashscreen.getVisibility() == View.VISIBLE) {
>+                    mSplashscreen.startAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
>+                    mSplashscreen.setVisibility(View.GONE);

It looks like we start an animation, then hide the view. Will the animation even run? If not, let's not do it.

>diff --git a/mobile/android/base/WebAppAllocator.java b/mobile/android/base/WebAppAllocator.java

>+    public synchronized int findAndAllocateIndex(String app, String name, Bitmap aIcon) {

>+        String fileName = "webappicon" + index + ".png";
>+        int color = 0;
>+        try {
>+            FileOutputStream fos = sContext.openFileOutput(fileName, Context.MODE_PRIVATE);
>+            aIcon.compress(Bitmap.CompressFormat.PNG, 90, fos);
>+            color = BitmapUtils.getDominantColor(aIcon);
>+        } catch (Exception e) {
>+            e.printStackTrace();
>+        }
>+

Do we need this? I thought we stored a "logo.png" in the app folder.

>diff --git a/mobile/android/chrome/content/browser.js b/mobile/android/chrome/content/browser.js

>+            // also save the icon so that it can be used in the splash screen
>+            let iconFile = file.clone();
>+            iconFile.append("logo.png");
>+            var persist = Cc["@mozilla.org/embedding/browser/nsWebBrowserPersist;1"].createInstance(Ci.nsIWebBrowserPersist);

var -> let

>+            var source = Services.io.newURI(fullsizeIcon, "UTF8", null);

same

r- for a cleaned up patch

	Josh Carpenter [:jcarpenter]
	Comment 23 • 12 years ago

> Josh - Thoughts?

The following comment captures Tim's approach nicely:

https://github.com/mozilla-b2g/gaia/issues/4213#issuecomment-8255007

We're going to play around with what goes into that "dark div" placeholder. I'm voting my a Nedry-from-JurassicPark taunting finger wave, which can only be cleared by finding the right file in the 3D Unix land (which I know!).

http://25.media.tumblr.com/tumblr_m5hanqXJTF1rtbweko1_400.gif

Ahem.

	Wesley Johnston (:wesj) Assignee
	Comment 25 • 12 years ago

Nits addressed.

	Wesley Johnston (:wesj) Assignee
	Comment 26 • 12 years ago

https://hg.mozilla.org/integration/mozilla-inbound/rev/6d3db18ef4cd

	:Ms2ger (he/him; ⌚ UTC+1/+2)
	Comment 28 • 12 years ago

https://hg.mozilla.org/mozilla-central/rev/6d3db18ef4cd

	Aaron Train [:aaronmt]
	Comment 29 • 12 years ago

Is there no faster/immediate way to show the application icon and spinner? On my Galaxy Note there is a two or three second delay of just seeing the background color before anything else is drawn on-screen; which is already long-enough in the application launch cycle.

	cscott
	Comment 30 • 12 years ago

I'm not seeing the webapp name when I install from http://nell-balloons.github.cscott.net/install.html and then launch the app.  Was that dropped? (The name appeared in various screenshots above.)

	Wesley Johnston (:wesj) Assignee
	Comment 31 • 12 years ago

The name was dropped based on a mockup sent to me by UX. That also had a "connecting..." string that I removed in the interest of making localization easy.

http://dl.dropbox.com/u/72157/app%20launch%20animation.mov

Not sure about the delay Aaron. I did delay the icon showing for a second to match the mockup (somewhat, I'm not going to claim its a perfect match). File a second bug if you think it should be shown sooner and we can tweak some animation parameters.

	Wesley Johnston (:wesj) Assignee
	Comment 32 • 12 years ago

Comment on attachment 662390 [details] [diff] [review]
Patch v2

[Approval Request Comment]
Bug caused by (feature/regressing bug #): Webapps
User impact if declined: Long black screens during startup
Testing completed (on m-c, etc.): Landed on mc two days ago
Risk to taking this patch (and alternatives if risky): Webapps only. Fairly low risk. Just a bunch of polish stuff
String or UUID changes made by this patch: None.

	Alex Keybl [:akeybl]
	Comment 33 • 12 years ago

(In reply to Wesley Johnston (:wesj) from comment #32)
> Risk to taking this patch (and alternatives if risky): Webapps only. Fairly
> low risk. Just a bunch of polish stuff

None of the web apps at time of Marketplace beta will actually have this functionality though, right? Is there some timeline that would make having this in FF16 desirable?

	Wesley Johnston (:wesj) Assignee
	Comment 34 • 12 years ago

We are generating these splashscreens dynamically for them. There is no way to specify a splashscreen for your webapp (yet).

	Lukas Blakk [:lsblakk] use ?needinfo
	Comment 35 • 12 years ago

Is there a product need for this (someone from WebApps or Mobile team)?  Otherwise, we can let it ride the trains.

	Jason Smith [:jsmith]
	Comment 36 • 12 years ago

(In reply to Lukas Blakk [:lsblakk] from comment #35)
> Is there a product need for this (someone from WebApps or Mobile team)? 
> Otherwise, we can let it ride the trains.

There is. The whitescreen shown right now simply isn't acceptable, so triage marked improving perceived performance as high priority. This is the solution in the short-term. Putting the whitescreen up to dogfooders in beta is going look quite bad (and cause noise on our feedback mailing list), so I definitely think there's value in uplifting this, unless there's some risk I'm not seeing here.

	Lukas Blakk [:lsblakk] use ?needinfo
	Comment 37 • 12 years ago

Comment on attachment 662390 [details] [diff] [review]
Patch v2

Thanks for the response, since it's low risk and makes the beta experience better we can go ahead with uplift.

	Wesley Johnston (:wesj) Assignee
	Comment 38 • 12 years ago

https://hg.mozilla.org/releases/mozilla-aurora/rev/ce6fa35857c0