350139 - Need new images for tabstrip (PC/Mac)

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect)

Description

[Mike Connor [:mconnor]]

Need the following:

Instead of a single set of images with varying opacities, we need three sets for active/hover/background, following the style mocked up here: http://wiki.mozilla.org/FX2_Visual_Update/Default_Theme_Update

These images need to be much taller, in order to scale for large fonts, we'll take care of ensuring the tabstrip stays the same height.  50px should be sufficient.  That goes for all images, including scrollbuttons/all tabs.

We should also have a semi-transparent image for the tabstrip, instead of being tinted to match Lune Blue's beige, we want to blend more seamlessly, so we should be able to darken the native color, but not shift colors.

Comment 1

[Jay Goldman]

Attachment: New Tabstrip Images v1 (Mac/PC)

Zip archive contains images for Pinstripe and Winstripe, for foreground, hover, and background states of left, middle, and right of tabs, plus a background image for the tabstrip itself.

Comment 2

[(not reading, please use [e-mail] instead)]

thanks for the images, jay.

question:  for pinstripe, you provided a jpg for (foreground_middle.jpg), but all the other images were .png.  Was this on purpose or on accident?

Comment 3

[Mike Connor [:mconnor]]

Comment on attachment 235583 [details]
New Tabstrip Images v1 (Mac/PC)

Seth, are this good to go?

Comment 4

[Jay Goldman]

Attachment: Foreground Middle PNG (replaces JPG in zip)

Not at all Seth - my bad. Here's the PNG. Sorry!

Comment 5

[(not reading, please use [e-mail] instead)]

> Seth, are this good to go?

I'll start working with them tomorrow and start providing feedback (and screen shots.)

Comment 6

[Pam Greene]

The current images occasionally leave a small gap between the middle and the right end in background tabs: see screenshot.  It appears to be specific to certain window sizes and tab counts; try using a window 985 pixels wide |javascript:window.resizeTo(985,9999);| and opening 4 tabs.  I'll defer filing a new bug until I see if the problem remains after this lands.

Comment 7

[Pam Greene]

Attachment: Screenshot showing slight gap

Comment 8

[(not reading, please use [e-mail] instead)]

> The current images occasionally leave a small gap between the middle and the
> right end in background tabs: see screenshot.

pam, see bugs #347482 and #347487.

to summarize, setting opacity on the tabs is exposing a bug.

Comment 9

[(not reading, please use [e-mail] instead)]

jay, I'll need the same sized images for the scrollbutton (left and right) and the all tabs button (overflow and non-overflow).

for each of these 4 buttons, I think I'll need 3 versions:

1) hover state (100% opacity)
2) regular state (I think we are doing 40% opacity for winstripe, 65% for pinstripe, looking at browser.css)
3) animated state (at full brightness, since I vary the opacity from 0 - 100%) in tabbrowser.xml

for the alltabs box, when overflowed, notice that the built in "button separator" has been extended the entire height of the button. (see http://lxr.mozilla.org/mozilla1.8/source/toolkit/themes/winstripe/global/icons/alltabs-box-overflow-start-bkgnd.png)

All of these new images should be the same height as the new images, and like the other new imags, should not have any transparent padding "built in" to the top.

Thanks in advance!

Comment 10

[Alex R.]

Simple question before things are implemented: are you planning on adopting images more similar to those in the mockup, or just different ones approximating the current system (in terms of opacity)? Frankly I think the mockup's tabs, while darker (with fully-opaque text), look far better.

Comment 11

[(not reading, please use [e-mail] instead)]

> Seth, are this good to go?

playing with jay's images now, will attach a screen shot.  

note to jay:  for the "middle" of the tab images, I need them to be 1px wide.  This was easy for me to fix, but just for future reference.

Comment 12

[(not reading, please use [e-mail] instead)]

Attachment: screen shot of new images in action (middle tab hovered, far right selected)

Comment 13

[Jay Goldman]

(In reply to comment #12)

> screen shot of new images in action (middle tab hovered, far right selected)

My first thoughts are:

1) It looks much! better!

2) I'm not sure hover and background are different enough. Anyone else?

Comment 14

[Dão Gottwald [:dao]]

(In reply to comment #13)
> 1) It looks much! better!
> 2) I'm not sure hover and background are different enough. Anyone else?

Yes and yes.

Other thoughts:

- tabstrip_background.png has a constant opacity of 70% and a gray-to-white gradient. Instead it should be constantly gray and the opacity should go from 70% to 0%.

- background-*.png is 100% opaque. This way the tabs won't match the OS theme. Compare Seth's screenshot to <http://wiki.mozilla.org/FX2_Visual_Update/Default_Theme_Update>.

- background-*.png is not cleanly gray. There stripes are sporadically colored (tending to red), e.g. rgb(214,210,208).

Comment 15

[Alex R.]

(In reply to comment #13)
> My first thoughts are:
> 1) It looks much! better!
> 2) I'm not sure hover and background are different enough. Anyone else?
> 
Seconded. Hover should be just a tad lighter to make it more obvious.

(In reply to comment #14)
> Other thoughts:
> 
> - background-*.png is 100% opaque. This way the tabs won't match the OS theme.
> Compare Seth's screenshot to
> <http://wiki.mozilla.org/FX2_Visual_Update/Default_Theme_Update>.
Indeed. This seems to be one of the biggest things the MozillaZine folks are complaining about, anyways.

Comment 16

[(not reading, please use [e-mail] instead)]

Attachment: updated screen shot of new images in action (middle tab hovered, far right selected)

Comment 17

[(not reading, please use [e-mail] instead)]

Attachment: another version, whitestripe 4px

Comment 18

[(not reading, please use [e-mail] instead)]

Attachment: another version, whitestripe 4px, take 2

Comment 19

[(not reading, please use [e-mail] instead)]

Attachment: another version, whitestripe 4px, take 3 (need to adjust close button on selected tab up 1 px)

Comment 20

[(not reading, please use [e-mail] instead)]

Attachment: another version, whitestripe 4px, take 4 (non-selected close boxes icon moved down 1px)

Comment 21

[(not reading, please use [e-mail] instead)]

Attachment: at dpi 150% (notice the issue with the middle of the tabs eating into the whitestrip)

Comment 22

[(not reading, please use [e-mail] instead)]

Attachment: patch

Comment 23

[Mike Connor [:mconnor]]

Comment on attachment 236050 [details] [diff] [review]
patch

r+a=me, great work!

you have 20 minutes to land this before nightlies!

Comment 24

[(not reading, please use [e-mail] instead)]

I've checked in (before the 3am deadline) so tomorrow's nightlies should look better.

these new images, and some css fixes, will fix the following bugs on winstripe:

#347482 Visual refresh leaves vertical lines in some tabs
#348935 Tab strip buttons' edge lines extend partway down into "white strip"
#348983 White Strip under the Tab Strip

These three issues are not yet fixed on pinstripe.  tomorrow I'll be working on pinstripe.

Checking in themes/winstripe/global/browser.css;
/cvsroot/mozilla/toolkit/themes/winstripe/global/browser.css,v  <--  browser.css

new revision: 1.9.4.24; previous revision: 1.9.4.23
done
Checking in themes/winstripe/global/jar.mn;
/cvsroot/mozilla/toolkit/themes/winstripe/global/jar.mn,v  <--  jar.mn
new revision: 1.14.2.8; previous revision: 1.14.2.7
done
RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-left-
bkgnd.png,v
done
Checking in themes/winstripe/global/icons/tab-left-bkgnd.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-left-bkgnd.png,
v  <--  tab-left-bkgnd.png
new revision: 1.1.2.1; previous revision: 1.1
done
RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-left-
hover.png,v
done
Checking in themes/winstripe/global/icons/tab-left-hover.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-left-hover.png,
v  <--  tab-left-hover.png
new revision: 1.1.2.1; previous revision: 1.1
done
Checking in themes/winstripe/global/icons/tab-left.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-left.png,v  <--
  tab-left.png
new revision: 1.1.2.2; previous revision: 1.1.2.1
done
RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-middl
e-bkgnd.png,v
done
Checking in themes/winstripe/global/icons/tab-middle-bkgnd.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-middle-bkgnd.pn
g,v  <--  tab-middle-bkgnd.png
new revision: 1.1.2.1; previous revision: 1.1
done
RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-middl
e-hover.png,v
done
Checking in themes/winstripe/global/icons/tab-middle-hover.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-middle-hover.pn
g,v  <--  tab-middle-hover.png
new revision: 1.1.2.1; previous revision: 1.1
done
Checking in themes/winstripe/global/icons/tab-middle.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-middle.png,v  <
--  tab-middle.png
new revision: 1.1.2.2; previous revision: 1.1.2.1
done
RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-right
-bkgnd.png,v
done
Checking in themes/winstripe/global/icons/tab-right-bkgnd.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-right-bkgnd.png
,v  <--  tab-right-bkgnd.png
new revision: 1.1.2.1; previous revision: 1.1
done
RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-right
-hover.png,v
done
Checking in themes/winstripe/global/icons/tab-right-hover.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-right-hover.png
,v  <--  tab-right-hover.png
new revision: 1.1.2.1; previous revision: 1.1
done
Checking in themes/winstripe/global/icons/tab-right.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tab-right.png,v  <-
-  tab-right.png
new revision: 1.1.2.2; previous revision: 1.1.2.1
done
Checking in themes/winstripe/global/icons/tabbrowser-tabs-bkgnd.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/Attic/tabbrowser-tabs-bkg
nd.png,v  <--  tabbrowser-tabs-bkgnd.png
new revision: 1.1.2.3; previous revision: 1.1.2.2
done
Checking in themes/winstripe/global/icons/tabstrip-bottom.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/tabstrip-bottom.png,v  <-
-  tabstrip-bottom.png
new revision: 1.2.26.4; previous revision: 1.2.26.3
done

Comment 25

[Dão Gottwald [:dao]]

Landing this improvements was a good thing -- at the same time, could someone with importance please comment on the objections? Like "we [don't] agree and it will [not] be fixed later" or "please file another bug".

Comment 26

[(not reading, please use [e-mail] instead)]

> > 2) I'm not sure hover and background are different enough. Anyone else?
> Seconded. Hover should be just a tad lighter to make it more obvious.

see bug #350685

Comment 27

[(not reading, please use [e-mail] instead)]

> could someone with importance please comment on the objections? Like "we [don't] > agree and it will [not] be fixed later" or "please file another bug".

my recommendation would be log each objection as separate, spin off bugs and ask for [ff2 blocking ?]

Comment 28

[(not reading, please use [e-mail] instead)]

> at dpi 150% (notice the issue with the middle of the tabs eating into the
> whitestrip)

spun off to bug #350686 

Comment 29

[(not reading, please use [e-mail] instead)]

jay, from my comment #9:

> I'll need the same sized images for the scrollbutton (left and right) and
> the all tabs button (overflow and non-overflow).

I still need new images (I think), but not for the original reason.  after recent changes, the original problems are solved, but there is a new issue.  see bug #350687 for details.

Comment 30

[Dão Gottwald [:dao]]

(In reply to comment #14)
> - tabstrip_background.png has a constant opacity of 70% and a gray-to-white
> gradient. Instead it should be constantly gray and the opacity should go from
> 70% to 0%.
> 
> - background-*.png is 100% opaque. This way the tabs won't match the OS theme.
> Compare Seth's screenshot to
> <http://wiki.mozilla.org/FX2_Visual_Update/Default_Theme_Update>.

filed bug 350689 and bug 350690.

Comment 31

[(not reading, please use [e-mail] instead)]

> filed bug 350689 and bug 350690.

thanks for logging those spin off bugs, dao.

Comment 32

[(not reading, please use [e-mail] instead)]

Attachment: screen shot of pinstripe after new images (and css changes).

Comment 33

[Dão Gottwald [:dao]]

Seth, before making the same mistake twice, please take a look at bug 350689, esp. bug 350689 comment 4. Summarily, I think you exported winstripe's tabstrip background image without its alpha channel.

Comment 34

[(not reading, please use [e-mail] instead)]

Attachment: tab left and right images are 8px instead of 10 px (winstripe)

Comment 35

[(not reading, please use [e-mail] instead)]

Attachment: 8px vs 10px diff, and fixing images

Comment 36

[(not reading, please use [e-mail] instead)]

> and fixing images

by this I mean I have preserved the alpha channel from the original images from jay.

Comment 37

[(not reading, please use [e-mail] instead)]

Attachment: screen shot of pinstripe in action

Comment 38

[(not reading, please use [e-mail] instead)]

Attachment: patch for pinstripe

this patch should fix a number of open ff2 blocker bugs for pinstripe

Comment 39

[Mike Connor [:mconnor]]

Comment on attachment 236329 [details] [diff] [review]
8px vs 10px diff, and fixing images

r+a=me on this theme change

Comment 40

[Mike Connor [:mconnor]]

Comment on attachment 236341 [details] [diff] [review]
patch for pinstripe

r+a=me, css looks good, and Seth demonstrated the patch as well, looks great!

Comment 41

[(not reading, please use [e-mail] instead)]

I have landed all the new images from jay, so marking this as fixed.

note, there are other open image requests, but they are tracked by other bugs.

thanks again to jay for the new images!