Places/ツリーの作成 - userChrome.js作成メモWiki

Places ツリーを作る

tree タグでツリーを作ったときに type="places" とし、スタイルシート content/places/places.css を読み込むと、XBLバインディングで Places ツリー本体の content/places/tree.xml が読み込まれる。Places ツリーには content/places/controller.js と content/places/treeView.js も必要で、それらは content/places/placesOverlay.xul でまとめて読み込める。よって基本は

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xml-stylesheet href="chrome://browser/content/places/places.css"?>
<?xml-stylesheet href="chrome://browser/skin/places/places.css"?>
<?xul-overlay href="chrome://browser/content/places/placesOverlay.xul"?>
<window>
  <tree id="sample-view"
        type="places">
    <treecols>
      <treecol primary="true"/>
    </treecols>
    <treechildren view="sample-view"/>
  </tree>
</window>

skin の places.css は必ずしも必要では無いが、Firefox 本体と統一感を出すなら読み込むべき。
placesOverlay.xul には標準の右クリックメニューやツールチップも定義されている。

これだけだとまだ Places データと接続されていない。tree の place 属性に Places URI を指定する。URI が完全に固定化されてるなら XUL に直接書いてもいいが、普通は JavaScript を使用する。

var aTree = document.getElementById("sample-view");
aTree.place = "place:queryType=1&folder=" + PlacesUIUtils.allBookmarksFolderId;

ツリークリック時の動作を設定

tree 要素に onclick 属性を設定する。

<tree id="sample-view"
      type="places"
      onclick="handleTreeClick(this, event);">
</tree>

function handleTreeClick(aTree, aEvent) {
  if (aEvent.button === 2) {
    return;
  }
 
  // クリックした行、列、オブジェクトを取得
  var tbo = aTree.treeBoxObject;
  var row = { }, col = { }, obj = { };
  tbo.getCellAt(aEvent.clientX, aEvent.clientY, row, col, obj);
 
  // twistyはフォルダ開閉の＋画像の事。そこやツリー外をクリックした場合は何もしない。
  if (row.value == -1 || obj.value == "twisty") {
    return;
  }
 
  // クリックしたセル内のアイコンの座標を取得し、
  // アイコンより左（文字方向によっては右）をクリックしていた場合は何もしない。
  var x = { }, y = { }, w = { }, h = { };
  tbo.getCoordsForCellItem(row.value, col.value, "image", x, y, w, h);
  var isRTL = window.getComputedStyle(this.tree, null).direction == "rtl";
  if (isRTL) {
    if (aEvent.clientX > x.value) return;
  } else {
    if (aEvent.clientX < x.value) return;
  }
 
  // あとはお好きなように
  var node = aTree.selectedNode;
}