StylishのチェックマークをLinuxネイティブな画像に置き換える。

Firefox Linux一般 GTK CSS theme


Firefoxの拡張Stylishの「スタイルの管理」ダイアログは、適用しているスタイルの横にチェックマークを表示する。しかし暗色背景のGTK+テーマを使っている場合は、チェックマークが黒のため背景色と見分けがつきにくい。（右のスクリーンショットはAurora-Midnightを使用している。）
Firefox 3.0以降は、OSネイティブなチェックボックスを「-moz-appearance: checkbox」や「-moz-appearance: menucheck」などで使用することができるが*1、tree要素内のため、この方法を使用することが出来ない。詳しく解説はXUL Tutorial:Styling a Treeに載っている。
そこでGTK Stockアイコンをチェックマークに使用して視認性を上げることにした。幸いGTK_STOCK_APPLYがチェックマークそのものなのでこれを使用することにする。
Stylishに以下のようなCSSを書く。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://stylish/content/manage.xul") {
  treechildren::-moz-tree-checkbox(checked) {
    list-style-image: url("moz-icon://stock/gtk-apply?size=12") !important;
    /*大半のテーマでは12x12サイズのアイコンは用意されていないため、
      デフォルトの16x16が使用される。*/
  }
}


これを適用したのが右のスクリーンショットである。（アイコンテーマとしてoxy-gnomeを使用している。）
これでtreechildren部分は緑色のチェックマークに置き換えられた。列の見出し部分も変更するには、XULオーバーレイかjavascriptを使用する必要がある。
XULオーバーレイなら、「chrome://stylish/content/manage.xul」に対して、例えばこんな物を適用する。

<?xml version="1.0"?>

<overlay id="stylish_manage_dialog" xmlns:html="http://www.w3.org/1999/xhtml"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <treecol id="enabledString" src="moz-icon://stock/gtk-apply?size=12"/>
</overlay>

以上を適用して、右のスクリーンショットのようになった。「-moz-appearance: checkbox」と違って、アイコンテーマとGTK+テーマの組み合わせによっては視認性が悪くなる点で劣っているが、何もしないよりはずっといいと思う。

参考記事：

*1:詳しくはCSS:-moz-appearance参照、ただしここに書かれているキーワードはすべてを網羅していない。完全なリストはmozillaのソースコードのlayout/style/nsCSSKeywordList.hにある。どのような場面で使用されることを想定しているかは、gfx/public/nsThemeConstants.hにものっている。