Firefox 91 以降で Proton UI を元に戻す方法

Firefox 91 がリリースされました。これが何を意味するか知っていますか？これは、about:config を使用して Proton インターフェースを無効にすることができなくなったことを意味します。なぜこれが重要なのですか？プロトンはダメだから。レビューの早い段階で私のメッセージの激しさに混乱している人のために、要約しましょう.少し前に、Mozilla は Firefox の UI を変更すると発表しました。今回はプロトンと呼ばれます。

これがどのように見えるかお見せしましたが、見た目は良くありません。しかし、Firefox 89 で Proton が正式になり、オフに切り替えるだけで、生産性と効率性を享受しながら、大切な人生を歩むことができました。しかし今では、これはもはや選択肢ではありません。したがって、役に立たない低コントラストの流行に我慢したくない場合は、Proton の役に立たない側面を最小化または削除して、正気のブラウジングに戻るために使用できる一連の変更を紹介します。

当面の問題

これについては話しましたが、もう少し話す必要があります。その役に立たない、灰色の灰色のナンセンスを見てください。タブはどこから始まりますか?どこで終わりますか？タブでもありますか？ 80 年代と 90 年代に古い大きなフォルダーで、ページなどに印を付けるために人々が使用していたカラー タブを覚えていますか?目に見えないタブを想像してみてください。当たり前！エルゴノミクス!

材料

できることはたくさんあります。しかし、ゆっくり始めましょう。まず、今日の仕事の性質を理解する必要があります。組み込みの設定調整ができなくなったため、さらに深く掘り下げる必要があります。 CSS ルールのカスタム セットを使用して Firefox の外観を変更できます。これは Web ページを編集するのと同じように行うことができます。実際、最新のブラウザーのほとんどは Web ページと同じようにスタイルを設定します。 Plasma &HD チュートリアル、固定タブ ガイド、および URL バーを正常に見せる方法に関するチュートリアルで、これを行う方法を既に示しました。これが、今日の作業のベースラインです。

まず、オプションを有効にして、カスタムのユーザー作成 CSS オーバーライドを使用します。新しいタブを開き、「about:config」と入力して、次の設定を検索します:

toolkit.legacyUserProfileCustomizations.stylesheets

この設定を true に切り替えます。次に、Firefox プロファイル フォルダーに移動します。 Windows では、通常:

C:\Users\"ユーザー名"\AppData\Roaming\Mozilla\Firefox\"プロファイル"

Linux では、通常:

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

このフォルダーに、chrome (小文字) というフォルダーを作成します (まだ存在しない場合)。 chrome フォルダー内に、(存在しない場合は) userChrome.css という空のテキスト ファイルを作成します (小文字/大文字に注意してください)。このファイルに一連のテキストを追加します。

陽子のルール

ここで、Firefox の動作を変更するいくつかのルールを追加する必要があります。最も問題のある要素は、新しいタブの動作です。タブが大きすぎ、コントラストが薄く、アクティブなタブと非アクティブなタブと背景のタブ バー ストリップがほとんど分離されていません。ここで問題が発生するのは、単純に使用できる決定的な CSS ルールのセットが 1 つもないためです。オプションの一部:

• 従来の外観と UI を復元する方法についての AskVG ガイド - 最も簡単なガイドであり、ここでの作業のベースラインです。
• Proton を Photon Compact に戻す GitHub プロジェクト
• Proton の一部を変更する GitHub プロジェクト
• クラシックな外観を使用するための GitHub プロジェクト (Proton 以外にも多数含まれています)。
• Firefox 89 Proton UI インタラクティブ スタイラー - あらゆる種類の変更とライブ プレビューが可能です。

AskVGガイドから始めましょう。 userChrome.css に、次のコードを追加します:

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

.tab-background {
境界線の半径:0px 0px !重要;
margin-bottom:0px !重要;
}

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background- color:color-mix(srgb で、currentColor 5%、透明);
}

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

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

これにより、見栄えがよくなります。アクティブなタブには境界線があり、背景のタブにはありません。ただし、標準のプロトンよりも優れたコントラストが得られます。これで十分だと思いましたが、さらにいくつかの変更を行うことにしました。

背景タブの境界線

背景タブにも境界線を付けたい場合は、次を追加できます:

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

これにより、背景タブが 50% の透明度に設定された明るい灰色の 1 ピクセルの実線の境界線に設定されます。好きな色や透明度の値を使用できます。また、この句は、AskVG のコード スニペットで定義されている句と非常によく似ていることに注意してください。実際にルールを組み合わせて、CSS ファイルのコードのより小さくコンパクトなセクションを作成できます。ただし、何をすべきかよくわからない場合は、余分な行を個別に追加してください。ルールが階層化されているため、競合はありません。

前景タブ枠

同様に、OCD のためにアクティブなタブを微調整することもできます:

.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) !重要;
}

タブのアクセント カラー

アクティブなタブが強調表示されて表示されていることを確認して、他のタブと区別することができます:

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

必要に応じて、上記の定義に余分な行を追加できます。この例では、デスクトップの配色に合わせてアクセント カラーを設定しています。カラー コード #3daee9 は、この特定の例で 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 では、コンテナ タブの見た目も平凡になり、通常のタブとの区別が難しくなります。そこで、少し色を加えることにしました [sic]。多くのオプションがあり、ここまでで、必要な変更を行うことに少し慣れてきたはずです。コンテナの色に合わせて完全に色分けされたタブと素敵な境界線を選択したので、OCD の悪魔を目覚めさせる必要はありません:

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

各タブは独自の識別色 (var 句で定義) を使用し、下部の境界線は識別色と一致するため、タブはタブ バーにうまく溶け込み、側面の境界線は通常のタブとまったく同じです。さまざまなオプションを試しました。たとえば、不透明度 20% と 80% の両方のオプションを試しました。一言:

そして今、あなたの Firefox はとても良く見えます!もう 1 つのクレイジーな例:

追加の化粧品

できることは他にもたくさんあります。アドレス バーのズーム ボタンを微調整しました。これは、パディングがわずかにずれていたためです。不正なピクセルを使用することはできません。しかし、盛況のうちにここで終了する必要があります。

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

結論

では行きましょう。今日は、Firefox 91 に導入された不要な「モダン」UI の変更を元に戻す方法を紹介しました。Firefox に CSS オーバーライドがある限り、希望はあります。ソフトウェアと戦わなければならないのは楽しいことではありませんが、少なくとも IQ の低いものを取り除き、生産性と効率を維持する選択肢があります。上で概説した CSS ルールにより、Firefox 91、さらに重要なことに Firefox 91 ESR は、予見可能な将来において比較的まともで使いやすいものに見える可能性があります。

1年か2年後はどうなっているでしょうか？知るか。 Mozilla チームが Firefox にまったくナンセンスを積み上げているにもかかわらず、私は Firefox がデフォルトのブラウザーであるべきだと今でも信じていますが、いつまでその地位を維持できるかはわかりません。ある時点で、Firefox はライバルの見た目の醜さと役に立たないレベルに達するかもしれません。 Chromium ベースのブラウザーが唯一の選択肢である場合、インターネットを使用したくないため、そのとき私が何をしようとしているのかわかりません。ウェブをやめますか？それが解決策かもしれません。さて、今日は難しい選択に直面する必要はありません。 CSSの微調整が完了しました。知性 1、ヒップスター学 0。終わり。

乾杯。