Last Comment Bug 582048 - Make network error pages mobile friendly
: Make network error pages mobile friendly
Status: VERIFIED FIXED
[inbound]
:
Product: Fennec Graveyard
Classification: Graveyard
Component: General (show other bugs)
: Trunk
: All All
: -- enhancement (vote)
: Firefox 8
Assigned To: Wesley Johnston (:wesj)
:
Mentors:
Depends on: 482874 675959 675960
Blocks:
  Show dependency treegraph
 
Reported: 2010-07-26 13:18 PDT by Benjamin Stover (:stechz)
Modified: 2012-02-15 10:39 PST (History)
17 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
Mobile error page icons (4.12 KB, application/zip)
2011-05-20 13:08 PDT, Ian Barlow (:ibarlow)
no flags Details
WIP (46.82 KB, patch)
2011-06-28 10:31 PDT, Wesley Johnston (:wesj)
no flags Details | Diff | Review
Screenshots (95.00 KB, image/png)
2011-06-28 10:31 PDT, Wesley Johnston (:wesj)
no flags Details
Patch v1 (57.28 KB, patch)
2011-07-12 17:03 PDT, Wesley Johnston (:wesj)
no flags Details | Diff | Review
Screenshots (430.09 KB, image/png)
2011-07-12 17:04 PDT, Wesley Johnston (:wesj)
no flags Details
Button style 2 (45.77 KB, image/png)
2011-07-13 14:44 PDT, Wesley Johnston (:wesj)
no flags Details
Patch v1.1 (54.62 KB, patch)
2011-07-15 16:50 PDT, Wesley Johnston (:wesj)
mark.finkle: review+
Details | Diff | Review
netError diff (8.24 KB, patch)
2011-07-15 16:50 PDT, Wesley Johnston (:wesj)
no flags Details | Diff | Review
Follow up patch (2.47 KB, patch)
2011-07-19 14:54 PDT, Wesley Johnston (:wesj)
mark.finkle: review+
Details | Diff | Review

Description Benjamin Stover (:stechz) 2010-07-26 13:18:13 PDT
* Change network error pages to compensate for high DPI
* Leverage places to provide good suggestions.
Comment 1 u88484 2011-03-30 14:12:09 PDT
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 3 Mark Finkle (:mfinkle) (use needinfo?) 2011-04-30 11:07:31 PDT
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?) 2011-05-04 09:08:38 PDT
(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] 2011-05-04 11:18:10 PDT
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] 2011-05-04 11:44:35 PDT
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] 2011-05-04 12:02:27 PDT
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?) 2011-05-18 12:50:04 PDT
design mockups
http://www.flickr.com/photos/61892693@N03/5693665794/in/set-72157626660609510
Comment 9 Ian Barlow (:ibarlow) 2011-05-20 13:08:02 PDT
Created attachment 534083 [details]
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] 2011-05-20 17:28:35 PDT
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] 2011-05-20 17:32:26 PDT
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) 2011-06-28 10:31:11 PDT
Created attachment 542512 [details] [diff] [review]
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) 2011-06-28 10:31:41 PDT
Created attachment 542513 [details]
Screenshots
Comment 14 Wesley Johnston (:wesj) 2011-06-28 10:38:49 PDT
Also (as a reminder for myself) need to play with these at tablet sizes.
Comment 15 Ian Barlow (:ibarlow) 2011-07-04 11:39:40 PDT
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) 2011-07-12 17:03:55 PDT
Created attachment 545534 [details] [diff] [review]
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) 2011-07-12 17:04:41 PDT
Created attachment 545536 [details]
Screenshots

Both gingerbread and froyo themes. Also an example of landscape/tablet appearance.
Comment 18 Mark Finkle (:mfinkle) (use needinfo?) 2011-07-13 13:48:07 PDT
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) 2011-07-13 14:44:11 PDT
Created attachment 545755 [details]
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 2011-07-14 06:13:54 PDT
Could you guys consider bug 646624 during this redesign?
Comment 21 Mark Finkle (:mfinkle) (use needinfo?) 2011-07-14 21:53:21 PDT
(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?) 2011-07-14 21:55:42 PDT
(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) 2011-07-15 16:50:12 PDT
Created attachment 546257 [details] [diff] [review]
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) 2011-07-15 16:50:59 PDT
Created attachment 546258 [details] [diff] [review]
netError diff
Comment 25 Mark Finkle (:mfinkle) (use needinfo?) 2011-07-15 19:51:40 PDT
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) 2011-07-18 09:32:03 PDT
inbound - http://hg.mozilla.org/integration/mozilla-inbound/rev/82e5ddf9f788
Comment 27 Marco Bonardo [::mak] 2011-07-19 07:21:43 PDT
http://hg.mozilla.org/mozilla-central/rev/82e5ddf9f788
Comment 28 Rimas Kudelis 2011-07-19 11:37:55 PDT
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) 2011-07-19 14:27:54 PDT
More nits: using "wifi" in some strings and "WiFi" in others. I think they should be "WiFi".
Comment 30 Mark Finkle (:mfinkle) (use needinfo?) 2011-07-19 14:42:23 PDT
(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) 2011-07-19 14:54:35 PDT
Created attachment 546918 [details] [diff] [review]
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) 2011-07-19 15:01:31 PDT
I pushed this straight to central:

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

trying to minmize l10n headache...
Comment 33 Francesco Lodolo [:flod] 2011-07-22 22:35:32 PDT
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] 2011-07-26 14:33:32 PDT
Verified Fixed

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

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