MozillaZine

[SOLVED] CSS customization for tab width now leaves gaps

User Help for Mozilla Firefox
Da Rossa

User avatar
 
Posts: 175
Joined: June 22nd, 2006, 2:03 am

Post Posted July 27th, 2019, 7:51 pm

Until some past Firefox version, I used to use this nice userChrome.css addition to make my tabs wider:
Code: Select all
.tabbrowser-tab:not([pinned]) {
max-width: 100% !important;
min-width: 140px !important;
}


...and the effect was awesome: when only a few tabs were open, they took a good space so that I could read their titles; when I had a lot of them, they would just shrink without activating the < and > buttons to cycle.

Now that CSS works erratically: I can set some higher value for the min-width, but if I close a tab from the middle of the bar, it will leave the space open and empty, without the remaining tabs automatically resizing to fill that void:

Image

What should I do? :)
Last edited by Da Rossa on July 29th, 2019, 1:39 pm, edited 1 time in total.

Brummelchen
 
Posts: 4422
Joined: March 19th, 2005, 10:51 am

Post Posted July 27th, 2019, 11:45 pm

try

.tabbrowser-tab:not([pinned])
{
max-width: 140px !important;
min-width: 140px !important;
}

the current definition contains

max-width: 225px;
min-width: var(--tab-min-width);

per cent is never good as long you dont know the upper containers width.

Da Rossa

User avatar
 
Posts: 175
Joined: June 22nd, 2006, 2:03 am

Post Posted July 28th, 2019, 1:31 am

I already did. So I took your code and changed slightly to this:

Code: Select all
.tabbrowser-tab:not([pinned])
{
max-width: 800px !important;
min-width: 140px !important;
}


Look at the behaviour in three parts in this short screencast:
1 - opening tabs - everything works as expected: the width reduces on demand;
2 - closing tabs - something wrong there: it's leaving gaps;
3 - opening tabs after closing some: tabs open at wrong positions.

What can be wrong? Maybe a about:config I messed?

Image

Brummelchen
 
Posts: 4422
Joined: March 19th, 2005, 10:51 am

Post Posted July 28th, 2019, 2:42 am

try safe mode and kick all other css code.
your code above is NOT responsible for gap!

value in prefs is this one

min-width: var(--tab-min-width);

thats reason why firefox is using such "value", min-width dont need any specific value if you have set it in prefs.

Da Rossa

User avatar
 
Posts: 175
Joined: June 22nd, 2006, 2:03 am

Post Posted July 28th, 2019, 6:32 pm

OK I ran Firefox on safe mode, but the userChrome.css doesn't activate in that mode.

I took out all of my CSS additions and tried. Then I reinserted each one to see if they could create a problem. The problem only reemerged when I inserted the piece of code in question.

Then I manually disabled all my extensions. Still, the behaviour persists.

This is my entire userChrome.css file. The part in question is in the bottom. Can you see if there is anything out of place?

Code: Select all
/* REMOVE CONTEXT MENU ELEMENTS */

#context-navigation, #context-sep-navigation {
    display: none !important
}

#context-savepage, {
    display: none !important
}

#context-selectall, {
    display: none !important
}

#context-savelinktopocket, {
    display: none !important
}

#urlbar {
font-family: Inconsolata, Arial, "Open Sans", monospace !important;
font-size: 1.4em !important;
/* height: 18pt !important;*/
}

/* LEGIBLE TOOLTIP ON BOTTOM LEFT CORNER WHEN HOVERING OVER LINKS */
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
statuspanel {
min-width: 5% !important;
max-width: 90% !important;
pointer-events: none !important
}

#statuspanel-label {
border: none !important;
background: #111 !important;
color: #0F0 !important;
font-family: Inconsolata, monospace !important;
font-size: 1.8em !important;
}

/* BACKGROUND COLOR WHILE LOADING PAGE */
browser {
   background-color: #DDD !important;
}

/* MAX TABS WIDTH */
.tabbrowser-tab:not([pinned])
{
max-width: 600px !important;
min-width: 140px !important;
}

jscher2000

User avatar
 
Posts: 10674
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted July 28th, 2019, 9:35 pm

When you close a tab, the fadein attribute is removed, but collapsed is not always set for some reason, and in that case, this rule makes it invisible:

Code: Select all
.tabbrowser-tab:not([pinned]):not([fadein]) {
  max-width: 0.1px;
  min-width: 0.1px;
  visibility: hidden;
}


However, your rule is overriding the tiny width on that ghost element. To avoid that, only apply your rule to tabs that have a fadein attribute:

Code: Select all
/* MAX TABS WIDTH */
.tabbrowser-tab[fadein]:not([pinned]) {
    max-width: 600px !important;
    min-width: 140px !important;
}

Da Rossa

User avatar
 
Posts: 175
Joined: June 22nd, 2006, 2:03 am

Post Posted July 29th, 2019, 1:38 pm

jscher2000 wrote:When you close a tab, the fadein attribute is removed, but collapsed is not always set for some reason, and in that case, this rule makes it invisible:

Code: Select all
.tabbrowser-tab:not([pinned]):not([fadein]) {
  max-width: 0.1px;
  min-width: 0.1px;
  visibility: hidden;
}


However, your rule is overriding the tiny width on that ghost element. To avoid that, only apply your rule to tabs that have a fadein attribute:

Code: Select all
/* MAX TABS WIDTH */
.tabbrowser-tab[fadein]:not([pinned]) {
    max-width: 600px !important;
    min-width: 140px !important;
}


My God, you're a wizard!!
Thanks jscher2000!

Wiggam72
 
Posts: 380
Joined: July 30th, 2013, 9:05 am

Post Posted August 7th, 2019, 4:49 am

I tried this. I changed the maximum size. The one thing I want to change and don't know how is that once the tabs fill up the screen, it no longer automatically goes to the link that's clicked on. The clicked link stays off the screen and I have to manually navigate to it by putting the cursor on the arrow which is a pain in the rear especially when there are multiple tabs open off the screen.

BTW, in case it matters, I use the extension Open Link in New Tab. https://addons.mozilla.org/en-US/firefo ... n-new-tab/

If I need to post my full script in case something in a prior script is conflicting, please let me know.

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 9 guests