Last Comment Bug 616874 - Give life to SeaMonkey
: Give life to SeaMonkey
Status: VERIFIED FIXED
:
Product: SeaMonkey
Classification: Client Software
Component: UI Design (show other bugs)
: Trunk
: All All
: -- enhancement (vote)
: seamonkey2.1b2
Assigned To: Stefan [:stefanh] (away until May 28)
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2010-12-05 13:21 PST by Stefan [:stefanh] (away until May 28)
Modified: 2010-12-12 08:43 PST (History)
12 users (show)
bugzillamozillaorg_serge_20140323: in‑testsuite-
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
life (8.01 KB, patch)
2010-12-05 13:22 PST, Stefan [:stefanh] (away until May 28)
no flags Details | Diff | Review
try this one (7.98 KB, patch)
2010-12-05 15:07 PST, Stefan [:stefanh] (away until May 28)
no flags Details | Diff | Review
Another go (7.98 KB, patch)
2010-12-07 10:42 PST, Stefan [:stefanh] (away until May 28)
no flags Details | Diff | Review
new try (8.40 KB, patch)
2010-12-09 09:35 PST, Stefan [:stefanh] (away until May 28)
kairo: review+
Details | Diff | Review
Now with 16-Bit graphics support and p:empty (8.27 KB, patch)
2010-12-09 13:30 PST, Stefan [:stefanh] (away until May 28)
no flags Details | Diff | Review
Alternative approach, vertically centered (8.40 KB, patch)
2010-12-10 11:03 PST, Stefan [:stefanh] (away until May 28)
no flags Details | Diff | Review
Another alternative (-moz-box) [Checked in: See comment 26] (8.48 KB, patch)
2010-12-10 13:09 PST, Stefan [:stefanh] (away until May 28)
kairo: review+
neil: ui‑review+
Details | Diff | Review
installer [Checked in: Comment 34] (611 bytes, patch)
2010-12-11 15:14 PST, Justin Wood (:Callek)
kairo: review+
Details | Diff | Review

Description Stefan [:stefanh] (away until May 28) 2010-12-05 13:21:33 PST

    
Comment 1 Stefan [:stefanh] (away until May 28) 2010-12-05 13:22:17 PST
Created attachment 495405 [details] [diff] [review]
life
Comment 2 Reed Loden [:reed] (use needinfo?) 2010-12-05 13:42:02 PST
This is not a security-sensitive issue.
Comment 3 Robert Kaiser (not working on stability any more) 2010-12-05 13:59:10 PST
(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 (not working on stability any more) 2010-12-05 14:20:48 PST
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] (away until May 28) 2010-12-05 14:31:43 PST
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] (away until May 28) 2010-12-05 15:07:30 PST
Created attachment 495412 [details] [diff] [review]
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 (not working on stability any more) 2010-12-07 08:14:16 PST
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] (away until May 28) 2010-12-07 10:42:57 PST
Created attachment 495878 [details] [diff] [review]
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] (away until May 28) 2010-12-07 10:44:12 PST
(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] (away until May 28) 2010-12-07 10:50:18 PST
+   - 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) 2010-12-07 23:43:47 PST
just for laughter sake and this bug: http://quotes.burntelectrons.org/5161
Comment 12 Robert Kaiser (not working on stability any more) 2010-12-08 15:07:36 PST
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] (away until May 28) 2010-12-09 09:35:35 PST
Created attachment 496517 [details] [diff] [review]
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 (not working on stability any more) 2010-12-09 09:59:23 PST
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 (not working on stability any more) 2010-12-09 09:59:48 PST
Neil, do we need ui-r or sr from you here?
Comment 16 neil@parkwaycc.co.uk 2010-12-09 12:47:49 PST
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] (away until May 28) 2010-12-09 13:30:47 PST
Created attachment 496606 [details] [diff] [review]
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 neil@parkwaycc.co.uk 2010-12-09 16:13:44 PST
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 neil@parkwaycc.co.uk 2010-12-10 08:22:24 PST
(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] (away until May 28) 2010-12-10 10:55:50 PST
We might want to center the number vertically, but that would mean that it doesn't animate from the top
Comment 21 Stefan [:stefanh] (away until May 28) 2010-12-10 10:56:27 PST
(In reply to comment #20)
> We might want to center the number vertically

So it fits inside the circle
Comment 22 Stefan [:stefanh] (away until May 28) 2010-12-10 11:03:13 PST
Created attachment 496861 [details] [diff] [review]
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 (not working on stability any more) 2010-12-10 11:09:38 PST
gah, using table display styles is soooo ugly :(
Comment 24 Stefan [:stefanh] (away until May 28) 2010-12-10 13:09:07 PST
Created attachment 496900 [details] [diff] [review]
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 neil@parkwaycc.co.uk 2010-12-10 13:54:05 PST
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] (away until May 28) 2010-12-10 15:50:06 PST
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 2010-12-11 04:44:19 PST
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 (not working on stability any more) 2010-12-11 04:58:58 PST
(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 2010-12-11 07:26:25 PST
>> 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 2010-12-11 08:20:53 PST
With SVG filters, anything is possible :-)
https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content
Comment 31 Jens Hatlak (:InvisibleSmiley) 2010-12-11 12:34:44 PST
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) 2010-12-11 15:14:42 PST
Created attachment 497093 [details] [diff] [review]
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] (away until May 28) 2010-12-11 15:25:20 PST
(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) 2010-12-11 17:00:53 PST
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) 2010-12-12 05:20:13 PST
Yep, now it's there. :-)

RFE: Perhaps something on click, like the question? .-)
Comment 36 Robert Kaiser (not working on stability any more) 2010-12-12 05:25:52 PST
(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

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