318446 - New error page (netError.xhtml) contains too much padding and makes text columns very narrow on small screens and iframes

Status: NEW

(Core :: DOM: Navigation, enhancement)

Description

[nrlz]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

The new error page on Firefox 1.5 looks good when it is full screen, but when it appears within smaller iframes, or when a small popup window is open, or when the browser is resized to a smaller size, the text becomes difficult to read.

See screenshot.

This is most obvious when I use the HOSTS file on Windows to block certain advertisement domains.

PROPOSAL:
I've experimented with changing the element widths from "em" to "%" inside the error page "netError.xhtml" and came up with the following stylesheet which makes the text more visible in smaller windows. (Also see the screenshot for a comparison)

==
#errorPageContainer {
  margin: 5% auto !important;
  padding: 5% !important;
}

body {
  padding: 0 5% !important;
}

#errorTitle, #errorLongContent, #errorTryAgain {
  -moz-margin-start: 20% !important;
}

h1 {
  margin: 0 0 2% 0 !important;
}

#errorShortDesc > p {
  padding-bottom: 2% !important;
}

#errorLongDesc {
  -moz-padding-end: 5% !important;
}
==

Reproducible: Always

Steps to Reproduce:
1. Go to http://www.sdflskdfjsdlfkjsdlf.com
2. Make the window smaller.

Actual Results:  
Text column become narrower and hard to read, becase of the wasted white space around it.

Expected Results:  
Text widens to the available width to consume the wasted space.

Comment 1

[nrlz]

Attachment: old error page + proposed error page comparison

Comment 2

[Vidar Haarr (not reading bugmail)]

That looks decent. Are you able to create a patch (diff) against mozilla.org CVS for the changes?

If you do, we can request that the right developers check your changes to see that they are OK and get it shipped with the next version of Firefox.

Comment 3

[nrlz]

(In reply to comment #2)
> That looks decent. Are you able to create a patch (diff) against mozilla.org
> CVS for the changes?

No, I don't know how to get CVS to work. I've tried a couple of times in the past using the mozilla.org CVS instructions, but it didn't help.

Comment 4

[Henrik Skupin [:whimboo][⌚️UTC+1]]

I don't feel well with percent values at all. Perhaps we should find a solution which uses fix margins and paddings for the appropriate elements? I could take a look at that within the next weeks.

Comment 5

[nrlz]

(In reply to comment #4)
> I don't feel well with percent values at all. Perhaps we should find a solution
> which uses fix margins and paddings for the appropriate elements? I could take
> a look at that within the next weeks.

I think the problem in the first place was that margins and paddings had a fixed size (albeit relative to the text size). So if you resize the frame the dimensions are always the same. With percent values, all the dimensions shrink proportionately with the frame width. So with an infinitesimal frame width, the visual padding will also be infinitesimal.

By the way, the code I inserted in the description can be tested by putting it into your "userContent.css" file. (Hence my use of "!important" declarations.)