如何在Firefox 57+上添加带有标签的多行（Tab Mix Plus插件不再有效）？

Question

如果Tab Mix Plus插件不再有效，我怎样才能在Firefox 57+上有多个带有选项卡的行（所有旧版扩展都随Firefox 57删除）。也许我应该等一下？

这可能是我在Opera或Chrome中找不到的唯一功能（而且Chrome有一些隐私问题），这是我最后一次测试它们。所以我似乎有一些选择，而不仅仅是一个选项。

1. 正如this thread所建议的那样，我可以降级到FF 52 ESR（可能存在问题...）或者使用夜间构建......
2. 另一个可能的选择是使用[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

带有工作标签拖动的多行标签栏（在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。默认情况下它不存在，因此如果需要，请创建它。

UPDATE

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

Answer 2

我做了一些修改，现在应该没有错误（即使你固定标签，移动/拖动窗口，在标签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

如果你想通过点击标题栏的空闲空间而不是使用5行或更多行来拖动firefox窗口，只需删除代码：

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

当它超过5行时，它可以通过按住滚动条来滚动行，但另一方面是禁用通过标题栏拖动ff窗口的可能性。（如果你不使用超过5行，那么你可以删除它）

Answer 3

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

文章提到了git hub项目“Firefox 57+的自定义CSS调整”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，但是一旦我这样做，R4zen的代码对我来说都很好，无论是否存在@namespace行。

Answer 4

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

• 启动firefox
• 在地址栏中输入“about：support”
• 在表中，有一行“Profile文件夹”。单击“打开文件夹”按钮。
• 在“chrome”下应该有文件“userChrome-example.css”，您可以将其重命名为“userChrome.css”并进行编辑。

这节省了我很多时间，因为在我的情况下，％appdata％指向错误的驱动器。此外，我不得不安装记事本++，因为记事本没有看到行尾。

Answer 5

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

从FF 66 b4开始，以下步骤对OSX起作用。

。

1. 在配置文件的chrome文件夹中至少需要上面显示的所选4个文件。
2. 此外，如果我想添加自己的自定义（卸载，固定标签颜色等），我对相应的文件（js文件）进行了更改，并通过步骤3和4使它们生效。
3. 清除了Macintosh HD⁩ -> ⁨Users⁩ -> [ACCOUNT] -> ⁨Library⁩ -> ⁨Caches⁩ -> ⁨Firefox⁩ -> ⁨Profiles⁩ -> [PROFILE_NAME] -> ⁨startupCache⁩中的所有文件。请注意，默认情况下隐藏[PROFILE_NAME]文件夹。
4. 然后我重新启动了我的Firefox实例。
5. 确保您的chrome文件夹仅包含您要使用的css，js和xml文件。备份/将其他所有内容移至其他[安全]位置。