Last Comment Bug 579732 - Make the tab bar look better in the default theme, including in lwthemes
: Make the tab bar look better in the default theme, including in lwthemes
Status: RESOLVED FIXED
:
Product: SeaMonkey
Classification: Client Software
Component: Themes (show other bugs)
: unspecified
: All All
: -- normal (vote)
: seamonkey2.1a3
Assigned To: Robert Kaiser
:
:
Mentors:
Depends on: SM-lwtheme
Blocks: 579734
  Show dependency treegraph
 
Reported: 2010-07-18 07:48 PDT by Robert Kaiser
Modified: 2010-08-03 06:28 PDT (History)
7 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
v1: make tabbrowser appear slicker (2.21 KB, patch)
2010-07-21 15:09 PDT, Robert Kaiser
neil: review-
Details | Diff | Splinter Review
Screenshots (25.31 KB, image/png)
2010-07-26 05:47 PDT, neil@parkwaycc.co.uk
no flags Details
v1.1: hopefully make Windows look good as well (2.42 KB, patch)
2010-07-30 17:52 PDT, Robert Kaiser
neil: review+
Details | Diff | Splinter Review
Appearance using Windows Classic theme (45.34 KB, image/png)
2010-08-03 06:08 PDT, rsx11m
no flags Details

Description Robert Kaiser 2010-07-18 07:48:41 PDT
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.
Comment 1 Robert Kaiser 2010-07-21 15:09:54 PDT
Created attachment 459170 [details] [diff] [review]
v1: make tabbrowser appear slicker

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.
Comment 2 neil@parkwaycc.co.uk 2010-07-26 05:18:15 PDT
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...
Comment 3 neil@parkwaycc.co.uk 2010-07-26 05:47:24 PDT
Created attachment 460235 [details]
Screenshots

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 4 neil@parkwaycc.co.uk 2010-07-26 05:49:09 PDT
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.
Comment 5 Robert Kaiser 2010-07-26 06:14:45 PDT
(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...
Comment 6 neil@parkwaycc.co.uk 2010-07-26 13:29:53 PDT
(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.
Comment 7 Robert Kaiser 2010-07-27 04:59:26 PDT
(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?
Comment 8 Robert Kaiser 2010-07-30 17:52:06 PDT
Created attachment 461726 [details] [diff] [review]
v1.1: hopefully make Windows look good as well

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.
Comment 9 neil@parkwaycc.co.uk 2010-08-01 12:56:29 PDT
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.
Comment 10 Robert Kaiser 2010-08-01 17:49:40 PDT
(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?
Comment 11 neil@parkwaycc.co.uk 2010-08-02 08:18:35 PDT
(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.
Comment 12 Robert Kaiser 2010-08-02 09:23:39 PDT
Thanks, pushed as http://hg.mozilla.org/comm-central/rev/bc2cd970de92
Comment 13 rsx11m 2010-08-03 06:08:59 PDT
Created attachment 462379 [details]
Appearance using Windows Classic theme

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.
Comment 14 Robert Kaiser 2010-08-03 06:28:27 PDT
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...

Note You need to log in before you can comment on or make changes to this bug.