☰

我可以隐藏 Firefox 顶部的原生标签吗？

tag-icon • tag-icon macos firefox
我可以隐藏 Firefox 顶部的原生标签吗？

我已经开始使用树样式选项卡在 Firefox 上。如果您有很多标签，并且想要添加一定程度的组织，那么这是一个很好的解决方案。

在浏览器顶部显示标签列表变得越来越没有必要。

是否可以隐藏浏览器顶部的标签列表？

答案1

要隐藏本机选项卡，您必须添加一个名为的新文件userChrome.css和 css 属性visibility: collapse。

为此，请在 Firefox 中单击地址栏中的单击Menu -> Help -> More Troubleshooting Information或导航到。about:support

在该Application Basics部分下，将有一个名为 的部分，Profile Folder其中有一个按钮Open Directory。

在Profile Directory创建一个名为 的新文件夹chrome。如果文件已存在，则在chrome文件夹中创建或编辑该文件。userChrome.css

的内容userChrome.css应如下。

/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}

需要安装的一些可选的进一步修改userChrome.css包括：

/* hides the title bar */
#titlebar {
  visibility: collapse;
}

/* hides the sidebar */
#sidebar-header {
  visibility: collapse !important;
}

配置孙希林用途是：

/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}
/* leaves space for the window buttons */
#nav-bar {
    margin-top: -8px;
    margin-right: 74px;
    margin-bottom: -4px;
}

尝试一下这些，看看你认为哪一个看起来最好。

回答评论中的问题，你可能更喜欢这个选项。我尝试使用visibility，但它非常闪烁，并且悬停时抖动。

/* Option 1 */
#TabsToolbar {
    opacity: 0.0;
}

#TabsToolbar:hover {
    opacity: 1.0;
}

/* Option 2 */
#TabsToolbar {
    visibility: collapse;
}

#navigator-toolbox:hover #TabsToolbar {
    visibility: visible;
}

在关闭并重新启动之前，您必须打开about:config并切换属性toolkit.legacyUserProfileCustomizations.stylesheets以true启用此功能。

答案2

重新启用自定义 CSS

  1. 访问about:config
  2. 搜索toolkit.legacyUserProfileCustomizations.stylesheets
  3. 切换它，使值true

创建 userChrome.css

  1. 访问about:support
  2. 在“配置文件文件夹”右侧，按下按钮Open Directory
  3. 创建名为的新文件夹chrome
  4. 打开chrome文件夹并创建一个名为userChrome.css

在 userChrome.css 中设置样式

根据您是否启用了标题栏，需要使用不同的 CSS。

带标题栏

标题栏可见（右上角汉堡菜单 -> More Tools-> Customize Toolbar..） 在此处输入图片描述

结果（Ubuntu 截图） 在此处输入图片描述

  1. 在userChrome.css文件中，插入以下代码来隐藏标签：
#TabsToolbar {
  visibility: collapse;
}
  1. 关闭并重新打开 Firefox 以查看更改。

无标题栏

标题栏不可见（右上角汉堡菜单 -> More Tools-> Customize Toolbar..） 在此处输入图片描述

结果（Ubuntu 截图） 在此处输入图片描述

  1. 在userChrome.css文件中，插入以下代码来隐藏标签：
#tabbrowser-tabs {
    visibility: collapse;
}
  1. 关闭并重新打开 Firefox 以查看更改。

另类造型

无标题栏：迷你栏

结果（Ubuntu） 在此处输入图片描述

造型

#tabbrowser-tabs {
    visibility: collapse;
}
#titlebar {
    max-height: 16px;
}
#TabsToolbar .titlebar-buttonbox-container {
    transform: scale(.55) translateY(-10px) translateX(38px);
}

无标题栏：仅拖动空间（无窗口按钮）

结果（Ubuntu） 在此处输入图片描述

造型

#tabbrowser-tabs {
    visibility: collapse;
}
#titlebar {
    max-height: 5px;
}
#TabsToolbar .titlebar-buttonbox-container {
    display: none;
}

无标题栏：内联窗口按钮（带拖动框）

结果（Ubuntu） 在此处输入图片描述 在此处输入图片描述

造型

#tabbrowser-tabs {
    visibility: collapse;
}
#navigator-toolbox {
    display: flex;
    flex-flow: row wrap;
}
#titlebar {
    order: 1;
    max-width: 146px;
}
#titlebar #TabsToolbar {
    background-color: var(--toolbar-bgcolor);
    background-image: var(--toolbar-bgimage)
}
#titlebar #TabsToolbar .titlebar-spacer {
    background-color: rgba(0,0,0,0.05);
    margin: 3px;
    border-radius: 25%;
    cursor: grab;
}
#titlebar #TabsToolbar .titlebar-spacer[type="pre-tabs"] {
    display: none;
}
#nav-bar {
    order: 0;
    width: calc(100% - 146px);
}
#PersonalToolbar {
    order: 2;
}
/* Update - Hides the new Firefox home + tab dropdown. If you want to keep/customize those buttons. remove the CSS below and adjust the widths above to get everything fitting in one line */
#TabsToolbar .toolbar-items {
  display: none;
}

对于 MacOS，您还可以设置

#nav-bar {
    order: 0;
    width: 100%;
}

这会移动书签选项卡上的窗口按钮，使顶部栏看起来更完整。

调整这些自定义样式

您无需猜测和检查样式。Firefox 浏览器本身有一个 devtools 窗口。它被称为“浏览器工具箱”，但看起来与 Firefox 的网站 devtools 完全相同。

Mozilla 在这里提供了有关如何使用它的信息：https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

TL;DR 是：打开 Devtools -> 进入设置 -> 勾选“启用浏览器 chrome 和插件调试”和“启用远程调试” -> 使用Ctrl + Shift + Alt + i启动它。

答案3

如果您运行的是 Windows 10，我发现以下内容提供了最佳集成：

Windows 10 选项卡集成的屏幕截图

  1. 通过进入汉堡菜单（☰）→自定义→选中屏幕底部的“标题栏”复选框来启用“标题栏”模式。
  2. 应用以下用户Chrome.css：
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

答案4

此 CSS 删除了标签，但保留了菜单和最小化/最大化/关闭按钮。

#tabbrowser-tabs {  visibility: collapse;}

适用于 FF 版本 83

相关内容