Firefox UI のカスタマイズ方法 - ステップバイステップのチュートリアル

何年にもわたって、最近は以前よりも頻繁に、自分のマシンでの Firefox の外観と動作を変更せざるを得なくなりました。以前は正常なデフォルトがほぼ恣意的に変更され、ワー​​クフローに機能的および美的非効率性がもたらされました。オーストラリスとプロトンは、この現象の良い例です。

最近、Firefox 91 以降でグレー オン グレーの外観を元に戻す方法を説明する 2 つのかなり詳細なガイドを公開しました。どちらの場合も、Firefox の UI に関する以前の知識に依存していました。多くの人にとって、説明がわかりにくすぎるかもしれないことに気付きました。そこで、Firefox の UI をカスタマイズする方法についての一般的なガイドを作成することにしました。これにより、同じ演習を行いたい場合でも、従うのが難しくありません。

基本

Firefox の UI は、ある意味で Web ページに似ています。これは、CSS と呼ばれる Web ベースの言語で具現化された一連のスタイル規則によって定義されます。これはどのサイトにもよく似ています。たとえば、dedoimedo.com では、見たり読んだりするのはテキストですが、ページの幅、フォントの色、段落の間隔などの定義は、すべて CSS ファイルを使用して設定されています。同様に、Firefox も同じようにスタイル設定されています。

独自のルールを作成して、デフォルトのルールをオーバーライドできます。これは、Firefox プロファイルに新しいファイルを追加することによって行われます。ファイル内で、Firefox UI の既存の視覚要素に影響を与える新しいルールを作成 (追加) します。方法は次のとおりです:

• Firefox を開き、アドレス バーに about:support と入力します。
• 開いたページで、表示された表の「プロファイル フォルダ」行を見つけます。 [フォルダーを開く] ボタンをクリックします。これにより、ファイル エクスプローラー (使用しているオペレーティング システムに関係なく) が起動し、Firefox プロファイルの場所が示されます。 Firefox プロファイルはすべてのユーザーに固有であるため、ユーザーごとに個別に変更する必要があることに注意してください。

• Firefox プロファイルの場所がわかったので、バックアップを作成してください。フォルダ全体とそのすべての内容を手動で簡単にコピーすることもできます。このようにして、何か問題が発生した場合でも、元のバニラのベースラインに戻すことができます。これは、大きな変更の前に行ってください。
• Firefox プロファイル フォルダーに、chrome (小文字) という名前のフォルダー (存在しない場合) を作成します。
• このフォルダに移動し、ここで userChrome.css という名前のファイルを作成します (小文字/大文字に注意してください)。
• このファイルをテキスト エディタで開きます。

デフォルトでは、ファイルは空で、何も含まれていません。次に、さまざまな Firefox 要素の外観 (および動作) をオーバーライドする CSS ディレクティブを設定します。これまで何度も行ってきたので、これらのガイドのいくつかをワークフローのベースラインとして参照できます。例:

• Plasma HD スケーリングと Firefox
• Firefox の固定タブ
• Firefox とアドレス バーの動作

追加の基礎

変更を有効にするには、さらにいくつかのことが必要です:

• アドレス バーに about:config と入力します。警告を受け入れて続行してください。
• about:config ページの検索ボックスで、legacy を検索します。次の設定が表示されます:

toolkit.legacyUserProfileCustomizations.stylesheets

それをダブルクリックして、その状態を false から true に切り替えます。これにより、Firefox がカスタム変更を使用してブラウザーに適用できるようになります。この設定を切り替えないと、UI の変更はありません。

• 現在空の userChrome.css ファイルで、次のテキストを先頭に追加します。

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

これにより、従来の要素と宣言を使用できるようになります。

• 最後に、CSS とその仕組みについての基本的な理解が必要です。これがないと、ここで説明する概念を理解するのに苦労することになります。クラス、識別子、CSS 階層の概念全体、ルールの優先順位など。残念ながら、魔法のような近道はありません。

Firefox UI レイアウト

これで、物事を機能させるための主要な要素が揃いました。次に、UI に慣れる必要があります。私のチュートリアル (上記のリンク) では、.tab-background、#searchbar、#navigator-toolbox などを使用しました。どうすればこれらが何であるかを知り、どこでその情報を見つけることができるのでしょうか?

答えはそれほど単純ではありません。残念ながら...

1 つ目は、リファレンス ガイドが必要なことです。 2 つ目は、Firefox に組み込まれている Browser Toolbox を使用して、要素を選択して識別できるようにすることです。これはやや大変な作業です。まず、ブラウザのメニュー> その他のツール> Web 開発者ツールをクリックします。 Then, when this menu opens, click on the three-dot element to the far right (another menu)> Settings. Or press F1. Here, you will need to select the last two options in the right column:Enable browser chrome ... and Enable remote debugging. Not very intuitive. And let's not rant about the use of hamburger and three-dot menu for two different things in the same UI.

Another option is just a quick, dirty crash course from me, with focus on just the most important UI elements. Which is why I made this annotated screenshot, pointing out the elements I changed in my Proton guides.

Here are the (magnificent) seven important elements:

<オール>

#navigator-toolbox - This is the frame containing the page navigation + tab bar.

#nav-bar - This is only the lower half of the navigator-toolbox (the bottom section).

.tabbrowser-tab[selected="true"] - This is the active tab element. Notice the state (selected, true).

.tabbrowser-tab:not([selected="true"]) - This is an inactive tab.

.tabbrowser-tab[usercontextid] - This is a container tab (if you use the containers add-on). Please note that for items 3-5, you should also be aware of the following element - a class called .tab-background, which specifies the background area of the tab(s). We will use it in conjunction with the tab-browser-tab* declarations above shortly.

#urlbar - This is the address bar. Note that there's also #urlbar-background, an identifier that is similar to the tab background element we introduced earlier, and which serves a similar purpose. Once again, we will see the necessary examples very soon.

#searchbar - This is the search box, if you use it.

Things are a bit more complicated than that, of course, but now, you can begin to understand where we're going with this. I think the best solution is to simply demonstrate with a handful of examples, so you understand what gives.

Some basic examples

The code below, when added to userChrome.css will do the following:

• For the active tab, it will set the borders for the tab's large square background piece.
• The top border will be 3px thick, while the left and the right will be only 1px thick.
• They also have different colors.
• The side borders have 30% transparency.

.tabbrowser-tab[selected="true"] .tab-background {
border-left:1px solid rgba(0, 0, 0, 0.3) !important;
border-right:1px solid rgba(0, 0, 0, 0.3) !important;
border-top:3px solid #0a84ff !important;
}

The code below, when added to userChrome.css will do the following:

• For inactive tabs, it will configure the tab background (the large square canvas of the tab) in the following manner:set the actual background color to a mix of current color (system accent color) and transparency layer, using the sRGB color space, and with the system accent color set to just 5% opacity. Basically, the tabs will be pretty much transparent and match your browser's native color.
• Create a very thin 1px (black) border with 30% opacity. The !important clause means your rule will take precedence over any other rule that applies to the same element.

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background-color:color-mix(in srgb, currentColor 5%, transparent);
border:1px solid rgba(0, 0, 0, 0.3) !important;
}

The code below, when added to userChrome.css will do the following:

• It will slightly indent (push inwards) the tabs by adding a 2px margin on the left side. In other words, it will create a tiny bit of extra distance between the tabs and the browser's window edge.

#navigator-toolbox {
margin-left:2px !important;
}

Then, there's more ...

The code below, when added to userChrome.css will do the following:

• It will set the background of the urlbar to pure white, with a thin 30%-opaque border than matches the accent color of the active tab (specified earlier). You have full artistic freedom here.

#urlbar-background {
background-color:white !important;
border:1px solid rgba(10, 132, 255, 0.3) !important;
}

Of course, there's way more! But these examples should get you going, I believe.

結論

That was fairly complicated, I admit. I wish there was a simpler way to edit the Firefox UI, but unfortunately, if you're not happy with Firefox's default looks, and you want to alter them beyond the basic customization available, you will need CSS knowledge, CSS files, and a bunch of rules. This guide outlines how you can achieve that, without going into every specific detail of the browser's interface.

I am fully aware that this isn't a trivial task. CSS looks "easy" to those who know how to use it, but it also creates aversion, justifiably, with ordinary people seeking simple ergonomic solutions. I believe the right way is to actually invest a little bit of time and master this lingo, as it gives you the freedom to make the necessary adjustments to the UI, without relying on arbitrary decisions out there somewhere. I wish Mozilla was making better choices, but hey, even with all this nonsense piled into Firefox, it's still the best browser, it allows you to change the interface, and it's the one browser you should use on your desktop and mobile. It's the only thing that makes the Internet still barely usable, and you will not like the future without Firefox. So grab the CSS, get rid of the annoyances, and continue using Firefox. We're done here.

乾杯。