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](http://notiz.jp/2011/04/10/174)

ですが、残念なことに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. [こちら](http://notiz.jp/2011/04/10/174)から`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

```css: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;
}
```

# 完成図

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

<img width="466" alt="firefox-ko.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141966/0a07c60b-7fb2-9d30-be20-2af26194cbec.png">

# おまけ（About Thunderbird 娘）

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

↓元ネタはこちらです
[About Thunderbird-ko](http://notiz.jp/2007/06/27/26)

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

## About Thunderbird-ko

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

```css: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;
}
```

こんな感じになります。
<img width="538" alt="thunderbird-ko.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141966/434e8c01-229e-7a16-9e49-7334c046de6b.png">


# 最後に

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