search

piroor / treestyletab

Tree Style Tab, Show tabs like a tree.
http://piro.sakura.ne.jp/xul/treestyletab/
Other
3.46k stars 277 forks source link

Side Bar weird looking now after update #1072

Closed ng4ever closed 8 years ago

ng4ever commented 8 years ago

After updating to the latest Tree Style Tab my side bar now looks like this. Anyway to fix it please ?

http://i.imgur.com/Qh845ft.jpg

phorham commented 8 years ago

Confirmed... Also seeing this behaviour since the update to 0.16.2016021602 (Attached screenshot)

http://paste.opensuse.org/view/raw/ce94a338

piroor commented 8 years ago

Do you use a secret preference extensions.treestyletab.tabbar.style.aero=true on about:config?

ng4ever commented 8 years ago

No mine is set to false.

piroor commented 8 years ago

Hmm, then, any userChrome.css?

ng4ever commented 8 years ago

Nope no userChrome.css

phorham commented 8 years ago

In my case: extensions.treestyletab.tabbar.style.aero = false

I have the following in userChrome.css 

/*
 * ==== styles for TreeStyleTabs ====
 */

/*
 * background colour to match openSUSEgreen theme
 */
.tabbrowser-tabs[treestyletab-mode="vertical"] {
  background: #EFF9E4 !important; }
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] {
  background: #A9CE80 !important; } 

/*
 * basic tab style
 */
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab {
  border: solid #DDF1C7 1px !important;
  margin-top: 0px !important; /* cannot change top margin, breaks pinned tabs */
  margin-right: 0px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important; } 

/* 
 * apply gradient to selected tab background
 */
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[selected='true'] {
  background: linear-gradient(#9EBA95, #E6F0DF) !important;
  border: solid green 1px !important;
  border-radius: 6px !important; } 

/* 
 * apply partial border to unselected tab background - need to move right margin
 * to avoid 1px gap, moved back on hover.
 */
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab:not([selected='true']) {
  border-bottom: solid #A9CE80 1px !important;
  border-left: solid #A9CE80 1px !important;
  margin-right: -1px !important; } 

/*
 * apply hover effects
 */
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[selected='true']:hover {
  border: solid black 1px !important;
  border-radius: 6px !important;
  background: -moz-menuhover !important;
  color: -moz-menuhovertext !important; }

.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab:not([selected='true']):hover {
  border: solid black 1px !important;
  margin-right: 0px !important;   /* move margin back */
  border-radius: 6px !important;
  background: -moz-menuhover !important;
  color: -moz-menuhovertext !important; }

/*
 * ==== end styles for TreeStyleTabs ====
 */

I hope that's readable :)

(how does one post code on this forum?)

phorham commented 8 years ago

Correctly formatted userCrome.css here:

http://paste.opensuse.org/view/raw/f2d20e00

piroor commented 8 years ago

@phorham Thanks. If the lighter background of the tab bar is from your userChrome.css, then you need to override style definitions introduced by these commits:

ng4ever commented 8 years ago

Ok but I have no idea what that means ? Please help. Thanks.

piroor commented 8 years ago

@ng4ever Thanks. Do you use any third party's theme? And, do you activate the "auto hide tab bar" feature?

ng4ever commented 8 years ago

No third party theme. No I do not activate the auto hide tab bar.

Thanks.

ng4ever commented 8 years ago

Here a list of my addons installed

piroor commented 8 years ago

@ng4ever Please see the guideline: https://github.com/piroor/treestyletab/blob/master/CONTRIBUTING.md I'm very sorry but I have no time to try all combinations of your addons.

piroor commented 8 years ago

@phorham For example:

.tabbrowser-tabs[treestyletab-mode="vertical"] .scrollbox-innerbox {
  background: linear-gradient(to right,
                              #EFF9E4 0%,
                              #EFF9E4 10%,
                              rgba(0,0,0,0) 11%,
                              rgba(0,0,0,0) 100%) !important;
}
ng4ever commented 8 years ago

phorham did piroor fix help you ?

ng4ever commented 8 years ago

piroor ok thanks. I may just shrink the side bar to not see the difference. I hope I don't have to though.

ng4ever commented 8 years ago

Good news I think I found the culprit addon. Classic Theme Restorer.

When I disable it the side bar looks normal again.

piroor commented 8 years ago

Good news I think I found the culprit addon. Classic Theme Restorer.

@ng4ever Thanks!

phorham commented 8 years ago

@piroor OK Many Thanks... :)

I've not time to try that now, I'll look at it tomorrow.

ng4ever commented 8 years ago

Ok your welcome. Hope to hear from you tomorrow!

I messaged Classic Theme Restorer developer as well.

piroor commented 8 years ago

Anyway this problem is a "regression" introduced by these commits;

They are introduced to solve #240. So I think I have to give up the "improvement"...

ng4ever commented 8 years ago

Good news piroor I fixed the issue with a Classic Theme Restorer option thanks to Aris!

I used remove tabs toolbar background (toolbars 3 category) option and it works!

piroor commented 8 years ago

After 172df77, this problem seems disappeared for me.

phorham commented 8 years ago

@piroor

Yes, additional css to override style definitions for the commit to solve #240 works OK.

I see that now I probably don't need it after the above commit :)

I'll leave it in place until that commit makes it's way into a release on AMO

Again, many thanks for your work.