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

Question

如果Tab Mix Plux附加组件不再有效,我怎样才能在Firefox 57+上有多个带有选项卡的行(所有旧版扩展都随Firefox 57删除).也许我应该等一下？

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

1. 正如在这个帖子中所建议的,我可以降级到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行以上)时,带有选项卡的行不会滚动到活动选项卡.滑块必须用于手动滚动行并直观地找到所选行...(澄清一下:我已经在15行中设置了5行可见行)

• 由于FF核心计算错误并将标签移动到随机位置,因此无法拖动标签

  3. 要使用遗留代码的分支,有人提到了WaterFox(或另一个分支).

到目前为止还有其他(更好的)解决方案吗？

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

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

我做了一些修改,现在应该没有错误(即使你固定标签,移动/拖动窗口,在标签之间滚动等):

#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行,那么你可以删除它)