676795 - Convert about:neterror to use new in-content theme

Status: RESOLVED DUPLICATE of bug 966107

(Toolkit :: Themes, defect)

Description

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: Screenshot - Windows 7

The current about:neterror looks old and crusty. Converting it to use the new in-content theme would be a good first step in modernizing it.

Comment 1

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: Screenshot - OSX

Comment 2

[Blair McBride [:Unfocused] (UNAVAILABLE)]

And Linux is almost identical with the changes.

Comment 3

[Alex Limi (:limi) — Firefox UX Team]

Looking good! I think the text should probably be on white background, though. Stephen probably has a stronger opinion on the design of the in-content pages.

Comment 4

[Stephen Horlander [:shorlander]]

Comment on attachment 551004 [details]
Screenshot - OSX

I would like to move towards something more neutral and low-key for these types of informational error pages.

I've updated the ancient mockups I did for this a while back (http://stephenhorlander.com/pages/incontent-ui-mockups/incontent-ui-mockups.html#netErrorMalwarePhishing)

I will attach some mockups.

Comment 5

[Stephen Horlander [:shorlander]]

Attachment: Updated Error Page Design

Design mockup for neterror. 

Also see an HTML mockup: http://people.mozilla.com/~shorlander/incontent-error-page/incontentErrorPage.html

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

Sorry, I hadn't seen this bug before. The patch in bug 756926 is further along so I'm duping this bug to that bug.

Comment 7

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: WiP

This was my old WiP that I haven't looked at in months, not sure how much has bitrotten.

It uses the inContentUI bits, but separates it into "heavy" and "lite" UI, which have different structure and a slightly different style. Heavy UI being major UI like the Add-ons Manager, Preferences, Permissions Manager, etc. Lite UI being error pages, about:memory, about:compartments, etc.

Comment 8

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 630056 [details] [diff] [review]
WiP

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

This patch wouldn't modify about:memory or about:compartments.

Many of the in-content pages should have their look updated. I agree that we should do something like this. I think this still has a bit of work left to do though. I'd like to land the new error page UI from bug 756926 first, then work on removing duplication and aligning the various pages to fit similar UI, since we don't have mockups for non-error/issue pages.

Comment 9

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: WIP rebased

Hey Blair,

I rebased your patch and would like to bring it to completion but I had a couple questions first.

1. It looks like most of the styles from winstripe/global/netError.css got moved to a new inContentUILite.css file, but there are still some rules in netError.css. How did you determine which styles should get moved and which should stay?

2. What other files were you expecting to include inContentUILite.css? Currently there is only one file that includes it, netError.css.

Also, some work still needs to be done on about:privatebrowsing, but it's not too far off. [The footer text is too small at 80% size and is lacking in enough vertical margins.]

Comment 10

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Jared Wein [:jaws] from comment #9)
> Created attachment 708450 [details] [diff] [review]
> WIP rebased
> 
> Hey Blair,
> 
> I rebased your patch and would like to bring it to completion but I had a
> couple questions first.
> 
> 1. It looks like most of the styles from winstripe/global/netError.css got
> moved to a new inContentUILite.css file, but there are still some rules in
> netError.css. How did you determine which styles should get moved and which
> should stay?
> 
> 2. What other files were you expecting to include inContentUILite.css?
> Currently there is only one file that includes it, netError.css.

I see that the other about: pages, such as about:logo and about:credits, could use this too.

Comment 11

[u428464]

Isn't this bug a dupe of bug 756926 ?

Comment 12

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to Guillaume C. [:ge3k0s] from comment #11)
> Isn't this bug a dupe of bug 756926 ?

Yep. Jared decided to take the approach done here. As such, duping.

Comment 13

[Blair McBride [:Unfocused] (UNAVAILABLE)]

*sigh* Wrong way around. I blame Friday night. Sorry for bugspam :(

Comment 15

[u428464]

This bug should also be blocking Bug 756920.

Comment 16

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to Jared Wein [:jaws] from comment #9)
> 1. It looks like most of the styles from winstripe/global/netError.css got
> moved to a new inContentUILite.css file, but there are still some rules in
> netError.css. How did you determine which styles should get moved and which
> should stay?

I think my answer to your second question answers this :) But: Anything that was re-usable went into inContentUILite.css, and anything specific to netError.xhtml stayed in netError.css.


> 2. What other files were you expecting to include inContentUILite.css?
> Currently there is only one file that includes it, netError.css.

Looks like I didn't get around to it, but the indent was to remove netError.css from everything but netError.xhtml. So aboutRobots.xhtml, blockedSite.xhtml, aboutPrivateBrowsing.xhtml, and aboutSessionRestore.xhtml would no longer depend on netError.css.


When originally speccing this out with shorlander, we figured that all our in-content UI was one of two basic types: full application-style UI that you go to to interact with/do something, and a lightweight UI with minimal interaction (mostly informative). Since they're quite different types of UI, their visual style should make them feel different too - the lightweight UIs should *feel* lighter. 

At the time, I'd compiled a list of relevant in-content pages we had then - which ended up being surprising long. I just updated the list to include new UI added since then:


Heavy-weight UI (using inContentUI.css):
• about:addons
• about:preferences
• about:permissions
• about:config
• about:sync-tabs
• about:sessionrestore
• about:downloads
• about:healthreport
• about:telemetry


Lightweight UI (using inContentUILite.css):
• about:neterror
• about:blocked
• about:certerror
• about:newaddon
• about:robots
• about:feeds
• about:
• about:about
• about:buildconfig
• about:cache
• about:crashes
• about:license
• about:memory
• about:compartments
• about:plugins
• about:rights
• about:support
• about:privatebrowsing
• about:credits (remote page)
• about:sync-log (currently just a text file)



And here's a list of possible UI for what netError.css is used for currently. Most of them are implemented via netError.xhtml, but a bunch aren't - and those end up having to conform to the specifics of netError.xhtml. (I haven't gone through to update this, it may be out of date now.)
• Generic error
• file not found
• DNS error
• malformed uri
• protocol not found
• connection failure
• network timeout
• redirect loop
• unknown socket type
• network connection reset
• network connection interrupted
• port access denies
• proxy connection failure
• content encoding error
• unsafe content type
• NSS failure
• SSL Cert error
• Malware blocked
• In Offline mode
• remote XUL
• CSP frame ancestors violation
• corrupted content error
• Private browsing, not enabled
• Private browsing, enabled
• Safe browsing, malware
• Safe browsing, phishing
• Session restore
• about:robots

Comment 17

[u428464]

Are the mockups still up to date ? Because the newest in-content mockups (Health report) seem to change quite a bit the visual design of in-content pages (the buttons for example are completely new).

Comment 18

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to Guillaume C. [:ge3k0s] from comment #17)
> Are the mockups still up to date ? Because the newest in-content mockups
> (Health report) seem to change quite a bit the visual design of in-content
> pages (the buttons for example are completely new).

I'd forgotten about that mockup :\ It is quite starkly different. But IMO that's more of a application-style UI.

(For reference: https://people.mozilla.com/~shorlander/files/firefox-health-report/firefox-health-report-01.html )


Shorlander - is that purposefully breaking from the common style, or will we still be trying to keep everything consistent (eg, via updating about:addons, etc). Or is it just an experiment that we should ignore?

Comment 19

[u428464]

(In reply to Blair McBride [:Unfocused] (Back from the dead. Mostly.) from comment #18)
> Shorlander - is that purposefully breaking from the common style, or will we
> still be trying to keep everything consistent (eg, via updating
> about:addons, etc). Or is it just an experiment that we should ignore?

AFAIK the plan was to have every in-content UI (both heavy and lightweight) consistent inside desktop but also with other platforms (e.g. Android).

Comment 20

[:Gijs (he/him)]

Attachment: WIP rebased

At the request of dolske, unbitrotting this. Will discuss next week whether I'll take this or leave it to Jared. Either way, shorlander, any idea about Blair's question in comment #18 ?

Comment 21

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to :Gijs Kruitbosch from comment #20)
> Either way, shorlander, any idea about
> Blair's question in comment #18 ?

shorlander and I discussed this on IRC (I thought he was going to comment here himself). Summarizing:

Plan is to keep consistency - the new mockups for about:healthreport are more recent/representative, but still not final. The error pages will need to be eventually adjusted to be more in line with that style (requires more design work). However, that's just going to hold up this bug even more - we should get the current patch finished and landed, and do tweaks in followup bugs. Because, really, we're never gonna get this landed otherwise.

Comment 22

[u428464]

Private browsing and other non-error pages mockups are still needed though.

Comment 23

[Marco Castelluccio [:marco]]

Is anyone working on this?

Comment 24

[Jared Wein [:jaws] (please needinfo? me)]

I think if anyone, Blair might be the last one to touch it. Sending it over his way...

Comment 25

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Yea, its pending review from me. Not forgotten, just continually pushed below higher priority things, since this is low priority for Australis/everyone involved.

Comment 26

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: about:privatebrowsing

about:privatebrowsing could do with a fixup.

Comment 27

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Comment on attachment 733876 [details] [diff] [review]
WIP rebased

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

Few things left to do:
* Fix about:privatebrowsing
* Remove Privacy-48.png from the tree
* Complete OSX and Linux themes

Other than that, I'm happy with it. Between me, Jared, and Gijs all having worked on this patch, I don't think it's changed a lot (aside from removing bitrot). I think the Australis buttons may have since changed slightly, but it's barely noticeable - think we should just land this (perfect is the enemy of shipped), and tweak it in followups.

::: toolkit/themes/linux/global/inContentUI.css
@@ -3,5 @@
>   * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
>  
> -/*
> - * The default namespace for this file is XUL. Be sure to prefix rules that
> - * are applicable to both XUL and HTML with '*|'.

Might be best to leave this warning - it's a mistake that's easy to make.

Comment 28

[:Gijs (he/him)]

Attachment: Convert about:neterror to use new in-content theme.

Unbitrot, leave comment (for interdiff's sake)

Comment 29

[:Gijs (he/him)]

(In reply to Blair McBride [:Unfocused] from comment #27)
> Comment on attachment 733876 [details] [diff] [review]
> WIP rebased
> 
> Review of attachment 733876 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> Few things left to do:
> * Fix about:privatebrowsing
> * Remove Privacy-48.png from the tree
> * Complete OSX and Linux themes
> 
> Other than that, I'm happy with it. Between me, Jared, and Gijs all having
> worked on this patch, I don't think it's changed a lot (aside from removing
> bitrot). I think the Australis buttons may have since changed slightly, but
> it's barely noticeable - think we should just land this (perfect is the
> enemy of shipped), and tweak it in followups.

Unfortunately, about:sessionrestore and about:welcomeback (new since work here started) also need work still. This doesn't seem as close to finished as I thought. :-(

Comment 30

[Valentin Tsatskin [:vt]]

I've started similar work in bug 966107. It follows the visual style that is being worked on in bug 738796.

Comment 31

[:Gijs (he/him)]

2.5 years went by and the design work has been superseded, woohee...