Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

Full Screen Tab Bar Not Disappearing

  • 8 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 Photoparity

more options

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 */

  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
  2. TabsToolbar {-moz-box-ordinal-group:1000}
  1. TabsToolbar {
 display: block !important;
 position: absolute !important;

/* bottom: 0 !important; /* 68-88: BOTTOM */

 top: var(--tabbar-top);  /* 89+: TOP */
 width: 100vw !important;

}

  1. 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 */

  1. tabbrowser-tabs,
  2. tabbrowser-tabs > .tabbrowser-arrowscrollbox,

.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {

 min-height: var(--tab-min-height) !important;
 max-height: var(--tab-min-height) !important;

}

  1. 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 */

  1. navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
 padding-bottom: unset !important;

}

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

}

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

}

/* Hide window-controls and caption buttons on Tab Bar */

  1. TabsToolbar #window-controls {display: none !important;}
  2. TabsToolbar .titlebar-buttonbox-container {display: none !important;}
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;}
已附加屏幕截图

由Photoparity于修改

被采纳的解决方案

See this forum response for updated CSS code for Firefox 89+:

定位到答案原位置 👍 1

所有回复 (8)

more options

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.]

由Chris Ilias于修改

more options

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

more options

选择的解决方案

See this forum response for updated CSS code for Firefox 89+:

more options

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?

more options

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;
}

more options

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

由Photoparity于修改

more options

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.

more options

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.

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.