XUL – mtamaki.com – Trac

Context Navigation

Element Reference
Elementの有効無効の切り替え
- setAttribute("disabled", true)とすると無効になる。再び有効にするにはremoveAttribute( "disabled" )。
  - element.disabled = true/falseではうまくいかないことがある。
  - disabled="disabled"もだめっぽい
CSS系
- CSSは基本的に後から書いたほうが優先されるが、複雑なCSSセレクタの場合順序が変わることがある。
  - CSSに関する基本的なこと4（優先順位、セレクタの組み合わせ）｜CSS HappyLifeの「スタイルの優先順位詳細」などが詳しい。
  - XULへのCSSの適用はElementの内部Elementに対する指定を行うことが多くて複雑になりがち。優先順位に影響を受けることがあるので留意のこと。
- XULでCSSでElementのスタイルを指定する際は、CSSセレクタの先頭にトップレベルのElement(toolbarなど)のIDのセレクタを書いておくほうがよい。
  - そのCSSが他の拡張やFirefox本体に影響してしまうのを防げる。
  - 以降の説明では#root_element_idと書いてあるのがそれ。
- -moz-appearance
  - WindowsXPのLunaスタイルやMacでは、toolbarbuttonやテキストエリアなどがデフォルトではシステムのスタイルが優先されて使われる。
    - これらに好きなスタイルを設定したいときは-moz-appearance:none;を設定する。
イベント系
- toolbarbuttonやmenuitemなどが押されたときのイベントはcommandイベントでとる。clickイベントはdisabled=trueのときなどにも送られてくる。
- popupshowing
  - toolbarbuttonやmenupopupのpopoupshowingは、子のmenupopupのpopupshowingのとき以外にも、孫のmenupopupのpopupshowingのときにも呼ばれる。
    - なので、popoupshowingでmenupopup以下を削除してから孫のmenupopupを含めてリビルドするようなコードを書いていると、孫のメニューを開こうとしたときにffが固まったり、悪いと異常終了する。
- MacのFirefox?2ではkeydownイベントで日本語入力確定時のEnterが送られてきてしまう。keypressを使うとよい
Element別Tips?
- Checkbox
  - チェックするとchecked属性が"true"となって、その他のときは""。booleanとして扱うとうまくいかないことがある。
- Dialog
  - OKボタンのイベントはdialogaccept。
  - OKボタンが押されたあと、ダイアログが閉じられるのをキャンセルするときはevent.preventDefault();return false;
    - ダイアログが閉じられるのをキャンセルした後で閉じたいときはsetTimeout("window.close()")
- Menu
  - menuやmenuitemとかにアイコンを指定したいときはそれぞれのclassにmenu-iconicやmenuitem-iconicを指定する。たくさんメニューがあってめんどくさければ以下のようにしてもいいかも。でも重いかも。
```
#root_element_id menu {
    -moz-binding:url(chrome://global/content/bindings/menu.xml#menu-iconic);
}
#root_element_id menuitem {
    -moz-binding:url(chrome://global/content/bindings/menu.xml#menuitem-iconic);
}
```
- Menulist (ドロップダウンリスト)
  - http://xulplanet.jp/xultu/lists.html
```
<menulist>
    <menupopup>
            <menuitem label="A" selected />
            <menuitem label="B" />
    </menupopup>
</menulist>
```
  - 編集可能なやつはmenulistの属性にeditable="true"とする。
  - JSでmenuitemを加えるときはmenupopupにidをつけてgetElementByIdでとった後、document.createElementで作ったmenuitemにsetAttribute("label", "C")として名前をつけてappendChildする。
  - 削除するときはremoveChild。
  - メニューの数はchildNodes.length。
  - menulistを無効にするとeditableが解除される。その場合はもう一度trueを設定する。
- Menupopup
  - XUL:PopupGuide:Positioning - MDC
    - ポップアップメニューの表示位置指定について画像入りで詳しく解説
- Splitter
  - XUL Tutorial:Splitters - MDC
  - 以下のようにしても、デフォルトではorientがverticalになっているためかセパレータが消えてしまう。
```
<splitter state="open" resizeafter="grow"><toolbarseparator /></splitter>
```
    - 以下のようにすればうまくいく
```
<splitter state="open" resizeafter="grow">
    <hbox flex="1" >
            <toolbarseparator />
    </hbox>
</splitter>
```
  - スプリッタは親要素の子要素のサイズを変更する。resizeater=farthestで好きな要素をリサイズしたいときはうまくhboxなどで子要素をくくるとよい。
  - スプリッタのボーダーはborder:0px;で消せる。
  - Macではスプリッタの背景に丸いぽっちが出てくる。消すにはbackground-image:none;
  - 以下最新版でも再現するか不明
```
<toolbar>
    <toolbarbutton/>
    <splitter id="sample_splitter" state="open" resizebefore="closest" resizeafter="grow"><vbox id="sample_grippy"/></splitter>
    <toolbarbutton/>
    <splitter id="sample_splitter" state="open" resizebefore="closest" resizeafter="grow"><vbox id="sample_grippy"/></splitter>
    <toolbarbutton flex="1"/>
</toolbar>
```
    - とすると2番目のスプリッタの右方向への移動ができなくなる。この場合
```
<toolbar>
    <toolbarbutton/>
    <splitter id="sample_splitter" state="open" resizebefore="closest" resizeafter="grow"><vbox id="sample_grippy"/></splitter>
    <toolbarbutton hidden="true"/>
    <toolbarbutton/>
    <splitter id="sample_splitter" state="open" resizebefore="closest" resizeafter="grow"><vbox id="sample_grippy"/></splitter>
    <toolbarbutton flex="1"/>
</toolbar>
```
    - とするとうまくいく。
- Textbox
  - テキストボックスにフォーカスが移ったときに内容を全選択する
```
textbox_element.inputField.addEventListener( "focus", function( event ){ event.target.select(); } )
```
  - テキストエリアにオートコンプリート機能をつける：も
    - textboxのtypeをautocompleteにする。
    - autocompletesearchをform-historyにする。
    - autocompletesearchparamに適当な名前を指定する。
    - textboxのkeypressでevent.keyCode == 13のときとかに、Components.interfaces.nsIFormHistoryのインスタンスに対してaddEntry( (autocompletesearchparamで指定した名前), 入力された文字列 )としてあげると、フォームの入力履歴として登録される。以降、自動的に補完メニューが出るようになる。
      - ちなみにbrowser.formfill.enableがfalseになっているとオートコンプリート機能が動かない
  - the meager: Firefoxでキャレットに横棒みたいのが表示される件
    - direction:rtl を設定する拡張機能があるとそうなる模様。例えば空っぽのプロファイルを作った後にXUL Apps > Tree Style Tab - outsider reflexとか入れると再現する。('08/02現在) ただ、これは拡張機能のバグというより、Firefox側のCSSの解釈ミスのような気もする。細かくは未調査。
      - Firefox3b3ではTreeStyleTabを入れても再現しない。やっぱFF2のバグ？
- Toolbar
```
<toolbar class="chromeclass-toolbar" />
```
  - つけないとポップアップダイアログでも表示されてしまう。
- Toolbarbutton
  - 絵をつける
```
#root_element_id #sample_button {
	list-style-image: url("!chrome://sample/content/sample_button.png");
}
```
  - テキストを左寄せ
```
#root_element_id #sample_button .toolbarbutton-text
{
	text-align:left;
}
```
  - IEのツールバーでもそうなるが、toolbarbuttonにtype=menu-buttonを指定したような、ボタンにドロップダウンメニューがくっついたボタンを作るとそのボタンの高さが若干高くなり、結果ツールバー全体が多少太る。
    - 以下のCSSとかでぼちぼちな感じになる。
```
#root_element_id .toolbarbutton-menubutton-button {
    padding-top:2px;
    padding-bottom:2px;
    padding-left:0px;
    padding-right:0px;
}
```
- Tooltip
  - type=menuやtype=menu-buttonなtoolbarbuttonにtooltiptextを設定すると子のメニューにもツールチップが出てしまう件
    - なぜか上記のような症状になってしまうことがあり、しかもメニュー部分に出るツールチップはtoolbarbuttonのツールチップテキストではなく、前回表示されたツールチップテキスト（例えば更新ボタンで「このページを再読み込みします」とツールチップを出した後、すばやくボタンを押してメニューを開き、メニュー上でツールチップを表示させると「このページを再読み込みします」と出る）となる。
    - 自分のtooltiptextの機能の理解不足のような気もするけど、とりあえず以下のようにして回避
```
<tooltip id="my_tooltip" />
<toolbarbutton type="menu-button" tooltip="my_tooltip" my_tooltiptext="tooltip text">
	<menupopup>
		<menuitem label="menu"/>
	</menupopup>
</toolbarbutton>
<script type="text/javascript">
document.getElementById("my_tooltip").addEventListener( "popupshowing", function( event ) {
	//ツールチップ用の属性があればそれをツールチップに設定
	var attribute_name = "my_tooltiptext"
	if( document.tooltipNode.hasAttribute(attribute_name) )
		event.target.setAttribute( "label", document.tooltipNode.getAttribute(attribute_name) )
	//なければツールチップを出さない
	else
	{
		event.preventDefault();
		event.stopPropagation();
	}
})
</script>
```
レイアウト
- ボックスレイアウトの解説 - hbox, vbox：XUL Tutorial (XulPlanet.jp)
- ボックスレイアウトの解説 - grid：XUL Tutorial (XulPlanet.jp)
- グループボックスの書き方：XUL Tutorial (XulPlanet.jp)
- XUL Tutorial:Element Positioning - MDC
- widthに20%とかを指定することはできないようだ。
- flexを1以上に設定すると「フレキシブル」になる。
- たとえば
```
<toolbar>
    <toolbarbutton width="100px"/>
    <toolbarbutton flex="1"/>
</toolbar>
```
- とすると2つ目のボタンが横幅いっぱいに広がる。
- orient,align,pack
  - hbox
    - orient="horizontal"
    - align
      - 横方向
    - pack
      - 縦方向
  - vbox
    - orient="vertical"
    - align
      - 縦方向
    - pack
      - 横方向

異なるフォーマットでダウンロード:

テキスト