EdgeやVivaldiには垂直タブがある。タブを大量に開く癖がある自分にとって欠かせない機能だ。Firefoxは残念ながらこの機能を持っていないのだが、Tree Style Tabというアドオンをインストールすれば垂直タブの発展形のようなツリー型タブを利用できる。

Tree Style Tabをデフォルトの設定のまま使っても便利だと思う。しかしせっかくなのでCode snippets for custom style rulesを参考に設定を変えると画面を広く使えるようになる。設定箇所はuserChrome.cssとユーザースタイルシートの2箇所だ。

userChrome.css

タブの管理をTree Style Tabに任せるならFirefox本体のタブ表示は無効にしてしまいたい。これはTree Style Tabの制御下にない設定でありuserChrome.cssが必要となる。

userChrome.cssを使うにはabout:configで toolkit.legacyUserProfileCustomizations.stylesheetsをtrueにする。あとはabout:profilesからプロファイルの格納場所を見つけ、その中のchromeディレクトリにuserChrome.cssを放り込めばよい。

ウインドウ上部のタブを隠す

単純に標準のタブを隠すとウインドウを閉じるボタンや最小化するボタンまで隠れてしまうので、それらのボタンの表示場所も確保している。

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
  visibility: collapse !important;
}
#titlebar {
  appearance: none !important;
  height: 0px;
}
#titlebar > #toolbar-menubar {
  margin-top: 0px;
}
#TabsToolbar {
  min-width: 0 !important;
  min-height: 0 !important;
}
#TabsToolbar > .titlebar-buttonbox-container {
  display: block;
  position: absolute;
  top: 12px;
  left: 0px;
}
#nav-bar {
  padding-left: 72px !important;
}

サイドバーのヘッダーを隠す

サイドバーは専らTree Style Tabでのみ使うのでヘッダーは隠してしまう。

#sidebar-header {
  display: none;
}

ユーザースタイルシート

Tree Style Tab自身の見た目については特別な準備なく変更できる。about:addonsからTree Style Tabの設定を開き「ユーザースタイルシート」の項目を変えるだけでよい。

タブの高さを抑える

外観はProtonが好みだが少し高さがあるのでタブをたくさん並べられるように調整する。

:root {
  --tab-border-radius-size: 0.3em;
  --tab-dropshadow-blur: 0.3em;
  --tab-dropshadow-padding: 0.05em;
}
tab-item {
  --tab-size: 25px !important;
}
tab-item:not(.pinned) .background,
.after-tabs button:hover::before,
.after-tabs [role="button"]:hover::before {
  left: 0.3em;
  right: 0.3em;
}
tab-item:not(.pinned) tab-item-substance {
  height: var(--tab-size);
}
tab-item tab-favicon {
  margin-top: 2px;
  margin-right: 1px;
  margin-bottom: 2px;
}
tab-item tab-label {
  padding-top: 0.2em; 
  padding-bottom: 0.3em; 
}

タブを閉じるボタンをホバー時のみ表示する

画面に表示される情報量を少しでも増やすため、タブを閉じるボタンは隠しておく。

tab-item tab-item-substance:not(:hover) tab-closebox {
  display: none;
}