FirefoxのuserChrome.cssネタ #12

久々。Firefox 3になったときにずいぶん減らしたんだけど、だんだん増えてきたので整理しつつここではまだ書いてなかったものだけ。別のところで書いたやつもあるけど、ここでは初出ということで。

ロケーションバーや検索バーでIMEをオフにする

#urlbar input,
#FindToolbar input {
  ime-mode: inactive !important;
}

「g 検索語」などキーワード検索機能を多用する場合、IMEがオンだと悲しいことになるので設定。検索バーでもオフにするかどうかは好みで。

進むボタンを無効な時は隠す

#forward-button[disabled="true"] {
  display: none !important;
}
進むボタンを隠すとすっきりする

進むは戻るを使った時にしか有効にならないので、ほとんどの時間は無効。そのためにスペースを割くのはもったいないので無効なときは削除するとすっきり。そもそも戻るに比べて進むは使用頻度が低い(と思う)ので、完全に非表示でも良いかもしれない。

ロケーションバーのドロップダウンの高さを変更する

#PopupAutoCompleteRichResult {
  height: 514px !important;
}

デフォルトでは6件分の高さ(テーマ依存)。僕の環境では上記サイズで12件分表示されている(もちろんシステムのUIフォント設定などさまざまなものに依存するので12件分とは限らない)。各候補の高さが一様ではない(アイコンが表示されたりするとずれるっぽい)ので、丁度○○件分の高さにするとかは難しそう。またデフォルトではリストアップする最大数が12になっているので、about:configからbrowser.urlbar.maxRichResultsを変更するとより多くの候補が表示される(多くしすぎると重くなるので注意)。

残念ながら候補が少ない場合、ドロップダウンに空白ができてしまいものすごいかっこ悪い。これを解決する方法は今のところ見つかっていない……。

ロケーションバーでの絞り込みのハイライトを赤く

#PopupAutoCompleteRichResult span.ac-emphasize-text {
  color: #cc0000 !important;
  font-weight: normal !important;
}
絞込みのキーワードを赤でハイライト

デフォルトでは太字+下線で色は変わらない。見づらいというほどではないのだけど、色を変えたほうが見やすかった。赤文字はちょっと気持ち悪いかもしれないので、テーマに合わせて調節すると良いと思う。

#PopupAutoCompleteRichResult span.ac-emphasize-text {
  color: #000000 !important;
  background-color: #ff8000 !important;
}

というように背景を変更してもなかなか見やすい。

ブックマークツールバーをシンプルに

#bookmarksBarContent > .bookmark-item {
  padding: 3px 12px !important;
}

#bookmarksBarContent > .bookmark-item > .toolbarbutton-icon {
  display: none !important;
}

#bookmarksBarContent > .bookmark-item > .toolbarbutton-menu-dropmarker {
  display: -moz-box !important;
}

#bookmarksBarContent > .bookmark-item > .toolbarbutton-menu-dropmarker > .dropmarker-icon {
  display: -moz-box !important;
}
シンプルなブックマークツールバー

Safariっぽくアイコンを非表示にして、フォルダにはドロップダウンのマーカーをつける。.bookmark-itemのスタイルで-moz-border-radiusを使ったり、もっと細くなるように調節したりすればもっとSafariに近づけることができる……が、子要素の.bookmark-itemでスタイルを戻さないとならないので非常に面倒なことになるのでオススメしない。素直にMacOSX Themeなどをインストールした方が良い。


Google Chromeもこんな感じで簡単にUIカスタマイズできたら良いなぁ……。