MozillaZine

Problem reducing Tab Height with multiple rows.

User Help for Mozilla Firefox
Borgata
 
Posts: 59
Joined: March 12th, 2005, 4:23 pm
Location: Italy

Post Posted August 3rd, 2014, 3:03 pm

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!
Last edited by Borgata on August 7th, 2014, 1:04 am, edited 3 times in total.

therube

User avatar
 
Posts: 18321
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted August 4th, 2014, 8:08 am

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript

Borgata
 
Posts: 59
Joined: March 12th, 2005, 4:23 pm
Location: Italy

Post Posted August 4th, 2014, 9:11 am

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
 
Posts: 59
Joined: March 12th, 2005, 4:23 pm
Location: Italy

Post Posted August 7th, 2014, 3:23 am

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

User avatar
 
Posts: 22194
Joined: June 28th, 2008, 10:31 pm
Location: Mesquite, Nevada

Post Posted August 7th, 2014, 9:11 am

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.
As you can see she's (The CAT) always alert and on the prowl for Meoware !!

Borgata
 
Posts: 59
Joined: March 12th, 2005, 4:23 pm
Location: Italy

Post Posted August 7th, 2014, 11:15 am

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
 
Posts: 59
Joined: March 12th, 2005, 4:23 pm
Location: Italy

Post Posted August 11th, 2014, 3:13 am

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

User avatar
 
Posts: 22194
Joined: June 28th, 2008, 10:31 pm
Location: Mesquite, Nevada

Post Posted August 11th, 2014, 7:41 am

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.
As you can see she's (The CAT) always alert and on the prowl for Meoware !!

Borgata
 
Posts: 59
Joined: March 12th, 2005, 4:23 pm
Location: Italy

Post Posted August 11th, 2014, 8:45 am

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

User avatar
 
Posts: 52329
Joined: July 18th, 2005, 3:25 am

Post Posted August 11th, 2014, 7:16 pm

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

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 7 guests