とある人柱のblog

PCをめぐる話題など

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

Firefox 89から新UIの「Proton」がデフォルトで有効になりましたが、そのまま使うとなると違和感ありありなので手を加えてみました。

 

新UI「Proton」デフォルトが白くて見にくいのをなんとかする

とりあえず以下のテーマをインストールして「アドオンとテーマ」で有効化してみました。

 

Greyish

addons.mozilla.org


他にも多くのテーマがアップされているので好みのテーマを探してみるのも良いです。

 

ブックマークの行間が広がって表示されるのを修正する

ユーザープロファイル\Chrome\userChrome.cssを編集。

(userChrome.cssが無い場合は新規にテキストファイルを作成)

(2021-06-07 追記) 新規にuserChrome.cssを作成して反映させる場合には、about:config で toolkit.legacyUserProfileCustomizations.stylesheets を true に設定しておいてください。

以下を追記


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

 

ウインドウアクティブ時のタイトルバーの背景色をOSのテーマ色に変更する

userChrome.cssに以下を追記

/* ウインドウアクティブ時のタイトルバーの背景色をOSのテーマ色に変更(以前の規定テーマと同じ) */
:is(#TabsToolbar, #toolbar-menubar):not(:-moz-window-inactive) {
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}

 

ちなみに、私の環境のuserChrome.cssは以下のよう記述にしています。

#PersonalToolbar {
height: 30px !important;
}

/* ブックマークツールバーのフォント */
#personal-bookmarks {
font-size: 12px !important;
font-family: "メイリオ"
}

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

/* ウインドウアクティブ時のタイトルバーの背景色をOSのテーマ色に変更(以前の規定テーマと同じ) */
:is(#TabsToolbar, #toolbar-menubar):not(:-moz-window-inactive) {
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}

 

これだけで、私のFirefox 89 UIは以下のようになりました。

f:id:famd:20210606212423p:plain

 

ちなみに、Firefox 89で「ホーム画面で検索ボックスに入力すると自動的にアドレスバーに入力される。」のを直すには、
about:config で browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar を false に設定すると良いです。

 

(2021-06-07 追記) 注意事項

about:config で browser.proton.enabled を false に設定して以前のUIに戻すという手もありますが、Firefox 90、91ではこの設定は削除されている模様です。

以前のUIに戻したい場合は、CSSで修正をおこなう事をおすすめします。

github.com

 

以上、Firefox 89の新UI「Proton」に手を加えてみる (userChrome.cssの編集など)、でした。

参考にしていただけると幸いです。