767764 - [HiDPI] - updated images for tab bar

Status: RESOLVED FIXED

(Camino Graveyard :: General, defect)

Description

[philippe (part-time)]

Attachment: images v0.9

all images that form part of the tab bar structure (tab bar background, active tab, tab separator, the overflow chevron, the scroll buttons, close button).

Comment 1

[philippe (part-time)]

Attachment: screenshot on hiDPI mode

Comment 2

[Derek Schrock]

Everything looks good.

Comment 3

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

Comment on attachment 636133 [details]
images v0.9

So, it's hard for me to check the tab parts themselves because there's some sort of drawing bug with the tab bar in 2x mode on 10.5 (such that the inactive bg is drawn too high and the bottom "line" thingy looks wonky), but all the button pieces look great!  Those are super-crisp and if I didn't know otherwise, I'd've thought they were vectors.

Based on what I can see of the tab parts here and from your sreenshot, though, tab_button_divider and tab_[right|left]_side look blurry (and, here, slightly worse than the scaled-up 1x versions).  Can we use the extra pixels to make the active tab corners sharper/more detailed, rather than just scaled up, e.g. Figure 1 https://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Introduction/Introduction.html?  I guess we want to do the same on the divider, although it's less clear to me how the pixels would be allocated…

So r=ardissone on all but those three images.

Comment 4

[philippe (part-time)]

(In reply to Smokey Ardisson (not following bugs - do not email) from comment #3)
> Comment on attachment 636133 [details]
> images v0.9
> 
> So, it's hard for me to check the tab parts themselves because there's some
> sort of drawing bug with the tab bar in 2x mode on 10.5 (such that the
> inactive bg is drawn too high and the bottom "line" thingy looks wonky), but
> all the button pieces look great!  Those are super-crisp and if I didn't
> know otherwise, I'd've thought they were vectors.

:-)

(But they are vectors! inside the .PSD file, that is. It would be nice it they were real vectors, though; something for the future.)
Glad you like those, anyway.

> 
> Based on what I can see of the tab parts here and from your sreenshot,
> though, tab_button_divider and tab_[right|left]_side look blurry (and, here,
> slightly worse than the scaled-up 1x versions).  Can we use the extra pixels
> to make the active tab corners sharper/more detailed, rather than just
> scaled up, e.g. Figure 1
> https://developer.apple.com/library/mac/#documentation/GraphicsAnimation/
> Conceptual/HighResolutionOSX/Introduction/Introduction.html?  I guess we
> want to do the same on the divider, although it's less clear to me how the
> pixels would be allocated…

Ok, I'll attach a new set in a moment. I was originally a bit afraid of tweaking too much in that corner, but based on multiple images I've studied, I shouldn't have, I've now tweaked the corners of the active tab, to create a smoother curve. 

As for the divider, i'm not sure what to do. What I'll attach is an attempt to generate a bit of a curve at the top, (more or less matching the curve of the left side of the active tab (*). Does this look better? I guess the question is – what impression do we want to give ? If the divider has to be a straight line from bottom to top, then what I did is not really good… I tried also to have the top being a rounded, but that looked poop (**).

screenshots:
1. with the images I'll attach in a moment  - (*) above
http://dev.l-c-n.com/camino/_d/tab-bar-v2a.png

2. the other attempt for the divider - (**) above
http://dev.l-c-n.com/camino/_d/tab-bar-v2b.png

(the small document icon seen on the tab bar is a WIP still)

---

PS - look at the history icon in the side bar in the BM manager… so shoot me [1]. I'll go marking bug 768757 as WFM as soon as I've verified that it is not a fluke on my side (still worried about why the bookmark group badge looks poor).

[1] my bash alias was apparently still set to tiffutil -cat instead of tiffutil -cathidpicheck; it apparently makes a difference, although the man page doesn't say anything. Strangely, it doesn't seem to make a difference for toolbar icons, bookmark bar icons.

> So r=ardissone on all but those three images.

Comment 5

[philippe (part-time)]

Attachment: tab bar images, v1.01

Per previous comment. Derek, can you verify on your side that this looks OK, particularly the images for the active tab (tab_left_side.tiff, tab_right_side.tiff)?

Comment 6

[Derek Schrock]

Comment on attachment 638180 [details]
tab bar images, v1.01

Looks good on the rMBP

Comment 7

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

Comment on attachment 638180 [details]
tab bar images, v1.01

(In reply to philippe from comment #4)
> Ok, I'll attach a new set in a moment. I was originally a bit afraid of
> tweaking too much in that corner, but based on multiple images I've studied,
> I shouldn't have, I've now tweaked the corners of the active tab, to create
> a smoother curve.

These look good; thanks :-)

> As for the divider, i'm not sure what to do. What I'll attach is an attempt
> to generate a bit of a curve at the top, (more or less matching the curve of
> the left side of the active tab (*). Does this look better? I guess the
> question is – what impression do we want to give ? If the divider has to be
> a straight line from bottom to top, then what I did is not really good… I
> tried also to have the top being a rounded, but that looked poop (**).

Yeah, I don't know what exactly the intended look was with that divider; I'm guessing just a vertical beveled line that also didn't interact too strongly with the shadow at the top of the tab.

I think the new image makes the top of the divider look like it has a sharp angled cut "\", and I don't think that looks as good as the original simple doubling.  Logically the new pixels seem to be the right thing to do if we have a consistent bevel, but visually the problem is that it seems to make the tabs all have an unwanted bulge/growth at the top left (into the divider), where they should not extend beyond the right edge of the divider.

I wonder if doing almost the reverse/inverse of what you did in v1.0.1 would look better, i.e. extending the lighter color in the "right column" up a few px (possibly with an intermediate color between the light bottom pixels and the darker top ones), at the opposite angle "/" from v1.0.1's extending the dark down at "\" angle? (/me grumbles about his poor collection of graphics tools here…)

I'm OK shipping the straight-pixel-doubled divider in the interim if you'd prefer we continue tweaking the divider in another bug.

> ---
> 
> PS - look at the history icon in the side bar in the BM manager… so shoot me
> [1]. I'll go marking bug 768757 as WFM as soon as I've verified that it is
> not a fluke on my side (still worried about why the bookmark group badge
> looks poor).
> 
> [1] my bash alias was apparently still set to tiffutil -cat instead of
> tiffutil -cathidpicheck; it apparently makes a difference, although the man
> page doesn't say anything. Strangely, it doesn't seem to make a difference
> for toolbar icons, bookmark bar icons.

Will you 

1) Make sure to regenerate all the icons for this bug, just to make sure they all have the right tiffutil switch

2) Update http://wiki.caminobrowser.org/Development:Preparing_Graphics as necessary (can be spun off into another bug if you'd like).

So, r=ardissone on all of the v1.0.1 images except tab_button_divider, but r=ardissone on v0.9 tab_button_divider ad interim, as long as they're all regenerated.

Comment 8

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

(In reply to philippe from comment #4)
> PS - look at the history icon in the side bar in the BM manager… so shoot me
> [1]. I'll go marking bug 768757 as WFM as soon as I've verified that it is
> not a fluke on my side (still worried about why the bookmark group badge
> looks poor).

Indeed, that's odd, since the badge looked right in bug 766015 comment 26… :-(

Comment 9

[philippe (part-time)]

(In reply to Smokey Ardisson (not following bugs - do not email) from comment #7)
I have an other option (well, it is a variant on what you suggest) - considering the divider as a straight line. I made the fading-into-the-shadow at the top smoother.

http://dev.l-c-n.com/camino/_d/tab-bar-v2c.png

Otherwise, let's go with the first version of the divider as suggested, and decide in a follow-up bug on what exactly we want that divider to look like.
(I'll prepare that data later today).


> 2) Update http://wiki.caminobrowser.org/Development:Preparing_Graphics as
> necessary (can be spun off into another bug if you'd like).

Yes, I'l update the wiki page as soon as I have the 'best' workflow nailed down.
 
> So, r=ardissone on all of the v1.0.1 images except tab_button_divider, but
> r=ardissone on v0.9 tab_button_divider ad interim, as long as they're all
> regenerated.

Comment 10

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

(In reply to philippe from comment #9)
> (In reply to Smokey Ardisson (not following bugs - do not email) from
> comment #7)
> I have an other option (well, it is a variant on what you suggest) -
> considering the divider as a straight line. I made the
> fading-into-the-shadow at the top smoother.
> 
> http://dev.l-c-n.com/camino/_d/tab-bar-v2c.png

I don't notice a lot of difference between this one and the pixel-doubled version based on the screenshots, so let's just take the (v0.9) pixel-doubled one.

Comment 11

[philippe (part-time)]

Attachment: tab bar images, v1.0.2

All images from v1.0.1 but with the divider from v.0.9 as discussed.
(carrying over Smokey's r+)

Comment 12

[philippe (part-time)]

Attachment: HiDPI screenshot, v1.0.2

Comment 13

[Stuart Morgan]

Comment on attachment 638574 [details]
tab bar images, v1.0.2

sr=smorgan

Smokey, feel free to sr any icon-only changes yourself; your icon-reviewing has always been top-notch :)

Comment 14

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

http://hg.mozilla.org/camino/rev/fef3fd3026ff

(In reply to Stuart Morgan from comment #13)
> Smokey, feel free to sr any icon-only changes yourself; your icon-reviewing
> has always been top-notch :)

OK :)