477109 - better explanatory first-run page

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Madhava Enros [:madhava]]

The current first-run page works for people who are really paying attention, but could be made better for people who just want to get on with browsing.  Part of the solution could be to make it more eyecatching, but I also suspect that a more visual explanation than arrows with text to read would be useful.  I'm doing some thinking about this and will comment more soon.

Comment 1

[Mark Finkle (:mfinkle) (use needinfo?)]

Are we considering the animated GIF solution? "shows control bars and then slides them out"

Comment 2

[Stuart Parmenter]

As best as I can tell no one actually understands our first run page, so I think we need something with text or something.

Comment 3

[Ben Combee (:bcombee)]

adding blocking on alt-text bug, as don't want to fix that until first-run is changed.  That old bug doesn't really apply anymore, but needs to be considered for any replacement.

Comment 4

[Madhava Enros [:madhava]]

I think an actual quick little demo, possibly as an animated image, would be the best thing here. I'll work on this with martell.

Comment 5

[:Gavin Sharp [email: [e-mail]]]

Attachment: new text only, unstyled

I'm assuming we need to get these strings in ASAP. This isn't styled, and is missing images, but is otherwise localizable (strings in context, etc.). Strings come from the mockup Madhava/Caitlin have been working on.

This just adds firstrun.xhtml to the normal browser content package, I didn't touch the other first run stuff yet. I think we'll need this page to be privileged, so we don't need to worry about having it in a contentaccessible package, so I think we'll just want to get rid of the old pages.

Comment 6

[:Gavin Sharp [email: [e-mail]]]

(In reply to comment #5)
> I think we'll need this page to be privileged

... to fill in the links based on prefs, just to finish that thought.

Comment 7

[:Gavin Sharp [email: [e-mail]]]

Pushed that: https://hg.mozilla.org/mobile-browser/rev/48ea8038933f

Comment 8

[:Gavin Sharp [email: [e-mail]]]

Attachment: styling

This adds the styling, an attempt to match https://www-trunk.stage.mozilla.com/en-US/m/1.0/firstrun/ .

Some issues:
- links just open the addons manager instead of pointing to specific pages (maybe we want to keep this?)
- I'm using just text rather than the "Welcome" image, since that isn't localizable. Need to add in an icon perhaps, and maybe make the text prettier.
- missing "skip all this" link, but could easily add it back and make it open the awesomebar
- the text is pushed offscreen by the animation, which makes it hard to discover (madhava and caitlin were working on some of alternative styling to address this, I think)
- has only been tested on desktop so far
- I'm concerned this will be a significant Ts hit, given taras' experiences with our previous first run pages. much more stuff to load (CSS/images/dtds) than we had before.

Comment 9

[Madhava Enros [:madhava]]

some more polish:

- we need to add the "play again" symbol to the end of the animation (I'm getting this)
- working on revising the layout so the content after the animation will be findable by the user

Comment 10

[:Gavin Sharp [email: [e-mail]]]

(In reply to comment #8)
> - I'm using just text rather than the "Welcome" image, since that isn't
> localizable. Need to add in an icon perhaps, and maybe make the text prettier.

bug 518728 - going to just use the banner image for now

Also patched other issues madhava pointed out in bug 518719 and bug 518714.

Comment 11

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 402494 [details] [diff] [review]
styling


>-function showDownloadsManager(aWindowContext, aID, aReason) {
>-  BrowserUI.show(UIMODE_PANEL);
>-  BrowserUI.switchPane("downloads-container");
>-  // TODO: select the download with aID
>-}

This was supposed to be used by the downloadManagerUI.js component, but the damn function is spelled wrong. Should be showDownloadManager

>diff --git a/chrome/content/firstrun.xhtml b/chrome/content/firstrun.xhtml

>-<!--  <link rel="stylesheet" href="chrome://global/skin/about.css" type="text/css"/> -->
>+  <link rel="stylesheet" href="chrome://browser/skin/header.css" type="text/css"/>
>+  <link rel="stylesheet" href="chrome://browser/skin/firstRun.css" type="text/css"/>

firstrun no longer has a favicon? 

>diff --git a/themes/hildon/firstrun/favicon-fennec-30.png b/themes/hildon/firstrun/favicon-fennec-30.png
>deleted file mode 100644

Booo!

The images and animation in here are enormous. Can we try to reduce them using smaller color depth or removing any color profiles?

Also, can we convert the png files to gif? Taras found that png files load very slowly on the N810.

r+, but let's see if we can do some things to reduce the image sizes and I think the favicon should be kept, don't you?

Comment 12

[Madhava Enros [:madhava]]

Favicon should definitely be kept (using the fennec one until 1.0).

I can ask Sean about how to reduce the size of the animation - not much color used anyway.

I can't seem to save out a GIF with proper transparency.

Comment 13

[Madhava Enros [:madhava]]

New smaller (now in 8 color) animation here:

http://mozilla.seanmartell.com/fennec/splash_v4.gif

Comment 14

[Sean Martell]

Attachment: New Weave Graphic

Comment 15

[Sean Martell]

Attachment: New Add-ons Graphic

Comment 16

[:Gavin Sharp [email: [e-mail]]]

Attachment: updated styling

Includes the latest images (weave, addons, firstRunAnimation), and restores the favicon.

Madhava and Sean were discussing removing the blue header background, but this doesn't do that yet. Still need a couple of image tweaks though so we can revisit that.

Comment 17

[:Gavin Sharp [email: [e-mail]]]

Pushed that:
https://hg.mozilla.org/mobile-browser/rev/1b96a41a6a41

will file some followup on the remaining tweaks.

Comment 18

[Aakash Desai [:aakashd]]

verified FIXED on builds:

Mozilla/5.0 (Windows; U; WindowsCE 5.2; en-US; rv:1.9.2b1pre) Gecko/20091006 Fennec/1.0a3

and

Mozilla/5.0 (X11; U; Linux armv6l; en-US; rv:1.9.2b1pre) Gecko/20091006
Fennec/1.0b4

and

Mozilla/5.0 (X11; U; Linux armv7l; en-US; rv:1.9.2b1pre) Gecko/20091006
Fennec/1.0b4

Comment 19

[Aakash Desai [:aakashd]]

Litmus testcase https://litmus.mozilla.org/show_test.cgi?id=9686 takes care of testing the strings on the firstrun page.