348983 - White Strip under the Tab Strip

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect)

Description

[ronin.achilles]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.1b1) Gecko/20060816 BonEcho/2.0b1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.1b1) Gecko/20060816 BonEcho/2.0b1

The abnormally wide whitestrip at the bottom of the tabstrip does not look to be a part of the design (or is it?) 

I believe the solution is to shift the bottom border of the tabstrip (along with the tabs) upwards by 1 (2?)pixels. This will result in:
- The whitestrip slimming down a bit
- The active tab merging seamlessly with the whitestrip (observe the hanging end-bottom-borders of the active tab under the current scenario)
- The background tabs actually looking to be 'behind' the whitestrip (instead of the current 'inserted into the whitestrip' kind of look)

Besides:
- The whitestrip should only be visible in the Tabs area and not under the 'All Tabs' button or under the Scroll Buttons when they kick in during overflow.


Reproducible: Always

Comment 1

[Jesse Maloney (jtmal0723 [at] gmail for email)]

Possible dupe of bug 347482?

Comment 2

[Bryan]

I believe this bug is referring to:  http://img46.imageshack.us/my.php?image=sshot1cf0.jpg

I see this myself in safemode in all of the recent builds since the tab strip landing: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1b1) Gecko/20060817 BonEcho/2.0b2 ID:2006081712

~B

Comment 3

[Bryan]

Attachment: Screen shot depicting issue...

Comment 4

[ronin.achilles]

(In reply to comment #2)
> I believe this bug is referring to: 
> http://img46.imageshack.us/my.php?image=sshot1cf0.jpg
> 

Yes. 

Comment 5

[Jackie Liu]

Dupe of Bug 348935?

Comment 6

[Adam Kowalczyk]

(In reply to comment #5)
> Dupe of Bug 348935?
> 
No, that's a different issue. 

BTW, the white line may be intended but perhaps without the opacity.

Comment 7

[u88484]

Confirming this per the summary of this bug, not sure if it's intended or not. If it is, it should be removed.

Comment 8

[Oliver Saier]

If it's intended  then it still makes the tab close button look vertically misaligned (see screenshot).
Same effect on Linux BTW.

Comment 9

[Peter Kasting]

The screenshot on bug 348935 ( https://bugzilla.mozilla.org/attachment.cgi?id=234398 ) demonstrates that this is Winstripe-only and almost certainly not intentional.

Comment 10

[Mathieu Johnson]

Commenting the image posted in comment #9, 

I don't think it indicates clearly that this bug is winstripe-only. It sure is more apparent on winstripe as the white edge is about 2x larger there but in the left image there is still a white edge between the tabs and the bottom of the tab-bar border.

I don't know what is the desired appearance on this but I think the tabs should actually touch the bottom border with no white line whatsoever.

So if the desired appearance is no white line at all, consider fixing it for other platforms as well. 

Comment 11

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

taking

Comment 12

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

on 2006-08-18 10:55:54 PDT, [e-mail] marked this as blocking (most likely during a triage, with the other drivers.)

I'm not sure what issue got marked as blocking.  beltzner,mconnor,schrep:  do you guys remember what made this blocking?  (Was it the screen shot?)

But based on the current look (after changes made to winstripe on 8-26-06), things look much better.  i'll attach a screen shot.

the only issue that was part of the initial comment that is not fixed is:  

"- The whitestrip should only be visible in the Tabs area and not under the 'All
Tabs' button or under the Scroll Buttons when they kick in during overflow."

I am going to spin off that to another bug, as it will require new version images from jay (at radiant core) for the scroll buttons and the all tabs buttons, with the opacity built in.

Comment 13

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

Attachment: how things look after changes on 8-26-06

Comment 14

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

> I am going to spin off that to another bug

see bug #350352

I'm going to go ahead and mark this fixed.

among other changes that landed for winstripe on 8-26-06, I believe the slight modification I made to http://lxr.mozilla.org/mozilla1.8/source/toolkit/themes/winstripe/global/icons/tabbrowser-tabs-bkgnd.png helped make things look better.

Comment 15

[Mike Schroepfer]

Hey Seth,

Yes - it was made blocking because of the screenshot and our desire to get the new look and feel done with maximum polish.  

I'm still seeing a white bar of sorts in the 8-26-06 win nightlies - screen shot attached.

Comment 16

[Mike Schroepfer]

Attachment: Screenshot 8-26-06 Nightly

Comment 17

[Mike Schroepfer]

Hmm - revoke my earlier comment I see those checkins happened today.  So I'll check an updated build and re-comment.

Comment 18

[Mathieu Johnson]

As I said in comment #10, the white strip is now the same width than on the other platforms, but it still exists.

Is the new tab strip really designed to look that way?
I don't find it visually appealing, why is there a white strip there in the first place?

Comment 19

[ronin.achilles]

(In reply to comment #12)
> on 2006-08-18 10:55:54 PDT, [e-mail] marked this as blocking (most
> likely during a triage, with the other drivers.)
> 
> I'm not sure what issue got marked as blocking.  beltzner,mconnor,schrep:  do
> you guys remember what made this blocking?  (Was it the screen shot?)
> 
> But based on the current look (after changes made to winstripe on 8-26-06),
> things look much better.  i'll attach a screen shot.
> 
> the only issue that was part of the initial comment that is not fixed is:  
> 
> "- The whitestrip should only be visible in the Tabs area and not under the
> 'All
> Tabs' button or under the Scroll Buttons when they kick in during overflow."
> 
> I am going to spin off that to another bug, as it will require new version
> images from jay (at radiant core) for the scroll buttons and the all tabs
> buttons, with the opacity built in.
> 

I had asked for blocking because the white strip did not look to have been implemented as intended (as mentioned in the original description of the bug when I had filed it). 
As of 08/27 build, all the three points that I had originally made look to have been fixed.
Thanks for all the work Seth.

Comment 20

[Peter Kasting]

In bug 348935 comment 9, I wrote: "Also, in your screenshot, we still have something like bug 348983: it looks like there's an extra 2 vertical pixels of white space between all the tabs and the divider line they're supposed to sit on."

This is still true.  The commits that have happened so far make the tab lines not extend into this white area, but it's still there; see comment 18.

ASCII:

| TAB |
|     |
          (a row of white pixels)
          (a row of white pixels)
-------   (a row of black pixels)
          (a row of white pixels)
XXX Page content here XXX

I claim the two rows of white pixels above the row of black pixels should be removed.  They weren't present in 1.5 or the Visual Refresh mockups and they look bizarre.

I also claim this is actually what comment 0 wanted, and therefore only one piece of comment 0 (the "inserted into the whitestrip" part) is currently addressed, but that since you said things were "better" ronin.achilles assumed this was all by design,

Comment 21

[ronin.achilles]

(In reply to comment #20)
> In bug 348935 comment 9, I wrote: "Also, in your screenshot, we still have
> something like bug 348983: it looks like there's an extra 2 vertical pixels of
> white space between all the tabs and the divider line they're supposed to sit
> on."
> 
> This is still true.  The commits that have happened so far make the tab lines
> not extend into this white area, but it's still there; see comment 18.
> 
> ASCII:
> 
> | TAB |
> |     |
>           (a row of white pixels)
>           (a row of white pixels)
> -------   (a row of black pixels)
>           (a row of white pixels)
> XXX Page content here XXX
> 
> I claim the two rows of white pixels above the row of black pixels should be
> removed.  They weren't present in 1.5 or the Visual Refresh mockups and they
> look bizarre.
> 
> I also claim this is actually what comment 0 wanted, and therefore only one
> piece of comment 0 (the "inserted into the whitestrip" part) is currently
> addressed, but that since you said things were "better" ronin.achilles assumed
> this was all by design,
> 

Yes, I did assume that the white line was there by design but had not been implemented properly. 
But as per your suggestion, if the white line is removed, what then will serve as the integrating point between the selected tab and the displayed web page ? (like right now the selected tab integrates seamlessly into the white line and the background tabs look to be sitting behind the white line). If the white line is completely removed, then all the tabs, i.e. selected as well as background will look as if they are sitting on the black line and hence no integration of the selected tab with the web page (which actually will look bad).
Besides, I also have been wondering as to the intention of the 'row of white pixles' BELOW the 'row of black pixels', as shown in your ASCII diagram. It looks horrible in Classic view when the web page is loading (since the default background while loading is dark grayish).

Comment 22

[Marco Bonardo [:mak]]

Attachment: example shot with white line

i think that the white strip could be a good connection for back, forward, all tabs buttons, they could be 100% opacity and exiting from the white strip...

and if it's mantained maybe the difference with the background tabs could be clearer. i attach an example gif.

Comment 23

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

I have landed some new images and css changes to fix this on winstripe as part of bug #350139

Comment 24

[Dave Carlson]

(In reply to comment #23)
> I have landed some new images and css changes to fix this on winstripe as part
> of bug #350139
> 

looks good now on Windows XP x64! dont change it anymore its great

Comment 25

[Adam Kowalczyk]

Attachment: Comparison between the white strip at 2px and 1px

Now the bottom of the tab strip matches the design mockup, except the white strip is higher. The white space between the gray borders has a height of 2 pixels which makes it look a little odd. I suggest to shrink it to 1px.

Should I spin it off into a separate bug?

Comment 26

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

> The white space between the gray borders has a height of 2
> pixels which makes it look a little odd. I suggest to shrink it to 1px.

this decision to make it 2px came from beltzner / mconnor, so this is now "by design".  mike, can you elaborate on why 2px is better?

Comment 27

[ronin.achilles]

(In reply to comment #26)
> > The white space between the gray borders has a height of 2
> > pixels which makes it look a little odd. I suggest to shrink it to 1px.
> 
> this decision to make it 2px came from beltzner / mconnor, so this is now "by
> design".  mike, can you elaborate on why 2px is better?
> 

Actually now, after the new images, I think the whole Tabstrip + Tabs + the White Strip play well with each other look very nice the way they are now. I would think we should leave it at what it is. It is looking good.

Comment 28

[Bryan]

Is it me or does it appear that the new tab strip is looking so good now that it's beginning to make the rest of the theme look "sub-par".  It now looks like the tab strip is way out of place considering the rest of the theme.

Don't get me wrong the tab strip looks awesome and is coming along nicely, it's just now it looks out of place with the rest of the theme.

~B

Comment 29

[ronin.achilles]

(In reply to comment #28)
> Is it me or does it appear that the new tab strip is looking so good now that
> it's beginning to make the rest of the theme look "sub-par".  It now looks like
> the tab strip is way out of place considering the rest of the theme.
> 
> Don't get me wrong the tab strip looks awesome and is coming along nicely, it's
> just now it looks out of place with the rest of the theme.
> 
> ~B
> 

:-) Yes, I would agree. Tabstrip looks really good now. IMO the first thing we should do is make the toolbar icons a little more bright. A simple solution would be to make the current 'hover' state as normal state and the current normal state as the 'hover' state. It will look much better.
File a bug?

Comment 30

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

fixed on pinstripe, too (with the landing of the images and css from bug #350139)

Comment 31

[Peter Kasting]

(In reply to comment #26)
> this decision to make it 2px came from beltzner / mconnor, so this is now "by
> design".  mike, can you elaborate on why 2px is better?

Yeah, I'm curious about this; beltzner's feelings on Tuesday when I had talked to him were very much "keep it like 1.5", i.e. 1 px, and I certainly prefer the 1 px version in the comparison screenshot.  It'd be nice to know what changed, even if that's only "2 px just looked better once we tried it".

Comment 32

[Dão Gottwald [:dao]]

With transparent tabs (bug 350690), it doesn't seem possible to me to connect the active tab with the white strip. What I would do:

- remove .tabs-bottom

- add this to global/browser.css:
  .tabbrowser-tabs {
    border-bottom: 2px solid;
    -moz-border-bottom-colors: ThreeDShadow ThreeDHighlight;
  }

Comment 33

[Dão Gottwald [:dao]]

(In reply to comment #32)
> - remove .tabs-bottom
> 
> - add this to global/browser.css:
>   .tabbrowser-tabs {
>     border-bottom: 2px solid;
>     -moz-border-bottom-colors: ThreeDShadow ThreeDHighlight;
>   }

--> attachment 236835 [details]