FirefoxのスカスカUIをキツキツUIにする

経緯

Firefox91以降のFirefoxではProton UIというモバイル向けUIが採用された。
このUIはメニューもブックマークリストも行間を広くとっておりPCユーザーに取っては使いづらい。
そこでカスタムCSSを使用して行間を狭めた。
ネットの情報はいつの間にか消えてしまうので備忘録として残す。

カスタムCSS機能の有効化

デフォルトではカスタムCSSは無効となっているのでまず有効化する。

1. アドレスバーにabout:configを入力して開く。警告が出るがそのまま進める。
2. 検索部分にtoolkit.legacyUserProfileCustomizations.stylesheetsと入力する。
3. 値がfalseだったら、trueに切り替える。

カスタムCSSファイルの設置

1. アドレスバーにabout:support を入力しトラブルシューティング情報を開く。
2. プロファイルフォルダー欄の「フォルダーを開く」ボタンでプロファイルフォルダを開く。
3. プロファイルフォルダ内にchromeという名前のフォルダを新規作成。
4. メモ帳アプリ等を使用してuserChrome.cssという名前のファイル（テキスト）を作成。
5. about:support画面は開いたままにしておく。

カスタムCSSファイルの編集

メニュー行間を狭くする。

• userChrome.cssファイルをメモ帳で開き、下記のcssコードを貼り付ける。

/* メニュー行間を狭くする */
menupopup > menuitem,
menupopup > menu {
  padding-block: 0.15em !important;
}

:root {
  --arrowpanel-menuitem-padding: 3px 6px !important;
}

ブックマークリストの行間を狭くする。

• userChrome.cssファイルをメモ帳で開き、下記のcssコードを貼り付ける。

/* ブックマークアイテムの高さを変える */
.bookmark-item,
.bookmark-item > menupopup,
.bookmark-item > menupopup > menuitem {
padding-block: 0.2em !important;
}

編集したカスタムCSSを有効化する

about:support「トラブルシューティング情報」画面で右上の「起動時キャッシュを消去…」をクリックしてFirefoxを再起動し、メニューとブックマークリストの行間が狭くなれば成功。

参考にしたホームページ

Firefox 91 のスカスカメニューを改善する

Firefox 89の新UI「Proton」に手を加えてみる (userChrome.cssの編集など)

ついでにテーマも変更

デフォルトのLightテーマやDarkテーマは目が痛いので目に優しめのLinux Default Tab Themeに変更した。