Got it working once again in the way I want it. I was reading someone else's script trying to integrate it but the tabs seems to follow next to menu bar and can only seem to make it go above or below then I read Firefox 133 required for this other script.
https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_on_bottom_v2.css/* This reorders toolbar to place tabs below other toolbars. Requires Firefox 133+ */* This reorders toolbar to place tabs below other toolbars. Requires Firefox 133+ */
Okay I thought, lets copy the Firefox 75 profiles in c:\Firefox 133 and when extracted experiment with the CSS scripts.
So I extracted Firefox, copy and rename shortcuts and the tabs started to appear but I didn't make any changes. Maybe they had reverted a few things before Firefox 90 when that css last worked.
Seems to be looking great to me.
Just the way I want it.
I'll see how this goes. Unfortunately with Adblock and Ublock, the elements load and hides stuff randomly at some point during the page load. So I'd still see the stupid animated placeholders briefly.
I had a go at Firefox 75 ESR (seemed very unstable) in 2020 along with Vivaldi got it the way I want but now it seems to time to prepare to a possible move over.
If this works well for me and ESR 133+ is released that'd be me set for a few years. Unfortunately since 90 when they made the tabs round, they also caked it in dimming overlays which is why I stopped using it for a while
Here's my configuration: (copied from random places including Github)
C:\Firefox 133\Template\Chrome\userChrome.css
#context-back image,
#context-forward image,
#context-reload image,
#context-stop image,
#context-bookmarkpage image,
#context-navigation,
#context-sep-navigation {
display:none !important;
}
/* New Tab Context - move the menu item to the top */
#tabContextMenu menuitem[label="New Tab"] { -moz-box-ordinal-group: 0 !important; }
/* New Tab Context - hide the icon */
#tabContextMenu menuitem[label="New Tab"] .menu-iconic-icon { display: none !important; }
/* Firefox userChrome.css */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.tab-throbber {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png") !important;
}
/* Remove Tab Throbber Animation, from this author : [url]https://www.reddit.com/r/firefox/comments/7cvzkq/how_can_i_remove_firefox_57_page_load_animation/[/url] */
.tab-throbber { display: none !important; }
.tab-icon-image { visibility: show !important; display: block !important;}
.tabbrowser-tab[progress="true"] .tab-icon-image {opacity:0.45; filter: blur(1px);}
.tab-loading-burst[bursting]::before {
background-image: none !important;
animation: unset !important;
}
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
* { transition: none !important;
animation-duration: 0s !important; }
/* Close the useless Tab Bar Full, animate New Tab, from this author : http://forums.mozillazine.org/viewtopic.php?f=38&t=2282765 */
.tabbrowser-tab:not([pinned]) {
max-width: 250px !important;
min-width: 100px !important;
}
.tabbrowser-tab:not([pinned]):not([fadein]) {
max-width: 0.1px !important;
}
.closing-tabs-spacer {
width: 0 !important;
}
/* Remove the Ugly Distracting Transparent Tab effect, from this author : [url]https://support.mozilla.org/en-US/questions/1187357#answer-1033293[/url] */
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background * {
background: none !important;
}
/* Disable the Ugly Blue Glow Tab Effect, from this author : [url]https://support.mozilla.org/en-US/questions/928081[/url] */
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
background: -moz-linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,45%,.2) 2px, hsla(0,0%,32%,.2) 80%)
!important;
}
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.2) 4px, hsla(0,0%,75%,.2) 80%) !important;
}
/* Disable the Tab Highlighting Fearure (absoluetly Useless for a normal use), from this author : http://forums.mozillazine.org/viewtopic.php?f=19&t=867225 */
.tabbrowser-tab:not([selected="true"]) > .tab-image-middle {
background-image: url("chrome://global/skin/icons/tab-middle-bkgnd.png") !important;
}
.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-middle {
background-image: url("chrome://global/skin/icons/tab-middle-bkgnd.png") !important;
}
/* Remove some Random Annoying Animations in the Toolbar, from this author : annoying animations [url]https://www.reddit.com/r/firefox/comments/37hw8o/how_to_disable_all_animations/[/url] */
* {
animation-delay: 0ms !important;
animation-duration: 0ms !important;
transition: none !important;
}
/* Remove the Very Ugly and Distracting and Useless Hamburger Button (because it is redundant with the arrows) */
#PanelUI-menu-button {display: none;}
/*
#PopupAutoCompleteRichResult {
display: none!important;
}
/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}
#TabsToolbar {
display: block !important; /*required for 71+*/
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}
/* TABS: height */
*|*:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 27px !important; /* adjust to suit your needs */
--tab-min-width: 80px !important;
--tabstoolbar-adjust: 0px; /* menubar and titlebar hidden */
}
#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}
#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 with menubar and titlebar hidden */
*|*: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) + var(--tabstoolbar-adjust)) !important; /*adjust var*/
}
*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
~ #TabsToolbar .titlebar-buttonbox-container {
visibility: hidden !important;
}
/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}
/* 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;
}
/* hide indicators */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator {display: none !important;}
/* based on [url]https://old.reddit.com/comments/fwhlva//fmolndz[/url] */
#urlbar[breakout][breakout-extend]:not([open]) {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar[breakout][breakout-extend]:not([open]) > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding-block: 0px !important;
padding-inline: 0px !important;
}
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
animation-name: none !important;
}
#urlbar[breakout][breakout-extend]:not([open]) > #urlbar-background {
box-shadow: none !important;
}
#urlbar-results { display:none!important; }
Shortcut: Target: "C:\Firefox 133\Mozilla Firefox\firefox.exe" -Profile "C:\Firefox 133\template" -no-remote
Start in: "C:\Firefox 133\Mozilla Firefox"
There I can just copy the template and rename it to a website name to keep them separate and add a nice little ICO image to it. I do this to keep them separate to help prevent session hijacking (I use another dedicated browser profile for that) and aggressive advertising where the same advert partner might advertise something I looked at on Amazon and advertise it on some banner elsewhere cheaper.
Thanks to all the folks and on Github for this.
Home
Help
Search
Login
Register
