Firefox1.0.6をTabbrowser Extensionsの最新版でSafari化する 2

Firefox1.0.6をTabbrowser Extensionsの最新版でSafari化する 1の続きです。
この記事では以下についての説明を行っています。

Firefox1.0.6 のタブ部分以外をSafari化する ・user.js、userChrome.css の置き換え ・browser.jar のカスタム ・タイトルバー表示を「 Safarifox 」に変える ・CompactMenu の導入 ・テーマの変更 ・googleアイコンを虫眼鏡に変える ・ページ内検索バーの異常表示を修正して、検索バーを変える ・ヘルプウィンドウの異常表示を修正する

Firefox1.0.6 のタブ部分のみをSafari化したい方はこちらをご覧下さい。

Firefox1.0.6 のタブ部分以外を Safari化する

user.js、 userChrome.css の置き換え
Safari_for_Firefox10PR 内の userChrome.css を利用します。このcssの指定フォントは LucidaMacBold になってますから、
変更したい場合はエディタで開いてそれぞれの font-family: のフォント名を、使いたいフォントに変更させておいて下さい。

Firefox を終了させ、Safari_for_Firefox10PR 内の userChrome.css を safari.css にリネームします。
（バックアップが必要だと思う方はコピーしてそちらを使うといいでしょう）
safari.css を \Documents and Settings\（ユーザ名）\Application Data\Mozilla\Firefox\Profiles\（英数字）\chrome に置いて、
userChrome.css（ safari.css ではなく、元からある方）を開き、以下の位置に赤い記述を書き加えて下さい。

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓　↓　↓ @import url("safari.css"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

注意
これからの作業では、この safari.css を多く弄って外観を変えたり修正させることになります。
userChrome.css を直接書き換えないのは、その追加する記述が長くかなり膨大なので、Safari化をやめようという時に、
この safari.css を削除するなり、 userChrome.css に書き加えた上記の記述を消すなりするだけでいいようにするためです。

続いて Safari_for_Firefox10PR 内の user.js を、 \Documents and Settings\（ユーザ名）
\ApplicationData\Mozilla\Firefox\Profiles\（英数字） のものと置き換えます。
（元からあった user.js は、user_original.js とリネームし、同じ場所に保存しておくといいでしょう）
user.js はFirefoxを起動すると prefs.js に取り込まれます。取り込まれた後の user.js は削除するかリネームすると良いでしょう。
（user.js を置いたままにしておくと起動の度いちいち読み込んでしまうため）

これで user.js、userChrome.css（ safari.css ）の置き換えは完了です。まだFirefox は終了させたままでいて下さい。


browser.jarのカスタム
まず \Program Files\Mozilla Firefox\chrome\browser.jar のバックアップを取っておきます。
コピーして browser_original.jar にリネームし、同じ場所に保存しておくといいでしょう。

Safari_for_Firefox10PR 内の browser.jar をWinRARで開き（WinRARを起動、browser.jar をD&DでOK）、
以下の４つをデスクトップ上に抜き出して下さい。
（完全解凍はせず、開いたまま＝中身を覗いてる状態で作業して下さい。これは今後全ての作業で同様です）

1. Safari_for_Firefox10PR 内の browser.jar\content\browser\aboutCredits.png 2. Safari_for_Firefox10PR 内の browser.jar\content\browser\aboutDialog.xul 3. Safari_for_Firefox10PR 内の browser.jar\content\browser\bookmarks\bookmarksManager.xul 4. Safari_for_Firefox10PR 内の browser.jar\content\browser\pref\pref.xul

抜き出したらWinRAR を一旦閉じ、2. の aboutDialog.xul を認識したコードで保存できるテキストエディタで開き、5行目の、

<?xml-stylesheet href="chrome://browser/content/aboutDialog.css "type="text/css"?> を <?xml-stylesheet href="chrome://browser/skin/aboutDialog.css" type="text/css"?> に書き換えます。

書き換えたら上書き保存し、今度は \Program Files\Mozilla Firefox\chrome\browser.jar をWinRARで開きます。
デスクトップ上にある1. 3. 4. と先ほど書き換えた2. の aboutDialog.xul を、以下の場所にD&Dして下さい。

1. \Program Files\Mozilla Firefox\chrome 内の browser.jar\content\browser に先ほどの 1 と 2 をD&D。 2. \Program Files\Mozilla Firefox\chrome 内の browser.jar\content\browser\bookmarks に先ほどの 3 をD&D。 3. \Program Files\Mozilla Firefox\chrome 内の browser.jar\content\browser\pref に先ほどの 4 をD&D。

それぞれWinRARが勝手に上書き＆圧縮を始めるので、OKボタンを押して圧縮を開始させて下さい。これで移動は終わり。
デスクトップ上に残ったファイル（ aboutCredits.png、aboutDialog.xul、bookmarksManager.xul、pref.xul ）はもう使いません。
残したままだと紛らわしいのでゴミ箱に捨てておきましょう。
Firefox を起動させ、アバウト画面とオプションのダイアログ、ブックマークマネージャが変わっていたら成功です。

注意
Firefoxを上書きバージョンアップすると、 browser.jar も正規の物に上書きされます。
つまりカスタムした browser.jar が、新しいFirefox本来の browser.jar に戻ってしまうということです。
なので今後のために、今回カスタムした browser.jar のバックアップを取っておくといいと思います。
（バックアップがあれば、誤って上書きしてしまってもすぐにカスタムした browser.jar と交換することができます）

また、 browser.jar はバージョンアップの際、内容が変更される場合があります。
（だから今回も改造に踏み切っているわけですが…）
バックアップと差し替えれば絶対OK、というわけではないということを覚えておいて下さい。


タイトルバー表示を「 Safarifox 」に変える
Firefoxを終了させ、\Program Files\Mozilla Firefox\chrome まで進み、ja-JP.jar をWinRARで開きます。
ja-JP.jar\locale\global と辿り、brand.dtd をデスクトップ上に抜き出して下さい。
抜き出したらエディタで開き、以下の記述を赤の記述に書き換えて下さい。

<!ENTITY brandShortName    "Firefox"> <!ENTITY brandFullName       "Mozilla Firefox"> 　　　　　　　　　　↓　↓　↓ <!ENTITY brandShortName    "Safarifox"> <!ENTITY brandFullName       "Safarifox">

書き換えたら上書き保存し、ja-JP.jar\locale\global にこの brand.dtd をD&Dして戻します。
（WinRAR が勝手に上書き＆圧縮を始めるので、OKボタンを押して圧縮を開始させて下さい）
Firefox を起動させ、タイトルバーのタイトルが以下のように、「 Safarifox 」に変わっていたら成功です。



これからの作業は見た目がぐんぐんSafariに近づいていると実感できます。もう一息頑張りましょう。


CompactMenu の導入
Firefoxを起動させ、こちらから Compact Menu （ Download for Firefox ）をインストールします。
Firefoxを再起動し、CompactMenu がインストールできたことを確認したら（再起動しないと完全にインストールされません）、
ツールバーアイコン上で右クリック。「カスタマイズ」を選択すると、ツールバーカスタマイズのウィンドウが現れるので、
そこから CompactMenu （魚のアイコン）をツールバーへD&D。「完了」を押すとウィンドウは閉じ、メニューが消えます。



続いて再び「カスタマイズ」を選択、ツールバーアイコンや検索バー等を全てメニューがあった場所に移動させます。



移動が終わったら「完了」を押し、ツールバーアイコン上で右クリック、「ナビゲーションツールバー」のチェックを外します。
今までツールバーアイコンがあった場所（ナビゲーションツールバー）が消え、すっきりした見た目になります。



これで CompactMenu の導入は完了です。


テーマの変更
続いてテーマを変更させます。Safari_for_Firefox10PR.zip に入っている SAFARI_safari.jar を使いましょう。
テーマはFirefoxを起動させ、メニュー（CompactMenu の魚のアイコン）をクリックして「テーマ」を選択、
ダイアログにjarファイルをD&Dすればインストールすることができます。テーマを変更させるとぐっとSafariっぽくなります。



このテーマを使うとタブに横線が入ってしまう、という人は、ナビゲーションバーを消していないか、
ブックマークツールバーを表示させていないせいだと思います（どちらかの状況で出るバグ？のようです）。
ナビゲーションバーは消してるし、ブックマークツールバーも出してるのに横線が入る、という方は、
再びナビゲーションバーを表示させたり消したりと弄ってると治るようですので、お試し下さい。

CompactMenu（魚のアイコンだったもの）は、画像のアドレスバーと検索バーの間にある「へそ」になっています。
今後メニューを開くときは、この「へそ」をクリックすればOK。これはSafarifox用ならどのテーマでも共通することです。


google アイコンを虫眼鏡に変える
Safari_for_Firefox10PR.zip の SAFARI_safari.jar をWinRARで開き、SAFARI_safari.jar\browser と辿って、
search-bar.png を抜き出します。抜き出したらWinRAR を閉じて、 search-bar.png を google.png にリネームします。

Firefoxを終了させ、\Program Files\Mozilla Firefox\searchplugins を開くと、検索エンジン用のpng（又はgif）ファイルと
srcファイルがあるので、google.gif を先ほどリネームした google.png に置き換えます。
（ google.gif は google.png と一緒に置いておくと喧嘩するみたいなので、別フォルダに保存するか、消しちゃいましょう）



googleマークだった検索バーのアイコンが、虫眼鏡のアイコンになっていたらこの作業は成功です。


ページ内検索バーの異常表示を修正して、検索バーを変える
Firefoxを起動して、Ctrl＋Fを押してみるとわかると思いますが、ページ内検索バーの表示がおかしくなっています。



これを修正し、ついでに検索バーをSafariっぽくするための作業を行っていきます。
Firefoxを終了させて、\Documents and Settings\（ユーザ名）\Application Data\Mozilla\Firefox\
Profiles\（英数字）\chrome\safari.css をエディタで開き、以下の記述を書き加えて下さい。
（異常表示の修正＋検索バーの変更だけでなく、クローズボタンの挙動についての記述も含まれています）

/*ページ内検索バーの異常表示修正＋Safari化 ここから*/

#find-closebutton + label,
#find-status-icon {
display: none !important;
}

#find-field-container {
border: none !important;
margin: 0px !important;
padding: 0px !important;
background-color: transparent !important;
}

#find-field {
border: none !important;
margin: 0px !important;
padding: 7px 0px 0px 12px !important;
background: url("chrome://browser/skin/search.png") no-repeat !important;
height: 29px !important;
width: 154px !important;*/
}
#find-field[focused="true"] {
background: url("chrome://browser/skin/search-hov.png") no-repeat !important;
}

#find-field .textbox-input-box {
padding: 2px 14px 0px 20px !important;
background: url("chrome://browser/skin/search-bar.png") no-repeat;
}

#find-field[status="notfound"] {
color: #EE5E5E !important;
}

#find-closebutton {
list-style-image: url("chrome://global/skin/icons/tabclose-front.png") !important;
}

#find-closebutton:hover {
list-style-image: url("chrome://global/skin/icons/tabclose-front-hover.png") !important;
}

#find-closebutton:hover:active {
list-style-image: url("chrome://global/skin/icons/tabclose-front-pressed.png") !important;
}
#find-case-sensitive
{
list-style-image: none !important;
}

/*ここまで*/

上書き保存後、Firefoxを起動させ、ページ内検索バーを表示、以下のように表示されていたら作業は成功です。




ヘルプウィンドウの異常表示を修正する
Firefoxを起動して、「ヘルプ目次」を出してみるとわかると思いますが、ヘルプウィンドウの表示もおかしくなっています。



これを修正するため、Firefoxを終了させて、\Documents and Settings\（ユーザ名）\Application Data\Mozilla\Firefox\
Profiles\（英数字）\chrome\safari.css を再びエディタで開き、以下の記述を書き加えて下さい。

/*ヘルプの修正 ここから*/

#helpToolbar .toolbarbutton-icon {
margin-right: 2px !important;
}

#helpToolbar .browserButton,
#helpToolbar .toolbarbutton-1 {
min-width: 0px;
padding: 2px 0px !important;
margin-top: -2px !important;
border: 0px !important;
}

#helpToolbar .toolbarbutton-menubutton-button,
#helpToolbar .toolbarbutton-menubutton-button:hover,
#helpToolbar .toolbarbutton-menubutton-button:hover:active {
border: 0px !important;
padding: 0px !important;
margin: 0px !important;
}

#helpToolbar .toolbarbutton-menubutton-dropmarker {
display: none;
}

#helpToolbar .toolbarbutton-menubutton-dropmarker {
list-style-image: url('chrome://browser/skin/dropmarker.png');
-moz-image-region: rect(0 14px 15px 0px) !important
}

#help toolbarbutton:hover > .toolbarbutton-menubutton-dropmarker {
-moz-image-region: rect(0 29px 15px 15px) !important;
}

#help toolbarbutton[disabled="true"] > .toolbarbutton-menubutton-dropmarker,
#help toolbarbutton[disabled="true"]:hover > .toolbarbutton-menubutton-dropmarker {
list-style-image: url('chrome://browser/skin/dropmarker.png') !important;
-moz-image-region: rect(0px 44px 15px 30px) !important
}

#help toolbarbutton[open="true"] > .toolbarbutton-menubutton-dropmarker {
-moz-image-region: rect(0 59px 15px 45px) !important;
}

#helpToolbar #back-button > .toolbarbutton-menubutton-dropmarker,
#helpToolbar #forward-button > .toolbarbutton-menubutton-dropmarker {
margin-left: 38px;
margin-top: 8px;
}

#help toolbar[mode="icons"] #back-button > .toolbarbutton-menubutton-dropmarker,
#help toolbar[mode="icons"] #forward-button > .toolbarbutton-menubutton-dropmarker {
margin-left: 38px;
margin-top: 22px;
}

#help toolbar[mode="icons"] .toolbarbutton-text {
display: none;
}

#help toolbar[mode="text"] .toolbarbutton-menubutton-dropmarker,
#help toolbar[mode="text"] .toolbarbutton-icon {
display: none;
}

#help toolbar[mode="text"] .toolbarbutton-text {
padding: 4px 4px 5px 4px !important;
margin: 5px !important;
}

#help-back-button {
margin-right: 0px !important;
list-style-image: url("chrome://browser/skin/back-large.png") !important;
-moz-image-region: rect(0px 80px 27px 45px) !important;
}
#help-back-button[buttondown="true"] {
-moz-image-region: rect(0px 27px 27px -8px) !important;
}
#help-back-button[disabled="true"] {
-moz-image-region: rect(0px 134px 27px 99px) !important;
}

#help-forward-button {
margin-right: -8px !important;
margin-left: -2px !important;
list-style-image: url("chrome://browser/skin/forward-large.png") !important;
-moz-image-region: rect(0px 86px 26px 54px) !important;
}
#help-forward-button[buttondown="true"] {
-moz-image-region: rect(0px 32px 26px 0px) !important;
}
#help-forward-button[disabled="true"] {
-moz-image-region: rect(0px 140px 26px 108px) !important;
}

#help-find-button {
margin-right: -8px !important;
margin-left: 8px !important;
list-style-image: url("chrome://browser/skin/print.png") !important;
-moz-image-region: rect(0px 34px 26px 0px) !important;
}
#help-find-button:active {
-moz-image-region: rect(0px 88px 26px 54px) !important;
}

#help-toolbar-customization {
margin-right: -8px !important;
margin-left: 8px !important;
list-style-image: url("chrome://browser/skin/history.png") !important;
-moz-image-region: rect(0px 34px 26px 0px) !important;
}
#help-toolbar-customization:active {
-moz-image-region: rect(0px 88px 26px 54px) !important;
}

#help-home-button {
margin-right: -8px !important;
margin-left: 8px !important;
list-style-image: url("chrome://browser/skin/home.png") !important;
-moz-image-region: rect(0px 34px 26px 0px) !important;
}
#help-home-button:active {
-moz-image-region: rect(0px 88px 26px 54px) !important;
}

#help-print-button {
margin-right: -8px !important;
margin-left: 8px !important;
list-style-image: url("chrome://browser/skin/print.png") !important;
-moz-image-region: rect(0px 34px 26px 0px) !important;
}
#help-print-button:active {
-moz-image-region: rect(0px 88px 26px 54px) !important;
}

#help-zoom-large-button {
margin-right: -8px !important;
margin-left: -2px !important;
list-style-image: url("chrome://browser/skin/downloads-large.png") !important;
-moz-image-region: rect(0px 86px 26px 54px) !important;
}
#help-zoom-large-button:active {
-moz-image-region: rect(0px 32px 26px 0px) !important;
}

#help-zoom-small-button {
margin-right: 0px !important;
margin-left: 8px !important;
list-style-image: url("chrome://browser/skin/newwindow-large.png") !important;
-moz-image-region: rect(0px 80px 26px 53px) !important;
}
#help-zoom-small-button:active {
-moz-image-region: rect(0px 27px 26px 0px) !important;
}

#help-sidebar-button {
margin-right: -8px !important;
margin-left: 8px !important;
list-style-image: url("chrome://browser/skin/newtab.png") !important;
-moz-image-region: rect(0px 34px 26px 0px) !important;
}
#help-sidebar-button:active {
-moz-image-region: rect(0px 88px 26px 54px) !important;
}

#help-throbber {
background: none !important;
list-style-image: url("chrome://global/skin/icons/loading-stopped.png") !important;
}
#help-throbber[busy="true"] {
list-style-image: url("chrome://global/skin/icons/loading-front.gif") !important;
}
#help-throbber > .button-box {
padding: 0px !important;
background: none !important;
}

#help #FindToolbar {
background: url("chrome://global/skin/toolbar/findtoolbar.png") top right !important;
}

/*ここまで*/

アイコンを変えたい場合はurlの指定を変えて下さい（意味がわからない人はこのままで辛抱して下さい…）。
Firefoxを起動させ、「ヘルプ目次」を表示、以下のように正常に表示されていたら作業は成功です。



これでもうタブ以外は完全にSafari化できました。お疲れ様です。続いてFirefox1.0.6 のタブ部分をSafari化する
（最新版TBEをSafarifox仕様にカスタムする）に移ります。