Help us understand the problem. What is going on with this article?

Firefox 57/62/71/72以降 での『タブの多段表示方法』

Firefox76対応調査中 ※2020/05/31追記

またまた多段にならなくなりました。もう疲れたよ。
修正方法は調査中です。


Firefox72対応について ※2020/01/09追記

Firefox72でまたまた多段にならなくなりましたが、これでOKです!大感謝:relieved:
Firefox72向けのuserChrome.js設定でウダウダする~ - Palm84 某所の日記

ご注意

MultiRowTabLiteforFx.uc.js も置き換えないと、選択中タブの中身が表示されなくなります。ひとしきりハマりました :sweat:
image.png


Firefox71対応について ※2019/12/10追記

Firefox71でまた多段にならなくなってしまいました。ググってみたところ、下記ページのやりかたがよさそうだったのでトライしてみました。その結果、Windows10とmacOSの両方で多段タブが完璧に動作するようになりました。(これまで対応していなかった)タブのDrag&Dropにも対応しています。
Firefox71 リリース - Palm84 某所の日記
ありがとうございます:relieved:

今となっては以下の情報はほぼ用なしですが、何かのときに役に立つかもしれないので、一応残しておきます。


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

(2020/05/31追記) uAutoPagerizeの動きが微妙だったので、 weAutoPagerize に乗り換えました。今のところ極めてスムーズで違和感ゼロです。



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

leon-joel
Windows, Linux, C++, C#, WPF Ruby, Rails, SQL(PostgreSQL, MySQL, SQLite)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした