Closed Bug 486965 Opened 15 years ago Closed 13 years ago

Prettify MailNews start page

Categories

(SeaMonkey :: MailNews: General, defect)

defect
Not set
normal

Tracking

(seamonkey2.1 wanted)

RESOLVED FIXED
seamonkey2.1b3
Tracking Status
seamonkey2.1 --- wanted

People

(Reporter: mnyromyr, Assigned: mnyromyr)

References

(Blocks 2 open bugs)

Details

(Keywords: polish)

Attachments

(2 files, 3 obsolete files)

Our MailNews start page <http://mxr.mozilla.org/comm-central/source/mailnews/base/resources/content/start.xhtml> is in desperate need of some decent eye candy. I could imagine something along the way we did for the Mac installer in <https://bug406448.bugzilla.mozilla.org/attachment.cgi?id=302454>, i.e. some inobtrusive background image, if noone has another striking idea...
Stefan, maybe you're interested?
Flags: wanted-seamonkey2+
Thunderbird is using http://www.mozillamessaging.com/en-US/thunderbird/nightly/start/ for nightlies, which surely looks somewhat better :)
I don't like requiring an online connection just to show a basic start page. 
But yes, theirs is much more pleasant than our rigid announcement. ;-)
I didn't want to imply we should do an external start page, just point to the design.
Yeah, our current design is somewhat suffering from "lack of design" ;-)
http://ascher.ca/blog/2009/05/08/getting-insight-into-ones-own-email/ is somewhat interesting in that direction, I think it would make perfect sense to have something like that there on SeaMonkey.
Whiteboard: [l10n-impact?]
Not wanted for 2.0 any more at this stage, let's push it to 2.1
Flags: wanted-seamonkey2.1+
Flags: wanted-seamonkey2.0-
Flags: wanted-seamonkey2.0+
Flags: wanted-seamonkey2.1+
Okay, first try of a modest beautification of the mail start page.
The wave background png is taken from our project main page, but with transparency. The SM logo is our normal loge, recut and toned down a bit -
I'm using an svg so that it will scale nicely for all message pane sizes.
(f?=KaiRo just in case licensing is a problem here.)
Assignee: nobody → mnyromyr
Status: NEW → ASSIGNED
Attachment #493534 - Flags: superreview?(neil)
Attachment #493534 - Flags: review?
Attachment #493534 - Flags: feedback?(kairo)
Attachment #493534 - Flags: review? → review?(stefanh)
Comment on attachment 493534 [details] [diff] [review]
first try [prerequisite: bug 612030 fixed]

Looks good to me.
Attachment #493534 - Flags: feedback?(kairo) → feedback+
Attachment #493534 - Attachment description: first try → first try [prerequisite: bug 612030 fixed]
Comment on attachment 493534 [details] [diff] [review]
first try [prerequisite: bug 612030 fixed]

>+  skin/classic/messenger/icons/start-bg.svg                             (messenger/icons/start-bg.svg)
>+  skin/classic/messenger/icons/start-header.png                         (messenger/icons/start-header.png)
Don't these images belong in branding content, rather than skin?

>+  background-attachment: fixed;
>+  background-image: url(chrome://messenger/skin/icons/start-bg.svg);
>+  background-origin: content-box;
>+  background-position: center;
>+  background-repeat: no-repeat;
>+  background-size: auto 100%;
Why not write this as a single background shortcut?
(In reply to comment #9)
> Don't these images belong in branding content, rather than skin?

I'm not sure. If someone rebrands SM, won't he be likely to rebrand the mail start page anyway, hence not using these here? OTOH, why should he ship them, then.
Dunno. 
Looking through MXR, I don't know where to put them, exactly?!

> >+  background-attachment: fixed;
> >+  background-image: url(chrome://messenger/skin/icons/start-bg.svg);
> >+  background-origin: content-box;
> >+  background-position: center;
> >+  background-repeat: no-repeat;
> >+  background-size: auto 100%;
> Why not write this as a single background shortcut?

May get too long, didn't try. Can do.
(In reply to comment #9)
> Comment on attachment 493534 [details] [diff] [review]
> first try [prerequisite: bug 612030 fixed]
> 
> >+  skin/classic/messenger/icons/start-bg.svg                             (messenger/icons/start-bg.svg)
> >+  skin/classic/messenger/icons/start-header.png                         (messenger/icons/start-header.png)
> Don't these images belong in branding content, rather than skin?

Indeed, good catch. Branded imagery belongs in branding.
Comment on attachment 493534 [details] [diff] [review]
first try [prerequisite: bug 612030 fixed]

We might need to consider not using svg here, since I think it has some drawing/perf issues (I blame svg for it since I can't think of anything else here):
- The text on the page is distorted
- Resizing is very slow and I even got into some kind of deadlock, the whole window got stuck in "shrinked" state

+   xmlns:cc="http://creativecommons.org/ns#"
Hmm... does the files need to be MPL:ed?
Comment on attachment 493534 [details] [diff] [review]
first try [prerequisite: bug 612030 fixed]

>- *
>+*
Oops ;-)

>-  background-color: #C7D0D9;
>+  background-image: url(chrome://messenger/skin/icons/start-header.png);
>+  background-repeat: repeat-x;
>   color: #22262F;
As long as you're overriding the colour you need to provide a background colour, otherwise you get the user default (your image isn't solid).

>+  border-bottom: 2px solid #000080;
[Looks a little dark to me, perhaps #0000EE?]

>-  margin: 0.5em 0;
>+  margin-top: 1em;
Why just the top?
Attachment #493534 - Flags: superreview?(neil) → superreview-
Changes to v1:
- transformed svg into png, solving the resize problem (the distortion issue seems to have been caused by background-attachment: fixed in connection with svg only) 
- moved the images into branding/content/
- extracted the hr colour from the original SM grahics
- compressed the background rules as far as possible (we don't support background-size: etc. as part of background: yet)

(In reply to comment #14)
> >-  margin: 0.5em 0;
> >+  margin-top: 1em;
> Why just the top?

Because it suffices to get a bit more space between the paragraphs.
Attachment #493534 - Attachment is obsolete: true
Attachment #495194 - Flags: superreview?(neil)
Attachment #495194 - Flags: review?
Attachment #493534 - Flags: review?(stefanh)
Attachment #495194 - Flags: review? → review?(stefanh)
(In reply to comment #15)
> (In reply to comment #14)
> > >-  margin: 0.5em 0;
> > >+  margin-top: 1em;
> > Why just the top?
> Because it suffices to get a bit more space between the paragraphs.
But you already get more space anyway by not overriding the default margin (which for an h2 is actually 0.83em, to allow for the font size multiplier).
So I was expecting you to either remove the margin override completely, or to override both top and bottom margin.
Comment on attachment 495194 [details] [diff] [review]
v2 [prerequisite: bug 612030 fixed]

>GIT binary patch
>literal 269295
Consider running your graphics through an optimiser. One called optipng that I happened to have installed on my Fedora 7 VM reduced it by over 20%!

>+  background: url("chrome://branding/content/start-bg.png") content-box no-repeat fixed;
>+  background-position: center;
You can actually put the position in too. Gecko's serialiser puts it after fixed (and it also puts content-box after center, fwiw).

>+  background: url("chrome://branding/content/start-header.png") repeat-x transparent;
Nit: transparent is the default background colour and can be omitted.
I accidentally tried this on a machine where the heading wrapped on to two lines. Perhaps changing the background-position to left bottom might help?

>-  font-weight: normal;
>+  font-weight: bold;
Nit: default font-weight for h1 is already bold, don't need to override it.
Comment on attachment 495194 [details] [diff] [review]
v2 [prerequisite: bug 612030 fixed]

+  background: url("chrome://branding/content/start-bg.png") content-box no-repeat fixed;
+  background-position: center;
+  background-size: auto 100%;

I was playing a bit with this and I think making the logo appear more to the right and under the H1 (optionally under the first paragraph) would look nicer (I tested with a position of "80% 100%" together with a 90% size).

The background-origin doesn't make sense here, since it doesn't apply combined with "background-attachment fixed;" (https://developer.mozilla.org/en/CSS/background-origin)

One problem is that removing the "content-box" and keeping the "fixed", makes the text distorted :-/. Perhaps we could add some elements or put the image in the html to avoid the distorted text (I think it's a bit dangerous to hide the issue by specifying the background-origin)? We could also add some wrapper in order to have better control of the background-image.

Some small nits:
+  border-bottom: 2px solid #26269a;
 You might want to use an "A" instead (I'm sure Neil wants that since he always makes me use capital letters)

 div#main {
   margin: 0 1em;
 }
 Ouch, don't need the "div" here ;-) Would you mind fixing it while you're there?
Blocks: 416616
Attached patch v3: finetuning (obsolete) — Splinter Review
Addressed review comments; plus some rescaling and moving of the centerpiece graphic, which for me doesn't distort the text now anymore on Mac.
Attachment #495194 - Attachment is obsolete: true
Attachment #510429 - Flags: superreview?(neil)
Attachment #510429 - Flags: review?(stefanh)
Attachment #495194 - Flags: superreview?(neil)
Attachment #495194 - Flags: review?(stefanh)
Attachment #510429 - Flags: superreview?(neil) → superreview+
Actually, while you're there, could you please rename and rephrase this line in start.dtd:
<!ENTITY feat_labels.label "Customizable Labels and Mail Views">

IIRC, we've been calling those "tags" and not "labels" for a while now.
Comment on attachment 510429 [details] [diff] [review]
v3: finetuning

+  background: url("chrome://branding/content/messenger-start-bg.png") no-repeat fixed center 3em;

I see that you want the image to be centered ;-). Anyway, if you don't want the first line of text to cover the top of the logo, you could increase the 3em to 4em (I tried, and I think it looks better).

r=me (whatever em choice you do)
Attachment #510429 - Flags: review?(stefanh) → review+
Landed this as <http://hg.mozilla.org/comm-central/rev/618c70dbccee>.
Localizers will most probably have made that fix already anyway, it's nothing which does require real attention.
Attachment #510429 - Attachment is obsolete: true
Attachment #512238 - Flags: superreview+
Attachment #512238 - Flags: review+
Status: ASSIGNED → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
Whiteboard: [l10n-impact?]
Target Milestone: --- → seamonkey2.1b3
Blocks: 637387
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: