Firefox のテーマの作り方を調べた

必要半分・現実逃避半分で Firefox 用のテーマについて調べました。「作った」といってもデフォルトテーマをちょっといじっただけです。AIR とか流行ってるのに XUL なんて今更なネタですかね。

わたしの環境は

Ubuntu Linux 8.04 (i386)
Firefox 3.0 Beta 5

です。Windows や Firefox 2 などには参考にならないと思います。

はじめの第一歩

http://developer.mozilla.org/en/docs/Creating_a_Skin_for_Firefox:Getting_Started（以降，原典と呼ぶ）を参考に作業を進めました。

テーマ*1は1つの大ディレクトリの下に収まっておらずフラットに格納されているので，作業用のディレクトリを作成しておきます。

$ mkdir my_theme

$ cd my_theme

デフォルトテーマ（classic）を解凍する

テーマに必要なファイルを一から書いていくのは（少なくともわたし含めフツーの人には）無理なので，自分の好みに近いテーマをベースに改造していくことになります。今回は，原典でも利用されている，デフォルトテーマである classic をベースにします。

Firefox 3.0b5 on Ubuntu 8.04 では /usr/lib/firefox-3.0b5/chrome/classic.jar が classic theme のアーカイブなので解凍します。

$ unzip /usr/lib/firefox-3.0b5/chrome/classic.jar
Archive:  /usr/lib/firefox-3.0b5/chrome/classic.jar
 extracting: skin/classic/browser/browser.xml  
...... snip snip snip ......

classic theme に限って言えば skin/classic ディレクトリの下に必要なディレクトリが入っているはず……なのですが，原典にも示されている global, mozapps, help フォルダが存在しません。

Firefox 3.0 だからなのか Ubuntu だからなのかわかんないですけど，それらの共通コンポーネントは，実は XUL Runner なるものとして分離されています。この実体は /usr/lib/xulrunner-1.9b5 ディレクトリに納められているので，さきほどの Firefox の classic.jar を展開した場所で xulrunner の classic.jar を展開します。

$ unzip /usr/lib/xulrunner-1.9b5/chrome/classic.jar
Archive:  /usr/lib/xulrunner-1.9b5/chrome/classic.jar
 extracting: skin/classic/mozapps/profile/profileSelection.css  
...... snip snip snip ......

これで無事 skin/classic ディレクトリの下に，browser, global, mozapps, help, communicator ディレクトリ群ができました。

作業フォルダのトップに移動しておきます。

$ mv skin/classic/* .

$ rm -rf skin

`contents.rdf` と `install.rdf` を作成する

インストール可能なテーマとするためには contents.rdf と install.rdf というファイルが必要となります（ブラウザにバンドルされている classic theme には存在しない）。これを作成します。

$ vi contents.rdf

$ vi install.rdf

具体的な内容については原典参照。

なお，テーマ用 UUID は Linux であれば uuidgen (-t) などで生成できます。

また，install.rdf の <em:targetApplication> の <em:targetApplication> 等は，Firefox 3.0 Beta 世代用であれば下記の設定で通るみたいです。

        <em:minVersion>3.0a1</em:minVersion>
        <em:maxVersion>3.0pre</em:maxVersion>

3.0 がリリースされた暁には 3.0pre を 3.0 にすればよいかも，です。

テーマをインストールする

ここまで内容をいじっていないので，デフォルトの classic テーマとまったく同じテーマができました。これを試しにインストールしてみます。

ディレクトリの内容を zip 形式で固めます。拡張子は jar にしておきます。

$ zip -r ../mytheme.jar *
  adding: browser/ (stored 0%)
  adding: browser/browser.xml (deflated 55%)
...... snip snip snip ......
  adding: preview.png (stored 0%)

再帰的に追加するには zip コマンドに -r オプションが必要なんですね。最初はまりました。

作成した jar ファイルをアドオンダイアログにつっこみ再起動すると新しいテーマが有効になります。ここで画面が壊れたりしていなければワークフローに問題はなかったことになります。

テーマをいじる

試しにちょろっとテーマをいじってみたいとおもいます。

ツールバーエリアにフォクすけを乗せてみました*2。

`-moz-appearance` に気をつけろ

テーマディレクトリの browser や global ディレクトリ以下にはたくさんの CSS ファイルが存在します。これらを修正すると望みどおりにブラウザの見た目をコントロールすることができます。

ですが，（いままでの作業環境である）classic テーマをベースにいじっても，おそらくまったく望みどおりにならないかと思います（せいぜいツールバーのアイコンを変更したりできるだけ，かと）。その秘密を握るのが「[http://developer.mozilla.org/en/docs/CSS:-moz-appearance:title=-moz-appearance]」プロパティです。

このプロパティが none 以外（たとえば button や checkbox）に設定されていた場合，指定されたウィジェットの見た目は OS のウィジェットの見た目と同様になります。たとえば Gnome 上の Firefox でデフォルトのテーマを使っている場合，ボタンやチェックボックス等，Gnome の対応するウィジェットと見た目がまったく同じですよね。Windows 上の場合も同様です。

CSS を編集（たとえば background-color 等）しても内容が反映されない場合，この -moz-appearance プロパティを疑うといいでしょう。

こいつのおかげで classic theme の色調をちょっと変えたテーマを作りたい……といったことをするのが難しい（OS 非依存には不可能）です。

また，ブラウザの見た目を完全にコントロールするテーマを書く場合，-moz-appearance プロパティをかたっぱしから削除していくことになります。その代わり，見た目にかかわるプロパティを色々設定しなきゃいけないですけどね。

CSS を書く

ブラウザの各部位がどのような element / class / id に対応しているのかを調べるには DOM Inspector を利用します*3。

Ubuntu ではデフォルトでインストールされていないので下記のようにインストールします。

$ sudo apt-get install firefox-dom-inspector

ブラウザを立ち上げて，DOM Inspector を開き，メニューの File → Inspect Chrome Document → 1 ... を選択すると，ブラウザ全体の DOM ツリーを眺めることができます。

そのようにして，（今回かかわりのある）ツールバーエリアの DOM について調べた結果がこれです。

Firefox *4 では toolbox や toolbar などの独自 element が定義されていることがわかります。

さて，セレクタを書くのに必要な情報が集まりましたので，CSS ファイルを編集していくことにします。

おおまかにいって，

tab や checkbox 等，全般的なウィジェットの見た目を変えたいのなら global ディレクトリ以下のファイル
ブラウザ特有の見た目を変えたいのなら，browser ディレクトリ以下のファイル

を編集するという方針なんだと思います。なので独自テーマをがしがし作るのであれば global ディレクトリをいじるのが近道でしょう。

ですが，今回は単にツールバーに画像を乗せるだけなので，browser/browser.css ファイルをいじることにしました。

該当ファイルの先頭部分に下記の内容を挿入します（@namespace あたりまでは元々の内容です）。

@import url("chrome://global/skin/");

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

@namespace html url("http://www.w3.org/1999/xhtml");

toolbox {
    -moz-appearance: none !important;
    background-image: url("chrome://browser/skin/foxkeh.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}

toolbox toolbar {
    -moz-appearance: none;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #ccc;
}

toolbox toolbar#toolbar-menu {
    -moz-appearance: menubar;
}

/* ...... snip snip snip ...... */

それほど CSS として難しい記述をしているわけではないので，読めば理解できるかと思います。

フォクすけの画像は foxkeh.png という名前で browser ディレクトリの下に放り込んでおきました。これは chrome://browser/skin/ という URI スキームの下でアクセスすることができます（なぜ skin というパスコンポーネントが必要になるのかわかりませんが）。
toolbox の -moz-appearance プロパティを前述の通り none にして，カスタマイズを可能にしています。ただし，DOM Inspector によると，なぜかこのあとに global/toolbar.css が再度有効になってしまうので !important をつけています((今考えると，セレクタを toolbox#navigator-toolbox にしたほうが，見た目的にもよいし，より限定的セレクタだから !important をつける必要がなかったかも))。
さらに toolbar の -moz-appearance を none にしています。このようにしないと OS look feel で上書きされて toolbox の image が見えないためです。none にしておくと，デフォルトで background: transparent になっているみたいです。
OS look feel な -moz-appearance に見た目をあわせるべく，toolbar の border を指定しています。
メニューについては OS と統一感をもたせたかったので，-moz-appearance を menubar に戻しています。

*1:テーマは機能拡張の一種となります

*2:Creative Commons 表示-非営利 2.1 日本に基づいた原著作者の表示: Mozilla Japan

*3:Firebug では普通の手順ではムリそうでした

*4:Firefox というより XUL framework ですね