CSS
firefox

Firefox Quantum(ver.57)以降での『タブの多段表示方法』+おまけ

タブ多段表示のベストCSS発見

Firefox Quantum で Tab Mix Plus が使えないということで色々調べてみたら、どうやらCSSで多段表示に出来るとのこと。
さんざん探し回り、試しに試し、ついにベストCSSを発見!!
http://tofukko.blog113.fc2.com/blog-entry-406.html

追記:

このCSSだと『アドオンやオプションをタブで開き、そしてそれらを閉じる。その後Firefoxを再起動すると、それらのタブが復活している』という問題が発生することが分かりました。
※Firefox 58.0.2 (64bit) Windows版 にて

そのため、現在は How can I have multiple rows with tabs on Firefox 57+ (Tab Mix Plux add-on no longer works)? - Stack Overflow に載っていたCSSをベースに、先述のCSSの良いところを取り込んだものを使用しています。
このCSSは『多段になった時に縦スクロールバーが出てしまう』こと以外は完璧です。
https://gist.github.com/leon-joel/31036726f36799ad2c2006c124b05125

追記: Firefox62 for macos

macの方も多段対応できました。
このCSSも『縦スクロールバーが出てしまう』こと以外は完璧です。
https://gist.github.com/leon-joel/91d9e4653458da20a8f7355048e06af7

ポイント

  • 多段になっても縦スクロールバーが出ない
  • タブのピン留めに対応している
  • アクティブタブ・インアクティブタブ・ピン留めタブなどがガタガタにならずに表示される
  • 表示出来るときはタブをなるべく幅広で表示
  • タブの幅や高さなどをカスタマイズしやすい

  • タブのDrag&Dropには対応していなくてもOK 1

CSS(userChrome.css)

配布元のものから少し変更しているので、ここに貼り付けておきます。

userChrome.css
:root {
  --multirowtab-height:          30px; /* タブの高さ ※配布元のものより少し大きくしています */
  --multirowtab-min-width:      100px; /* タブの最小横幅 */
  --multirowtab-max-width:      225px; /* タブの最大横幅 */
  --multirowtabbar-height:          3; /* タブバーの高さ(段数) */
}
.tabbrowser-arrowscrollbox {
  -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  display: block !important;
  overflow: visible !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /*段数制限いらない人はこれを消す ※これがあると、縦スクロールバーが出てしまう */
  /* max-height: calc(var(--multirowtab-height) * var(--multirowtabbar-height)) !important; */

}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned],
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox,
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  /* Firefox自体の×ボタンがツールバーにかぶってこないよう、ここを固定値に変更しています */
  /* その代わり、1段表示時だけタブの高さが高くなります。 */
  /* min-height: var(--multirowtab-height) !important; */
  min-height: 50px !important;
}
#main-window[tabsintitlebar] #tabbrowser-tabs {
  -moz-window-dragging: no-drag !important;
}
.tabbrowser-tab:not([pinned]) {
  flex-grow: 1 !important;
  min-width: var(--multirowtab-min-width) !important;
  max-width: var(--multirowtab-max-width) !important;
}
.tabbrowser-tab {
  min-height: var(--multirowtab-height) !important;
  vertical-align: top !important;
  display: -webkit-box !important;
}
.tab-stack {
  width: 100% !important;
  min-height: unset !important;
}
[uidensity="touch"]:root .tab-close-button {
  padding: 0 calc(9px - 2px) !important;
}
.tab-label-container[pinned] {
  visibility: collapse !important;
}
#new-tab-button,
.tabs-newtab-button {
  min-width: 0px !important;
  width: 28px !important;
  margin-bottom: -1px !important;
  height: var(--multirowtab-height) !important;
}
#new-tab-button .toolbarbutton-icon,
.tabs-newtab-button .toolbarbutton-icon {
  width: 16px !important;
  height: 16px !important;
  margin: 0px !important;
  padding: 0px !important;
  background: none !important;
}
#new-tab-button:hover,
.tabs-newtab-button:hover,
#TabsToolbar > toolbarbutton:hover,
#TabsToolbar > .panel-wide-item > toolbarbutton:hover {
  background: var(--toolbarbutton-hover-background) !important;
}
#new-tab-button:active,
.tabs-newtab-button:active,
#TabsToolbar > toolbarbutton:active,
#TabsToolbar > .panel-wide-item > toolbarbutton:active {
  background: var(--toolbarbutton-active-background) !important;
}
#TabsToolbar > toolbarbutton:not(.bookmark-item):not(#new-tab-button) > .toolbarbutton-icon,
#TabsToolbar > toolbarbutton > .toolbarbutton-badge-stack,
#TabsToolbar > .panel-wide-item .toolbarbutton-icon {
  padding: 0px var(--toolbarbutton-inner-padding) !important;
  background: none !important;
}
#TabsToolbar .toolbarbutton-text {
  padding-top: 0 !important;
  min-height: unset !important;
  background: none !important;
}
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .autorepeatbutton-up,
#tabbrowser-tabs .autorepeatbutton-down,
.arrowscrollbox-overflow-start-indicator,
.arrowscrollbox-overflow-end-indicator,
.tabbrowser-tab:not([fadein]){
  display: none !important;
}

userChrome.css の場所などは 【小技】Firefox Quantumで「Tab Mix Plus」の機能を再現する で詳しく説明されています。

おまけ: Firefox Quantum ハマリメモ

主にアドオン関連の試行錯誤に関するメモ。

「戻る」で前のページに戻ると、スクロール位置が必ずトップに戻ってしまう問題

前のページがgoogleだろうが一般のページだろうが、それに戻るとスクロール位置が必ず一番上に戻ってしまっていた。AutoPagerizeを使っている場合は、1ページ目の先頭に戻っていた。これが解消しないなら、Quantumをあきらめようとまで思っていた。
しかし、全てのアドオンを無効にしてFirefoxを起動したら、問題が発生しなかった。これで問題はアドオンにあるということが明確になったので、どのアドオンが問題なのかを一つ一つ確かめていった。

結果、『Saka Key』というキーボードショートカット用アドオンが問題である事を特定できた。キーボードショートカットアドオンは代替がたくさんあるので、何の未練も無く削除確定。
そして代替アドオンは
Shortkeys (Custom Keyboard Shortcuts) for Firefox – Firefox 向けアドオン
に。

AutoPagerizeで次を読み込むタイミング(というかスクロール位置)が遅すぎる

次へのリンクが見えてきたあたりで次のページを読み込んでほしいのだが、AutoPagerizeの場合、大抵のサイトでは次へのリンクが上に隠れるところまでスクロールしないと次のページを読み込んでくれなかった。
この振る舞いにより、『一旦スクロール位置を行き過ぎてから、再読込が終ってからスクロール位置を戻す』という無駄な動きを強いられていた。

これを解決してくれたのが
uAutoPagerize – Firefox 向けアドオン
というアドオン。
デフォルトでは継ぎ足されたページ内のリンクが新規タブで開くようになっていたので、そこだけ設定変更して、動きとしては完璧になった。
このアドオンには、その他スクロール関係の設定がいくつかあるので、このあたりの微妙な振る舞いの大切さをちゃんと意識して作られているアドオンのようだ。



  1. というか対応しているものがないし、CSSでは多分どうにもならない。