Last Comment Bug 486965 - Prettify MailNews start page
: Prettify MailNews start page
Status: RESOLVED FIXED
: polish
Product: SeaMonkey
Classification: Client Software
Component: MailNews: General (show other bugs)
: Trunk
: All All
: -- normal with 1 vote (vote)
: seamonkey2.1b3
Assigned To: Karsten Düsterloh
:
:
Mentors:
Depends on:
Blocks: 416616 634087 637387
  Show dependency treegraph
 
Reported: 2009-04-05 13:05 PDT by Karsten Düsterloh
Modified: 2011-02-28 11:21 PST (History)
5 users (show)
kairo: wanted‑seamonkey2.0-
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
wanted


Attachments
first try [prerequisite: bug 612030 fixed] (134.45 KB, patch)
2010-11-27 11:35 PST, Karsten Düsterloh
neil: superreview-
kairo: feedback+
Details | Diff | Splinter Review
Screenshot (distorted text) (16.17 KB, image/png)
2010-12-01 12:07 PST, Stefan [:stefanh]
no flags Details
v2 [prerequisite: bug 612030 fixed] (332.25 KB, patch)
2010-12-03 17:46 PST, Karsten Düsterloh
no flags Details | Diff | Splinter Review
v3: finetuning (256.32 KB, patch)
2011-02-07 15:49 PST, Karsten Düsterloh
stefanh: review+
neil: superreview+
Details | Diff | Splinter Review
finetuning v3 + word change (checked in) (257.53 KB, patch)
2011-02-14 12:59 PST, Karsten Düsterloh
mnyromyr: review+
mnyromyr: superreview+
Details | Diff | Splinter Review

Description Karsten Düsterloh 2009-04-05 13:05:12 PDT
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?
Comment 1 Robert Kaiser 2009-04-07 08:34:01 PDT
Thunderbird is using http://www.mozillamessaging.com/en-US/thunderbird/nightly/start/ for nightlies, which surely looks somewhat better :)
Comment 2 Karsten Düsterloh 2009-04-07 11:11:40 PDT
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. ;-)
Comment 3 Robert Kaiser 2009-04-07 12:50:39 PDT
I didn't want to imply we should do an external start page, just point to the design.
Comment 4 Stefan [:stefanh] 2009-04-07 13:01:45 PDT
Yeah, our current design is somewhat suffering from "lack of design" ;-)
Comment 5 Robert Kaiser 2009-05-10 10:20:42 PDT
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.
Comment 6 Robert Kaiser 2009-10-08 12:50:22 PDT
Not wanted for 2.0 any more at this stage, let's push it to 2.1
Comment 7 Karsten Düsterloh 2010-11-27 11:35:22 PST
Created attachment 493534 [details] [diff] [review]
first try [prerequisite: bug 612030 fixed]

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.)
Comment 8 Robert Kaiser 2010-11-27 12:01:40 PST
Comment on attachment 493534 [details] [diff] [review]
first try [prerequisite: bug 612030 fixed]

Looks good to me.
Comment 9 neil@parkwaycc.co.uk 2010-11-30 15:54:34 PST
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?
Comment 10 Karsten Düsterloh 2010-11-30 16:30:51 PST
(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.
Comment 11 Robert Kaiser 2010-12-01 05:05:14 PST
(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 12 Stefan [:stefanh] 2010-12-01 12:06:40 PST
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 13 Stefan [:stefanh] 2010-12-01 12:07:23 PST
Created attachment 494464 [details]
Screenshot (distorted text)
Comment 14 neil@parkwaycc.co.uk 2010-12-02 15:35:46 PST
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?
Comment 15 Karsten Düsterloh 2010-12-03 17:46:53 PST
Created attachment 495194 [details] [diff] [review]
v2 [prerequisite: bug 612030 fixed]

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.
Comment 16 neil@parkwaycc.co.uk 2010-12-05 07:24:31 PST
(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 17 neil@parkwaycc.co.uk 2010-12-05 10:18:36 PST
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 18 Stefan [:stefanh] 2010-12-08 10:54:20 PST
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?
Comment 19 Karsten Düsterloh 2011-02-07 15:49:12 PST
Created attachment 510429 [details] [diff] [review]
v3: finetuning

Addressed review comments; plus some rescaling and moving of the centerpiece graphic, which for me doesn't distort the text now anymore on Mac.
Comment 20 Robert Kaiser 2011-02-09 06:17:10 PST
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 21 Stefan [:stefanh] 2011-02-12 08:51:12 PST
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)
Comment 22 Karsten Düsterloh 2011-02-14 12:59:10 PST
Created attachment 512238 [details] [diff] [review]
finetuning v3 + word change (checked in)

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.

Note You need to log in before you can comment on or make changes to this bug.