Problem reducing Tab Height with multiple rows.

[Borgata]

I always modified my Firefox Layout in order to fit it to my needs.
With Australis and the changes that the new style brought with it, I had to work a lot to obtain a satisfying result. This is the result.
It is obtained using the "Classic Theme Restorer" addon ad a bunch of code through "Stylish".

And now the problem.
I use "Tab Mix Plus" and I setted the tab bar so that, id there are many tabs, it increases its height up to 3 lines.
Unfortunately the code I use prevent the tab-bar to show tabs for more than one single line, like in this screenshot (where you can see only the last three tabs in the third line, instead then all seventy tabs on three lines).

It seems I was able to obtain the result working on the tabs container (#tabbrowser-tabs) instead than every single tab. And that causes the problem.
I made some tests trying to move the constraint from the tabs container to the single tabs, but I had no fortune.
Any idea on how to solve this problem?

Here is the code I'm using:

Code: Select all

/*AGENT_SHEET*/

/*Bars - Menubar*/
#main-window[sizemode="normal"] #toolbar-menubar[inactive][autohide="false"] {
  margin-top: 2px !important;
}
#main-window[sizemode="normal"] #toolbar-menubar:not([inactive])[autohide="true"] {
  margin-top: 2px !important;
}
/*
#main-window:not([windowtype="navigator:browser"]) #TabsToolbar {
    margin-top: 1px !important;
}
*/

/*Bars - Tabbar*/
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] ~ #TabsToolbar {
  margin-top: -3px !important;
  margin-right: -2px !important;
}
#main-window[sizemode="normal"] #toolbar-menubar[inactive][autohide="false"] ~ #TabsToolbar {
  margin-top: -3px !important;
}
#main-window[sizemode="maximized"] #TabsToolbar {
  margin-top: 1px !important;
}
#main-window #TabsToolbar {
  color: black !important;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAGUlEQVQImWP4////f6arF08yMDEwMAwWAgC5gAamoilcUAAAAABJRU5ErkJggg==") !important;
  background-repeat:repeat-x !important;
}
#main-window #titlebar-buttonbox-container{
  visibility: collapse !important;
}
#toolbar-menubar { 
  color: black !important;
  background-color:#D4D0C8 !important;
}
/*#main-window #titlebar {
  -moz-appearance: none !important;
}*/

/*Tabs*/
#main-window #TabsToolbar #tabbrowser-tabs{
  min-height: 0 !important;
  max-height: 24px !important;
  padding-bottom: 1px !important;
}
.tabbrowser-tabs .tabs-closebutton {
  margin-top: -5px !important; 
  margin-right: -1px !important; 
}
.tabbrowser-tab {
  padding-top: 0px !important;
  margin-left: 1px !important;
}
.tabbrowser-tab .tab-protect-icon,
.tabbrowser-tab .tab-lock-icon,
.tabbrowser-tab .tab-icon-image,
.tabbrowser-tab .tab-throbber, 
.tabbrowser-tab .tab-image-right,
.tabbrowser-tab .tab-close-button {
  margin: -3px -1px 0 -1px !important;
}
.tabbrowser-tab .tab-text {
  margin-top: -3px !important;
}

/* Progress-bar gradient background in tab */
#tabbrowser-tabs .progress-bar {
  margin-left: -4px !important;
  margin-right: -4px !important;
  border-radius: 2px !important;
  min-height: 18px !important;
  background-image: linear-gradient(to left, #225577 0%, #88BBDD 100%) !important;
}

NOTE: this code works with Windows XP Classic theme, for other OS or Themes there are some modifies to do!

[therube]

Tab height increased in Firefox 31

[Borgata]

Hi, thanks for the answer.
I read the topic you linked me, and it seems it deal with a different matter (although there are some common points):
There the user complains about a visualization problem due to Firefox 31 while I've not such a problem, my issue is due to the code I used to make Firefox Tabs more compact since Firefox 29, and I'm looking for a different code that grants the same result but don't show the problem described above when Tabs are displayed on multiple rows.

Anyway I took a look at other links in the discussion and tried to use #TabsToolbar instead than #tabbrowser-tabs.
Probably it is not the right way, but I obtained a slightly better result: a single line of tab is displayed again, but without the blank space on the bottom.
It seems that "height" and "max-height" properties are referred to ALL the lines of tabs. When the line is only one it is not a problem, but when are there are more than one lines, there is the space to show only a single one of them.

Then I tried #tabbrowser-tabs *|tabs, it was promising and seems to correctly act on single tabs. Unfortunately the height of the tab bar increases when there is more than one row, so I've short tabs inside a space that is too hight for them. Beside there are a bit of graphical issues as you can see here.
Maybe this is the right way, but need a lot of... fix!

Any other idea?

[Borgata]

Any suggestion will be appreciated.

I hoped that some user more expert than me in firefox layout could point me in the right direction.

[dfoulkes]

Not sure if you saw this... but there's a ton of code in it for "maybe" your issue?
Australis Ico/Text, Text Only and more... • mozillaZine Forums

That's all that I have.

[Borgata]

Hi, thanks for the link, I'll take a look at it too.
I already searched a lot before posting here, and played with the CSS in order to write the code that is reported above.

Now I need a bit of help to make a fine tuning of it and solve the problem described above.
So I hoped in someone that wants to work a bit on my CSS or could give me some specific suggestion.

[Borgata]

Finally I had the time to look at the topic linked above.

The first solution proposed (page 1) uses tabbrowser-tabs, exactly as in my script, so I discarded it. Same thing at page four, six and eight.
I will test some little interesting things I found, anyway.

Maybe I should propose my problem in that post? I don't want to crosspost, but maybe a small report could be tolerable.

[dfoulkes]

Maybe I should propose my problem in that post? I don't want to crosspost, but maybe a small report could be tolerable.

Depending on how you post there... you know.... don't make it a huge issue... maybe post this link so that you don't duplicate your efforts... I would think it would work for you.

Also, Morat and dickvl ... and Frank ... seem to be huge on that coding... maybe a PM to one of them might be a better road to follow.

[Borgata]

Thanks.

I think that private messages can be an excessive bother, so I'll post a link to this discussion in the other topic.

[dickvl]

I'm not using Tab Mix Plus, so I don't know how it code multiple tab bars.
You would have to check the DOM with the DOM Inspector to see what elements need adjusting
https://addons.mozilla.org/firefox/addo ... ctor-6622/
https://developer.mozilla.org/DOM_Inspe ... _Inspector

The default code is in this file that you can open via the location bar for inspection
chrome://browser/skin/browser.css

Look for code that is about #tabbrowser-tabs and .tabbrowser-tab and .tab-background and that sets a height or minimum height