「Places/ツリーの作成」の編集履歴（バックアップ）一覧はこちら

Places/ツリーの作成 - (2013/06/13 (木) 10:48:38) の１つ前との変更点

追加された行は緑色になります。

削除された行は赤色になります。

作成というか、ブックマークメニューやパネルをカスタマイズする方が主か。

#contents()

*Places ツリーを作る
tree タグでツリーを作ったときに type="places" とし、スタイルシート places/places.css を読み込むと、XBLバインディングで Places ツリー本体の places/tree.xml が読み込まれる。Places ツリーには places/controller.js と places/treeView.js も必要で、それらは places/placesOverlay.xul でまとめて読み込める。よって基本は
#highlight(xml){{
<?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>https://developer.mozilla.org/ja/docs/Places_query_URIs]] を指定する。URI が完全に固定化されてるなら XUL に直接書いてもいいが、普通は JavaScript を使用する。
#highlight(javascript){
var view = document.getElementById("sample-view");
view.place = "place:queryType=1&folder=" + PlacesUIUtils.allBookmarksFolderId;}

*ツリークリック時の動作を設定
tree 要素に onclick 属性を設定する。
#highlight(xml){
  <tree id="sample-view"
        type="places"
        onclick="handleTreeClick(this, event);">}
#highlight(javascript){{
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;
} }}


*Places の右クリックメニューに項目追加
#highlight(XML){
<menupopup id="placesContext">
    <menuitem label="サンプル"
        oncommand="function(){}"
        selectiontype="single"
        selection="bookmark|folder"
        insertbefore="placesContext_openSeparator"/>
</menupopup>}
placesContext は chrome://browser/content/places/placesOverlay.xulに書かれているので、それを overlay してやればいい。
-[[SCRAPBLOG : Places 右クリックメニューへのメニュー項目追加>http://www.xuldev.org/blog/?p=178]]

**表示非表示の切り替え
onpopupshowing なんて使わなくても属性を設定するだけで簡単に表示の切り替えが出来る。places/controller.js に実装されている。
|属性|説明|h
|selectiontype|single/multiple のいずれか。単数/複数選択で表示|
|selection|下記の表の値。"｜"で複数指定可能。条件が合えば表示|
|forcehideselection|下記の表の値。"｜"で複数指定可能。条件が合えば隠す|
|hideifnoinsetionpoint|値はtrue固定。挿入する場所が無いと隠す。例えばクエリフォルダ内にアイテムの新規作成とか|

selection や forcehideselection に設定できる値のリスト
|値|説明|h
|query|[[nsINavHistoryResultNode>https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsINavHistoryResultNode]] で RESULT_TYPE_QUERY|
|　　host|[[nsINavHistoryQueryOptions>https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsINavHistoryQueryOptions#Result_type_constants]] で RESULTS_AS_SITE_QUERY|
|　　day|これは RESULTS_AS_DATE_QUER か RESULTS_AS_DATE_SITE_QUERY|
|dynamiccontainer|RESULT_TYPE_DYNAMIC_CONTAINER|
|folder|フォルダ|
|separator|セパレーター|
|link|RESULT_TYPE_URI、RESULT_TYPE_VISIT、RESULT_TYPE_FULL_VISIT|
|　　bookmark|ブックマーク|
|　　microsummary||
|　　tagChild||
|　　livemarkChild||


*右クリックメニューから、選択されてるノードを取得する
#highlight(javascript){
var view = PlacesUIUtils.getViewForNode(document.popupNode);
var node = view.selectedNode;    // single の場合
var nodes = view.selectedNodes;  // multiple の場合}
PlacesUIUtils.getViewForNode が超便利。
view は tree要素。places/tree.xml にプロパティやメソッドが定義されてる。
node は[[nsINavHistoryResultNode>https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsINavHistoryResultNode]]。nodes はその配列。

-[[SCRAPBLOG : Places ビューと nsIPlacesView インタフェース>http://www.xuldev.org/blog/?p=179]]
-[[Displaying Places information using views | MDN>https://developer.mozilla.org/ja/docs/Displaying_Places_information_using_views]]

作成というか、ブックマークメニューやパネルをカスタマイズする方が主か。

#contents()

*Places ツリーを作る
tree タグでツリーを作ったときに type="places" とし、スタイルシート places/places.css を読み込むと、XBLバインディングで Places ツリー本体の places/tree.xml が読み込まれる。Places ツリーには places/controller.js と places/treeView.js も必要で、それらは places/placesOverlay.xul でまとめて読み込める。よって基本は
#highlight(xml){{
<?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>https://developer.mozilla.org/ja/docs/Places_query_URIs]] を指定する。URI が完全に固定化されてるなら XUL に直接書いてもいいが、普通は JavaScript を使用する。
#highlight(javascript){
var view = document.getElementById("sample-view");
view.place = "place:queryType=1&folder=" + PlacesUIUtils.allBookmarksFolderId;}

*ツリークリック時の動作を設定
tree 要素に onclick 属性を設定する。
#highlight(xml){{
<tree id="sample-view"
      type="places"
      onclick="handleTreeClick(this, event);">
</tree>}}
#highlight(javascript){{
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;
} }}


*Places の右クリックメニューに項目追加
#highlight(XML){
<menupopup id="placesContext">
    <menuitem label="サンプル"
        oncommand="function(){}"
        selectiontype="single"
        selection="bookmark|folder"
        insertbefore="placesContext_openSeparator"/>
</menupopup>}
placesContext は chrome://browser/content/places/placesOverlay.xulに書かれているので、それを overlay してやればいい。
-[[SCRAPBLOG : Places 右クリックメニューへのメニュー項目追加>http://www.xuldev.org/blog/?p=178]]

**表示非表示の切り替え
onpopupshowing なんて使わなくても属性を設定するだけで簡単に表示の切り替えが出来る。places/controller.js に実装されている。
|属性|説明|h
|selectiontype|single/multiple のいずれか。単数/複数選択で表示|
|selection|下記の表の値。"｜"で複数指定可能。条件が合えば表示|
|forcehideselection|下記の表の値。"｜"で複数指定可能。条件が合えば隠す|
|hideifnoinsetionpoint|値はtrue固定。挿入する場所が無いと隠す。例えばクエリフォルダ内にアイテムの新規作成とか|

selection や forcehideselection に設定できる値のリスト
|値|説明|h
|query|[[nsINavHistoryResultNode>https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsINavHistoryResultNode]] で RESULT_TYPE_QUERY|
|　　host|[[nsINavHistoryQueryOptions>https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsINavHistoryQueryOptions#Result_type_constants]] で RESULTS_AS_SITE_QUERY|
|　　day|これは RESULTS_AS_DATE_QUER か RESULTS_AS_DATE_SITE_QUERY|
|dynamiccontainer|RESULT_TYPE_DYNAMIC_CONTAINER|
|folder|フォルダ|
|separator|セパレーター|
|link|RESULT_TYPE_URI、RESULT_TYPE_VISIT、RESULT_TYPE_FULL_VISIT|
|　　bookmark|ブックマーク|
|　　microsummary||
|　　tagChild||
|　　livemarkChild||


*右クリックメニューから、選択されてるノードを取得する
#highlight(javascript){
var view = PlacesUIUtils.getViewForNode(document.popupNode);
var node = view.selectedNode;    // single の場合
var nodes = view.selectedNodes;  // multiple の場合}
PlacesUIUtils.getViewForNode が超便利。
view は tree要素。places/tree.xml にプロパティやメソッドが定義されてる。
node は[[nsINavHistoryResultNode>https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsINavHistoryResultNode]]。nodes はその配列。

-[[SCRAPBLOG : Places ビューと nsIPlacesView インタフェース>http://www.xuldev.org/blog/?p=179]]
-[[Displaying Places information using views | MDN>https://developer.mozilla.org/ja/docs/Displaying_Places_information_using_views]]