Convert about:neterror to use new in-content theme

RESOLVED DUPLICATE of bug 966107

Status

()

Toolkit
Themes
RESOLVED DUPLICATE of bug 966107
6 years ago
3 years ago

People

(Reporter: Unfocused, Assigned: Gijs)

Tracking

(Blocks: 2 bugs)

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments, 3 obsolete attachments)

Created attachment 551000 [details]
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.
Attachment #551000 - Flags: ui-review?(limi)
Created attachment 551004 [details]
Screenshot - OSX
Assignee: nobody → bmcbride
Status: NEW → ASSIGNED
Attachment #551004 - Flags: ui-review?(limi)
And Linux is almost identical with the changes.
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.
Attachment #551000 - Flags: ui-review?(limi) → ui-review?(shorlander)
Attachment #551004 - Flags: ui-review?(limi) → ui-review?(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.
Attachment #551004 - Flags: ui-review?(shorlander) → ui-review-
Created attachment 562801 [details]
Updated Error Page Design

Design mockup for neterror. 

Also see an HTML mockup: http://people.mozilla.com/~shorlander/incontent-error-page/incontentErrorPage.html
Attachment #551000 - Flags: ui-review?(shorlander) → ui-review-
Blocks: 688658
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.
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 756926
Created attachment 630056 [details] [diff] [review]
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.
Attachment #630056 - Flags: feedback?(jaws)
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.
Attachment #630056 - Flags: feedback?(jaws)
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.

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.]
Assignee: bmcbride → jaws
Attachment #630056 - Attachment is obsolete: true
Status: RESOLVED → REOPENED
Attachment #708450 - Flags: feedback?(bmcbride)
Resolution: DUPLICATE → ---
(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.
Isn't this bug a dupe of bug 756926 ?
(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.
Status: REOPENED → RESOLVED
Last Resolved: 5 years ago4 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 756926
*sigh* Wrong way around. I blame Friday night. Sorry for bugspam :(
Status: RESOLVED → REOPENED
Resolution: DUPLICATE → ---
Duplicate of this bug: 756926
This bug should also be blocking Bug 756920.
Blocks: 756920
(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
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).
(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?
Flags: needinfo?(shorlander)
(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).
(Assignee)

Comment 20

4 years ago
Created attachment 733876 [details] [diff] [review]
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 ?
Attachment #708450 - Attachment is obsolete: true
Attachment #708450 - Flags: feedback?(bmcbride)
Attachment #733876 - Flags: feedback?(bmcbride)
Assignee: jAwS → gijskruitbosch+bugs
Status: REOPENED → ASSIGNED
(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.
Flags: needinfo?(shorlander)
Private browsing and other non-error pages mockups are still needed though.
Is anyone working on this?
Flags: needinfo?
I think if anyone, Blair might be the last one to touch it. Sending it over his way...
Flags: needinfo? → needinfo?(bmcbride)
Yea, its pending review from me. Not forgotten, just continually pushed below higher priority things, since this is low priority for Australis/everyone involved.
Flags: needinfo?(bmcbride)
Created attachment 814058 [details]
about:privatebrowsing

about:privatebrowsing could do with a fixup.
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.
Attachment #733876 - Flags: feedback?(bmcbride) → feedback+
(Assignee)

Comment 28

4 years ago
Created attachment 815774 [details] [diff] [review]
Convert about:neterror to use new in-content theme.

Unbitrot, leave comment (for interdiff's sake)
(Assignee)

Updated

4 years ago
Attachment #733876 - Attachment is obsolete: true
(Assignee)

Comment 29

4 years ago
(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. :-(
I've started similar work in bug 966107. It follows the visual style that is being worked on in bug 738796.
(Assignee)

Comment 31

3 years ago
2.5 years went by and the design work has been superseded, woohee...
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 966107
You need to log in before you can comment on or make changes to this bug.