digital 千里眼 @abp_jp

アナログな日常とデジタルの接点

最近 Firebug のタブが増えすぎてはみ出してる人向け Stylish

最近 Firebug 向けの拡張が相次いでリリースされて嬉しい限りです(CodeBurner、Firefinder、Inline Code Finder、Page Speed、SenSEO、YSlow...)。が、多くを試しているとタブの幅がどうしても足りん。無様にはみ出てクリックさえ出来ない...orz ということで

スクリーンショット(見にくいですが)
  • Before

  • After


やってること

  1. 文字を小さく
  2. タブの両脇にあるスペースを消す
  3. 両脇のスペースを消すとタブのホバー感がなくなるので、それを補完(ボーダー調整)
  4. タブがくっつきすぎても見にくいのでマージン調整
感想はお気軽にどうぞ

個人的にはタブ右側ドロップダウンのボタンの見栄えをもうすこし良くしたいところ(やり方知っていたら教えてください)

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Use smaller font */
#fbPanelBox .panelTab-text, #fbPanelBox .toolbarbutton-text
  { font-size:xx-small !important; }

/* Eliminate side margin inside tabs */
#fbPanelBox .panelTab-left, #fbPanelBox .panelTab-right
  { display:none !important; }

/* Reset the border */
#fbPanelBox .panelTab-text:hover
{
  -moz-border-radius-bottomleft: 0.9em !important;
  -moz-border-radius-bottomright: 0.9em !important;
  border-style:solid !important;
  border-width:0px 1px 1px !important;
  border-color:silver !important;
}
#fbPanelBox .panelTab-text
{
  -moz-border-radius-bottomleft: 0.9em !important;
  -moz-border-radius-bottomright: 0.9em !important;
  border-style:solid !important;
  border-width:0px 1px 1px !important;
  border-color:#DFDFDF !important;
}
#fbPanelBox *[selected="true"], #fbPanelBox .menuTarget
{
  -moz-border-radius-bottomleft: 0.9em !important;
  -moz-border-radius-bottomright: 0.9em !important;
  border-style:solid !important;
  border-width:0px 1px 1px !important;
  border-color:silver !important;
}

/* Adjustment the side margin again */
#fbPanelBox *[label]
{
  margin:0px 2px 0px !important;
}