MozillaZine

CSS FF 74 broke Tabs again

User Help for Mozilla Firefox
jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted March 18th, 2020, 9:05 am

When you have too many tabs where it grows beyond the width of the window you have open either in full screen or not it expands the existing tab and somewhat hides the others.

Every time Mozilla makes a new release they seem to change CSS which breaks something else. Any help is appreciated.

Image
https://imgur.com/HTQEfWM

Code: Select all
.browserContainer { background-color: black !important; }

@-moz-document url("about:blank"), url("about:home"), url("about:newtab") {
    body {
        background-color:#000000;
    }
}


/* witdh of the urlbar */
  #PopupAutoCompleteRichResult, #urlbar-results {max-width: 1100px !important;}
  .urlbarView-row-inner {max-width:1000px !important;}
 
  .urlbarView {background: black !important; , border-color: transparent !important;}

  /* Remove excess width of one-off search engine buttons */
  #urlbar-results .searchbar-engine-one-off-item.dummy:not(.last-of-row) {display: none !important;}
 
  /* Firefox 70 */
  .urlbarView:not(.megabar){
    left: unset !important;
    right: unset !important;}

  /* Avoid search one-offs being too wide */
  .urlbarView {
    --item-padding-start: 0px !important;
    --item-padding-end: 0px !important;}
 
   
  :root[uidensity="compact"] .urlbarView {
margin-top: 0px !important;
}

 
/*HB this is mouse hover on URL bar background color*/ 
 .urlbarView-row:hover {background-color: #404040 !important;}

 
/* Dark Themed Drop-down */
#PopupAutoCompleteRichResult .autocomplete-richlistbox, #urlbarView-results {background-color: black !important;}

.autocomplete-richlistitem .ac-title, .autocomplete-richlistitem .ac-action, .autocomplete-richlistitem .ac-separator,
.urlbarView-row .urlbarView-title, .urlbarView-row .urlbarView-secondary,.urlbarView-row .urlbarView-title-separator {color: #777 !important;}

.autocomplete-richlistitem[selected=true], .urlbarView-row[selected] {background-color: #666 !important;}

.autocomplete-richlistitem[selected=true] .ac-title, .ac-title[selected], .autocomplete-richlistitem[selected=true]
.ac-action, .ac-action[selected], .autocomplete-richlistitem[selected=true] .ac-separator, .ac-separator[selected],
.urlbarView-row[selected] .urlbarView-title, .urlbarView-row[selected] .urlbarView-secondary,.urlbarView-row[selected] .urlbarView-title-separator {color: #eee !important;}

.autocomplete-richlistitem[selected=true] .ac-url, .ac-url[selected], .urlbarView-row[selected] .urlbarView-url {color: white !important;}

/* Subtle bottom border */
#PopupAutoCompleteRichResult .autocomplete-richlistitem, .urlbarView-row {border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;}
/* HB all above just for URL bar */

 
 

/*CTRL+F Find color for not found*/
.findbar-textbox[status="notfound"] {
  background-color:white !important;
  color:black !important;
}
/*CTRL+F Find color default color*/
.findbar-textbox{
  background-color:black !important;
  color: white !important;
}

/*HB this is the Google search bar color*/
#searchbar .searchbar-textbox{
  background-color: #000000 !important;
}
#PopupSearchAutoComplete {
    background-color: black !important;
    color: white !important;
}

/*HB this makes the URL background black*/
#urlbar {
  background-color: #000000 !important;
}


#tabbrowser-tabs {
    min-height: 18px !important;
    height: 18px !important;
}

#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    min-height: 18px !important;
    height: 18px !important;
}

#TabsToolbar {height: 18px !important;}

tab {
    background-color: rgb(0,0,0) !important;
    color: rgb(153,153,153) !important;
    height: 18px !important;
}


tab[selected="true"] {
    font-weight: bold !important;
    background-color: rgb(166,166,166) !important;
    color: black !important;
    height: 18px !important;
}

 /*HB this removes the Blue bar at top of tab*/
.tab-background {
    opacity: 0 !important;
}


/* HB this adds underline when you hover over tab
tab:hover {
   text-decoration: underline !important;
}
*/

#TabsToolbar {
    -moz-box-ordinal-group : 5 !important;
}
   
/*Reduce the padding between the URL bar and the tabs/content */
#nav-bar-customization-target {
    margin-top: -5px !important;
    margin-bottom: -5px !important;


/*HB i added these from original to test*/
  #toolbar-menubar {
min-height: 17px !important;
max-height: 17px !important;}

toolbarbutton {
  padding-top: 1px !important;
  padding-bottom: 1px !important;}
 
/*HB this shows the x on tabs*/
tab:hover .tab-close-button
{display: -moz-box !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;}
 

jscher2000

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

Post Posted March 18th, 2020, 9:13 am

jetspeedz wrote:When you have too many tabs where it grows beyond the width of the window you have open either in full screen or not it expands the existing tab and somewhat hides the others.

So by default, tabs (on the tab bar above the main toolbar) start off about 275 pixels wide and as you open more tabs in the same window, the width reduces down to 76 pixels per tab, and when you open enough that they don't all fit, then Firefox adds scroll buttons to the left and right of the tab bar.

What is it that you want to happen compared with the default behavior?

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted March 18th, 2020, 9:20 am

jscher2000 wrote:
jetspeedz wrote:When you have too many tabs where it grows beyond the width of the window you have open either in full screen or not it expands the existing tab and somewhat hides the others.

So by default, tabs (on the tab bar above the main toolbar) start off about 275 pixels wide and as you open more tabs in the same window, the width reduces down to 76 pixels per tab, and when you open enough that they don't all fit, then Firefox adds scroll buttons to the left and right of the tab bar.

What is it that you want to happen compared with the default behavior?



Hi, let me explain it a little differently so hopefully it is more clear. Apologies it didn't come through clear in the initial post.

Below is normal behavior. Regardless of how many tabs you open this is the way it looks at least prior to FF74 update. With FF74 when you open a lot of tabs the scroll button is added and the active tab gets bigger and all the other tabs appear to be part ways covered. This was never an issue prior and I'm not sure where to even begin to prevent this from happening. Does that make sense?

Image
https://imgur.com/Fm4oKhI

jscher2000

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

Post Posted March 18th, 2020, 9:47 am

jetspeedz wrote:Below is normal behavior. Regardless of how many tabs you open this is the way it looks at least prior to FF74 update. With FF74 when you open a lot of tabs the scroll button is added and the active tab gets bigger and all the other tabs appear to be part ways covered.


It sounds as though some part of your userChrome.css rules stopped working because if you turn off userChrome.css, you will see the behavior I described.

What was happening in the image: are tabs getting smaller and smaller as you add more, so there's never a need to scroll horizontally? Usually that requires a min-width rule, which I don't see in your rules.

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted March 18th, 2020, 9:58 am

jscher2000 wrote:
jetspeedz wrote:Below is normal behavior. Regardless of how many tabs you open this is the way it looks at least prior to FF74 update. With FF74 when you open a lot of tabs the scroll button is added and the active tab gets bigger and all the other tabs appear to be part ways covered.


It sounds as though some part of your userChrome.css rules stopped working because if you turn off userChrome.css, you will see the behavior I described.

What was happening in the image: are tabs getting smaller and smaller as you add more, so there's never a need to scroll horizontally? Usually that requires a min-width rule, which I don't see in your rules.


I just know prior to FF74 this behavior never occurred with the first image I posted. the scroll horizontally would show up if you add more tabs but it never behaved like this where the active tab gets bigger and the other tabs are hidden. In terms of tab sizes they get slightly smaller as you add more tabs but they eventually get to a set size so minimum tab size doesn't do much in this scenario.

I'm open to changes.

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted March 18th, 2020, 12:18 pm

any suggestions?

jscher2000

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

Post Posted March 18th, 2020, 3:01 pm

jetspeedz wrote:any suggestions?

As a starting point, delete this line, this height is too short:
Code: Select all
#TabsToolbar {height: 18px !important;}

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted March 18th, 2020, 3:33 pm

Doing this expands the height of all the tabs to match the active one once the tab scroll bar appears.

I don't want the tab size to get bigger i want them to remain small at height 18px. This is actually a good start because i believe the fix is also related.

Is there a CSS code specific to when the tab scroll bar is active the tab toolbar can be locked in place and set to a specific height?

jscher2000

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

Post Posted March 18th, 2020, 4:10 pm

I think the problem is that your rules do not effectively change the size of the tabs themselves.

Are you familiar with the Browser Toolbox, a feature that lets you use an Inspector on the user interface?

https://developer.mozilla.org/docs/Tool ... er_Toolbox

You can use that to discover the relevant selectors for the items you want to modify and experiment with different rules.

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted March 18th, 2020, 4:23 pm

I'm pretty sure the rules are being applied because the size of the tabs match what I have them set to. What is missing is the code to prevent the tabs from being resized when the tab scroll option appears.

I've never used the Browser toolbox, was hoping for a simple code change to fix this.

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted March 18th, 2020, 4:30 pm

I take that back I have used the Inspector element, in fact i use it all the time and it does not allow you to inspect parts of the interface like Tabs.

Looks like I'm back to square one

jetspeedz
 
Posts: 147
Joined: January 4th, 2013, 12:11 am

Post Posted March 18th, 2020, 5:22 pm

I made my own work around for anyone else frustrated. This gets rid of the scrollbar for tabs and your tabs will shrink but at least you can maintain the tab height.

If anyone has another option to maintain the scrollbar but keep the height the same please share

/*this is the tab bar and gets rid of tab scroll bar */
#TabsToolbar {height: 18px !important;}
.tabbrowser-tab {min-width: initial !important;}
.tab-content {overflow: hidden !important;}

jscher2000

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

Post Posted March 18th, 2020, 6:28 pm

jetspeedz wrote:I've never used the Browser toolbox, was hoping for a simple code change to fix this.

jetspeedz wrote:I take that back I have used the Inspector element, in fact i use it all the time and it does not allow you to inspect parts of the interface like Tabs.

You were right the first time. The Page Inspector is for content only. You need to use the inspector in the Browser Toolbox to inspect the tab bar.

Return to Firefox Support


Who is online

Users browsing this forum: Google Adsense [Bot], Robert Lindsay and 7 guests