ブックマークのポップアップメニューの縦幅

朝起きた時は曇り。

あれ？雨降らないのかな？と思っていたら、しばらくすると、雨。

時々、雨が降ったけれど、思ったほど降り続かなかったし、降らなかった。

Firefoxが92になった。

今回もまた、面倒なことが。

ブックマークのポップアップメニューの縦幅が変わってしまった。

少し前のバージョンから、タブレットや高DPI対応(Proton)ということで、選択するメニュー関連は、文字の周りにやたらとスペース(余白)が多くなり、一般的な使い方をしていると、幅広になって、表示する分量が減ってしまう。

こういうのって、幅広にする・しないを選択式にしてくれればいいんだけれどねぇ．．．

以下は、テスト環境ということで、93ではあるけれど、92も同じ。

これが、標準の状態。

userChrome.cssで、縦の高さに制限を設けている。
ブックマークのポップアップメニューを一番下まで表示したくないので。

「padding-block: 0em !important;」で、余白を詰めるというのが一般的のようだけれど、それが効かない。

上と比較しても同じなのがわかる。

どうすればいいんだろう？と、色々とやっていて、このやり方しか思いつかなかった。

.bookmark-item .menu-iconic,
.bookmark-item > menupopup,
.bookmark-item > menupopup > menuitem {
    margin-top: -5px !important;
    padding: 0px !important;
}

「.menu-iconic」は、フォルダメニュー。

古典的なやり方だけれど、「margin-top」の値をマイナスにし、強引に引っ張り上げた。
そして、「padding」で、余白も少しだけ詰めることが出来た。

7行ほど、多く表示出来ているのがわかる。

結果的に、以前より表示出来る項目(メニュー)数が増えたのは幸いだった。

時間が経過すると、新たな情報が出てくるねぇ。
もっとスマートなものがあった。

#PlacesToolbar menupopup :is(menu, menuitem) {
    min-height: 0px !important;
}

へー、こんな「:is()」っていう書き方もあるのね。

これでも縦幅は狭まった。

で、色々とやってみて、過去のやり方も含め、総決算的には、これ。

#PlacesToolbar menupopup :is(menu, menuitem) {
    min-height: 0px !important;
    padding-block: 0em !important;
    padding: 0px !important;
}

これでやると、

更に、2行弱、表示が多くなった！

もっとギッチギチに詰めたければ、「margin-top: -5px !important;」を追加する。更に狭まる。笑えるほど狭まる。
マイナスの数値はお好みで。

次に、やりたいことは、上記のポップアップメニューの下側が余白のようになっているのを非表示にすること。

これは、設定しているCSSの関係で、余白に見えるけれど、実際は、下にスクロールさせるボタン。

これを非表示にしたい。

「#scrollbutton-up」と「#scrollbutton-down」を「display:none」にすればいいのだけれど、そうすると、タブの数が増えた時に表示されるタブのスクロールボタンも消えてしまう。

赤枠のところ。

以前は、多段タブにしていたけれど、Firefoxの仕様変更の度に修正しないといけなくなるので、面倒になって、多段タブを止めてしまったのである。

別にこのボタンはなくてもいいのだけれど、せっかくだから、表示させたい。

これが不思議な仕組みになっていて、それぞれの親を指定してあげても、全く有効にならない！

なんで？？？！！！

色々とやってみたけれど、どれもダメ。
なんでそんな一般的なCSSのルールを無視するようなことをするの？？(泣)

ネットで検索すると、ヒントになることが書かれているところを見つけた。

Remove #scrollbutton-up only from #TabsToolbar : FirefoxCSS

#tabbrowser-tabs{ --uc-scrollbutton-display: none }
#scrollbutton-up{ display: var(--uc-scrollbutton-display,initial) }

僕がやりたいのは、ブックマークのポップアップメニューの方のスクロールボタンは非表示、タブの方のスクロールボタンは表示。
上記のリンク先は、僕とは逆のことをやりたいとのことだった。

上記のままではダメなので、順番を入れ替え、逆のことをやったら出来た。

#scrollbutton-up,
#scrollbutton-down {
    display: var(--uc-scrollbutton-display,none) !important;
    /* タブが多くなった時に出る矢印の高さ */
    height: 44px !important;
    max-height: 44px !important;
    min-height: 44px !important;
}
#tabbrowser-tabs{
    --uc-scrollbutton-display: inline !important;
}

最初の方で、どちらも非表示にし、2つ目の方で、タブのスクロールボタンを表示するようにしている。
「inline」にしているけれど、「block」でも他の値でも構わない。

「height」関連は、タブの高さに合わせて数値を変更しよう。

すると、ブックマークのポップアップメニューの方のスクロールボタンが消えることによって、

更に、表示されるメニューの数が増えたのである。

ちなみに、ブックマークのポップアップメニューのマウスが重なった時のhoverのbackgroundの色を変えたいなら、

#PlacesToolbar menupopup :is(menu, menuitem):hover {
    cursor: pointer !important;
    color: #000C97 !important;
    background-color: #CBCFFF !important;
}

色はお好みで。

フゥ～、これで、やっと自分好みになった．．．

バージョンが上がる度に、こんなことしないでFirefoxを使える日は来るのだろうか？(苦笑)