957806 - Stylize the Bad URL Error Page - Implementation

Status: VERIFIED FIXED

(Firefox for Metro Graveyard :: Theme, defect, P2)

Description

[Marco Mucci [:MarcoM]]

+++ This bug was initially created as a clone of Bug #905621 +++

Implementation of the designs attached to resolved Bug 905621.

Comment 1

[Sam Foster [:sfoster] (he/him)]

Attachment: Implement new designs for netError, certificate, blocked site page

To test the patch, use a bogus url scheme like "xtqw:asd/asdas" for malformed URL and generic errors. For certificate errors, I've been using  https://woot.com and http://www.mozilla.org/firefox/its-an-attack.html for blocked site page

I tried to minimize the markup changes, while implementing the specs provided in bug 905621. Some of the dimensions indicated don't pan out - in particular the icon size is given as 40px, the image is 40x40 but from the comp it appears large - more like 60x60. I've scaled it to 60x60 for now. 

Also, the new in-browser content template doesn't currently have any provision for these pages which use color as a cue - the blocked site page has a red background. In the previous design the content is in a white box so its not quite so overwhelming. Likewise, the certificate error is yellow. I think we need further design input here. 

I'll attach screenshots for review also.

Comment 2

[Sam Foster [:sfoster] (he/him)]

Attachment: netError-screenshots.png

Screenshot with attachment 8360198 [details] [diff] [review] applied

Comment 3

[Michael Maslaney [:mmaslaney] ([e-mail])]

Sam, I'm currently working on mockup that will solve this issue, without having to re-theme the entire page.

Concerning the icon sizing, do they seem to small for the screen when sized at 40x40 pixels?

Comment 4

[Marco Mucci [:MarcoM]]

Hi Sam, I spoke with Michael and he will be adding themed error pages to the template which will be filed as a separate issue and doesn't impact the work you are doing for this current bug.

Comment 5

[Jim Mathies [:jimm]]

(In reply to Sam Foster [:sfoster] from comment #2)
> Created attachment 8360200 [details]
> netError-screenshots.png
> 
> Screenshot with attachment 8360198 [details] [diff] [review] applied

Looks great!

Comment 6

[Sam Foster [:sfoster] (he/him)]

Attachment: Screenshot with 40x40 icon

Here's how it looks with that icon at 40x40, with a little nip and tuck in the margins to re-balance it

Comment 7

[Sam Foster [:sfoster] (he/him)]

The icon is currently at about opacity 0.8, I can bring that up if we want to better match the font color

Comment 8

[Sam Foster [:sfoster] (he/him)]

Attachment: Implement new designs for netError (and certificate, blocked site) page

Updates original patch to use our existing buttons look and feel, via platform.css
I was unable to get this to load from chrome://browser/skin/platform.css, so I've %include'd it as a stop-gap measure. 

The blocked page and bad certificate page were necessarily touched in this patch as they both share the same netError.css stylesheet. These will likely have follow-up work as :mmaslaney is working on new mockups for the error pages. 

I also restored the icons to 40px and got rid of the opacity. I think it looks ok? It was more a problem earlier on in my implementation before I had tightened up the spacing/margins. But that too might require follow-up.

Comment 9

[Rodrigo Silveira [:rsilveira] [:rodms]]

Comment on attachment 8360721 [details] [diff] [review]
Implement new designs for netError (and certificate, blocked site) page

Review of attachment 8360721 [details] [diff] [review]:
-----------------------------------------------------------------

Looks awesome!

::: browser/metro/base/content/pages/netError.xhtml
@@ +357,4 @@
>  
>      </div>
>  
> +   <!--

super nit - indentation.

Comment 10

[Sam Foster [:sfoster] (he/him)]

On fx-team: https://hg.mozilla.org/integration/fx-team/rev/a01077805ed2

Comment 11

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/a01077805ed2

Comment 12

[Sam Foster [:sfoster] (he/him)]

Attachment: Implement new designs for netError (and certificate, blocked site) page (as landed)

As landed, with whitepsace nits fixed. Carrying r+ from rsilveira

Comment 13

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 8363057 [details] [diff] [review]
Implement new designs for netError (and certificate, blocked site) page (as landed)

[Approval Request Comment]
Bug caused by (feature/regressing bug #): n/a
User impact if declined: Not so nice looking bad URL page, bad certificate and blocked page UX
Testing completed (on m-c, etc.): Tested 
Risk to taking this patch (and alternatives if risky): Very low risk, metro-only patch
String or IDL/UUID changes made by this patch: None

Comment 14

[Ryan VanderMeulen [:RyanVM]]

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

Comment 15

[u279076]

Kamil, please verify this is fixed in the latest Nightly and Aurora builds.

Comment 16

[Manuela Muntean [Away]]

Verified as fixed for iteration #22, with latest Nightly and Aurora builds on Win 8 64-bit.