Firefox Quantum (Firefox 57) で多段タブ表示

てくの侍です。

Firefox Quantum (Firefox 57)でタブを多段表示させる方法です。

拙者、たくさんのタブを開いて作業することが多いので、今まではTabMixPlusでタブを多段表示させていたのですが、Firefox Quantum (Firefox 57) になり、TabMixPlusが使えなくなり、多段表示ができなくなってつらいものがありました。

userChrome.css を作成・編集すればタブの多段表示ができることがわかり、さっそくやってみました。
いくつか書き方あるようですが、拙者は、Reddit で拾ったコードをベースに少しカスタマイズして使っています。
4段以上になれば、スクロールされて表示は3段分となります。

Firefox タブの多段表示

/* Firefox タブの多段表示 */
.tabbrowser-tab:not([pinned]) {
  flex-grow:1;
  min-width:150px !important; /* タブ幅の最小値 */
  max-width:150px !important; /* タブ幅の最大値(noneにすると可変になる) */
}
.tabbrowser-tab,.tab-background {
  height:var(--tab-min-height);
}
.tab-stack {
  width: 100%;
}
#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow: visible;
  display: block;
}
#titlebar,#titlebar-buttonbox{
  height:var(--tab-min-height) !important;
}
#titlebar{
  margin-bottom:calc(var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #titlebar{
  margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #TabsToolbar{
  margin-left:var(--tab-min-height);
}
#titlebar:active{
  margin-bottom:0 !important;
}
#titlebar:active #titlebar-content{
  margin-bottom:var(--tab-min-height) !important;
}
#tabbrowser-tabs .scrollbutton-up,#tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){
  display: none;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
  -moz-window-dragging: no-drag;
}
#tabbrowser-tabs .scrollbox-innerbox {
  max-height: 100px;
  overflow-y:auto;
}

/* 選択されているタブの文字を太字にする */
.tabbrowser-tab[selected="true"] .tab-label {
  font-weight: bold !important;
}

/* 未読タブの文字色をスカイブルーにする */
.tabbrowser-tab:not([selected="true"])[unread] .tab-label {
  color: #87ceeb !important;
}

/* 読み込み中のタブの文字色をスカイブルーにする */
.tabbrowser-tab[busy] .tab-text.tab-label {
  color: #87ceeb !important;
}

userChrome.cssが存在しないときの作成手順

userChrome.css はプロファイルフォルダーの直下のchromeフォルダーにあるのですが、必ずしもchromeフォルダーがあるとは限らないようです。（拙者の環境ではインストール時にはchromeフォルダーが作成されていなかったです。)

userChrome.css がないときは、下記手順で作成します。
1.「ヘルプ」から「トラブルシューティング情報」をクリックします。
2.「プロファイルフォルダー」の「フォルダーを開く」をクリックします。
3.そこに「chrome」フォルダーがなければ、「chrome」フォルダーを作成します。
4.「chrome」フォルダーの中に、ファイル名を「userChrome.css」としてテキストファイルを作成します。
5.「userChrome.css」にカスタマイズの内容を記述し、保存します。
6.Firefoxを再起動します。

以上、Firefox Quantum (Firefox 57) で多段タブ表示で多段タブ表示する方法でした。