Firefox 用の Google ツールバーは重い。多機能で便利だけど重い。

そういうわけで、恐れ多くもあの Google ツールバーと同等の機能を持つツールバーを

他のアドオンと設定だけで実装してしまおうと思ったわけです。

例によって霖の霖による霖だけのための備忘録です。役に立たない人には

本当に役に立たない文字の羅列に過ぎません。





ここでいくつか前提条件。

• 霖は Gmail を使っていない


• 『戻る』 や 『進む』 のボタンは大きいほうが好き


• Googlebar Lite は使わない

Googlebar Lite って機能的にちょっと頼りないと思う。

あと、ボタンが大きいほうが好きな理由はもちろん押しやすいから。なんでもコンパクトに

まとめりゃぁ良いってもんじゃ無いと思います。それについては霖が説明するより

　http://www.emptypage.jp/translations/benroe/gui.html

こちらのページをご覧になった方が分かりやすいかと。



で、目標はこんな感じ。




『戻る』 や 『進む』は文字も表示して大きめに、似非 Google ツールバーは

一番下で一行にまとめた。



まず初めに、Google ツールバーの持つ機能で霖に必要なのは何か考えた。

• 検索候補の表示


• ページ内検索ボタン＆キーワードのハイライト


• マウスオーバー辞書


• 地味に便利な 『上へ』 ボタン

意外と少ない。他の機能は無くても気にならないか、一度も使った事が無い物ばかりです。



それでは作り方。
[必要なアドオン]

• SearchWP（ページ内検索）


• backward（マウスオーバー辞書）


• Custom Buttons²（ボタン）

あとスタイルシートとDOMの知識があると分かりやすいかも。



上に挙げたアドオンをインストールし、適当にボタンを追加してツールバーっぽく

並べてみると多分こんな感じになる↓（検索バーは Firefox 標準のものを使用）



ダサいです。恐ろしくダサい。そしてスペース取りすぎ。

しかも文字を入力するたびに SearchWP のタームツールバーがにょきにょき伸び、

検索バーがどんどん縮むもんだから、とてもじゃないけど使えたもんじゃ無いです。



そこで、userChrome.css　に手を加えます。

userChrome.css に関してはこちらを参照のこと。

userChrome.css に以下のコードを追加してください。

/* 検索バーの横幅を固定 */
#search-container{
width: 300px !important;
max-width: 300px !important;
min-width: 300px !important;
}

/* SearchWP のハイライトボタンのテキストと不要なセパレーターを非表示 */
#searchwp-highlight-button .toolbarbutton-text{ display:none; }
#searchwp-separator-1{ display:none; }
#searchwp-separator-2{ display:none; }

/* Custom Buttons² のボタンのサイズとボタン名表示位置の指定 */
toolbarbutton[id^='custombuttons-button'] {
min-width: 30px !important;
min-height: 30px !important;
-moz-box-orient: horizontal !important;
}

/* Custom Buttons² のボタン名の非表示 */
toolbarbutton[id^='custombuttons-button'] .toolbarbutton-text{
display: none !important;
}


-moz-box-orient: horizontal !important;　のくだりは多分要らないと思うんだけど、

ボタン名を表示する場合のことを考えて一応つけておいた。



以前調べたとき #search-container の所に width だけ指定してる例を見ましたが、

霖の環境ではそれだけだと上手くいきませんでした。

多分 max-width こそ重要です。っていうかこいつさえ指定すればいけるかも。





これで多分上の絵のようになったのではないかと思います。

ついでですが、特定のカスタムボタンにだけスタイルを適用したい場合は

　#custombuttons-button1{ 〜 }

のようにボタンの ID を指定してやればできます。