431070 - "Auto-Update" needs to pop up a Sparkle window, not point to Reload

Status: RESOLVED WONTFIX

(Camino Graveyard :: Product Site, defect)

Description

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Right now, hovering the auto-update button causes the descriptive text to point right at the Reload button, which is both odd and wrong.

Sam and I talked about making hovering that also pop up a Sparkle window (or part of a Sparkle window) that the descriptive text can point to instead of pointing at Reload.  

However, this probably requires us getting a designer or having a lot of time on our hands. We do need to do it, though.

Comment 1

[philippe (part-time)]

1. That will require a (small) change in the html, is that OK ? One way or another, the image of the Sparkle window need to inserted. Adding the image of the Sparkle window in the html (hidden) is easiest, and fastest for hover response.

2. The Sparkle window is quite big, just slightly smaller than the Camino window currently used on the site.
option 1: put the whole Sparkle window, slightly offset from top and left of Camino window and add the descriptive text on top of it. Not difficult, iExploder will probably ffff but nothing that can't be solved.
option 2: crop the Sparkle window, how only top part

I'll see what I can do, prolly by tomorrow, Tuesday local time

Comment 2

[Chris Lawson (gone)]

(In reply to comment #1)

> 2. The Sparkle window is quite big, just slightly smaller than the Camino
> window currently used on the site.
> option 1: put the whole Sparkle window, slightly offset from top and left of
> Camino window and add the descriptive text on top of it. Not difficult,
> iExploder will probably ffff but nothing that can't be solved.
> option 2: crop the Sparkle window, how only top part

Is option 3 (scaling the Sparkle window) a possibility?

Comment 3

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

My thought was either to crop it or to use the "you're up to date" window (which is not as effective at getting the message across, though).  

Scaling would distort the UI/perspective too much, I think.

Adding a bit to the html should be OK; we aren't terribly rigid with ensuring 100% the same structure on every page.  Everything starting with <div id="preview"> until just before <div id="footer"> is the page itself.

Thanks for taking a look at this, philippe :) Assigning to you for now, then.

Comment 4

[philippe (part-time)]

Hmm. Scaling is an option I guess. Getting the window to look good is another thing.
And, wouldn't it look strange, UI wise?

Comment 5

[philippe (part-time)]

Attachment: comp, scaled sparkle window

A very quick comp in photoshop
The Sparkle window is 70% of its real size.

(obviously, the colour of the window controls and buttons is not correct)

Comment 6

[Samuel Sidler (old account; do not CC)]

I'm in favor of either cropping it (with some style/fade out maybe?) or using the up-to-date window like we do on the Features page.

I'd rather not scale it.

Comment 7

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

While we're thinking about bending reality, we could also edit that nib to let us use a smaller minimum size and then make the window shorter. Not sure if that helps enough to be worthwhile.

I'd rather not scale it, either; that scaled window freaks me out.

Comment 8

[philippe (part-time)]

Yeah, that scaled thing looks a bit (ahem) odd. I posted it for discussion, but it doesn't get my vote.

My current thought is a cropped Sparkle window, clipped just below the 'release notes' line, with a slight fade out effect. Position would be towards the bottom of the main window, with the bubble pointing to the Sparkle Window title.

(on a related note, am I wrong to assume that IE6 win is not in the list of supported browsers ? The front page of cb-o looks rather cr*p)

Comment 9

[philippe (part-time)]

Work in progress:
http://dev.l-c-n.com/camino/cbo/cbo.html

Comment 10

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

philippe, were you waiting on feedback from us, or did you just have to get back to paying work? :)

The overall WIP idea looks good, but there are a couple of things that distract me a little bit:

1) I think that the Sparkle window needs to be taller before the fade-out (i.e., so that the fade occurs over the Find bar or status bar--somewhere a little less noticeable).

2) I also think that maybe the Sparkle window should be a bit higher up on the page, not so much for the window itself, but rather so the bubble for the descriptive text is not so far down.  If we move the bubble to point at the Sparkle window title as you mentioned in comment 8 (does that end up not looking as good as the current positioning?), it might not be necessary to move the window up.

As for IE6, I know we have some CSS stuff for it, but I have no idea whether it was supposed to have worked at one point and we messed it up or if it was always broken.

Comment 11

[philippe (part-time)]

(In reply to comment #10)
> philippe, were you waiting on feedback from us, or did you just have to get
> back to paying work? :)

Yah, paying stuff got in the way.
 
> The overall WIP idea looks good, but there are a couple of things that distract
> me a little bit:
> 
> 1) I think that the Sparkle window needs to be taller before the fade-out
> (i.e., so that the fade occurs over the Find bar or status bar--somewhere a
> little less noticeable).

Making the Sparkle window increases the file size quite a bit. I could of course remove as much transparency as possible and use a very small shadow. PNG 32 is not so friendly to file size.

> As for IE6, I know we have some CSS stuff for it, but I have no idea whether it
> was supposed to have worked at one point and we messed it up or if it was
> always broken.
> 

I'll have a look at fixing as much as possible. I suspect the PNG files don't play too well there (that browser has no support for PNG 32). The hover effects don't work either (li:hover is not supported).

IE 7 also needs some love, I think. But that is minimal surgery.

Comment 12

[philippe (part-time)]

New version, based on the comments in comment 11

http://dev.l-c-n.com/camino/cbo/cbo2.html

The SU window image is a bit large in filesize (28kb), I'll try to reduce that some more.

The file includes some fixes for IE 6 and 7.
I'l file a separate bug for those fixes.

Comment 13

[philippe (part-time)]

(In reply to comment #12)
 
> The file includes some fixes for IE 6 and 7.
> I'l file a separate bug for those fixes.

for the record, I filed bug 433218 for those.

Comment 14

[philippe (part-time)]

Attachment: css changes for the display of the SU window

With a bit more polish
http://dev.l-c-n.com/camino/cbo/cbo3.html

Sam, mind if you have a look at this ?
Some small explanation:
That attached diff is only for the changes to the (main) stylesheet (and it doesn't include the change for bug 433218).

The html of the page needs one modification: inserting the su-window image. I put it as part of the 'auto-update' li, just after the span

the new code looks like this:
Auto-Update  <span class="update">When a new release is available, Camino will offer you the option of downloading and installing it.</span> <img src="/path/to/image/suwindow3.png" width="584" height="165" alt="Software update window" id="suwindow" /></a></li>

obviously, replace /path/to/image/ with the actual path to the image

I'll attach the image next.

Comment 15

[philippe (part-time)]

Attachment: the su-window image

Comment 16

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

This all looks good to me (but Sam has the final say here); thanks, philippe!

Comment 17

[Samuel Sidler (old account; do not CC)]

Comment on attachment 320654 [details]
the su-window image

r=me if you update it for 1.6.3 so it doesn't have b4 in it. Isaac will review the other patch.

Comment 18

[philippe (part-time)]

(In reply to comment #17)
> (From update of attachment 320654 [details])
> r=me if you update it for 1.6.3 so it doesn't have b4 in it. Isaac will review
> the other patch.
> 

'k. I'll post a new image as soon as possible (Weekend job).

Comment 19

[philippe (part-time)]

Attachment: su-image updated for 1.6.3

Updated per comment 17, carrying over Sam's r+

Now 4kb smaller (there is less text in the window).

In context:
http://dev.l-c-n.com/camino/cbo/cbo4.html

Comment 20

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

:(

Comment 21

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Comment on attachment 320653 [details] [diff] [review]
css changes for the display of the SU window

Apparently WONTFIXing a bug doesn't cancel reviews :P