我怎样才能在 Firefox 57+ 上有多个带有选项卡的行（附加组件 "Tab Mix Plus" 不再有效）？

Question

在附加组件 Tab Mix Plus 不再工作后，我如何在 Firefox 57+ 上有多个带有选项卡的行（Firefox 57 删除了所有旧扩展） .也许我应该等一下？

这可能是我在 Opera 或 Chrome 中找不到的唯一功能（而且 Chrome 有一些隐私问题），这是我上次测试它们的时候。所以看来我有几个选择，而不仅仅是一个。

按照 this thread 中的建议，我可以降级到 FF 52 ESR（可能会出现问题...）或使用夜间构建...
另一种可能的选择是使用 [FF Current Profile Folder]/chrome/userChrome.css 文件（可能需要创建文件夹），我可以在其中放置一些代码。这是我在 FF 57 下使用 500 多个标签测试的内容：

(编辑 1：添加了一些 css 规则来隐藏一些 spaces/buttons，类似于 R4zen 的回答，因为我的又包含一个规则并且是也许更完整...但对于大多数人来说结果可能是一样的！当我 post 提出这个问题时我测试了这段代码，但决定 post 更少的代码以便更容易理解正在发生的事情. 现在我正在 post 编写我的完整代码，以便其他人可以从中受益。）

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .arrowscrollbox-overflow-start-indicator,
#tabbrowser-tabs .arrowscrollbox-overflow-end-indicator,
#tabbrowser-tabs #alltabs-button {
    display: none;
}
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    /*
    display: block;
    */
    overflow-y: auto !important;
    min-height: var(--tab-min-height); /* default */
    max-height: calc(5*var(--tab-min-height)) !important;
}
    #tabbrowser-tabs .tabbrowser-tab {
        flex-grow: 1;
        flex-wrap:wrap;
        min-width: 150px;
        vertical-align: bottom !important;
    }
    #tabbrowser-tabs .tabbrowser-tab,
    #tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
        height: var(--tab-min-height);
    }
        #tabbrowser-tabs .tabbrowser-tab .tab-stack {
            width: 100%;
        }
    #tabbrowser-tabs .tabbrowser-tab[pinned] {
        min-width: 0px;
        max-width: 40px;
    }
        #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
            visibility: hidden !important;
        }
        #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-text {
            display: none !important;
        }
    /* Active tab's style - visuallyselected="true" === ACTIVE TAB */
    #tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
        font-weight: bold;
    }
    #tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-background {
        background-color: lime !important; /* green, lime, LawnGreen-7CFC00, LimeGreen-32CD32, SpringGreen-00FF7F */
    }

其中max-height: calc(5*var(--tab-min-height)) !important;中的5为5行，动态计算高度。

上面的代码显示了制表符，但它们的行为很糟糕：

最糟糕的事情 - 当您使用 Ctrl+Tab 在选项卡之间滚动时（按最近的最后顺序），切换到的选项卡位于不同的行（相隔 5 行以上），带有选项卡不会滚动到活动选项卡。必须使用滑块手动滚动行并直观地找到所选行... （澄清一下：我在总共 15 行中设置了 5 行可见）
tabs无法拖动，因为FF core计算错误，将tabs移动到随机位置
1. 要使用遗留代码的分支，有人提到了 WaterFox（或其他分支）。

到今天还有其他（更好的）解决方案吗？

我很确定我们将来会有更多选择，所以今天的正确答案在一周或一个月后可能不是最好的...

编辑 2019 年 4 月（Firefox 66.x）：更新到 Firefox 66 后，我有太多行覆盖整个屏幕（即 1000 多个标签）。我需要编辑上面的原始代码并添加一些额外的规则：

#tabbrowser-tabs .arrowscrollbox-scrollbox {
    max-height: calc(5*var(--tab-min-height)) !important;
    overflow: auto;
    margin-bottom: calc(1.25 * var(--tab-min-height)) !important;
}

您可能需要为您调整它们，以防您有不同的行数（我有 5 行带制表符）。祝你好运！

Answer 1

我做了一些修改，现在应该没有错误（即使你固定标签，move/drag window，在标签之间滚动 e.t.c）：

#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}

.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
    display: none !important;
}

#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    /*
    display: block;
    */
    overflow-y: auto !important;
    min-height: var(--tab-min-height); /* default */
    max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
    flex-grow: 1;
    flex-wrap:wrap;
    min-width: 150px;
    vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
    height: var(--tab-min-height);
}

#tabbrowser-tabs .tabbrowser-tab .tab-stack {
    width: 100%;
}

#titlebar-buttonbox {
    display: block !important;
    vertical-align: top !important;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;   
}

如果您发现第一行选项卡不可见，请打开 about:config 并将 browser.tabs.drawInTitlebar 的值从默认值 true 更改为 false。

browser.tabs.drawInTitlebar     false

如果你想通过点击标题栏的免费 space 来拖动 firefox window 而不是使用 5 行或更多行，只需删除代码：

#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;   
}

当它超过 5 行时，可以通过按住滚动条在行之间滚动，但另一方面禁用通过标题栏拖动 ff windows 的可能性。（如果你不使用超过 5行然后你可以删除它）

Answer 2

对于那些对 CSS UI 更改如何运作感兴趣的人，ghacks.net 上有一篇有用的文章描述了所做的工作：https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css/

文章引用了 git 中心项目 "Custom CSS tweaks for Firefox 57+" https://github.com/Aris-t2/CustomCSSforFx 该项目包含许多不同的 UI 可以混合和匹配的调整。那里的 README 文件很好地了解了如何在选项中进行选择。

关于是否需要创建chrome目录：

在我使用的Fedora系统上，确实需要创建该目录。在 Mac 系统上，它已经存在并包含示例文件 userChrome-example.css 和 userContent-example.css.

在 userChrome-example.css 文件中如下：

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

虽然我需要将 browser.tabs.drawInTitlebar 设置为 false，但一旦我这样做了，无论是否存在 @namespace 行，R4zen 的代码对我来说都工作正常。

Answer 3

只是想我会添加如何做到这一点。（虽然它在其他链接网站上提供，但最好将所有信息集中在一个地方。）

启动火狐
在地址栏输入"about:support"
在table中，有一行"Profile folder"。单击按钮 "Open folder"。
"chrome" 下应该有文件 "userChrome-example.css"，您可以将其重命名为 "userChrome.css" 并进行编辑。

这为我节省了很多时间，因为在我的例子中，%appdata% 指向了错误的驱动器。此外，我必须安装 notepad++，因为记事本看不到行尾。

Answer 4

带工作选项卡拖动的多行选项卡栏（在 FF 61 上测试）：

下载解压https://luke-baker.github.io/Firefox_chrome.zip
将 userChrome.xml 复制到您的 chrome 文件夹。
将 userChrome.css 中的内容添加到您的 userChrome.css。
下载MultiRowTabLiteforFx.uc.js 到您的 chrome 文件夹。

您的 chrome 文件夹是一个名为 chrome 的文件夹，位于您的用户配置文件下，例如~/.mozilla/firefox/g7fa61h3.default/chrome。默认情况下不存在，因此如果需要请创建它。

更新

userChrome.xml 文件现在可以从 Izheil 的 Quantum-Nox-Firefox-Dark-Full-Theme 仓库中获取。还有两个版本的 MultiRowTab 脚本，用于有限和无限数量的选项卡行。

Answer 5

Izheil 的 github repo 已在上面的评论堆栈中被引用，尽管上面共享的 URL 对我不起作用（因此重新共享）。在升级到 FF66 测试版（非深色和可滚动的标签栏，有 3 行）后，那里提到的步骤帮助我将 Firefox 的外观和感觉恢复到可接受的水平。我一直停留在 FF Quantum beta 频道上，所以这些可能对你有帮助，也可能不会。

从 FF 66 b4 开始，以下步骤对我有用 OSX。

。

您个人资料的 chrome 文件夹中至少需要上面显示的所选 4 个文件。
此外，如果我想添加自己的自定义设置（卸载、固定选项卡颜色等），我会更改相应的文件（js 文件）并完成第 3 步和第 4 步以使其生效。
清除了 Macintosh HD⁩ -> ⁨Users⁩ -> [ACCOUNT] -> ⁨Library⁩ -> ⁨Caches⁩ -> ⁨Firefox⁩ -> ⁨Profiles⁩ -> [PROFILE_NAME] -> ⁨startupCache⁩中的所有文件。请注意 [PROFILE_NAME] 文件夹默认隐藏。
然后我重新启动了我的 Firefox 实例。
确保您的 chrome 文件夹中只有您要使用的 css、js 和 xml 文件。 Backup/move 将其他所有内容转移到其他[安全] 位置。

我怎样才能在 Firefox 57+ 上有多个带有选项卡的行（附加组件 "Tab Mix Plus" 不再有效）？

How can I have multiple rows with tabs on Firefox 57+ (Add-on "Tab Mix Plus" no longer works)?

firefox

firefox-addon