MozillaZine

How-To: Move Tabs beneath the Bookmarks & other tweaks (v78)

User Help for Mozilla Firefox
Franpa
 
Posts: 50
Joined: November 10th, 2011, 1:31 pm

Post Posted January 17th, 2020, 8:42 am

I dunno if this is an appropriate topic for here, but I figured some people may like these tweaks.

* Open Firefox and type about:support in to the address bar and press Enter.
* Click Open Folder for the Profile Folder.
* Create a folder called chrome (case sensitive)
* Create a file within the chrome folder called userChrome.css (case sensitive)
* Copy the relevant example in to the file & save the file.
* Restart Firefox.

To have tabs appear beneath the Bookmarks toolbar, use this code in userChrome.css
Code: Select all
@-moz-document url(chrome://browser/content/browser.xul), url(chrome://browser/content/browser.xhtml) {
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* TABS: on bottom - Firefox 65 and later */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
/* width: 100vw !important; */}

:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */}

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

:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */}

/* TABS: height */
:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /* adjust */}

:root #tabbrowser-tabs {
  --tab-min-width: 80px !important; /* adjust */}

#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;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;}

/* indicators */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;}

/* windows controls - hide */
#TabsToolbar #window-controls {display: none !important;}

/* caption box - hide */
:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar .titlebar-buttonbox-container {display: none !important;}

}


To dim inactive bookmarks you can use this code (#d0d0d0 is a colour code in hexadecimal format, you can change it if you hate my choice):
Code: Select all
@-moz-document url(chrome://browser/content/browser.xul), url(chrome://browser/content/browser.xhtml) {
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Inactive Tabs Dimmed - Firefox 65 and later */

.tab-background:not([selected]) {
    background-color: #d0d0d0 !important;}

}


To disable the Colour Burst animation (blue swipe to the right animation on a tab) when a page finishes loading in a tab:
Code: Select all
@-moz-document url(chrome://browser/content/browser.xul), url(chrome://browser/content/browser.xhtml) {
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tab-loading-burst {
display: none !important;}

}


To disable Address Bar Enlargement and shadow:
Code: Select all
/*** BEGIN Firefox 77 (June 2, 2020) Override URL bar enlargement ***/

  /* Compute new position, width, and padding */

  #urlbar[breakout][breakout-extend] {
    top: 5px !important;
    left: 0px !important;
    width: 100% !important;
    padding: 0px !important;
  }
  /* for alternate Density settings */
  [uidensity="compact"] #urlbar[breakout][breakout-extend] {
    top: 3px !important;
  }
  [uidensity="touch"] #urlbar[breakout][breakout-extend] {
    top: 4px !important;
  }

  /* Prevent shift of URL bar contents */

  #urlbar[breakout][breakout-extend] > #urlbar-input-container {
    height: var(--urlbar-height) !important;
    padding: 0 !important;
  }

  /* Do not animate */

  #urlbar[breakout][breakout-extend] > #urlbar-background {
    animation: none !important;;
  }

  /* Remove shadows */

  #urlbar[breakout][breakout-extend] > #urlbar-background {
    box-shadow: none !important;
  }

/*** END Firefox 77 (June 2, 2020) Override URL bar enlargement ***/


You can also combine them like this:
Code: Select all
@-moz-document url(chrome://browser/content/browser.xul), url(chrome://browser/content/browser.xhtml) {
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* TABS: on bottom - Firefox 65 and later */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
/* width: 100vw !important; */}

:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */}

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

:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */}

/* TABS: height */
:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /* adjust */}

:root #tabbrowser-tabs {
  --tab-min-width: 80px !important; /* adjust */}

#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;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;}

/* indicators */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;}

/* windows controls - hide */
#TabsToolbar #window-controls {display: none !important;}

/* caption box - hide */
:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar .titlebar-buttonbox-container {display: none !important;}

/* Inactive Tabs Dimmed - Firefox 65 and later */
.tab-background:not([selected]) {
    background-color: #d0d0d0 !important;}

/* Disable colour burst animation on tabs - Firefox 65 and later */
.tab-loading-burst {
display: none !important;}

/*** BEGIN Firefox 77 (June 2, 2020) Override URL bar enlargement ***/

  /* Compute new position, width, and padding */

  #urlbar[breakout][breakout-extend] {
    top: 5px !important;
    left: 0px !important;
    width: 100% !important;
    padding: 0px !important;
  }
  /* for alternate Density settings */
  [uidensity="compact"] #urlbar[breakout][breakout-extend] {
    top: 3px !important;
  }
  [uidensity="touch"] #urlbar[breakout][breakout-extend] {
    top: 4px !important;
  }

  /* Prevent shift of URL bar contents */

  #urlbar[breakout][breakout-extend] > #urlbar-input-container {
    height: var(--urlbar-height) !important;
    padding: 0 !important;
  }

  /* Do not animate */

  #urlbar[breakout][breakout-extend] > #urlbar-background {
    animation: none !important;;
  }

  /* Remove shadows */

  #urlbar[breakout][breakout-extend] > #urlbar-background {
    box-shadow: none !important;
  }

/*** END Firefox 77 (June 2, 2020) Override URL bar enlargement ***/

}
Computer specifications:
Windows 10 (1909) x64|AMD Ryzen 3700X|ASUS Crosshair Hero VIII (WiFi)|16GB 3600MHz RAM|Nvidia Geforce 1070Ti 8GB|Corsair AX760 Power Supply

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot] and 5 guests