FF CSS remove Dead space

[jetspeedz]

I've tried just about every combination i can think of and nothing works. Perhaps its not possible. I would like to get rid of the dead space in yellow between the menubar-toolbar and the search bar.

Code: Select all

  #toolbar-menubar {
border: none !important;
  margin-top:-10px!important;
  margin-bottom:-10px!important;
  pading-top:0px!important;
  padding-bottom:0px!important;
  height: 0px!important;
  max-height:0px!important;
  min-height: 0px !important;
}

also tried more simple variations setting to 0 and negative values, i don't think the code is valid but hoping someone knows.

https://imgur.com/8sh4JCI


Any suggestions is appreciated.

thanks

[Frank Lion]

Any suggestions is appreciated.

As a general principle, I think I'd first give the #toolbar-menubar a red background to make sure that the dead space really is from it and not from some border or the #nav-bar, etc.

Assuming it is, I'd next turn to examining the max/min/close area, just because something is forcing that height and it's not going to be the menu item text.

[jetspeedz]

Hi Frank, i tried the red background and it didn't make a difference so I'm barking up the wrong tree apparently.

Is there a tool or something i can use to identify the blank space. I tried to use browser toolbox but with no success. I looked at the mozilla dev page to see if i can find it but nothing. Is there some reference to these attributes out there somewhere?

[Frank Lion]

Hi Frank, i tried the red background and it didn't make a difference so I'm barking up the wrong tree apparently.

Hi,

Did you add -moz-appearance: none !important; and background-image: none !important; to your background-color code?

Is there a tool or something i can use to identify the blank space. I tried to use browser toolbox but with no success. I looked at the mozilla dev page to see if i can find it but nothing. Is there some reference to these attributes out there somewhere?

That browser toolbox is as good as it gets, but don't forget those rules on the right also give you the file location for those particular rules. Just right click on the file and select Copy Location and paste it into the urlbar, i.e. chrome://global/skin/toolbar.css chrome://browser/content/browser.css etc.

Sometime I'll load up FF 75 and have a look around. I need to bring myself up to date on their code anyway. How hard can it be?

[jetspeedz]

Hi Frank, i tried the red background and it didn't make a difference so I'm barking up the wrong tree apparently.

Hi,

Did you add -moz-appearance: none !important; and background-image: none !important; to your background-color code?

Is there a tool or something i can use to identify the blank space. I tried to use browser toolbox but with no success. I looked at the mozilla dev page to see if i can find it but nothing. Is there some reference to these attributes out there somewhere?

That browser toolbox is as good as it gets, but don't forget those rules on the right also give you the file location for those particular rules. Just right click on the file and select Copy Location and paste it into the urlbar, i.e. chrome://global/skin/toolbar.css chrome://browser/content/browser.css etc.

Sometime I'll load up FF 75 and have a look around. I need to bring myself up to date on their code anyway. How hard can it be?

I did not but I just added it and the result is the same, the portion which changes color is the same, its the menu bar options (File, Edit, History... & top right close, minimize and maximize buttons) change color to red, the space below nothing happens.

I was hoping there was a simple way to identify these attributes, I've used the browser toolbox briefly and didn't find it helpful like the Page inspector element where i can target websites to change colors. I must just not be using it properly.

FF 76 and the next version will continue to make changes and break CSS code. wish they would leave good alone honestly.

[jetspeedz]

I'm befuddled what that empty space can be?



https://imgur.com/t7xBYwA

[Frank Lion]

I'm befuddled what that empty space can be?



https://imgur.com/t7xBYwA

Well, least now you know that it's not the #toolbar-menubar or else it would be red.

I've now loaded up FF78 and the tabs by default are above the nav bar. You seem to have no tabs there (tabs on bottom fix?) so my guess would be that blank space is a part left over from the tab bar.

I don't have much of a space there - https://i.postimg.cc/prf6SHG5/SNAG-0575.png

The good news is that is the theme I did for Firefox 57 almost 3 years ago on there! Yep, it's a bit broken, but it shows to me that not that much has really changed 19 versions later.

I'll look into this stuff generally sometime, but meantime I'd try commenting out /* */ your tabs on bottom fix, maybe?

Edit - I reckon that dead space is #TabsToolbar-customization-target

[jetspeedz]

I have a lot of changes honestly to minimize the menu's and yes tabs are on the bottom like the old FF back in the day.

It has been my experience almost every change breaks something in the CSS so this is not an isolated change. I'm constantly having to tweak to keep things the same.

I tried the #TabsToolbar-customization-target and it was not the dead space.

There is something interesting though when the browser is maximized that dead space is smaller. It could just be that it is not possible to make that change.

[Frank Lion]

Give me your Tabs on Bottom code and I'll see if I get a dead space there.

[jetspeedz]

You are a gem Frank

Here is the code for everything i have minus the website specifics:

Code: Select all

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

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


/*HB all this is the new FF68 moving forward to set URL bar the way you like */
/* https://www.jeffersonscher.com/gm/url-bar-tweaks.html */


/* 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;
}

/*HB These 2 lines below is tab scroll bar if you want to remove it*/
.tabbrowser-tab {min-width: initial !important;}
.tab-content {overflow: hidden !important;}

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

/* TABS on bottom */
 *|*:root {
 --tab-min-height: 20px !important;
 }


 #TabsToolbar {
  position: absolute !important;
  display: block !important;
  bottom: 0 !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - padding */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height)) !important;
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  background-color: rgb(0,0,0) !important;
  color: rgb(153,153,153) !important;
}

.tabbrowser-tab[selected="true"] {
  font-weight: bold !important;
  background-color: rgb(166,166,166) !important;
  color: black !important;
  height: var(--tab-min-height) !important;
}
/*HB Tab section ends*/
 
/*Reduce the padding between the URL bar and the tabs/content */
#nav-bar-customization-target {
    margin-top: -5px !important;
    margin-bottom: -5px !important;
}  

toolbarbutton {
  padding-top: 0px !important;
  padding-bottom: 0px !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;}
  

[Frank Lion]

Here's 78 with a clean profile and a clean userChrome.css with just your code added -
https://i.postimg.cc/JzZY5jyp/SNAG-0576.png

As you can see, there's no dead space there. My guess would be, you are on Win10 and I'm on Win7 or you have some setting somewhere that is messing things up.

Hope that helps.

[jetspeedz]

Here's 78 with a clean profile and a clean userChrome.css with just your code added -
https://i.postimg.cc/JzZY5jyp/SNAG-0576.png

As you can see, there's no dead space there. My guess would be, you are on Win10 and I'm on Win7 or you have some setting somewhere that is messing things up.

Hope that helps.

Hi Frank, not sure why i didn't get a notification from this site to respond sooner.

You are correct I'm on Win10, i also have Win7 with the same code but have not used that machine yet to check.

Perhaps it is a windows 10 thing, i don't have any unique options or settings, i even tried it on a corporate laptop with strict restrictions and it behaves the same.

Maybe there is just no css code for that area?

[dickvl]

Does changing the Density or Drag Space setting on the customize page has any effect ?

[jetspeedz]

I just tested it and it made no difference, what does change is the url bar size but not that gap in Win10.

I honestly don't think there is a way to change that, i'm hoping im wrong but not likely.

[dickvl]

A possible way to move up content is to apply a negative margin-top.
Sometimes there is content added via ::after rules, but you would have to find out to what element you need to apply the rules.

What element in #navigator-toolbox or #nav-bar do you need to select in the Browser Toolbox to include this dead space in the selection?

You can also check "Layout -> Box Model" to check the height.