如何在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规则来隐藏一些空格/按钮，类似于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 */
    }

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

上面的代码显示了标签，但它们的行为非常糟糕：

最糟糕的事情 - 当您使用Ctrl+Tab（在最近的最近订单中）在选项卡之间滚动，并且切换到的选项卡位于不同的行（5行以上）时，带有选项卡的行不会滚动到活动选项卡。滑块必须用于手动滚动行并直观地找到所选行...（澄清一下：我总共设置了5行中的5行可见行）
由于FF核心计算错误并将标签移动到随机位置，因此无法拖动标签要使用遗留代码的分支，有人提到了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

另一答案

Answer 2

另一答案

Answer 3

另一答案

Answer 4

另一答案