616874 - Give life to SeaMonkey

Status: VERIFIED FIXED

(SeaMonkey :: UI Design, enhancement)

Comment 1

[Stefan [:stefanh]]

Attachment: life

Comment 2

[Reed Loden [:reed]]

This is not a security-sensitive issue.

Comment 3

[Robert Kaiser]

(In reply to comment #2)
> This is not a security-sensitive issue.

But it's not to be public for the moment, do we have ANY other way to keep a bug private without marking it security?

Comment 4

[Robert Kaiser]

Comment on attachment 495405 [details] [diff] [review]
life

>+   - The Initial Developer of the Original Code is
>+   -
>+   - The SeaMonkey Project

That makes it be "The Mozilla Foundation", actually.

>+   - Contributor(s):

You should enter yourself here.


Also, could we have some not-just-white background when the number has a non-black color? And I'd really like some hover effect - I initally thought we'd even only make it visible on hover so it's harder to find :P

Comment 5

[Stefan [:stefanh]]

We can make it appear only on hover if you want, then I can skip the transform stuff. I can make the number black or gray colored, then I suppose a white bg would be ok?

Comment 6

[Stefan [:stefanh]]

Attachment: try this one

Try this one. No hover though, you have to tell me more precisely how you want the hover to work.

Comment 7

[Robert Kaiser]

Actually, the silver->blue transition was OK, but with the lack of color on the background it looked strange, I was more thinking about giving the background (body) a light-blue color like the one of the critter in our logo, or perhaps even a circular gradient.
And what about doing a simple transition to 150% size on hover?

Comment 8

[Stefan [:stefanh]]

Attachment: Another go

Here's another one. Because of the background (I'm not sure it's that nice, but it matches the logo), I'm not using silver anymore. But now the digits appear from nowhere which I think is better anyway (I also increased the time a bit and switched to ease-in). The color now fits with the logo.

I don't think the hover: stuff is good, so I'd rather go without it. If you don't have your large enough, you just get a scrollbar. But if you insist we can have it - then I need to fix the time, I think.

We can possibly fix this a bit better in some follow-up, since I don't have much time the next 24hrs.

Comment 9

[Stefan [:stefanh]]

(In reply to comment #8)
 
> I don't think the hover: stuff is good, so I'd rather go without it. If you
> don't have your large

erh, "your window" of course.

Comment 10

[Stefan [:stefanh]]

+   - The Initial Developer of the Original Code is
+   -
+   - The Mozilla Foundation.
.
.
.
+   - Contributor(s):
+   -

ftr, I'll remove those empty lines.

Comment 11

[Justin Wood (:Callek)]

just for laughter sake and this bug: http://quotes.burntelectrons.org/5161

Comment 12

[Robert Kaiser]

Comment on attachment 495878 [details] [diff] [review]
Another go

>+  <title>about:life</title>

Should that say "Life, the Universe, and Everything" instead?

>+      document.getElementById("magicNumber").setAttribute("id", "magicLoad");

Hmm, I wonder if changing the ID is really a nice thing to do...
I just realized that as an extra gag we could have the value being set via a JS calculation here, to not even have the actual number in the source code.

For the CSS, here's a suggestion for changes from me, please tell me what you think of that:

>+    body {
>+      background-color: #D3E6FA;
>+    }

Instead of this block, what about:

    html {
      height: 100%;
      background-color: #AFD7FF;
      background-image: -moz-radial-gradient(center 45deg, circle closest-side, #72B8FF 0%, #AFD7FF 100%);
    }

(note that doing it on the html works better than doing this on the body)

>+    p {
>+      text-align: center;
>+      font-family: arial;
>+      font-weight: bold;
>+    }

Add this line to that block to do away with the scrollbar thing:

      margin-bottom: 0;

>+      -moz-transition-property: font-size, color, text-shadow;

Change to (see below):

      -moz-transition-property: font-size, color, text-shadow, margin-top;

>+    #magicLoad:hover {
>+      font-size: 300px;
>+    }

Replace with this:

    #magicLoad:hover {
      -moz-transition-duration: 1s;
      -moz-transition-timing-function: ease;
      margin-top: 150px;
      font-size: 300px;
      color: #2727E8;
    }

What do you think about that?

The rest looks good for review, FWIW.

Comment 13

[Stefan [:stefanh]]

Attachment: new try

In reply to comment #12)
> >+  <title>about:life</title>
> 
> Should that say "Life, the Universe, and Everything" instead?

Yeah, sounds good - fixed.
> 
> >+      document.getElementById("magicNumber").setAttribute("id", "magicLoad");
> 
> Hmm, I wonder if changing the ID is really a nice thing to do...
> I just realized that as an extra gag we could have the value being set via a JS
> calculation here, to not even have the actual number in the source code.

Yep, good idea - used sqrt() ;-) Hmm, for some reason I can't come up with any alternative to changing the id right now.

> For the CSS, here's a suggestion for changes from me, please tell me what you
> think of that:

I liked it, so I added all your suggestions :-) My only addition is that I changed the "default" color of the p to the html background-color. I also styled the p directly, instead of using the "magic" id (yeah, changed the name too) and fixed the <script> (added "application/javascript").

Comment 14

[Robert Kaiser]

Comment on attachment 496517 [details] [diff] [review]
new try

>+      var p = document.getElementById("magic");

I just was wondering if you need an ID in the HTML at all, but this, yes, best to have the ID.

>+      p.appendChild(document.createTextNode(Math.sqrt(1764)));

Nice :)

>+      p.setAttribute("id", "magicLoad");

In theory, we would be able to do it with a class instead of the ID. And I think |p.id = "magicLoad";| should actually work.

Comment 15

[Robert Kaiser]

Neil, do we need ui-r or sr from you here?

Comment 16

[[e-mail]]

Comment on attachment 496517 [details] [diff] [review]
new try

>+      p.appendChild(document.createTextNode(Math.sqrt(1764)));
Nit: p.textContent = Math.sqrt(1764);

>+      p.setAttribute("id", "magicLoad");
p.id = "magicLoad"
[Can we use :empty to trigger the transition?]

>+      background-color: #AFD7FF;
>+      background-image: -moz-radial-gradient(center 45deg, circle closest-side,
>+                                             #72B8FF 0%, #AFD7FF 100%);
Nit: don't have to define 45deg since it doesn't matter for a circle.
Nit: don't have to define 0% and 100% since they are the default stops.

=== ONLY READ THIS PARAGRAPH IF YOU WANT TO SUPPORT 16 BIT GRAPHICS ===
Sadly you have to be extremely careful to get gradients that look nice in 16 bit graphics modes. Your blue channel doesn't change, so I can ignore that, but otherwise the rules would have been the same as for the red channel. The first rule is that the green channel (if used, as here) must have half the gradient of the other channels, since it has 6 bits instead of five. Here we have #AF - #72 = 175 - 114 = 61 for red and #D7 - #B8 = 215 - 184 = 31 for green. This is most easily fixed by increasing the red gradient by 1. The second rule is that if you divide the colour by 8 (4 for the green channel) then the fraction must be the same for all channels. In this case we have 114 / 8 = 14.25 for red and 184 / 4 = 47 for green. This is most easily fixed by increasing the green stop by 1. This means that your gradient stops are now #72B9FF and #B0D8FF. [Alternatively, you can do the sums on the background colour, so that we have 175 / 8 = 21.875 for red and 215 / 4 = 53.75 for green. This is most easily fixed by increasing both the red and the green by 1 (because we need to increase the red gradient by 1 anyway).]
=== END OF 16 BIT GRAPHICS SUPPORT PARAGRAPH ===

>+      text-shadow: none
Nit: missing semicolon

>+      margin-top: 150px;
It looks odd to use the default margin of 1em (which works out to be 200px because of the font size) for the top margin in non-hover state, but then have a top margin in pixels in the hover state. Maybe add a 200px top margin to the non-hover state to make it clearer?

Comment 17

[Stefan [:stefanh]]

Attachment: Now with 16-Bit graphics support and p:empty

Try this one and see how it looks. I changed the color to #72B9FF before the transition, since I think that looks better. p:empty works fine.

Comment 18

[[e-mail]]

Comment on attachment 496606 [details] [diff] [review]
Now with 16-Bit graphics support and p:empty

>+    p:empty {
>+      font-size: 2px;
>+      color: #72B9FF;
>+      text-shadow: none
Still missing the semicolon.

>+    p {
>+      text-align: center;
>+      font-family: arial;
>+      font-weight: bold;
>+      margin-bottom: 0;
>+      -moz-transition-property: font-size, color, text-shadow, margin-top;
>+      -moz-transition-duration: 6s;
>+      -moz-transition-timing-function: ease-in;
>+      margin-top: 200px;
Good news! The hover transition is improved. But the original transition is worse, because that's still transitioning from 1em to 200px. So I guess you need a top margin on p:empty too.

Comment 19

[[e-mail]]

(In reply to comment #18)
> But the original transition is
> worse, because that's still transitioning from 1em to 200px.
Actually it's now not transitioning, since the margin is always 200px. Oops.

Comment 20

[Stefan [:stefanh]]

We might want to center the number vertically, but that would mean that it doesn't animate from the top

Comment 21

[Stefan [:stefanh]]

(In reply to comment #20)
> We might want to center the number vertically

So it fits inside the circle

Comment 22

[Stefan [:stefanh]]

Attachment: Alternative approach, vertically centered

Here's another approach that centers the number in the "circle". The side-effect of this is that the number won't animate from the top.

Comment 23

[Robert Kaiser]

gah, using table display styles is soooo ugly :(

Comment 24

[Stefan [:stefanh]]

Attachment: Another alternative (-moz-box) [Checked in: See comment 26]

OK, so here's another alternative using -moz-box to make it centered. The only weird thing is that if I have a font-size of less than 14px I get a vertical scrollbar (p:empty) - I use 16px now. This one rotates as well ;-)

Comment 25

[[e-mail]]

Comment on attachment 496900 [details] [diff] [review]
Another alternative (-moz-box)
[Checked in: See comment 26]

(I tried changing the empty font size to 1px locally but I saw no scrollbar.)

Comment 26

[Stefan [:stefanh]]

http://hg.mozilla.org/comm-central/rev/92d4271722b0

I then discovered a duplicate style rule that I corrected in http://hg.mozilla.org/comm-central/rev/9ebd3896a291

Comment 27

[Steffen Wilberg]

Hehe, nice!

I'd suggest to add some magic lighting like here:
http://en.wikipedia.org/wiki/File:Answer_to_Life.png
http://blog.ceruleanstudios.com/?p=134

Comment 28

[Robert Kaiser]

(In reply to comment #27)
> I'd suggest to add some magic lighting

If you can do it in pure HTML+CSS (we want to advertise the standards, of course), we sure welcome a patch! :P

Comment 29

[Philip Chee]

>> http://en.wikipedia.org/wiki/File:Answer_to_Life.png
> If you can do it in pure HTML+CSS (we want to advertise the standards, of

Hmm. Something like -moz-radial-gradient perhaps.

Comment 30

[Steffen Wilberg]

With SVG filters, anything is possible :-)
https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content

Comment 31

[Jens Hatlak (:InvisibleSmiley)]

Cannot see this in today's Windows nightly build. Don't say you forgot the installer (package-manifest.in) *again*!

Comment 32

[Justin Wood (:Callek)]

Attachment: installer [Checked in: Comment 34]

Fix the installer part too. This is checkin-needed as well since I might not get to it for a few days. I would push now but seamonkey tree is closed.

Comment 33

[Stefan [:stefanh]]

(In reply to comment #31)
> Cannot see this in today's Windows nightly build. Don't say you forgot the
> installer (package-manifest.in) *again*!

Oops...

Comment 34

[Serge Gautherie (:sgautherie)]

Comment on attachment 497093 [details] [diff] [review]
installer
[Checked in: Comment 34]

http://hg.mozilla.org/comm-central/rev/009256f3df67

Comment 35

[Jens Hatlak (:InvisibleSmiley)]

Yep, now it's there. :-)

RFE: Perhaps something on click, like the question? .-)

Comment 36

[Robert Kaiser]

(In reply to comment #35)
> RFE: Perhaps something on click, like the question? .-)

Er, you know that if anyone knows both the answer and the question, the universe stops to exist, right? :P