主页 / computer / 问题 / 1424478
Accepted
Cauder
Asked: 2019-04-12 15:48:14 +0800 CST

我可以在 Firefox 顶部隐藏本机选项卡吗？

  • 772

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

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

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

firefox macos

7 个回答

  1. Best Answer

    要隐藏本机选项卡，您必须添加一个名为的新文件userChrome.css和 css 属性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;
}
    • 30

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

    对于 MacOS，您还可以设置

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

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

    • 11

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

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

  4. 此 css 删除选项卡，但保留菜单和最小化/最大化/关闭按钮。

    #tabbrowser-tabs {  visibility: collapse;}

    适用于 FF 版本 83

    • 4

  5. 了解了该线程中的大部分解决方案后，如果您想实现以下目标，这是我的个人建议：

    • 使用 Tree Style Tab 并希望隐藏水平选项卡
    • 显示窗口处理程序，因为您需要移动很多
    • 跨 macOS 和 Windows 10

    苹果系统

    苹果系统

    视窗 10

    视窗 10

    第 1 步：启用 CSS

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

    第 2 步：查找 CSS

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

    第 3 步：编辑 CSS

    1. 编辑userChrome.css并添加：
    /* To hide horizontal bars */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}
    1. （可选）如果你想Tree Style Tab在侧边栏上有一个较小的标题，请添加：
    /* For Tree Style Tab */
#sidebar-header{
  font-size: 1em !important;
  padding: 5px 2px 5px 13px !important;
}

    第四步：启用标题栏并重启

    1. 启用“标题栏”模式

      • 右键单击工具栏→选择Customize Toolbar...
      • 或者通过点击菜单(☰) → More tools→Customize Toolbar...

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

    3. 重新开始。

    • 1

  6. 这是我最喜欢的 macOS Monterey 设置。

    标题栏


    首先按照以下步骤启用 userChrome.css。

    然后将其添加到 userChrome.css

    #tabbrowser-tabs {
  visibility: collapse;
}

#titlebar #TabsToolbar {
  background-color: var(--toolbar-bgcolor);
  background-image: var(--toolbar-bgimage);
  padding-top: 5px;
}

    最后，删除刷新按钮和网址栏之间的空间。

    • 右键单击工具栏的空白区域并选择自定义。
    • 将刷新按钮和 url 栏之间的间隔从工具栏中拖出。
    • 完毕
    • 0

  7. 您只需按 F11 即可全屏显示。它带走了本机标签栏等。

    • -1

相关问题