Firefox 79 – アドレスバーポップアップのスクロールバー

アドレスバーをクリックした後に、Firefox のアドレスバーポップアップのエントリ数を多く設定しすぎると、下位のエントリが表示されなくなることがあります。この場合、追加のスクロールバーを作成するための CSS コードが必要です。

エントリが多すぎる場合、デフォルトでは次のようになります。

表示されるエントリは画面下部の端からはみ出し、他のエントリは表示されません。

注:このための CSS コード
は既にここに記載されていましたが、現在のバージョンの Firefox では機能しなくなりました。

(このポップアップのエントリ数は、値browser.urlbar.maxRichResultsの下の about:config で変更できます)

Firefox 79 – アドレスバーポップアップのスクロールバー

about:config については、すでにここに説明を書いています。

about:設定の説明

userChrome.css と userContent.css を作成します。

注意：

これらのファイルのいずれかを初めて使用する場合は、about:config にも値を入力する必要があります。

toolkit.legacyUserProfileCustomizations.stylesheets

true に切り替えます。

ここでこれがどのように行われるかについてはすでに説明しました。

userChrome ファイルを再利用する

そして、CSSコードでそれを行う方法の説明は次のとおりです。

まず、Firefox プロファイルフォルダーに移動し、自分で作成したchromeフォルダーを開きます。

次に、chrome フォルダーにある userChrome.css ファイルを開きます。

このファイルに次の CSS コードを入力します。

/* urlbar にアドレス候補のスクロールバーを表示します */ :root { /* 値は about:config = browser.urlbar.maxRichResults で同一でなければなりません */ --ac_popup_number_of_results: 80; /* 上記の値が大きいほど、px 値を小さくする必要があります */ --ac_popup_maxheight: calc(6px * ( var(--ac_popup_number_of_results) + 1 )); --ac_popup_height: calc(400px * var(--ac_popup_number_of_results)); } /* スクロールせずに表示されるエントリの最大数 */ .urlbarView:not(.megabar) { height: var(--ac_popup_height) !important; max-height: var(--ac_popup_maxheight) !重要; /* アドレス一覧の上下の余白 */ #urlbar-results { margin-top: 1px !important; margin-bottom: 3px !重要; } /* スクロールバーとアドレス一覧の位置 */ .urlbarView:not(.megabar){ overflow-y: scroll !important; margin-top: -1px !重要; margin-bottom: 1px !重要; } /* urlbar 拡張機能を無効にする */ #urlbar[breakout][breakout-extend] { top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important ; 左: 0 !重要; 幅: 100% !重要; } #urlbar[breakout][breakout-extend] > #urlbar-input-container { 高さ: var(--urlbar-height) !important; padding-block: 0 !重要; padding-inline: 0 !重要; } #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background { アニメーション名: なし !重要; } #urlbar[breakout][breakout-extend] > #urlbar-background { box-shadow: none !important; } } #urlbar[breakout][breakout-extend] > #urlbar-input-container { 高さ: var(--urlbar-height) !important; padding-block: 0 !重要; padding-inline: 0 !重要; } #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background { アニメーション名: なし !重要; } #urlbar[breakout][breakout-extend] > #urlbar-background { box-shadow: none !important; } } #urlbar[breakout][breakout-extend] > #urlbar-input-container { 高さ: var(--urlbar-height) !important; padding-block: 0 !重要; padding-inline: 0 !重要; } #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background { アニメーション名: なし !重要; } #urlbar[breakout][breakout-extend] > #urlbar-background { box-shadow: none !important; }

userChrome.css ファイルのコードは次のようになります。