カラクリスタ

「輝かしい青春」なんて失かった人のブログ

Firefox の UI をカスタマイズしてみた

結果としてこう言う感じになった:

Firefox のスクリーンショット

使っている拡張機能

  • Greasemonkey これは今のところ主に開発用に入れてる
  • そのため、普段は有効になっていない
  • ちなみに開発時には CSS 置換スクリプトを有効にしている
  • Instapaper 僕は普段 後で読む 系のサービスは Instapaper を使っている
  • ちょっとでも 後で読み返そう と思ったページは片っ端から Instapaper へ入れてる
  • そのため、Firefox でもこの拡張は必須
  • Stylish 今回、 Firefox の UI をカスタマイズするために導入
  • 今現在のところ、browser.xul に対するスタイルしか定義していない
  • なお、browser.xul に対するスタイルは次で記載します
  • Vertical Tabs Reloaded タブを縦に置くための拡張
  • 一時期 Vivaldi を使っていたんですが、その時から僕は縦タブ派です (ブラウザは)
  • そのため、個人的には必須の拡張

使ってる browser.xul に対するスタイルシート

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

@-moz-document url("chrome://browser/content/browser.xul") {
#personal-bookmarks .bookmark-item .toolbarbutton-icon {
display: none ;
}

#personal-bookmarks {
padding: 2px 0 ;
}

#personal-bookmarks .bookmark-item .toolbarbutton-text {
padding: 0 4px ;
}

#reload-button,
#urlbar-go-button {
display: none ;
}

.urlbar-history-dropmarker {
padding: 0 9px ;
}

#TabsToolbar,
#PanelUI-menu-button {
display: none ;
}
}

この chrome://browser/content/browser.xul 向けの Stylesheet が何をしているか、というと、これは、

  • ブックマークツールバーのフォルダアイコンを隠す
  • ブックマークツールバーのアイテム表示を他のツールバーボタンと馴染ませる
  • URL bar のリロードボタンと Go ボタンを隠す + 下三角マークの調整
  • Vertical Tabs Reloaded で隠される #TabsToolbar を予め非表示に
  • それと横三本線のアイコンも非表示に

と言った感じ。

その他解説

今回掲載したスクリーンショットの内、アドレスバーの右側に六つのボタンが有るのだけれども、 これらの内訳は、下記の様にいなっていたりする:

  • Save to Instapaper (Instapaper 拡張に依るモノ)
  • 履歴 (Firefox に元々有る機能)
  • ダウンロード履歴 (同上)
  • 執筆系ダッシュボードへのリンク (ブックマークツールバーによるフォルダ)
  • 普段よく使うサービス等へのリンク (同上)
  • Firefox 内部の Preferences や Addons へのリンク (同上)

で、 ブックマークツールバーによるフォルダ と書いた部分は、 本当にブックマークツールバーのフォルダ で、 これらはフォルダ名が絵文字になっていて、かつフォルダアイコンは先の Stylesheet で非表示にしてあったりするので、 絵文字アイコンを使ったオレオレボタンが気軽に作れたりもします。まぁ活用するかは不明だけども。

以上

とりあえず今日行った Firefox UI のカスタマイズはそんな感じです。はい。