Firefox 75 (およびそれ以降) でアドレス バーを変更する方法

Firefox 75 では無意味な変更が行われました。アドレス バー (urlbar) をクリックすると「ズームイン」するようになり、ピン留めしたショートカットを含む周囲の UI が部分的に見えなくなります。このことは完全にモバイルに感じられ、デスクトップでは完全に間違っています.当分の間、上記の記事で示したように、このナンセンスはさまざまな about:config 設定によって元に戻すことができます。

しかし、Firefox 77 (ナイトリー) では、これらのオプションがなくなったため、別のものが必要になります。このチュートリアルでは、古いアドレス バーのルック アンド フィールを取得する方法を紹介します。これにより、悲惨な瞬間に IQ の低い変更の影響を受けることはありません。 Firefox がモバイルの染色体投げゲームを超えていると思っていたのと同じように、この種のことが起こります。私に従ってください。

この迷惑なズームイン アドレス バーを取り除きたいと考えています。

何をするつもりですか?

Firefox UI を以前のように見せるカスタム CSS スタイルを作成します。基本的に、Firefox の UI は他の Web ページと同じようにスタイルを設定できます。これは、Firefox プロファイル フォルダーの userChrome.css ファイルに CSS 宣言を追加することによって行われます。

さて、私はパイオニアではありません。この重要なニーズは、Mozilla サポート サイトですでに回答されています。しかし、そこにあるコードのスニペットには調整が必要です。さらに、以前の外観に戻すためにユーザーが何をする必要があるかをよりシンプルにして明確にしたいと考えています.

userChrome.css を有効にする

まず、ユーザーが行った CSS の変更を尊重するように Firefox に「伝える」必要があります。

• Firefox 68 以下では、何もする必要はありません。
• Firefox 69 以降では、about:config に移動し、次の設定を見つけて false から true に変更します。

toolkit.legacyUserProfileCustomizations.stylesheets

次に、Firefox プロファイル フォルダーに移動します。 Windows では、通常:

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

Linux では、通常:

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

例が必要な場合は、Plasma と HD のスケーリングに関する記事または Firefox の固定タブ ガイドをご覧ください。

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

アドレスバーのスタイルを追加

次のステップは、コンテンツを userChrome.css ファイルに追加することです。次のテキストをコピーします。これは、上記のサポート スレッドから直接取得したものです。これだけでは不十分かもしれませんが、すべてを順を追って説明したいと思います。そうすれば、必要に応じてファイルを確実に変更できます。

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* 一度だけ必要です */

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height:28px !important;
--urlbar-toolbar-height:30px !重要;

幅:100% !重要;
上:calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !重要;
左:0 !重要;
}

#urlbar[breakout][breakout-extend]> #urlbar-input-container,
#urlbar-input-container {
height:var( --urlbar-height) !重要;
width:100% !重要;
padding-block:unset !important;
padding-inline:unset !important;
トランジション:なし!重要;
}

#urlbar[breakout][breakout-extend]> #urlbar-background {
box-shadow:0 1px 4px rgba(0,0,0,.05 ） ！重要;
アニメーション:なし!重要;
}

ファイルを保存し、Firefox を再起動します。

結果、わずかにずれています

私のテストでは、上記のコード スニペットが理想的なレイアウトよりもわずかに少ないことがわかりました。ご覧のとおり、アドレス バーが「高すぎる」位置にあり、垂直方向の中央に配置されていません。上下の余白が間違っています。

CSS、2 回目の変更

必要なことは、追加した CSS で使用されるデフォルト値をわずかに調整することです。つまり、urlbar の高さとツールバーの高さを微調整する必要があります。上余白は、これら 2 つの値の差 (デルタ) の半分として計算されます。トップ値も手動で変更できます。

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height:28px !重要;
--urlbar-toolbar-height:30px !重要;

いくつかの試行錯誤テストを行いましたが、私にとってはツールバーの高さ 38px で十分です:

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height:28px !重要;
--urlbar-toolbar-height:38px !重要;

繰り返しますが、トップマージンは、デフォルトの計算から好きなものに変更できます:

上:calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !重要;

たとえば、次のようになります:

上:5px !重要;

!important オーバーライドの使用は、ええ、重要です - Firefox がデフォルト セットではなくそれを使用するように。

本来あるべき最終的な外観

そして、私たちは正気と論理と知性を取り戻しました:

結論

そして、そこに行きます。ジョブは達成されました。何年にもわたって、通常のブラウザーの動作を実現するためにカスタム CSS をますます使用せざるを得なくなってきました。これは憂慮すべき傾向です。しかし、ますます多くの企業が、増え続ける IQ 100 未満の人々のために役に立たない製品を大量生産しているため、これは避けられないことだと思います。そして、機能的な理由はまったくありません。念のために変更するだけです。そして多くの場合、完全に受け入れられ、科学的に証明され、テストされたソリューションを台無しにする疑似現代的なものです。

この小さな記事が貴重なものであることを願っています。 Firefox 75 ですぐに使用することも、Firefox 77 が放送されるまで待ってから変更を加え、その間に構成のオーバーライドを使用することもできます。それでも、このナンセンスにもかかわらず、少なくとも、技術者が必要とする通常の生産的なレイアウトを取り戻す方法はあります。しかし、将来がどうなるかは誰にもわかりません。 Firefox のようにならないでください。では、どうぞ。任務完了。私に感謝したいなら、私に豪華な贈り物を買って、私に賞賛を送ってください.カーテン。

乾杯。