2005年09月02日

Tabbrowser Extensions のカスタマイズ

Firefox、1.0.6を導入してからカスタマイズ後のタブの動作がおかしい。
(キーボードショートカット、右クリックメニューからのタブ操作等)
どうやら、Tabbrowser Extensions(以下略:TBE)を最新のバージョンにしないといけないらしく、
Spiralさんの所(現在アクセス不可)で配布されていた、mod-TBEは使えない模様。

今回のネタは、自分でTBEをカスタマイズする方法についてのエントリーです。
といっても、ネタ元はaqua-softなんですけど…。

http://www.aqua-soft.org/board/showthread.php?t=24240

英語でオッケーな人は、上記アドレス参照。
日本語での解説、閉じるボタンのカスタマイズについては”続きを読む”をクリック。

エントリー時のTBEは、Ver.1.14.2005082201 です。
バージョンが変わった場合には、この方法が通用しないかもしれません。
あらかじめ、ご了承の程を。

http://piro.sakura.ne.jp/ ← まずは、こちらからTBEの最新版の入手を。

tabextensions.xpiの拡張子をzipに変更して展開。
”chrome”フォルダの中にある、tabextensions.jarの拡張子をzipに変更して展開。

とりあえず、Step1とStep2は飛ばしてStep3の内容を説明します。

content → tabextensions とフォルダを辿っていき、
tabextensions.xmlをテキストエディタで開く。エディタは行番号が判れば何でもいいです。

12行目に、<!-- tab --> があると思います。
その4行下、16行目の <content> 〜 </content> までを書き換えます。

1) This:~ controls the tab LOADING icon NOT the website icon, that's hidden.

<xul:stack class="tab-icon">
<xul:image xbl:inherits="validate,src=image"
class="tab-icon-image"
tabclass="tab-icon-active"/>
<xul:image class="tab-extra-status"/>
<xul:spacer/>
</xul:stack>

<xul:stack class="tab-icon"> から </xul:stack> までのコードが、
デフォルトだと左側に表示される読み込み中アイコンです。

2) <xul:toolbarbutton tabclass="tab-closebutton" class="tabs-closebutton close-button"/>

この部分のコードが、右側のタブのクローズボタンになります。

察しのいい人はすでに気付いているかと思いますが、
このコードを入れ替えれば、読み込み中アイコンとタブのクローズボタンが入れ替わって表示される訳です。

3) There is a line missing in the code, after the first "tab-text" definition:

<xul:label class="tab-text"
flex="1"
xbl:inherits="value=label,accesskey,crop,disabled"/>

最後に、上記の3行のコードをすぐ下の行にコピペし、
"tab-text"の部分を、"tab-text2"に変更して下さい。
これで、タブの文字の部分に影の付いた状態になるはずです。

とりあえず、スレッドに書いてある内容はこんな感じであろうと思われます。
英語はさっぱりなんで、ほとんど勘で書いてますが・・・(;´∀`)

スレッド内のカスタマイズ方法だと、複数のタブを開いた時に境界線が無く、
タブのクローズボタンがデフォルトの状態だと思います。
以下に、Spiralさん配布のmod-TBEを参考にして判ったカスタマイズ方法を書いていきます。

まずは、境界線から。

<content>
<xul:image class="tab-icon"
tabclass="tab-icon-hidden"
xbl:inherits="src=image"/>

このコードの下の行に、

<xul:spacer class="tab-image-left" xbl:inherits="selected"/>

上記のコードを追加。

</content>

このコードの上の行に、

<xul:spacer class="tab-image-right" xbl:inherits="selected"/>

上記のコードを追加。
これで、タブの左右に境界線が表示されるようになるはずです。

最終的に、<content> 〜 </content> までは以下のようになっているはずです。


<content>
<xul:image class="tab-icon"
tabclass="tab-icon-hidden"
xbl:inherits="src=image"/>
<xul:spacer class="tab-image-left" xbl:inherits="selected"/>
<xul:hbox class="tab-middle tab-image-middle box-inherit"
xbl:inherits="align,dir,pack,orient,selected"
flex="1">
<xul:hbox class="tab-dropmarker-before"/>
<xul:toolbarbutton tabclass="tab-closebutton" class="tabs-closebutton close-button"/>
<xul:stack class="tab-text-container" flex="1">
<xul:hbox class="tab-text-background" flex="1"/>
<xul:progressmeter class="tab-progress"
flex="1"
mode="normal" value="0"
xbl:inherits="value=tab-progress"/>
<xul:label class="tab-text"
flex="1"
xbl:inherits="value=label,accesskey,crop,disabled"/>
<xul:label class="tab-text2"
flex="1"
xbl:inherits="value=label,accesskey,crop,disabled"/>
</xul:stack>
<xul:stack class="tab-icon">
<xul:image xbl:inherits="validate,src=image"
class="tab-icon-image"
tabclass="tab-icon-active"/>
<xul:image class="tab-extra-status"/>
<xul:spacer/>
</xul:stack>
<xul:hbox class="tab-dropmarker-after"/>
</xul:hbox>
<xul:spacer class="tab-image-right" xbl:inherits="selected"/>
</content>



上書き保存で、tabextensions.xmlのカスタマイズは終了です。

次は、タブのクローズボタンです。

TBEの設定で…

外観 → タブ → タブのクローズボタン → 常に全てのタブに表示にチェック
→ 詳細 → 標準のスタイル(現在のテーマに依存)にチェック

これでもいいのですが、これだとマウスオーバーレイで画像が変わりません。
ので、skin → classic → tabextensions と辿って、tabbrowser.css の変更です。

361行目の /* closeboxes in tabs */ の下、/* General */ から /* Winstrip */ 手前までを


/* General */

tabbrowser tab[tab-hover="true"][tab-closebox-hover="true"]:hover toolbarbutton.tabs-closebutton.close-button
{
background: url('chrome://global/skin/icons/tabclose-back-hover.png') no-repeat;
}

tabbrowser tab[tab-hover="true"][tab-closebox-hover="true"]:active toolbarbutton.tabs-closebutton.close-button
{
background: url('chrome://global/skin/icons/tabclose-back-pressed.png') no-repeat;
}

tabbrowser tab[tab-hover="true"][selected="true"][tab-closebox-hover="true"]:hover toolbarbutton.tabs-closebutton.close-button
{
background: url('chrome://global/skin/icons/tabclose-front-hover.png') no-repeat;
}

tabbrowser tab[tab-hover="true"][selected="true"][tab-closebox-hover="true"]:active toolbarbutton.tabs-closebutton.close-button
{
background: url('chrome://global/skin/icons/tabclose-front-pressed.png') no-repeat;
}



こんな感じに書き換えて、上書き保存です。
これで、テーマごとのタブのクローズボタンに変わっていると思います。

最後に、”content”、”locale”、”skin ”フォルダをまとめてzipファイルに。
圧縮したファイルを、tabextensions.jar と名前を変更。

あとは、Step1を参考にして、

x:\Documents and Settings\Username\Application Data\Mozilla\Firefox\Profiles\default.wyc\extensions\{0B0B0DA8-08BA-4bc6-987C-6BC9F4D8A81E}\chrome

”chrome”フォルダ内の tabextensions.jar と入れ替えればカスタマイズ終了です。
また、後で楽をする為に、xpiファイルに纏めるってのもいいかもしれません。

確認用の画像をアップしておきます。

変更前



変更後

posted by sharpone at 22:20| Comment(0) | TrackBack(0) | Tips | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。