我可以在 Firefox 顶部隐藏本机标签吗？

Question

我已经开始在 Firefox 上使用Tree Style Tab。对于您有很多很多选项卡并且想要为其添加某种级别的组织的情况，这是一个很好的解决方案。

在浏览器顶部显示选项卡列表变得越来越没有必要。

是否可以隐藏浏览器顶部的选项卡列表？

Answer 1

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

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

根据Application Basics部分，会有一个叫段Profile Directory有一个按钮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;
} 

Xilin Sun使用的一个配置是：

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

试试这些，看看你认为什么看起来最好。

要在评论中回答您的问题，您可能更喜欢此选项。我尝试使用可见性，但悬停时它非常华丽和紧张。

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

#TabsToolbar:hover {
    opacity: 1.0;
}

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

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

Answer 2

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

1. 通过转到汉堡菜单 (?) 启用“标题栏”模式？定制 ？选中屏幕底部的“标题栏”复选框。
2. 应用以下userChrome.css：

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
}

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

Answer 3

重新启用自定义 CSS

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

创建用户Chrome.css

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

在 userChrome.css 中设置样式

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

带标题栏

标题栏可见（右上角的汉堡菜单 -> 自定义）

结果（Ubuntu 截图）

1. 在userChrome.css文件中，插入以下代码以隐藏选项卡：

#TabsToolbar {
  visibility: collapse;
}

2. 关闭并重新打开 Firefox 以查看更改。

没有标题栏

标题栏不可见（右上角的汉堡菜单 -> 自定义）

结果（Ubuntu 截图）

1. 在userChrome.css文件中，插入以下代码以隐藏选项卡：

#tabbrowser-tabs {
    visibility: collapse;
}

2. 关闭并重新打开 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;
}

Answer 4

在了解了本主题中的大部分解决方案后，如果您想实现以下目标，这里是我个人的建议：

\n

\n
• 使用树形选项卡并想要隐藏水平选项卡
\n
• 显示窗口处理程序，因为您需要移动很多
\n
• 跨 macOS 和 Windows 10
\n

\n

\n

\n

苹果系统

\n

\n

\n

\n

Windows 10

\n

\n\n

第 1 步：启用 CSS

\n

\n
1. 访问about:config\xe2\x86\x92 点击Accept the Risk and Continue
\n
2. 搜索toolkit.legacyUserProfileCustomizations.stylesheets
\n
3. 切换它，使值true
\n

\n

第2步：找到CSS

\n

\n
1. about:support在地址栏访问
\n
2. 查找表Application Basics\xe2\x86\x92 查找行Profile Folder\xe2\x86\x92 单击按钮Show in Folder或Open Folder。它通常指向\n
   \n
   • /Users/your-alias/Library/Application Support/Firefox/Profiles/your-id.Default User对于 macOS
   \n
   • 或者 C:\\Users\\your-alias\\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\your-id.Default User对于 Windows
   \n
   \n
\n
3. 在此配置文件文件夹中创建一个名为的新文件夹chrome，或者如果它已经存在则将其打开。
\n
4. 在chrome文件夹中创建userChrome.css或编辑它（如果已存在）。
\n

\n

第 3 步：编辑 CSS

\n

\n
1. 编辑userChrome.css并请添加：
\n

\n

/* To hide horizontal bars */\n#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {\n    opacity: 0;\n    pointer-events: none;\n}\n\n#main-window:not([tabsintitlebar="true"]) #TabsToolbar {\n    visibility: collapse !important;\n}\n

\n

\n
2. （可选Tree Style Tab）如果您想在侧边栏上使用较小的标题，请添加：
\n

\n

/* For Tree Style Tab */\n#sidebar-header{\n  font-size: 1em !important;\n  padding: 5px 2px 5px 13px !important;\n}\n

\n

步骤 4：启用标题栏并重新启动

\n

\n

1. 启用“标题栏”模式

   \n
   \n
   • 右键单击工具栏 \xe2\x86\x92 选择Customize Toolbar...
   \n
   • 或者通过单击菜单 (\xe2\x98\xb0) \xe2\x86\x92 More tools\xe2\x86\x92Customize Toolbar...
   \n
   \n
\n

2. 在屏幕左下角，选中“标题栏”复选框 \xe2\x86\x92 提交右下角按钮Done

   \n
\n

3. 重新开始。

   \n
\n

\n