Firefox71で多段タブ表示

Firefox81版はこちらです。

Firefox81で多段タブ表示～タブの移動もできます～

※2022年11月17日追記Firefox107で、空白ができてしまう、各ページが表示されない等の不具合はuserChrome.cssにbox.scrollbox-clip[orient="horizontal"],#PlacesToolb...

kamehiyo.com

2020.09.25

Firefox71にバージョンアップされて、また多段タブが表示されなくなり、
解決法を探しましたので記録しておきます。
下記の方法で私は多段タブ＆タブバーを下に表示することができましたが
環境が違う他の方が全て同じ方法でできるとは限りませんので、ご了承ください。
zipを上げてくださっている方に感謝感謝です。

zipファイルをダウンロード

こちらにアクセスします。

多段タブ.zipをダウンロードします。どちらでも大丈夫だと思いますが、今回は8種類の方を選びました。

ダウンロードします。

ファイルを保存するを選び、ダウンロードしてできたzipファイルを右クリック→展開します。

１．MultiRowTabLiteforFx.uc.js を用意

できた「多段タブ」フォルダの中から、「Firefox71」フォルダを開きます。

フォルダ名を見て、好きなものを選び開きます。

中に入っている「MultiRowTabLiteforFx.uc.js」を使います。

２．userChrome.css/.js/.xml を用意

最初のフォルダに戻って、「userChrome.js用スクリプトを利用する方法」フォルダを開きます。

「Firefox69以降用」フォルダを開きます。

中に入っている「userChrome.css」「userChrome.js」「userChrome.xml」を使います。

フォルダーにファイルをコピーします。

Firefoxのヘルプから「トラブルシューティング情報」を開きます。

出てきた、トラブルシューティング情報の「プロファイルフォルダー」欄の「フォルダーを開く」をクリック

開いたフォルダーの中に「Chrome」というフォルダーがあれば、それを開きます。
なければChromeという名前のフォルダーを作成します。
Chromeフォルダーの中身は空にしておきます。
（問題が起こったときに戻せるように、中に入っていたファイルを削除するのではなく
どこかに保存しておいたほうが無難です）

準備した4つのファイルをChromeフォルダに入れます。

Firefoxを再起動して、多段タブ&タブバーがアドレスバーの下に来ていれば成功です。

カスタマイズ

タブのサイズ固定

タブのサイズを固定するには
＜横幅の場合＞

tabs tab[fadein]:not([pinned]) {
min-width: 100px !important;/* 最小値 デフォルト  76px */
max-width: 100px !important;/* 最大値 デフォルト 225px */
}

＜縦幅の場合＞

tabs tab[fadein]:not([pinned]) {
min-height: 10px !important;/* 最小値 デフォルト  76px */
max-height: 10px !important;/* 最大値 デフォルト 225px */
}

をuserChrome.cssに追記して、数字を変更すれば固定できます。

んな感じです。縦横の一方だけ固定したい場合は、固定したい方だけ記載すれば問題ありません。

非アクティブタブにマウスを載せた時に閉じるボタンを表示する

個人的にこれがないと不便なので。上記と同様に、「userChrome.css」に

/* Showing close button on tabs */
.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }

を追加します。