Every solution which I have found for Firefox 89 "Proton" so far which moves the Tabs Bar below the Navigation Bar (AKA "address bar"), with the Menu Bar above it, does N… (read more)
Every solution which I have found for Firefox 89 "Proton" so far which moves the Tabs Bar below the Navigation Bar (AKA "address bar"), with the Menu Bar above it, does NOT move the Tabs Bar below the Bookmarks Bar. The Bookmarks Bar appears to be overwritten and blank, and occupies space below the Menu Bar, Navigation Bar, and Tabs Bar. This empty space separates the three bars which are implemented and the content of the currently-selected tab below it.
Currently, my userChrome.css file is a copy posted by Corel-10 (?):
__________________________________________________________________________________________________
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */
/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */
/* you can use the Browser Toolbox to get the toolbar heights */
*|*:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 25px !important;
--tab-min-width: 60px !important;
--tab-caption: -5px; /* caption buttons on tab bar */
--tab-adjust: 3px; /* adjust tab bar */
--menubar-height: 0px; /*30px|41px=11px; caption buttons on menubar*/
--navbar-height: 31px; /*31px*/
--bookmarkbar-height: 26px;
--tabbar-top: calc(var(--menubar-height) + var(--navbar-height) + var(--bookmarkbar-height) + var(--tab-adjust)); /*89+*/
}
/* in case you enable extra toolbars in full screen mode */
*|*:root[inFullscreen] {
--tab-adjust: 3px;
--menubar-height: 0px; /*30px*/
--navbar-height: 31px; /*31px*/
--bookmarkbar-height: 0px; /*26px*/
--tabbar-top: calc(var(--menubar-height) + var(--navbar-height) + var(--bookmarkbar-height) + var(--tab-adjust)); /*89+*/
}
/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000}
#TabsToolbar {
display: block !important;
position: absolute !important;
/* bottom: 0 !important; /* 68-88: BOTTOM */
top: var(--tabbar-top); /* 89+: TOP */
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
/* navigator-toolbox - PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
background-color: var(--toolbar-bgcolor) !important;
}
/* TabsToolbar with menubar and titlebar hidden - rules for Firefox 65-73 */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
#toolbar-menubar[autohide="true"] ~ #TabsToolbar{
}
/* 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;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
z-index: 1 !important;
}
/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
position: absolute !important;
display: block !important;
right: 0px !important;
bottom: 0px !important;
width: 14px !important;
pointer-events: none !important;
}
*/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator {display: none !important;}
/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-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;
}
/* Hide window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}
________________________________________________________________________________________________
Evidently, the text editor for this website does several things to the above original text that, frankly, seem unnecessary and undesirable. The .CSS file is just an unformatted text file, so what is the problem with simply copying its contents and pasting it in to the body of this post?
Which is also to say that I do NOT have a clue as to what any line in the file is meant to do, what effect it has, why it is even in the file at all, or why it is written in the way that it is. So DO NOT tell me that I "CAN" create a Cascading Style Sheet on my own when I cannot even modify one that has been provided.
On the face of it, something is missing from the above CSS text. What change needs to be made to the above content so that the Bookmark Bar will appear between the Navigation Bar and the Tabs Bar??
Thank-you very much for your time and attention to this request for assistance.
