2009/07/05
タブバーを縦置きにする
Firefox でタブバーを縦置きにするために拡張入れるのもアレなので、userChrome.js でサクッと書きました。
D&D で移動させたかったらツリー型タブをどうぞ。
ソース
// ==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