Firefox Quantum 中的多行标签栏

Question

Firefox Quantum打破 tab mix plus 和 tab kit。有没有办法在 Firefox Quantum 中获得多行标签栏？

如果可能，我正在寻找一个受支持的稳定解决方案，它不太可能在下一个新版本中崩溃。

Answer 1

这是一个更新的 userChrome.css，它显示图标并隐藏标签行中的丑陋滚动条

更新：较新的 Firefox 版本再次改变了 userChrome 的行为，现在我直接从这里获取了脚本（对最大行数和标签宽度略有改动）：https : //github.com/MrOtherGuy/firefox-csshacks/blob/ master/chrome/multi-row_tabs.css：

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/

/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */

/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */

:root{
    --multirow-n-rows: 6;
    --multirow-tab-min-width: 150px;
    --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}

/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */

/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */

/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}

@-moz-document url(chrome://browser/content/browser.xhtml){
  #scrollbutton-up~spacer,
  #scrollbutton-up,
  #scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }

  scrollbox[part][orient="horizontal"]{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
    scrollbar-color: currentColor transparent;
    scrollbar-width: thin;
  }
}

#tabbrowser-arrowscrollbox{
  overflow: -moz-hidden-unscrollable;
  display: block;
  --scrollbutton-display-model: none;
}

.tabbrowser-tab{ height: var(--tab-min-height); }

#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
  min-width: var(--multirow-tab-min-width) !important;
  flex-grow: var(--multirow-tab-dynamic-width);
  /*
  Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
  Don't set to none or you'll see errors in console when closing tabs
  */
  /*max-width: 100vw !important;*/
}

.tabbrowser-tab > stack{ width: 100%; height: 100% }

#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important }

2020 年 7 月 7 日更新： FF78+ 的 UserChrome 行为再次发生变化，请更新至上述内容或查看 Github 页面以获取 CSS 源代码。

Answer 2

我也尝试寻找替代方案，但发现没有真正的选择，只能使用插件组合：

我现在使用Tab Mix Plus (WebExtensions) 和Tree Style Tab插件，以及Session Sync，结合使用这些插件我可以使选项卡管理体验更舒适。

由于显示器的宽度和当前分辨率，树形选项卡可以很好地替代多行功能，在侧边栏列出多个选项卡，会话同步通过在 Windows 会话中对选项卡进行分组来改进管理，并且选项卡混合加上 Web 扩展允许相关页面保留在同一窗口中。显然这不是多行设置，但总比没有好。