Firefox 69 以降でも userChrome.css を使う方法

こんにちは、さち です。

Firefox には、「userChrome.css」というファイルを作ることで、UI（Firefox のデザイン，見た目） などをいじれる機能があります。

これを使って、メニューバーに配置した「アドオン」のアイコンを右寄せにしていたのですが、Firefox 69 にアップデートしてから機能しなくなってしまいました。

問題の詳細

1. 下記の記事のとおり、userChrome.css を作成して、Firefox のメニューバーに配置した「アドオン」のアイコンを右寄せにしていました。
   
   Firefox：メニューバーに配置したアドオンアイコンを右寄せにする

   こんにちは、さち です。今回は Firefox Quantum（バージョン57以降）で、メニューバーに配置したアドオンアイコンを右寄せにする方法について書いていきます。ということで、メニューは左寄せにしつつ、アドオンアイコンだけを右寄せにし

   at.sachi-web.com

   2018.04.23
2. しかし、Firefox をバージョン「69」にアップデートすると……
   
3. アドオンのアイコンが左寄せ（初期設定）に戻ってしまいました。
   
4. 本来は、このように右寄せになるはずなんですが……。
   

Firefox 69 で何か仕様変更があり、「userChrome.css」が正常に機能しなくなってしまったみたいです。

ただ、「userChrome.css」自体が廃止されたわけではないようです。

解決方法

userChrome.css が機能しない場合は、次の点を確認してみて下さい。

「about:config」の設定

「about:config」に userChrome.css の有効／無効を切り替える設定があります。

通常、旧バージョンの Firefox で userChrome.css を使っていた場合は、Firefox 69 以降でも自動的に「有効」になっているはずですが、念のため確認しておきます。

1. アドレスバーに about:config と入力して、Enter キーを押します。
   
2. 警告が表示されたら、「危険性を承知の上で使用する」をクリック。
   
3. 「検索」に toolkit.legacyUserProfileCustomizations.stylesheets と入力。下に表示された項目の値が「true」になっていればOK。（なっていない場合は、項目をダブルクリックして値を「true」にする）
   

「userChrome.css」の適用先

1. 旧バージョンの Firefox では、下記のような userChrome.css を使っていました。適用先（url）としていた chrome://browser/content/browser.xul に問題がありそうですね。

   @charset "UTF-8";
   
   @-moz-document url(chrome://browser/content/browser.xul) {
   
     #toolbar-menubar {
       display: flex !important;
       justify-content: flex-start !important;
     }
   
     #menubar-items {
       margin-right: auto !important;
       flex-shrink: 0 !important;
     }
   
   }

2. 試しに、アドレスバーから chrome://browser/content/browser.xul を開くと、「ファイルが見つかりませんでした」と表示されました。旧バージョンでは Firefox の UI が表示されていたはずですが、廃止されたのでしょうか？
   
3. 調べてみると、Firefox 公式サイトで情報を発見。「browser.xul」は「browser.xhtml」に名前が変更されたようです。Milestone（マイルストーン）に「Firefox 69」とあるので、これが原因とみて間違いなさそう。
   
4. chrome://browser/content/browser.xhtml に変更して、上書き保存します。

   @charset "UTF-8";
   
   @-moz-document url(chrome://browser/content/browser.xhtml) {
   
     #toolbar-menubar {
       display: flex !important;
       justify-content: flex-start !important;
     }
   
     #menubar-items {
       margin-right: auto !important;
       flex-shrink: 0 !important;
     }
   
   }

5. Firefox を再起動すると、userChrome.css が再び機能するようになりました。
   

適用先（url）を削除しても機能するので、そもそも適用先を書かなければ今回のようなトラブルは起きなかったと思います。

でも、書かないと関係ない所にまで CSS が適用されてしまう可能性が1％くらいはあるかもしれないし……。保険をかけて適用先の記述は残しておきます。