Full Screen Tab Bar Not Disappearing
G'Day,
I earlier posted with respect to getting tabs to appear below the address and search bars on the browser. I managed to solve that issue; however, the solution has produced a curious side effect.
When the browser has entered Full-Screen, the tabs-bar does not disappear and appears as it would in a normal browser window while both the address and search bars have been hidden. Is there some way to fix this?
As well, on a Windows 8.1 lap-top, using the CSS below, the very top of the browser has been cut off. It is not possible to see the browser control icons nor is the menu-bar visible.
A screen capture is attached as well as the CSS which was suggested in my earlier post about getting the tabs below the address bar.
Thanks,
Jim
@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: 40px !important; --tab-min-width: 50px !important;
--tab-caption: -5px; /* caption buttons on tab bar */ --tab-adjust: 3px; /* adjust tab bar */
--menubar-height: 40px; /*40px|41px=11px; caption buttons on menubar*/ --navbar-height: 40px; /*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: 45px; /*30px*/ --navbar-height: 45px; /*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;}
Modified by Photoparity
Chosen solution
See this forum response for updated CSS code for Firefox 89+:
Read this answer in context 👍 1All Replies (8)
If you can't get a fix for your code, try the code below. https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_on_bottom.css https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_on_bottom_menubar_on_top_patch.css
WARNING: This script is not provided by Mozilla and is not officially supported Creating a userChrome.css file and other ways of customizing Firefox that are not exposed in the interface are there for developers, not end-users. If it were intended for end-users, you would see a menu option or checkbox; you wouldn't have to hack a text file in a hidden location.
What this means is that even though the functionality you want is no longer supported, a third-party has found a way to do it using the CSS file. If it breaks in new versions, you will need to contact the person who provided the script.
[Warning added by moderator.]
Modified by Chris Ilias
To the Moderator:
If the Mozilla Development team had left things the way they were with tabs below the address bar and not screw it up, then the end-user would not have to find ways of resetting this which just happens to be the majority style preferred by that community.
If you think "if it were intended for end-users, you would see a menu option or checkbox; you wouldn't have to hack a text file in a hidden location," then as a member of the Mozilla task force you would ensure it was not necessary for us to do so.
Thanks
Chosen Solution
See this forum response for updated CSS code for Firefox 89+:
cor-el said
See this forum response for updated CSS code for Firefox 89+:
Thanks. I appreciate this. Is there someway of getting a wider tab?
If you want to tabs to be wider or higher then you can adjust the CSS var at the top of under the :root selector or you can leave out these lines to get the default setting as set for the Height via "Customize -> Density" or via "about:config => browser.tabs.tabMinWidth"
:root {
--tab-min-height: 25px !important;
--tab-min-width: 60px !important;
}I appreciate your assistance with this. I am still experiencing some issues with Firefox 91.0.2 (64-bit) on my ASUS 750 laptop running Windows 8.1.
If you look at the attached image, you will notice that the header line and the browser Minimize/Restore/Close buttons do not appear. It seems when themes are applied to the browser, these status bars get hidden. With the default browser appearance, it is possible to see these details.
Otherwise the tabs appear as they should.
Thanks,
Photoparity
Modified by Photoparity
The code used in that forum response doesn't include showing the caption buttons on the tab bar with the menu bar and the title bar hidden. I left it out intentionally. Showing the controls would require to add extra code, but that increases the risk the code can get broken. See this reply for additional code.
- /questions/1305615 tabs below address bar - an ongoing problem not fixed
cor-el said
The code used in that forum response doesn't include showing the caption buttons on the tab bar with the menu bar and the title bar hidden. I left it out intentionally. Showing the controls would require to add extra code, but that increases the risk the code can get broken. See this reply for additional code.
- /questions/1305615 tabs below address bar - an ongoing problem not fixed
cor-el,
You were right. When I attempted to use the expanded code you suggested, it did indeed break the browser. I did, however, before using your suggestion, determine that the issue doesn't result from the code to move the tabs, but does result from the application of themes to the browser. In the standard theme for Firefox, the browser control and menu bars do appear. I will likely only use the standard theme on my laptop in order to avoid the issue applying a theme causes.
Cheers.