Customizing TabKit 2nd Edition

[Theo]

I show how I customized the appearance of the vertical tab bar in the hope it is useful for others. I wanted to use the available space more efficiently, so I adjusted the space used by every tab. Also, the rounded edges on top of the tabs are inappropriate when the tabs are aligned vertically, so I removed them. For this purpose I put the following code into the file chrome/userChrome.css (under my Firefox profile directory):

/* set border width and remove rounded edges */
.tabbrowser-tab[pinned] {
    border: 2px solid rgba(200,0,0,0.0) !important;
    border-radius: 0 !important;
}
.tabbrowser-tab:not([pinned]), .tabs-newtab-button {
    border: 2px solid rgba(200,0,0,0.0) !important;
    border-radius: 0 !important;
}

/* set tab text size*/
.tabbrowser-tab .tab-text {
  font-size: 14px !important;
}

/* set tab height */
/* https://github.com/PikachuEXE/tabkit2/blob/master/content/tabkit.css */
#TabsToolbar[vertitabbar] .tabbrowser-tab {
  -moz-box-sizing: padding-box !important;
  min-height: 18px !important;
  max-height: 18px !important;
}

[PikachuEXE]

Can you post a screenshot of the result?

I can add the change into TK2 if they looks good

But notice the look of tabs in OSX is slightly different

[Theo]

I use Firefox for Linux. I appended screenshots of a Firefox window before and after the changes in userChrome.css take effect. The size of the tabs is certainly a matter of personal preference. (I have lots of open tabs, so I want to fit as many tabs as possible into the available space.) The rounded edges without my changes seem to be suitable only for a single-lined horizontal alignment, so it could be a good idea to change that.

[PikachuEXE]

I think I will try to change the round corners of tabs in tab tree
Thanks! :)

[Lio]

Just a suggestion:

I don't like the new layout (I haven't tried myself, I'm talking about firefox_after.png), so I think this should be implemented as an customizable option (for example enable/disable rounded cornes and/or set tab height size).

[Theo]

On a close look it becomes clear that the default border design of the tabs is adapted to a single-lined horizontal alignment: There is no border on the bottom edge and at the bottom left corner the border bends outwards. I'm don't know exactly how to fix this with the help of userChrome.css for a vertical alignment of the tabs and because of TabKit issue 19 it's not easy for me to try it out.

[Theo]

Well, issue 19 was a lame excuse for me not to try it out. Indeed, meanwhile I've been busy and found a way to adapt bordered tabs to the vertical alignment. Put the following code into userChrome.css:

.tabbrowser-tab,
.tabs-newtab-button {
  position: static;
  -moz-appearance: none;
  background: linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,45%,.2) 2px, hsla(0,0%,32%,.2) 80%);
  background-origin: border-box;
/*   background-position: 1px 2px; */
  background-position: 2px 1px !important;
/*   background-size: 100% calc(100% - 2px); */
  background-size: calc(100% - 2px) 100% !important;
  background-repeat: no-repeat;
  color: inherit;
  margin: 0;
  padding: 0;
/*   border-width: 4px 5px 3px 6px; */
  border-width: 6px 3px 5px 4px !important;
  border-style: solid;
/*   -moz-border-image: url(tabbrowser/tab.png) 4 5 3 6 fill repeat stretch; */
  -moz-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMCAQAAAAjMu5zAAAAAXNSR0IArs4c6QAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QIYFhsy9FPMmQAAAMJJREFUKM+NkTFqAlEQhr958wSNLKtbJAQ2EMTGG20n6cXWM3iTnGQvkAukSJVAjIW7iO48C5eoWOz7fgam+Kb5RwBB6eHxOASHtLnelJSp3wuCp88LzyTtkf7POQ5FvWTfRSkoA2ajZLmd15MjDUbAMIyKWwLmUZ5GycdfvqXmiF102XGHR8lWm7xiR6ATh+OhcNRE4RDk1XGI1QPh0+jF6kb1bgxi9Ybf9fhryBDt1tveH9PF5q3OO3uP/yrZT1GeAIgbPqkgZXo8AAAAAElFTkSuQmCC) 6 3 5 4 fill stretch repeat !important;
/*   border-radius: 10px 8px 0 0; */
  border-radius: 10px 0 0 8px !important;
  min-height: 25px; /* reserve space for the sometimes hidden close button */
}

This code was taken from the browser.css for linux. The lines with !important have been changed by me. The original lines are commented out. The file tabbrowser/tab.png can be viewed under the address chrome://browser/skin/tabbrowser/tab.png in Firefox. I appended this file and the modified version (included as base64 coded data into userChrome.css) for the vertical tab bar. Also attached are samples of the tab bar before and after my modifications.

[PikachuEXE]

I will try to focus on fixing Issue 19 first = ="

[Lio]

Now is better!
But when the vertical tab bar is on the right side what is the layout?
I think you must change the round borders from "(" to ")"
Anyway I continue to prefer the old style (tabs_before.png), so please, give us an option to revert to the old style.

[Theo]

There is a little problem with my code: The tab icon and text is no longer centered. The reason is the changed order of the border widths. This can be fixed easily by including the following code:

.tabbrowser-tab .tab-content {
  margin-top: -2px !important;
  margin-left: 2px !important;
}

 
The new after sample is attached.

[Theo]

On Monday, February 25, 2013 12:36:12 AM UTC+1, Lio wrote:

Now is better!
But when the vertical tab bar is on the right side what is the layout?
I think you must change the round borders from "(" to ")"

I don't think so, because the direction of indentation (to the right) is the same for the tab bar on the right side of the window.
 

[gra...@gmail.com]

Hurray for the higher-density tabs!!
Rounded corners look better imho but I don't really care, it is just eye-candy.
But the option to see more tabs on screen is great!
Thank you.
PS care to post a complete, finalised, set of code lines?

[PikachuEXE]

Any style example ?_?

gra...@gmail.com於 2013年6月4日星期二UTC+8上午9時38分04秒寫道：

[laure.r...@gmail.com]

Same idea here,

In order to see more tabs rather than scroll, I eventually found out that you only need to change one line in tabkit.css

and then I came here...

#TabsToolbar[vertitabbar] .tabbrowser-tab {
  -moz-box-sizing: padding-box !important;

  min-height: 14px !important;   <=== this used to be 27px. 14px is a bit over the top but it works. Any hope for an entry to choose this field's value in tabkit's preferences menu?
  max-height: 27px !important;
}

Keeping 27px max makes the tabs' height normal if you have just a few, and then they start shrinking in height if you have more and they don't fit.

tabkit rocks!!

Yay!

[PikachuEXE]

Haven't tested it yet
But I have to add an option for this :P (if this works)

[PikachuEXE]

Please start an issue on Github if you want it to be added to TK2

PikachuEXE於 2013年7月30日星期二UTC+8上午9時28分28秒寫道：