[これは Mozilla Add-ons Blog の記事 Toolbar buttons in Firefox 4 – revisited の翻訳です]

更新: 当初これらの変更が Beta 11 で行われたと書きましたが、Beta 12 の間違いでした。この新仕様は最新のナイトリービルドで試せます。あるいは近日公開予定の Beta 12 をお待ちください。文中のサンプルは Beta 11 でも動作しますが、ひとつだけバグがあります。Linux でツールバーが「大きいアイコン」モードになっているとき、大きいアイコンが使われますが、実際の表示は縮小されてしまい、Windows で常に小さいアイコンが使われるような状態になってしまいます。

数か月前、筆者 [Jorge Villalobos] は Firefox 4 のツールバーボタンとアイコン に関する記事を書き、3 プラットフォームすべてにアドオンを対応させるのに必要な CSS と画像の例を説明しました。この記事には「なぜこれほど複雑なのか」「いつになったら本当にシンプルな仕様になるのか」といった趣旨の質問が多く寄せられました。そのため、バグが立って仕様が再検討され、その結果、多くの問題がようやく解決されました。

Firefox 4 Beta 12 には Bug 626382 と Bug 616472 の修正が含まれており、必要なアイコンとスタイリング作業がほぼ最小限に抑えられるようになります。これらの変更は最新のナイトリービルドで試すことができます。

まず初めに、前回の記事の推奨例に従った場合、何も変更は必要ないはずです。筆者は記事のために自作したアドオンをすべてのプラットフォームの最新ベータ版でテストしましたが、まったく同じように表示されました。ですので、これまでのベータ版を使用して既に Firefox 4 対応を済ませているなら、追加の作業は発生しません。それでは、新しいよりシンプルな方法を紹介しましょう。

アドオンを 3 つの主要プラットフォームすべてに対応させ、ツールバーボタンを追加したい場合、最低限必要なものは 16×16px と 24×24px のアイコンです。24×24px のアイコンは通常、Linux の標準テーマで、ナビゲーションツールバーの規定値となっている「大きいアイコン」モードのみに使用されます (筆者は Ubuntu でテストしました)。他のすべてのプラットフォームとモードでは、16×16px のアイコンが使用され、Windows ではマージンが周囲に適宜追加されます。CSS について言えば、これだけの記述で済みます。

#icondemo-toolbar-button {
  list-style-image: url("chrome://icondemo/skin/toolbar.png");
}

toolbar[iconsize="large"] #icondemo-toolbar-button {
  list-style-image: url("chrome://icondemo/skin/toolbar-large.png");
}

他には何も必要ありません。

もしもう一手間掛けて Mac OS X の標準テーマにより馴染ませたい場合は、単色のアイコンを用意するとグッと見た目が良くなります。そのために筆者は クロームマニフェストのフラグ を使って、まったく別のスキンを提供するか、標準のスキンを必要に応じて Mac 向けのスキンで上書きすることをお勧めします。前回の記事のサンプルアドオンは前者でしたが、今回は後者を試してみました。

この記事で紹介した新しいシステムに合わせて変更を加えた 筆者のサンプルアドオン [リンクを Alt+クリックして保存できます] を見てみてください。いくつかのアイコンと CSS ファイルが必要なくなったため、シンプルでサイズも小さくなっています。

あなたがテーマ作者であるか、この新システムを詳しく理解したいとき、あるいは自分のアドオンのために特別なサイズのアイコンを用意する必要があるときは、変更点について分かりやすく説明した このコメント をご覧ください。また、テーマ作者に影響を与える変更点についての最新情報が、Alfred Kayser さんなどによって この MozillaZine フォーラムのスレッド にまとめられています。Alfred さん、ありがとう！

また、上記のバグを解決するため中心となって作業を進めてくださった Dao さんと Paolo さんにも感謝します。