Firefox 91以降でProton UIを元に戻す方法！userChrome.cssによる見た目の復元ガイド

Firefox 91がリリースされました。このバージョンアップが何を意味するのかご存じでしょうか。実は、Firefox 91からはabout:config経由でProtonインターフェースを無効化できなくなったのです。なぜこれが大きな問題なのか？答えはシンプルで、ProtonのUIが非常に使いにくいからです。

少し振り返ってみましょう。Mozillaはこれまで何度もFirefoxのUI変更を行ってきましたが、今回正式採用されたのが「Proton」と呼ばれるデザインです。その見た目が決して優れているとは言えないことは、以前ご覧いただいた通りです。Firefox 89でProtonが標準になった当初は、設定をオフに切り替えるだけで、従来通りの快適で生産性の高い環境に戻すことができました。しかしその選択肢が失われた今、低コントラストで無駄の多い「おしゃれ路線」のUIに我慢するしかないのでしょうか。いいえ、そんなことはありません。本記事では、Protonの余計な要素を最小限に抑え、あるいは完全に除去して、まともなブラウジング環境を取り戻すための具体的な方法をご紹介します。

何が問題なのか

この話題はすでに触れてきましたが、改めて指摘しておきたいと思います。グレーの上にグレーを重ねただけのような無意味な配色を見てください。タブの始まりはどこで、終わりはどこにあるのか？そもそもそれが本当にタブなのかさえ怪しいレベルです。80年代〜90年代の大きなバインダーでページの区切りに使われていた色分けインデックスを覚えていますか？そこに「見えないタブ」を持ち込む発想、誰が思いつくのでしょう。「エルゴノミクス（人間工学）」だと言うなら笑わせないでほしいものです。

事前準備

できることはたくさんありますが、まずは一歩ずつ進めましょう。今回の作業の本質を理解することが重要です。組み込みの設定変更が不可能になった今、より深いレベルに踏み込む必要があります。実は、Firefoxの見た目はWebページを編集するのと同じ要領で、独自のCSSルールによって変更できます。現代のブラウザの多くは、自らのUIもWebページと同じ仕組みでスタイリングしているのです。Plasma＆HD環境向けのチュートリアル、ピン留めタブのガイド、アドレスバーを見やすくするチュートリアルでも同じ手法を紹介してきました。今回の作業もその延長線上にあります。

まず、ユーザー作成のCSS上書き機能を有効にします。新しいタブを開いて「about:config」と入力し、以下の設定項目を検索してください：

toolkit.legacyUserProfileCustomizations.stylesheets

この設定を「true」に切り替えます。次に、Firefoxのプロファイルフォルダへ移動しましょう。Windowsの場合、通常は以下の場所です：

C:\Users\"username"\AppData\Roaming\Mozilla\Firefox\"profile"

Linuxの場合は通常こちらです：

/home/"user"/.mozilla/firefox/"profile"

このフォルダ内に「chrome」という名前のフォルダを作成します（すべて小文字、既に存在する場合は不要）。続けてchromeフォルダの中に「userChrome.css」という空のテキストファイルを作成してください（大文字・小文字の区別に注意）。このファイルにCSSコードを追加していきます。

Proton対策のCSSルール

次に、Firefoxの挙動を変更するための複数のルールを追加していきます。最も深刻なのは新しいタブのデザインで、大きすぎるタブ、淡すぎるコントラスト、アクティブタブと非アクティブタブ、さらには背景のタブバーとの区別がほぼ皆無という状態です。ここからが厄介なのですが、「正解」となる単一のCSSルールセットは存在しません。主な選択肢としては以下があります：

• AskVGのガイド（クラシックな外観＆UIを復元する方法）― 最もシンプルなガイドで、本記事の土台となっています。
• GitHubプロジェクト： Protonを旧Photonのコンパクト表示に戻すもの。
• GitHubプロジェクト： Protonの一部を修正するもの。
• GitHubプロジェクト： クラシックな外観を実現するもの（Proton以外にも多くの要素を含みます）。
• Firefox 89 Proton UI インタラクティブスタイラー ― 様々な要素をライブプレビュー付きで変更できます。

まずはAskVGのガイドから始めましょう。userChrome.cssに以下のコードを追加します：

.titlebar-color {
  color: -moz-accent-color-foreground;
  background-color: -moz-accent-color;
}

.tab-background {
  border-radius: 0px 0px !important;
  margin-bottom: 0px !important;
}

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
  background-color: color-mix(in srgb, currentColor 5%, transparent);
}

menupopup > menu, menupopup > menuitem {
  padding-block: 2px !important;
}

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

これだけでかなりマシな見た目になります。アクティブなタブには境界線が付き、非アクティブなタブには付かなくなりますが、標準のProtonよりははるかにコントラストが明確です。私自身はこれで十分だと感じましたが、さらにいくつかの改良を加えることにしました。

非アクティブタブの境界線

非アクティブなタブにも境界線を付けたい場合は、以下を追加します：

.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background {
  border: 1px solid rgba(130, 130, 130, 0.5) !important;
}

これにより、非アクティブタブに50%透過の薄いグレーの1px実線ボーダーが適用されます。色や透明度は好みに応じて自由に変更できます。なお、このルールは先ほどのAskVGコードとよく似ているため、統合すればCSSファイルをよりコンパクトにできます。ただし、よく分からない場合はそのまま別々に追記しても問題ありません。ルールはレイヤーのように重ねて適用されるため、競合は発生しません。

アクティブタブの境界線

同じように、細部までこだわりたい方のためにアクティブタブも調整できます：

.tabbrowser-tab[selected="true"] .tab-background {
  border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
}

タブのアクセントカラー

アクティブなタブを強調して、他のタブと一目で区別できるようにすることもできます：

.tabbrowser-tab[selected="true"] .tab-background {
  border-top: 3px solid #3daee9 !important;

上記の定義にこの行をそのまま追加する形でも構いません。私の例では、デスクトップのカラースキームに合わせたアクセントカラーを設定しました。#3daee9はこの例で使用しているKDE Plasmaデスクトップのアクセントカラーです。システムのアクセントカラーを使いたい場合は、タイトルバー用のCSSルールで定義されている変数を利用できます：

border-top: 3px solid -moz-accent-color-foreground !important;

タブバーの高さ

タブをより小さくしたい場合（旧コンパクトモード風）、以下のルールを追加します：

.toolbar-items, .tabbrowser-tab {
  max-height: 38px;
}

:root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
  max-height: 45px;
}

数値は自由に変更できます。例えば「max-height: 28px;」などです。touch句は必須ではないので、自分に合った密度（高さ）を選んでください。

コンテナータブの色分け

Firefox 91では、コンテナータブも地味になってしまい、通常のタブとの区別がつきにくくなっています。そこで、少し色を加えることにしました。やり方は多数ありますが、ここまで読み進めた皆さんなら、必要な変更を加えることにはだいぶ慣れてきているはずです。私は、コンテナーの色に合わせてタブ全体を着色し、美しい境界線も加える方式を採用しました：

.tabbrowser-tab[usercontextid] .tab-background {
  background: var(--identity-tab-color) !important;
  border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-bottom: var(--identity-tab-color) !important;
  opacity: 0.8 !important;
}

各タブは固有のアイデンティティカラー（var句で定義）を使用し、下端のボーダーもその色に合わせることでタブバーに自然になじませています。左右のボーダーは通常タブと共通です。さまざまなパターンを試してみました。例えば、不透明度20%と80%のそれぞれの結果が以下の画像です。

これであなたのFirefoxは格段に良くなりました！もうひとつ、ちょっと変わった例もどうぞ：

その他の細かい調整

まだまだできることはあります。例えば私は、アドレスバーのズームボタンもパディングがわずかにズレていたため調整しました。浮いたピクセルは許容できませんからね。ただ、記事としてはここらで美しく締めくくりましょう。

#urlbar-zoom-button {
padding-top: 0px !important;
}

まとめ

以上です。今回は、Firefox 91に導入された無用な「モダン」UI変更の一部を取り消す方法をご紹介しました。FirefoxがCSSオーバーライドに対応し続ける限り、希望はあります。自分の使うソフトウェアと戦わなければならないのは決して楽しいことではありませんが、少なくとも低品質なデザインを排除し、生産性と効率を維持する選択肢はまだ残されています。上記のCSSルールを使えば、Firefox 91、そして何より重要なFirefox 91 ESRも、当面は比較的まともで使いやすい外観を保つことができるでしょう。

では、1年後や2年後はどうなるのでしょうか？誰にも分かりません。Mozillaチームが積み上げる数々の迷改造にもかかわらず、私は今もFirefoxをデフォルトブラウザにすべきだと信じていますが、この立場をどこまで維持できるかは正直自信がありません。いつの日か、Firefoxがライバル並みに視覚的に醜く使い物にならなくなるときが来るかもしれません。Chromiumベースのブラウザしか選択肢がないのに、インターネットを使いたくはありません。ウェブをやめる？それも一つの解決策かもしれませんね。まあ、今日その難しい選択をする必要はないでしょう。CSS調整完了。理性1、おしゃれ路線0。以上です。

それでは、また。