Firefox89.0 about:configの設定を使わずにタブをくっつける方法、他userChrome.css覚書

Firefox89.0でタブが浮いているような感じになっているのは
2021060314.jpg
「about:config」の「browser.proton.enabled」を「false」にすると以前の感じに戻る
と書いたのですが、この「browser.proton.enabled」自体が次かその次のバージョンで使えなくなるという情報を見ました。

ですので、今回「browser.proton.enabled」を使って自分好みにしたとしても、近いうちにこれが使えなくなりまた大慌て…!ということになりそうだったので、それを使わずにcssで回避する方法を見つけました。

https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler
というサイトで自分好み(?)のタブのcssを簡単に作ってくれるのです。

角丸・フローティングスタイルかくっついたスタイルか・タブの境界線をいくつかの選択肢から選べます。
できあがった状態は上に表示される画像(赤枠内)で確認することができます。
ここでは浮いた状態が嫌だったのでそれを回避するための方法を記事にしていますので、真ん中の「Tabs floating or connect」を「Connect them to the toolbar(タブをツールバーにくっつける)」を選択します。
あとはお好みで。
2021060831.jpg

下の部分に選んだ状態のCSSがあるので、それをコピーする(「Select CSS」をクリックして右クリック→コピー)かダウンロード(Save below as .css File」をクリック)してuserChrome.cssに入れます。
2021060833.jpg

もしも先に設定しているタブ周りのデザインとかぶっている部分のcssは削除するか入れ替えるかなりするほうが良いと思います。

確認する場合はもしも「about:config」の「browser.proton.enabled」を「false」にしている場合は「true」に変更してください。

以上でabout:configの設定を使わずにタブをくっつけて表示させる方法でした。

他にもuserChrome.cssにいろんな設定を付け加えてみたので、それらを覚書にしておきます。

ブックマークリストの間隔を調整

.bookmark-item,
.bookmark-item > menupopup,
.bookmark-item > menupopup > menuitem {
padding-block: 0.3em !important;
}

左:元  右:上記数値で設定後
ブックマークリスト



ドロップダウン・右クリック・ポップアップ メニュー間隔を調整

menupopup > menuitem, menupopup > menu {
padding-block: 2px !important;
}
:root {
--arrowpanel-menuitem-padding: 2px 4px !important;
}

左:元  右:上記数値で設定後
右クリックメニュー



上部右端「ハンバーガーメニュー(アプリケーションメニューを開きます)」をクリックした時のメニューの間隔を調整

.subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
padding: 2px 8px !important;
}

左:元  右:上記数値で設定後
アプリケーションメニュー



ツールバーのアイコンの間隔を調整

#nav-bar toolbarbutton {
padding-left: 0px !important;
padding-right:0px !important;
}

上:元  下:上記数値で設定後
ツールバーアイコン



検索バーのアイコンの間隔を調整

.search-panel-one-offs {
height: auto !important;
}

.search-panel-one-offs button {
margin: 0px !important;
}

上:元  下:上記数値で設定後
2021060816.jpg



動画サイト再生時にファビコンとサウンドアイコンを表示

.tab-icon-image:not([pinned]){opacity: 1 !important}
.tab-icon-overlay:not([pinned],[crashed])[soundplaying]{
opacity: 1 !important; border-radius: 9px !important; top: -6px !important; inset-inline-end: -12px !important;z-index: 1 !important;margin-right: 12px !important; color: inherit !important;background-color: #00000000 !important; !important; fill-opacity: 1 !important; padding: 0px !important; height: 16px !important; width: 16px !important;
}

.tab-icon-overlay:not([pinned],[crashed])[muted], .tab-icon-overlay:not([crashed],[pinned])[activemedia-blocked] {
opacity: 1 !important; border-radius: 9px !important; top: -6px !important; inset-inline-end: -12px !important;z-index: 1 !important;margin-right: 12px !important; color: inherit !important;background-color: #00000000 !important; !important; fill-opacity: 1 !important;padding: 0px !important; height: 16px !important; width: 16px !important;
}

.tab-icon-overlay:not([crashed])[soundplaying]:hover, .tab-icon-overlay:not([crashed])[muted]:hover, .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
stroke: red !important; color: inherit !important; fill-opacity: 1 !important; padding: 0px !important; height: 16px !important; width: 16px !important;
}

.tab-icon-overlay:is([pinned]){
inset-inline-end: -9px !important;padding: 0px !important; top: -6px !important; height: 16px !important; width: 16px !important; stroke: #00000000 !important;color: inherit !important;
}
.tab-icon-overlay:is([pinned]):hover{
inset-inline-end: -9px !important;padding: 0px !important; top: -6px !important; height: 16px !important; width: 16px !important; stroke:red !important; color: inherit !important;
}

上:元  下:上記で設定後
YouTubeなどの動画サイトで再生した場合、ファビコンが消えてサウンドマークだけになるのですが(再生するまではファビコンのみ)、ファビコンとサウンドマークの両方を表示させる方法です。
2021060824.jpg



アドレスバー(URLバー)の高さを調整

#urlbar {
min-height: 28px !important;
}

検索バーの高さを調整

#searchbar {
min-height: 28px !important;
}

上:アドレスバー(URLバー)のみ高さを低くしたもの。 検索バー(元)より少し狭くなっているのがわかりますか?
下:アドレスバー・検索バーとも変更したもの
2021060826.jpg



とりあえず自分が気になったところでわかった部分です。
他にもちょっと変えたいところがあるのですが、未だ解決策を見つけられず……。
引き続き探ってみようと思っています。

順次追記していくかも。



【2021年6月9日 追記】

右クリックメニューの背景色の変更

menupopup{
--menuitem-hover-background-color: #e0e0e6 !important;
--menu-background-color: #f9f9fb !important;
--menu-color: #15141a !important;
--menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important;
--menu-disabled-color: rgba(21, 20, 26, 0.4) !important;
--menu-border-color: #cfcfd8!important;
--menu-icon-opacity: 0.7 !important;
}

上:元  下:上記で設定後
2021060906.jpg



アプリケーションメニューの境界線の色を変更

#appMenu-fxa-separator
{
border-image: unset !important;
}

左:元(レインボーカラー?)  右:上記で設定後
2021060909.jpg



右クリックメニューのアドオンのアイコンを非表示

menuitem:not(.bookmark-item)[image] > .menu-iconic-left,
menu:not(.bookmark-item)[image] > .menu-iconic-left{ display: none
}

左:元(レインボーカラー?)  右:上記で設定後
2021060910.jpg



アドレスバー(URLバー)・検索バーをクリックした時の色の変更

:root {
--focus-outline-color: #FA8072 !important;
}

上:元  下:上記で設定後
2021061111.jpg

関連記事

4 Comments

デコポン  

れん様

こんにちは。

Firefoxを自分好みにカスタマイズするのは楽しいですね。

すみません、一点確認させて下さい。

メニュー内のファイルなんですが正常に開くことは出来ますか?
私の環境では上下を表す記号が出るだけで、そこにマウスをあてるとプルプル
震えて内容を見る事が出来ません。

れんさんのFirefoxはいかがですか?

2021/06/09 (Wed) 17:34 | REPLY |   

デコポン  

編集や表示等ファイル以外のメニュー項目は問題なく開く事が出来ます。

自分の使い方として、ファイルを使う事はほとんどないので影響はないのですが
なんか気持ち悪いので・・・(;^_^A

2021/06/09 (Wed) 18:15 | REPLY |   

れん  

デコポン様

デコポン様、こんばんは。

私の方は「ファイル」の項目もきちんと表示されています。
先程再度メールをお送りいたしましたので、ご確認くださいね。

Firefoxっていろいろとカスタマイズできたのですね!
知りませんでした!
毎回タブ位置が気になっていただけで、他のことはお構いなし。
でも、今回デコポン様のコメントがきっかけでいろんなカスタマイズができることを知り、とても楽しませてもらいました(*^_^*)
ありがとうございます!

2021/06/09 (Wed) 22:02 | EDIT | REPLY |   

デコポン  

れん様

こんばんは。

メール送付の件了解しました。

ありがとうございます。

2021/06/10 (Thu) 03:09 | REPLY |   

Post a comment