firefox - 如何在 Firefox 57+ 上拥有带有选项卡的多行(插件 "Tab Mix Plus"不再起作用)？

Question

在附加组件 Tab Mix Plus 不再起作用(Firefox 57 中删除了所有旧版扩展)后，如何在 Firefox 57+ 上使用多个选项卡行。也许我应该等待？

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

1. 按照 this thread 中的建议，我可以降级到 FF 52 ESR(可能会出现问题...)或使用夜间构建...

2. 另一个可能的选择是使用 [FF 当前配置文件文件夹]/chrome/userChrome.css 文件(可能需要创建文件夹)，我可以在其中放置一些代码。以下是我在 FF 57 下使用 500 多个选项卡进行的测试:

(编辑1:添加了一些CSS规则来隐藏一些空格/按钮，类似于R4zen的答案，因为我的包含多一条规则并且可能更完整......但结果可能是对于大多数人来说都是一样的!当我发布问题时，我测试了这段代码，但决定发布更少的代码，以便更容易理解正在发生的事情。现在我发布我的完整代码，以便其他人可以从中受益。)

#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 行以上)，带有选项卡的行不会滚动到事件选项卡。必须使用 slider 手动滚动行并直观地找到选定的行...(澄清一下:我在总共 15 行中设置了 5 行可见行)

• 选项卡无法拖动，因为 FF core 计算错误并将选项卡移动到随机位置

• 为了使用遗留代码的分支，有人提到了 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

具有工作选项卡拖动功能的多行选项卡栏(在 FF 61 上测试):

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

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

更新

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