タブ周りのCSSとか

Firefox2の頃はあまり弄らなかったタブ周りをFirefox3になって弄りだした。正直やり難い。

まず、タブ要素の属性についているmaxwidth,minwidth,widthのせいでCSSが効かない。仕方ないので.vimperatorrcに

javascript <<EOF
(function(){
var tabs = getBrowser().mTabs;
for (var i=0; i<tabs.length; i++){
  ['width','maxwidth','minwidth','flex'].forEach(function(attr)tabs[i].removeAttribute(attr));
}
document.getElementById('content').addEventListener('TabOpen',function(e){
  var t = e.originalTarget;
  ['width','maxwidth','minwidth','flex'].forEach(function(attr)t.removeAttribute(attr));
},false);
})();
EOF

として、タブの属性を除去した。

次に以下の様なCSSを$HOME/.vimperator/colors/tab.cssに作る。

@charset "utf-8";
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* タブバーの背景色 */
tabbrowser {
    background-color: black;
}
toolbarbutton { padding: 0px !important; }   
.tabs-container { height: 18px; }

/* タブ選択メニューの除去 */
.tabs-container > stack {display:none;}

/* browser.tabs.closeButton=3 の時の設定(タブの右端にXボタンが出る) */
.tabs-closebutton {
    -moz-appearance:none !important;
    margin:0 !important;
    padding:0 2px !important;
}
.tabbrowser-tab {
    -moz-appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
    -moz-border-radius-topleft:0 !important;
    -moz-border-radius-topright:0 !important;
    -moz-border-radius-bottomright:0 !important;
    -moz-border-radius-bottomleft:0 !important;
    border: none !important;
    background-image:none !important;
    background-color: black !important;
}
/* ページアイコンの除去 */
/* .tabbrowser-tab > .tab-icon-image {display:none;} */

/* アクティブなタブ */
.tabbrowser-tab[selected="true"] {
    background-color:white !important;
}

/* 非アクティブなタブ */
.tabbrowser-tab:not([selected="true"]) { max-width:150px; }

/* タブ全般のテキスト部分 */
.tabbrowser-tab > .tab-text { color:black;}
/* 非アクティブなタブのテキスト部分 */
.tabbrowser-tab:not([selected="true"]) > .tab-text {text-decoration:underline; color:white;}

.tab-close-button {
    margin:0 1px !important;
    padding:0 1px !important;
}
.tab-icon-image { margin: 0 1px !important; }

そして、自家製vimperator用プラグインであるstylechanger.jsから読み込む。

.tabbrowser-tab:not([selected="true"]) { max-width:150px; }の部分を変更してやれば、非アクティブなタブ幅を自由に調整できる。タブをたくさん開く人は小さい値にすると良いかもしれない*1。
ページアイコンも除去した方がvimっぽくなるかなと思ってやってみたけど、見難くなるのでやめた。
あと、タブ毎にある閉じるボタンは:set! browser.tabs.closeButtons=3として右端に閉じるボタンを表示させるとよりvimっぽくなる。

*1:あんまり小さくすると可視性が悪くなるので要注意