Hatena::ブログ(Diary)

Griever Twitter

2009/07/05

タブバーを縦置きにする

Firefox でタブバーを縦置きにするために拡張入れるのもアレなので、userChrome.js でサクッと書きました。


タブが D&D で移動できなくなるのは仕様です*1

D&D で移動させたかったらツリー型タブをどうぞ。

ソース

http://gist.github.com/140916

// ==UserScript==
// @name           VerticalTabbar.uc.js
// @namespace      http://d.hatena.ne.jp/Griever/
// @include        main
// ==/UserScript==
(function(){
	var tabbox = document.getAnonymousElementByAttribute(gBrowser, "anonid", "tabbox");
	var v = {
		mStrip : gBrowser.mStrip,
		mTabContainer : gBrowser.mTabContainer,
		tabsContainer : gBrowser.mTabContainer.mTabstrip.parentNode,
		arrowscrollbox : gBrowser.mTabContainer.mTabstrip,
	};

	tabbox.orient = 'horizontal';
	for (var n in v) v[n].orient = 'vertical';

	var splitter = document.createElement('splitter');
	splitter.id = 'vertical-tabbar-splitter';
	v.mStrip.parentNode.insertBefore(splitter, v.mStrip.nextSibling);

	var style = <![CDATA[

[orient="horizontal"][anonid="tabbox"] tab {
	max-height: 26px !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
	margin: 0 !important;
}
[orient="horizontal"][anonid="tabbox"] .tabs-container{ padding: 0px !important; }
[orient="horizontal"][anonid="tabbox"] .tab-drop-indicator-bar{ visibility: collapse !important; }
[orient="horizontal"][anonid="tabbox"] .tab-icon-image{ margin: 0 2px 0 4px !important; }


[orient="horizontal"][anonid="tabbox"] .tabbrowser-arrowscrollbox{
	min-width: 28px !important;
	max-width: 150px !important;
}

/* Auto hide 
[orient="horizontal"][anonid="tabbox"] .tabbrowser-strip:hover{
	min-width: 150px !important;
}
*/

	]]>.toString();
	var sspi = document.createProcessingInstruction(
		'xml-stylesheet',
		'type="text/css" href="data:text/css,' + encodeURI(style) + '"'
	);
	document.insertBefore(sspi, document.documentElement);
	sspi.getAttribute = function(name) {
		return document.documentElement.getAttribute(name);
	};
})();

スクリプトはタブバー周りの orient 属性いじって splitter 付けただけです。

後は全部 CSS にやって貰います。

*1:タブの左右にスペースを確保すれば一応可能

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/Griever/20090705/1246788480