Closed Bug 579732 Opened 14 years ago Closed 14 years ago

Make the tab bar look better in the default theme, including in lwthemes

Categories

(SeaMonkey :: Themes, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
seamonkey2.1a3

People

(Reporter: kairo, Assigned: kairo)

References

(Blocks 1 open bug)

Details

Attachments

(2 files, 2 obsolete files)

The tab bar in the default theme could profit from some a slight visual overhaul, esp regarding the padding and border at the bottom of the tabbrowser-strip, which looks quite bad in lwthemes but also could looks nicer in normal default theme, we probably should take a look at Firefox ad Thunderbird there.
Blocks: 579734
This patch makes tabbrowser appear slicker, taking a lot of the style rules from what Firefox uses in winstripe. Also, the border of #content doesn't really look fitting to current theming across platforms any more.
With open sidebar, this could look better on my Linux installation, but IMHO, that would need different styling of the sidebar or splitter, but the content area looks better without this border, esp. with hidden sidebar.
Assignee: nobody → kairo
Status: NEW → ASSIGNED
Attachment #459170 - Flags: review?(neil)
Comment on attachment 459170 [details] [diff] [review]
v1: make tabbrowser appear slicker

I'm not sure how but this actually makes tabs appear differently with and without lwthemes applied, and I'm not convinced either appearance is correct...
Attached image Screenshots (obsolete) —
1. Classic theme only.
2. Lightweight theme. Note that lightweight themes turn off the bottom border of the toolbox (and in fact all of the toolbar borders that Classic has; bug filed)
3. Patch with Classic. Note a) the misposition of the white line b) the tab touches the toolbox.
4. Patch with Lightweight. Since lightweight themes turn off toolbox borders, we don't suffer from b) above, but now the box-shadow suddenly takes effect?
Comment on attachment 459170 [details] [diff] [review]
v1: make tabbrowser appear slicker

I don't have a problem with the content area borders going away as long as the other border issues can be fixed appropriately.
Attachment #459170 - Flags: review?(neil) → review-
(In reply to comment #4)
> I don't have a problem with the content area borders going away as long as the
> other border issues can be fixed appropriately.

And "the other border issues" are what exactly? OK, after long studies of what the screen shot actually shows (some context around the tabbar would have helped) I see the "white line" thing, I *hope* I find some way to reproduce on Linux as GTK seems to have not much borders at all (at least in whatever theming it happens to have selected here, I don't use GNOME).
And what else is there? How does the "tab touches the toolbox" thing compare with Firefox? They have the zero-margin there as well...
(In reply to comment #5)
> And "the other border issues" are what exactly?
Comment #3 was supposed to describe them.

> And what else is there? How does the "tab touches the toolbox" thing compare
> with Firefox? They have the zero-margin there as well...
They basically have completely custom toolbars which have no borders at all, with or without lightweight themes.
(In reply to comment #6)
> > And what else is there? How does the "tab touches the toolbox" thing compare
> > with Firefox? They have the zero-margin there as well...
> They basically have completely custom toolbars which have no borders at all,
> with or without lightweight themes.

Hmm, I see, they have an explicit rule to turn off any toolbar borders in browser.css - I guess breaking native look in cases where those borders natively exist is nothing they care about - or are borders overwritten by -moz-appearance anyhow?
OK, I could track down the bottom line problem to differences between winstripe and gnomestripe tabbox.css and hope to have fixed them now - I hope that it looks good on Windows as well. For the tab touching the box, I added a padding on tabbrowser-strip, I hope that helps there.
Attachment #459170 - Attachment is obsolete: true
Attachment #460235 - Attachment is obsolete: true
Attachment #461726 - Flags: review?(neil)
Comment on attachment 461726 [details] [diff] [review]
v1.1: hopefully make Windows look good as well

>+  -moz-box-shadow: 0px -1px ThreeDShadow inset;
So what this actually does is to give us a 1px ThreeDShadow bottom border under the content (i.e. not taking up space). Not intuitive.
(In reply to comment #9)
> >+  -moz-box-shadow: 0px -1px ThreeDShadow inset;
> So what this actually does is to give us a 1px ThreeDShadow bottom border under
> the content (i.e. not taking up space). Not intuitive.

Looks like that - should I add a comment explaining that?
(In reply to comment #8)
> For the tab touching the box, I added a padding
> on tabbrowser-strip, I hope that helps there.
That probably explains what the padding on .tabbrowser-tabs was for.

(From update of attachment 461726 [details] [diff] [review])
> .tabbrowser-strip {
>-  padding-bottom: 3px;
>-  border-bottom: 2px solid;
>-  -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
>+  min-height: 0px;
>+  padding: 1px 0px 0px;
>+  -moz-box-shadow: 0px -1px ThreeDShadow inset;
> }
> 
> tabpanels {
>   -moz-appearance: none;
> }
> 
>-.tabbrowser-tabs {
>-  padding-top: 1px;
>-}
So in theory you should be able to undelete this and delete the strip padding.

(In reply to comment #10)
> (In reply to comment #9)
> > >+  -moz-box-shadow: 0px -1px ThreeDShadow inset;
> > So what this actually does is to give us a 1px ThreeDShadow bottom border under
> > the content (i.e. not taking up space). Not intuitive.
> Looks like that - should I add a comment explaining that?
Might be an idea, I don't want to look that up again ;-)
Also, when I said under the content, I meant the content of the tabstrip, meaning the tabs themselves, with their 1px bottom margin, of course.
Attachment #461726 - Flags: review?(neil) → review+
Thanks, pushed as http://hg.mozilla.org/comm-central/rev/bc2cd970de92
Status: ASSIGNED → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Target Milestone: --- → seamonkey2.1a3
I like it that the additional separator between the new find-in-message bar
and the tab bar is gone, but it looks a bit weird that there is no separation whatsoever now between the tab bar (or the find bar if no tabs are present)
and the content. That's particularly when a disabled textbox is at the border, displayed in the same dialog background without any line inbetween.
Well, actually, not having any border between the active tab and the page is one of the intended things here and not a side-effect. ;-)

What concerns me is that the inactive tab looks wrong to me, it should have the same border at the bottom as the empty space at the left, but have no white border at its bottom. Maybe native theming causes us to mess up there? :(

The find bar looks strange to me, I think it has borders on the wrong side, it should at least not have this fat border at the top...
You need to log in before you can comment on or make changes to this bug.