Custom Tabs Not Shifting Left On Closure - just on one Win 7 machine?
I have some custom CSS in my userChrome.css file to place tabs on bottom, and give them rounded corners.
But there is a functionality problem when closing tabs on one particular Win 7 machine. All other Win 7 machines work fine with same userChrome.css, both in 32 and 64-bit versions.
Normally, remaining tabs shift to the left when tabs are closed.
On this one particular machine, when a tab is closed, remaining open tabs stay in the same position, without shifting left to close the empty space.
Please see attached images, first from a properly functioning installation, as 3 tabs are first opened, and then 2 tabs are closed. On a second machine, the remaining tabs stay put and do not close the gap.
Note that I simply copied my "chrome" directory from a working machine to the "profile" directory of the second machine, expecting it to work without modification.
Any help is appreciated!
Here is my tab CSS...
/* ------------- TABS ON BOTTOM ----------- */
/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar - icons with text */ /* swap */
-moz-box-ordinal-group: 1 !important;
box-shadow: none !important;
background-color: #cddaea !important; /* was e3eefa */
}
#PersonalToolbar { /* bookmarks toolbar */
-moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
-moz-box-ordinal-group: 3 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
height: 25px !important;
background-image: url("bkmr_back.gif");
border-top: 1px solid #afc0d2 !important;
border-bottom: 1px solid #8698aa !important;
}
/* Change the color of selected tab */
.tab-background[selected="true"] {
background-attachment: none!important;
background-image: none!important;
background-color: #eef5fc !important;
}
/* Change text attributes of selected tab */
#TabsToolbar .tabbrowser-tab[selected] {
font-weight: 800 !important;
color: #000 !important;
}
#TabsToolbar .tabbrowser-tab:not([selected]) {
font-weight: 600 !important;
color: #000 !important;
}
/* Change the color of non-selected tab */
.tab-background:not([selected]) {
color: #000000 !important;
background-color: #c7d3e0 !important;
}
/* Change color of non-selected tab text */
#TabsToolbar .tabbrowser-tab:not([selected]) {
color: #000000 !important;
}
#toolbar-menubar, #menubar-items, #main-menubar { /* swap */
background-color: #cddaea; /* was e6f0fb */
}
/* Clean up spacing */
.titlebar-placeholder {
display: none !important;
}
toolbarbutton.bookmark-item {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar,
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
background-color: var(--chrome-secondary-background-color) !important;
background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
/* Vertical toolbar border */
#main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
background-clip: padding-box;
}
}
/* Override vertical shifts when moving a tab (9 Jan 2018) */
#TabsToolbar[movingtab] {
padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
margin-top: 0 !important;
}
/* ------------------ TABS ON BOTTOM END ----------------------------- */
/* ----------------- ROUNDED TABS -----------------*/
/* tab top border roundness - rounded */
#TabsToolbar .tabs-newtab-button,
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
border-top-left-radius: 2px !important;
border-top-right-radius: 2px !important;
border-color: #868b98 !important;
}
/* remove colored line above each tab */
#TabsToolbar .tabbrowser-tab .tab-line {
visibility: hidden;
}
/* ----------------- ROUNDED TABS END -----------------*/
/* ----------- Tab widths shrink as more are added, avoiding overflow scroll buttons ------------- */
.tabbrowser-tab:not([pinned]) {
max-width: 248px !important;
min-width: 40px !important;
}
/* ----------- Tab widths shrink END ---------------- */
Modified by Slouch
Chosen solution
These rules cause the gap problem on mine when closing tabs -- even with none of the other rules. If I remove them the problem goes away:
/* ----------- Tab widths shrink as more are added, avoiding overflow scroll buttons ------------- */
.tabbrowser-tab:not([pinned]) {
max-width: 248px !important;
min-width: 40px !important;
}
/* ----------- Tab widths shrink END ---------------- */
Try this -- the idea is not to preserve ghost space for hidden tabs:
/* ----------- Tab widths shrink as more are added, avoiding overflow scroll buttons ------------- */
.tabbrowser-tab:not([pinned]):not([collapsed="true"]) {
/*! max-width: 248px !important; */
/*! min-width: 40px !important; */
}
/* ----------- Tab widths shrink END ---------------- */
Read this answer in context
👍 0
All Replies (8)
Hi, there was some code change in ver 60 possibly 61.
Please remove your userChrome folder and test with out it.
If that is the issue you will need to figure out some new code.
See if changes :
This was updated :
Please let us know if this solved your issue or if need further assistance.
Tabs work fine without userChrome.css.
The problem only exists on a single Windows 7 machine, and it happens in both the 32 and 64-bit versions.
The FF version doesn't seem to matter either, as it happens in versions 58 through 61.
All my other FF installations on Windows 7 machines work fine (both 32 and 64-bit).
I've uninstalled and reinstalled FF 3 times, even created a new default profile, and copied over the entire "chrome" directory each time. But same anomaly.
Really stumped here.
Modified by Slouch
Suluhisho teule
These rules cause the gap problem on mine when closing tabs -- even with none of the other rules. If I remove them the problem goes away:
/* ----------- Tab widths shrink as more are added, avoiding overflow scroll buttons ------------- */
.tabbrowser-tab:not([pinned]) {
max-width: 248px !important;
min-width: 40px !important;
}
/* ----------- Tab widths shrink END ---------------- */
Try this -- the idea is not to preserve ghost space for hidden tabs:
/* ----------- Tab widths shrink as more are added, avoiding overflow scroll buttons ------------- */
.tabbrowser-tab:not([pinned]):not([collapsed="true"]) {
/*! max-width: 248px !important; */
/*! min-width: 40px !important; */
}
/* ----------- Tab widths shrink END ---------------- */
Hi jscher2000...
Yes, that code solved the issue on the problem machine.
The question is, why does the original version work on several other machines, all with FF version 61, 64-bit, but not on the problem machine which has the same FF version and same userChrome.css?
Thank you for responding :)
Modified by Slouch
Why are the others different? I don't know. When I close a tab in Firefox 61 (64-it/Win 7), it remains on the bar in a collapsed state, presumably for easy "undo." Maybe your session/history settings are different on the other computers??
Hi jscher2000,
Can you please speculate on why the code below (with your modification) would work perfectly on my 32-bit machine (the tabs show the max width of 248, plus shrink and expand as needed without displaying overflow arrows, the gaps close up perfectly, and the alternate "new tab" button is not displayed)... but not on my 64-bit machine?
On the 64-bit machine, I have the gaps displayed where tabs were closed.
As far as I can see, everything between the 2 machines is the same, including the about:config settings, and the "chrome" directory.
The only difference is one machine is 32-bit Win7, and the other 64-bit Win7.
If I omit the code, the 32-bit machine will display overflow arrows and the alternate "new tab" button, but the max width of 248 is shown. I prefer the wider tabs to be able to read more of the labels when space permits.
If I omit the code on the 64-bit machine, the remaining tabs adjust automatically to fill the tab bar when tabs are closed (no gaps), but the tabs are narrower than I'd like, displaying less label text.
I would love to find a setting somewhere that accounts for the different behavior.
Here's the code again, with your mods...
/* ----------- Tab widths shrink as more are added, avoiding overflow scroll buttons -------- jscher2000 6/29/18 ----- */
.tabbrowser-tab:not([pinned]):not([collapsed="true"]) {
max-width: 248px !important;
min-width: 40px !important;
}
/* ----------- Tab widths shrink END ---------------- */
Modified by Slouch
I tested in 64-bit Fx on 64-bit Win7. There should be no difference between 32-bit Firefox and 64-bit Firefox related to the tab bar style rules/behavior given the same theme, screen resolution, etc.
There is a brief transition when a tab is closed. Perhaps it would help to get rid of the transition. However, I can't look into it this weekend.