Firefox 95.0 Hide Tab Bar and collapse space between menus??

[ottoman68]

Ok, so I finally upgraded to Firefox 95.0. I'm sure this has been asked before, but can I hide the Tab Bar from the top of the browser?

Also, I wish I could compress the space between drop down bookmark menus.

From my limited quick online searching, it seems like the only way is it to try with UserChrome.css but most references online are for older versions of Firefox.

I have been using Firefox version 88.0.1 and happy with it. I forced the browser to not ask for updates (by creating "distribution" folder in profile and a policies.json file)

I hated when Firefox verson 89 changed the look of everything, so I decided to keep using 88.0.1.


But today, I noticed pictures weren't loading on a website I frequent, and they were loading fine on my desktop computer running the latest Firefox version, so I decided I would finally upgrade, but damn I hate change lol.

I wonder why there isn't an extension for hiding tab bar. I believe there used to be years ago.

[DSperber]

I have additional snippets to adjust colors to my liking.

But here is what you can start from in userChrome.css for minimizing/tweaking spacing on dropdown menus, context menus, hamburger menu, etc.

Code: Select all

/* v92.0 vertical menu item spacing */
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  padding-block: 0px !important;
  min-height: unset !important; /* v92.0 - for padding below 4px */
}

/* Bookmark and context menu spacing */
menupopup > menuitem, menupopup > menu {padding-block: 0px !important;
}

/* Options menu spacing */
:root {--arrowpanel-menuitem-padding: 0px 0px !important;
}

/* Vertical distance between hamburger menu items */
.subviewbutton, .subviewbutton-nav
      { padding-top: 2px !important;
        padding-bottom: 2px !important; }

[DSperber]

I don't know why you would want to hide the tab bar, since that greatly assists browsing navigation. My own choice was to restore the old "square" tabs appearance, separated by a thin vertical line. And I have "colored" the active tab to be a very nice easy-on-the-eyes darker SlateGrey with white text to make it stand out.

Code: Select all

/* Disable floating rounded tabs, revert back to square tabs stuck to the Address Bar*/
.tab-background{border-radius: 0px 0px !important; margin-bottom: 0px !important;
}

/* Inactive tabs: visible Separator line style */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
    border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
}

/* Set color for active tab */
.tab-background[multiselected="true"], .tab-background[selected="true"] {
  background-color: SlateGrey !important;
}

/* text color */
.tabbrowser-tab[selected] .tab-label {
color: white !important;
}

Looks like this:

[ottoman68]

Thank you DSperber, I'll check it out and give it a try. Yes, perhaps the old "square" style tabs would be fine. That's what 88.0.1 seemed to have and I was ok with it.

[DSperber]

And if you do want to play with dropdown and context menu background colors, I've settled on light gray backgrounds with a pale blue highlight background for the active/selected item. And black text for ordinary items with a "glowing blue" font for active/selected items. Again, easy on the eyes and not overwhelming. Subtle.

(1) Menu bar dropdowns look like this:



(2) Bookmarks toolbar dropdowns look like this:



(3) Hamburger menu dropdown looks like this (inter-item vertical spacing is at 2px, so it can be tightened up even further if you want):



Here are the snippets for userChrome.css:

Code: Select all

/* v92.0 Bookmarks Toolbar folder drop-downs background color light-gray*/
#PlacesToolbar {
    --arrowpanel-color: black !important;
    --arrowpanel-background: #eaeaea !important;
}

menupopup {
    --panel-color: black !important;
    --panel-background: #eaeaea !important;
}

/* Active menu item background pale-blue, text glowing-blue*/
menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] {
  background-color: #e8eefd !important;
  color: #3d3dff !important;
}

/* Hamburger menu background and text color */
#appMenu-multiView panelview
  { background-color: #eaeaea !important;
    color: #000 !important; }

/* Hamburger menu mouseover behavior */
.subviewbutton:hover,
  .subviewbutton-nav:hover
    { background-color: #e8eefd !important;
      color: #3d3dff !important;
      font-weight: normal !important; }

[DSperber]

And finally, in userContent.css (that is a second separate file in the \chrome folder), the following causes the favorite site thumbnails (on new tab and opening home screen) utilize 100% of the space.

Code: Select all

/* about:home - about:newtab */
@-moz-document
  url-prefix(about:newtab),
  url-prefix(about:home) {
   .top-site-outer .tile .icon-wrapper {
     height: 100% !important;
     width: 100% !important;
   }
   .top-site-outer .default-icon,
   .top-site-outer .search-topsite {
     background-size: 100% !important;
     height: 100% !important;
     width: 100% !important;
  }
}

Looks like this:

[ottoman68]

wow thanks. I've tried the first few suggestions and I like it. QUESTION: What "theme" are you using? My bookmark folders are boring generic looking things. I like the look of yours.

[DSperber]

The reversion of the bookmark folders to the old manila look is yet one more item in userChrome.css:

Code: Select all

/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* USE OLD STYLE YELLOW BOOKMARK FOLDERS IN BOOKMARK DROPDOWN MENU. */
/* ALSO FORCES USE OLD STYLE BOOKMARK FOLDERS WHEN VIEWING "Show All Bookmarks" */
/* Need the image file "folder-item.png" to be inside the chrome folder */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
  list-style-image: url("folder-item.png") !important;
  -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

And you also need to place the specified folder-item.png into the same \chrome folder. I'm attaching it, so you need to download it and save it as that file name.

[DSperber]

So, just for reference and convenience, all in one place are my \chrome folder contents:

(1) complete userChrome.css

Code: Select all

/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* USE OLD STYLE YELLOW BOOKMARK FOLDERS IN BOOKMARK DROPDOWN MENU. */
/* ALSO FORCES USE OLD STYLE BOOKMARK FOLDERS WHEN VIEWING "Show All Bookmarks" */
/* Need the image file "folder-item.png" to be inside the chrome folder */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
  list-style-image: url("folder-item.png") !important;
  -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

/* v92.0 vertical menu item spacing */
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  padding-block: 0px !important;
  min-height: unset !important; /* v92.0 - for padding below 4px */
}

/* Bookmark and context menu spacing */
menupopup > menuitem, menupopup > menu {padding-block: 0px !important;
}

/* Options menu spacing */
:root {--arrowpanel-menuitem-padding: 0px 0px !important;
}

/* v92.0 Bookmarks Toolbar folder drop-downs background color light-gray*/
#PlacesToolbar {
    --arrowpanel-color: black !important;
    --arrowpanel-background: #eaeaea !important;
}

menupopup {
    --panel-color: black !important;
    --panel-background: #eaeaea !important;
}

/* Active menu item background pale-blue, text glowing-blue*/
menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] {
  background-color: #e8eefd !important;
  color: #3d3dff !important;
}

/* Disable floating rounded tabs, revert back to square tabs stuck to the Address Bar*/
.tab-background{border-radius: 0px 0px !important; margin-bottom: 0px !important;
}

/* Inactive tabs: visible Separator line style */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
    border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
}

/* Hamburger menu background and text color */
#appMenu-multiView panelview
  { background-color: #eaeaea !important;
    color: #000 !important; }

/* Vertical distance between hamburger menu items */
.subviewbutton, .subviewbutton-nav
      { padding-top: 2px !important;
        padding-bottom: 2px !important; }

/* Hamburger menu mouseover behavior */
.subviewbutton:hover,
  .subviewbutton-nav:hover
    { background-color: #e8eefd !important;
      color: #3d3dff !important;
      font-weight: normal !important; }

/* Set color for active tab */
.tab-background[multiselected="true"], .tab-background[selected="true"] {
  background-color: SlateGrey !important;
}

/* text color */
.tabbrowser-tab[selected] .tab-label {
color: white !important;
}

(2) complete userContent.css

Code: Select all

/* about:home - about:newtab */
@-moz-document
  url-prefix(about:newtab),
  url-prefix(about:home) {
   .top-site-outer .tile .icon-wrapper {
     height: 100% !important;
     width: 100% !important;
   }
   .top-site-outer .default-icon,
   .top-site-outer .search-topsite {
     background-size: 100% !important;
     height: 100% !important;
     width: 100% !important;
  }
}

(3) folder-item.png

[ottoman68]

Thanks so much. This is all new to me. It's nice I can tweak things much more to my liking.

Thanks for all your extensive time on this DSperber

[DSperber]

Actually, I'm just the "messenger". I've compiled my own CSS stylings (shared above) based on my own personal tastes, and of course your tastes may vary.

But the actual genuine CSS "authors" to be thanked, and whose original CSS suggestions I've simply adapted and consolidated as my own, are well known here in this forum.

So the real thanks go to the originators themselves: @JScher2000, @limp, @dickvl, @morat, and others I'm sure.