FirefoxでChromeっぽいタブ表示を実現する

この記事は(null)のN日めの記事です。
前日の記事は(null)さんの(null)でした。興味深い話でしたね。

世の中にはいくつものブラウザが存在し、それぞれが独自の個性と操作性を持っているという現状は(利用者にとっては)とても良い状況ですね。

タブのピン留め機能は便利ですが、開いたタブが右端に表示されると、新しいタブが右端と左端に固まりやすいですね。
私はタブを100個くらい同時に開くタイプなので、タブはすべて表示されている方が都合がいいのですが、
悲しいことにMacで使えるブラウザの代表、SafariやFirefoxではタブはスクロールボタンが表示され、すべてを一覧することができるわけではありません。

safari

firefox

その中でも特にお気に入りだったのがChromeで、どれだけタブを開いても細くなるだけでいくらでも開けるのが特に好きでした。

しかしChromeはMacのメモリ管理と異常に相性が悪いらしく、時々OSを巻き込んでフリーズするという問題を見せてくれたので、Vivaldiに避難していました。

そもそもウィンドウの幅が違うという点で公平ではないにしろ、vivaldiは比較的みやすいですね。

さて本題。
今回はFirefoxのアップデートで色々変わったとのことなので、Firefoxのタブ機能を直して引っ越し作戦といきます。修正の目標としては、タブの幅をfavicon以下にしてもスクロールボタンが表示されないようにしたいところです。

以下のabout:config をどうにかする方法は、手元では全くうまくいきませんでした。

そこで、こちらで紹介されているuserChrome.cssを使って強引に書き換えていきましょう。(これができるのがFirefoxの強みですね)
www.reddit.com

こんな感じになりました。faviconが見えている分だけ前よりは…みやすいのでは…ないでしょうか…

コードはこちら(すでに userChrome.css がある人は最初の2行を削除してください。)

@charset "utf-8";
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tabbrowser-tab:not([pinned="true"]):not([selected="true"]) {
	min-width: 1px !important;
	overflow: hidden !important;
}

.tabbrowser-tab:not([pinned="true"]):not([selected="true"]) .tab-content {
	padding: 0 2px !important;
}
.tabbrowser-tab:not([pinned="true"]):not([selected="true"]) .tab-close-button {
	display: none !important;
}

インストール場所は こんな感じで。

~/Library/Application\ Support/Firefox/Profiles/XXXXX.default/chrome/userChrome.css

やっていること。
1. 最小のタブの幅を1pxにする。はみ出した分は隠す。
2. アクティブでないタブはfaviconを左にずらして、細くなってもできるだけ見えやすいように。
3. タブを閉じるボタンは消す。

この機能は昔からあったと思われるので、単純にFirefoxの底力を見逃していただけということなのでした。