582048 - Make network error pages mobile friendly

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, enhancement)

Description

[Benjamin Stover (:stechz)]

* Change network error pages to compensate for high DPI
* Leverage places to provide good suggestions.

Comment 1

[u88484]

Would your first bullet point make it so users wouldn't have to zoom in to read the text or to scroll to see all of the text?

Comment 2

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

Links to the text used on the neterror page and the new blocked site page:

http://mxr.mozilla.org/mozilla-central/source/mobile/locales/en-US/chrome/overrides/netError.dtd
http://mxr.mozilla.org/mozilla-central/source/browser/locales/en-US/chrome/browser/safebrowsing/phishing-afterload-warning-message.dtd

Comment 3

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

We have several uses of the word "computer" in this file too:
http://mxr.mozilla.org/mozilla-central/source/mobile/locales/en-US/chrome/browser.properties

Making a note here, but we can open a new bug too.

Comment 4

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

(In reply to comment #3)
> We have several uses of the word "computer" in this file too:
> http://mxr.mozilla.org/mozilla-central/source/mobile/locales/en-US/chrome/browser.properties
> 
> Making a note here, but we can open a new bug too.

filed bug 654733

Comment 5

[Madhava Enros [:madhava]]

This has a visual layout component as well as necessary text edits. Assigning to ibarlow for the visual layout adjustments.

Comment 6

[Madhava Enros [:madhava]]

Here is some great thinking from Boriss about how to make error pages smarter.
* http://jboriss.wordpress.com/2010/01/04/herdict-and-its-tasty-anonymized-aggregated-data/
* http://jboriss.wordpress.com/2009/03/10/improving-everyones-favorite-feature-404/

To be clear, our first priorities are to make our pages not require zooming and panning. The further smartening is definitely after that.

Comment 7

[Madhava Enros [:madhava]]

Also for reference - desktop design work from Stephen Horlander:
http://stephenhorlander.com/pages/incontent-ui-mockups/incontent-ui-mockups.html#netErrorMalwarePhishing

Comment 8

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

design mockups
http://www.flickr.com/photos/61892693@N03/5693665794/in/set-72157626660609510

Comment 9

[Ian Barlow (:ibarlow)]

Attachment: Mobile error page icons

Attached are icon assets for the error pages. 

Also, here are the background colours to use for each kind of page:
* Standard error - blue (not tan) - #CEE6F4 
* Warning - yellow - #EFD400
* Forgery/malware - red - #BF0000

Comment 10

[Madhava Enros [:madhava]]

In terms of new or revised text, I think the priorities for v6 are
- server not found
- sharedLongDesc, which gets used in a lot of situations
- cert error

Partly, I wanted to make the text mobile-specific (not refer to computers; talk about actual mobile situations), but also shorter so that it would better fit a mobile screen without zooming or too much scrolling.  These are a first stab at those (they could be better, but these are, at least, shorter and mobile-specific). We can try for tone improvements later.

Here are the ones to change with their new versions:

In http://mxr.mozilla.org/mozilla-central/source/mobile/locales/en-US/chrome/overrides/netError.dtd


Shared Long Description:
------------------------

--- EXISTING --
<!ENTITY sharedLongDesc "
<ul>
  <li>The site could be temporarily unavailable or too busy. Try again in a few
    moments.</li>
  <li>If you are unable to load any pages, check your computer's network
    connection.</li>
  <li>If your computer or network is protected by a firewall or proxy, make sure
    that &brandShortName; is permitted to access the Web.</li>
</ul>
">

--- NEW ---
<!ENTITY sharedLongDesc "
<ul>
  <li>The site could be temporarily unavailable or too busy. Try again in a few
    moments.</li>
  <li>If you are unable to load any pages, check your mobile device's data or wifi connection.</li>
</ul>
">


Server not found:
-----------------

--- EXISTING ---
<!ENTITY dnsNotFound.title "Server not found">
<!ENTITY dnsNotFound.longDesc "
<ul>
  <li>Check the address for typing errors such as
    <strong>ww</strong>.example.com instead of
    <strong>www</strong>.example.com</li>
  <li>If you are unable to load any pages, check your computer's network
    connection.</li>
  <li>If your computer or network is protected by a firewall or proxy, make sure
    that &brandShortName; is permitted to access the Web.</li>
</ul>
">


--- NEW ---
<!ENTITY dnsNotFound.title "Server not found">
<!ENTITY dnsNotFound.longDesc "
<ul>
  <li>Check the address for typing errors such as
    <strong>ww</strong>.example.com instead of
    <strong>www</strong>.example.com</li>
  <li>If you are unable to load any pages, check your mobile device's data or wifi connection.</li>
</ul>
">

Comment 11

[Madhava Enros [:madhava]]

Actually for the text of about:certerror, let's see how it fits, with the new layout and sizing shown in the mockup:
http://www.flickr.com/photos/61892693@N03/5693665794/in/set-72157626660609510/

It looks like it might be just fine, and the text isn't desktop-specific as it stands.

Comment 12

[Wesley Johnston (:wesj)]

Attachment: WIP

Need to take a little time to clean this up and test it some more, but looks pretty good. Some differences between desktop and device. May need to move to using more from defines.inc, but using mozmm in content is giving me funky results.

Comment 13

[Wesley Johnston (:wesj)]

Attachment: Screenshots

Comment 14

[Wesley Johnston (:wesj)]

Also (as a reminder for myself) need to play with these at tablet sizes.

Comment 15

[Ian Barlow (:ibarlow)]

Hi Wesley, thanks for posting the screenshots, these pages are looking good!

I have some feedback regarding spacing and type size etc here: http://cl.ly/0V013V3a42110j3d2e0h

Thanks,
Ian

Comment 16

[Wesley Johnston (:wesj)]

Attachment: Patch v1

Works pretty well. Note, I can't really use things from defines.inc here because the remote pages are going to be scaled (they are about pages, but our about page sniffing code sees them as their original uri's, so they load remotely). The defines sizes we use don't really work on remote pages so here I've just defined them in the css file.

I also am having trouble finding a nice way to scale the white "content" area of the error page to the window height. Even if I do, its going to be difficult to account for the urlbar height like the mockups do. Not sure how important that is to us?

Also, missing the arrow icons used in the mockups. Screenshots coming...

Comment 17

[Wesley Johnston (:wesj)]

Attachment: Screenshots

Both gingerbread and froyo themes. Also an example of landscape/tablet appearance.

Comment 18

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

Comment on attachment 545534 [details] [diff] [review]
Patch v1

>diff --git a/mobile/chrome/content/netError.xhtml b/mobile/chrome/content/netError.xhtml

Is this file mostly a copy from desktop, with some changes needed for CSS?

>diff --git a/mobile/themes/core/gingerbread/netError.css b/mobile/themes/core/gingerbread/netError.css

>+body {

>+  font: message-box;

We might want to forego this font and just use our normal:

font-family: "Nokia Sans", Tahoma, sans-serif !important;

(which we use in other about: pages)


>+button {
>+  -moz-appearance: none;
>+  min-height: 2.5em !important; /* button size */
>+  color: #000;
>+  margin: 8px 0px;
>+  padding: 0px 8px;
>+  background-image: url("chrome://browser/skin/images/button-bg.png");
>+  background-size: auto 100%;
>+  border: 1px solid #999999;
>+  font-size: 16px;
>+  -moz-border-radius: 2px;

drop the -moz-

>+}

Why isn't the content.css button styling working here? or is itand we just want to use a different button style?

>diff --git a/mobile/themes/core/jar.mn b/mobile/themes/core/jar.mn

>+  skin/gingerbread/images/errorpage-warning.png         (images/errorpage-warning.png)
>+  skin/gingerbread/images/errorpage-larry-white.png     (images/errorpage-larry-white.png)
>+  skin/gingerbread/images/errorpage-larry-black.png     (images/errorpage-larry-black.png)
>+
> 
> chrome.jar:

No need for extra line


>diff --git a/mobile/themes/core/netError.css b/mobile/themes/core/netError.css

why do we need the different CSS files? (tell me the differences without forcing me to diff them myself :)

waiting to r+ until we get the CSS questions answered

Comment 19

[Wesley Johnston (:wesj)]

Attachment: Button style 2

> Is this file mostly a copy from desktop, with some changes needed for CSS?

Mostly. I also moved the title area (i.e. "Server not found") out of the content box, and did a little class reorganisation.

> Why isn't the content.css button styling working here? or is it and we just
> want to use a different button style?

Just trying to match the original mockups, which I thought used something that looked more like the prefs pane button styles. Those are the only differences between the gingerbread and froyo css. Attached is a desktop screenshot of (gingerbread theme) using (instead):

button {
  padding: 0.3em !important;
}

Comment 20

[u88484]

Could you guys consider bug 646624 during this redesign?

Comment 21

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

(In reply to comment #20)
> Could you guys consider bug 646624 during this redesign?

Too different and separate.

Comment 22

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

(In reply to comment #19)

> Just trying to match the original mockups, which I thought used something
> that looked more like the prefs pane button styles. Those are the only
> differences between the gingerbread and froyo css. Attached is a desktop
> screenshot of (gingerbread theme) using (instead):
> 
> button {
>   padding: 0.3em !important;
> }

Does this mean we don't need separate CSS for froyo and gingerbread? IMO, buttons in content are buttons in content. If we want the buttons to look different in gingerbread, we would change button CSS for _all_ buttons in content, which is not this bug.

Let's make the changes to try to drop gingerbread CSS for netError.css and get this landed. Put up a new patch (and the diffs, if possible) so we can keep moving ahead.

Comment 23

[Wesley Johnston (:wesj)]

Attachment: Patch v1.1

Updated patch. I'll post a diff netError.xhtml with the desktop one. The CSS code is changed a lot. Do you want anything else diffed?

Comment 24

[Wesley Johnston (:wesj)]

Attachment: netError diff

Comment 25

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

Comment on attachment 546257 [details] [diff] [review]
Patch v1.1


>diff --git a/mobile/app/mobile.js b/mobile/app/mobile.js

> // Device pixel to CSS px ratio, in percent. Set to -1 to calculate based on display density.
>-pref("browser.viewport.scaleRatio", -1);
>+pref("browser.viewport.scaleRatio", 150);

Revert this before landing

Comment 26

[Wesley Johnston (:wesj)]

inbound - http://hg.mozilla.org/integration/mozilla-inbound/rev/82e5ddf9f788

Comment 27

[Marco Bonardo [:mak]]

http://hg.mozilla.org/mozilla-central/rev/82e5ddf9f788

Comment 28

[Rimas Kudelis [use needinfo to ping]]

A small note. This comment: http://hg.mozilla.org/mozilla-central/rev/82e5ddf9f788#l8.14 is now useless and should be removed.

Comment 29

[Guillermo López :willyaranda (probably SLOW response)]

More nits: using "wifi" in some strings and "WiFi" in others. I think they should be "WiFi".

Comment 30

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

(In reply to comment #29)
> More nits: using "wifi" in some strings and "WiFi" in others. I think they
> should be "WiFi".

We are changing to "Wi-Fi"

Whoever patches, remember to bump the entities

Comment 31

[Wesley Johnston (:wesj)]

Attachment: Follow up patch

Nice catch. This doesn't change the entity names. I am going to check in a few days to find locales that followed my original bad text and file bugs for them individually.

Comment 32

[Wesley Johnston (:wesj)]

I pushed this straight to central:

http://hg.mozilla.org/mozilla-central/rev/f649b7177495

trying to minmize l10n headache...

Comment 33

[Francesco Lodolo [:flod]]

Last time (change from "..." to "…" in en-US, bug 653141 comment 46) Axel told that style changes don't require changing entities' names. IMO this is the same situation.

On the contrary, I'm more concerned other changes like this one

-<!ENTITY connectionFailure.longDesc "&sharedLongDesc;">
+<!ENTITY connectionFailure.longDesc "&sharedLongDesc2;">

compare-locales catches these changes, but that's still breaking a basic rule: don't make substantial changes to content without changing entity's name.

Comment 34

[Aaron Train [:aaronmt]]

Verified Fixed

Mozilla/5.0 (Android; Linux armv7l; rv:8.0a1) Gecko/20110726 Firefox/8.0a1 Fennec/8.0a1