Last Comment Bug 780759 - Splashscreens for webapps
: Splashscreens for webapps
Status: VERIFIED FIXED
:
Product: Firefox for Android
Classification: Client Software
Component: Web Apps (show other bugs)
: unspecified
: ARM Android
: P1 normal (vote)
: Firefox 18
Assigned To: Wesley Johnston (:wesj)
: Aaron Train [:aaronmt]
: Myk Melez [:myk] [@mykmelez]
Mentors:
: 604728 785444 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-08-06 15:57 PDT by Wesley Johnston (:wesj)
Modified: 2012-10-06 00:19 PDT (History)
15 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
fixed
verified


Attachments
WIP Patch (18.88 KB, patch)
2012-08-06 16:06 PDT, Wesley Johnston (:wesj)
no flags Details | Diff | Splinter Review
Evernote (33.08 KB, image/png)
2012-08-06 17:45 PDT, Wesley Johnston (:wesj)
no flags Details
WIP Patch v2 (27.31 KB, patch)
2012-08-24 15:34 PDT, Wesley Johnston (:wesj)
no flags Details | Diff | Splinter Review
Twitter on Nexus 7 (212.77 KB, image/png)
2012-08-24 15:36 PDT, Wesley Johnston (:wesj)
no flags Details
Twitter on a DroidX (71.25 KB, image/png)
2012-08-24 15:37 PDT, Wesley Johnston (:wesj)
no flags Details
Pach v1 (27.07 KB, patch)
2012-08-28 11:22 PDT, Wesley Johnston (:wesj)
mark.finkle: review-
Details | Diff | Splinter Review
Patch v2 (28.22 KB, patch)
2012-09-18 19:35 PDT, Wesley Johnston (:wesj)
mark.finkle: review+
lukasblakk+bugs: approval‑mozilla‑aurora+
Details | Diff | Splinter Review

Description Wesley Johnston (:wesj) 2012-08-06 15:57:23 PDT
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.
Comment 1 Wesley Johnston (:wesj) 2012-08-06 16:06:40 PDT
Created attachment 649454 [details] [diff] [review]
WIP Patch
Comment 2 Mark Finkle (:mfinkle) (use needinfo?) 2012-08-06 17:26:51 PDT
Screenshot?
Comment 3 Aaron Train [:aaronmt] 2012-08-06 17:35:17 PDT
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?
Comment 4 Wesley Johnston (:wesj) 2012-08-06 17:37:20 PDT
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?
Comment 5 Wesley Johnston (:wesj) 2012-08-06 17:45:57 PDT
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.
Comment 6 Jason Smith [:jsmith] 2012-08-06 18:44:55 PDT
(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?
Comment 7 Maria Sandberg [:mushi] 2012-08-07 10:06:29 PDT
(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.
Comment 8 Mark Finkle (:mfinkle) (use needinfo?) 2012-08-07 10:46:35 PDT
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.
Comment 9 Ian Barlow (:ibarlow) 2012-08-07 11:03:58 PDT
(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.
Comment 10 Maria Sandberg [:mushi] 2012-08-07 11:34:33 PDT
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
Comment 11 Maria Sandberg [:mushi] 2012-08-07 11:36:39 PDT
(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.
Comment 12 Wesley Johnston (:wesj) 2012-08-24 15:34:19 PDT
Created attachment 655195 [details] [diff] [review]
WIP Patch v2

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.
Comment 13 Wesley Johnston (:wesj) 2012-08-24 15:36:30 PDT
Created attachment 655197 [details]
Twitter on Nexus 7

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!
Comment 14 Wesley Johnston (:wesj) 2012-08-24 15:37:25 PDT
Created attachment 655198 [details]
Twitter on a DroidX

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.
Comment 15 Wesley Johnston (:wesj) 2012-08-24 17:00:24 PDT
Here's a build with this too:

http://people.mozilla.com/~wjohnston/splashscreen.apk
Comment 16 Wesley Johnston (:wesj) 2012-08-28 11:22:12 PDT
Created attachment 656119 [details] [diff] [review]
Pach v1

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
Comment 17 Mark Finkle (:mfinkle) (use needinfo?) 2012-08-30 07:54:26 PDT
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
Comment 18 Maria Sandberg [:mushi] 2012-09-11 09:45:28 PDT
Adding Harald to this thread, looks like we'll need something similar on FFOS
Comment 19 Jason Smith [:jsmith] 2012-09-11 09:46:37 PDT
(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.
Comment 20 Harald Kirschner :digitarald 2012-09-11 09:49:28 PDT
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.
Comment 21 Jason Smith [:jsmith] 2012-09-11 09:53:18 PDT
(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?
Comment 22 Mark Finkle (:mfinkle) (use needinfo?) 2012-09-11 10:22:46 PDT
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
Comment 23 Josh Carpenter [:jcarpenter] 2012-09-11 10:44:34 PDT
> 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.
Comment 24 Jason Smith [:jsmith] 2012-09-11 12:09:59 PDT
*** Bug 785444 has been marked as a duplicate of this bug. ***
Comment 25 Wesley Johnston (:wesj) 2012-09-18 19:35:37 PDT
Created attachment 662390 [details] [diff] [review]
Patch v2

Nits addressed.
Comment 27 Mark Finkle (:mfinkle) (use needinfo?) 2012-09-19 21:29:04 PDT
*** Bug 604728 has been marked as a duplicate of this bug. ***
Comment 28 :Ms2ger (⌚ UTC+1/+2) 2012-09-20 04:54:40 PDT
https://hg.mozilla.org/mozilla-central/rev/6d3db18ef4cd
Comment 29 Aaron Train [:aaronmt] 2012-09-21 07:06:49 PDT
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.
Comment 30 cscott 2012-09-21 09:55:35 PDT
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.)
Comment 31 Wesley Johnston (:wesj) 2012-09-21 10:33:26 PDT
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.
Comment 32 Wesley Johnston (:wesj) 2012-09-21 11:29:03 PDT
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.
Comment 33 Alex Keybl [:akeybl] 2012-09-21 16:51:26 PDT
(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?
Comment 34 Wesley Johnston (:wesj) 2012-09-21 16:57:26 PDT
We are generating these splashscreens dynamically for them. There is no way to specify a splashscreen for your webapp (yet).
Comment 35 Lukas Blakk [:lsblakk] use ?needinfo 2012-09-24 16:03:02 PDT
Is there a product need for this (someone from WebApps or Mobile team)?  Otherwise, we can let it ride the trains.
Comment 36 Jason Smith [:jsmith] 2012-09-24 16:05:21 PDT
(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.
Comment 37 Lukas Blakk [:lsblakk] use ?needinfo 2012-09-26 15:18:32 PDT
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.
Comment 38 Wesley Johnston (:wesj) 2012-10-05 18:16:02 PDT
https://hg.mozilla.org/releases/mozilla-aurora/rev/ce6fa35857c0

Note You need to log in before you can comment on or make changes to this bug.