Firefox BrowserでもAbout Firefox 娘

はじめに

以下の環境で動作確認しています。

Windows 10 (64bit)
Firefox 125.0.2 (64bit)
Thunderbird 115.10.1 (64bit)

About Firefox 娘とは

FirefoxはuserChrome.cssを編集することで、UIを色々とカスタマイズできるというのはよく知られていると思います。

そのuserChrome.cssを使って、about画面（メニュー > ヘルプ > Firefoxについて）にFirefox擬人化キャラを表示するAbout Firefox 娘というものがあります。

↓元ネタはこちらです
About Firefox-ko 4.0 beta

ですが、残念なことにFirefox 4.0で更新が止まってしまっています。
もちろん最近のFirefoxではレイアウトが崩れます。

これを最新のFirefoxに対応させます。

手順

userChrome.cssを有効にする

Firefox 69からuserChrome.cssがデフォルトで無効となりました。
これを有効化します。

1. Firefoxのアドレスバーにabout:configと入力しEnter
2. 危険性を承知の上で使用する をクリック
3. toolkit.legacyUserProfileCustomizations.stylesheetsを検索
4. false ⇒ trueに変更
5. Firefoxを再起動

userChrome.cssの作成

1. Firefoxのメニュー > ヘルプ > トラブルシューティング情報を開く
2. プロファイルフォルダー のフォルダを開くをクリック
3. chromeという名前のフォルダを作成します
4. 作成したchromeフォルダにuserChrome.cssを作成します

画像ファイルの準備

Firefox 娘の画像とFirefox Browserのロゴ画像をchromeフォルダにコピーします。
ロゴ画像をコピーするのは、ロゴの文字色を変更するためです。
（※ CSS3のマスクやフィルターで出来るのかも知れませんが、分からなかった･･･）

1. こちらからabout-fx-ko4-beta.pngをchromeフォルダに保存
2. Firefox Browserロゴ画像(chrome://branding/content/about-wordmark.svg) をFirefoxで開き、名前をつけて保存でchromeフォルダに保存

ロゴ画像 (about-wordmark.svg) の文字色変更

About Firefox-koの背景色の薄黄色だと、Firefox Browserロゴが白色のため目立たないです。
そのため、保存したabout-wordmark.svgをsvgを編集できるソフトで開き、文字色を黒っぽく変更します。

編集するソフトはなんでも良いのですが
私は、

1. Inkscapeで開く
2. 編集 > すべて選択
3. フィルター > 色 > 明度コントラスト

で、明度を-80、コントラストを0にして保存しました。

userChrome.cssの編集

chrome://browser/content/aboutDialog.xul をFirefoxで開くとデフォルトのabout画面が表示されます。
開発ツールでcssを確認し、About Firefox-koをuserChrome.cssに適用していきます。
こちらは、Firefox Browserに合わせて少しフラットっぽくしました。

完成したのが以下になります。ご査収ください。

Firefox-ko 125.0

userChrome.css

@charset "UTF-8";

/* Firefox-ko 125.0 */
#aboutDialogContainer .text-link {
    color: #1C64F2 !important;
    text-shadow: 0px 0px 8px white, 0px 0px 8px white, 0px 0px 8px white !important;
    text-decoration: none !important;
}

#aboutDialogContainer .text-link:hover {
    text-decoration: underline !important;
}

#aboutDialogContainer #clientBox {
  background-color: #fffff7 !important;
  color: #222222 !important;
  padding: 0px !important;
}

#aboutDialogContainer #clientBox #leftBox {
  background-image: url("about-fx-ko4-beta.png") !important;
  background-position: center 0% !important;
}

#aboutDialogContainer #clientBox #rightBox {
  background-color: #fffff7 !important;
  background-image: url("about-wordmark.svg") !important;
}

#aboutDialogContainer #bottomBox {
  background-color: #f0f0f0 !important;
}

完成図

実際に表示するとこんな感じになります。

おまけ（About Thunderbird 娘）

別記事にしても良かったけど、面倒だったのでこちらに追加します。
同様にThunderbirdバージョンのAbout Thunderbird 娘もあります。

↓元ネタはこちらです
About Thunderbird-ko

こちらも元記事のCSSでは崩れます。

About Thunderbird-ko

手順はFirefoxと同じなので省略。

userChrome.css

/* Thunderbird-ko 60.0 */

#aboutDialog #clientBox #leftBox {
  background-color: #f5f6f3 !important;
  background-image: url("about-tb-ko.png") !important;
  min-height: 400px !important;
  min-width: 300px !important;
}
#aboutDialog #versionWrapper {
    margin: 0px 13px 0px 10px !important;
}
#aboutDialog #versionField {
    text-align: right !important;
    color: #88888f !important;
    background-color: transparent !important;
}
#aboutDialog #copyright {
    opacity: 0.4 !important;
    color: #333333 !important;
    background-color: #f5f6f3 !important;
    min-height: 65px !important;
    margin: 20px 16px 10px 16px !important;
    padding: 5px 10px !important;
    border: 1px solid #bbbbbb !important;
    -moz-border-radius: 4px !important;
}
#aboutDialog #userAgent {
    color: #ffffff !important;
    background-color: #008ad0 !important;
}

こんな感じになります。

最後に

ぐぐってもAbout Firefox 娘の情報がヒットしないので、記事にしました。
せっかくだから、Firefoxのバージョンアップに追従して記事をちょくちょく更新したいと思います。