Firefox81から88までは下の記事で問題なく多段タブ表示ができたのですが、
Firefox89に更新したところタブバーの上下に余分な空白ができたので、解決しました。
いつもZipファイルを上げてくださる方に感謝感謝です。
※これは、以前から多段タブを使っている人用です。
新しく多段タブを設定したい方は
こちらの記事をご覧ください。
Firefox89に更新すると、タブバーの上下に隙間が
Firefox89に更新したところ
←この図のようにタブバーの上下に余計な隙間ができてしまいました。
これをなくしていきます。
zipファイルをダウンロード
こちらにアクセスして、「MultiRowTabLiteforFx.uc.js:多段タブのスクリプトが~」と書かれている多段タブ.zipをダウンロードします。
ダウンロードページに行くので、
「ダウンロード」をクリックし、「ファイルを保存する」を選んで、「OK」をクリックします。
ダウンロードされた「多段タブ.zip」を右クリックし、解凍します。
MultiRowTabLiteforFx.uc.jsを選ぶ
できた「多段タブ」フォルダの中から、「Firefox89+」フォルダを開きます。
「01~06 それぞれの組み合わせ.txt」を開いて、どれを選ぶか決めます。
この中から、希望のものを探します。
決めたらその番号のフォルダを開いて、中に入っている「MultiRowTabLiteforFx.uc.js」を使います。
今まで使っていたMultiRowTabLiteforFx.uc.jsと入れ替える
Firefoxのヘルプから「ト他のラブルシューティング情報」を開きます。
出てきた、トラブルシューティング情報の「プロファイルフォルダー」欄の「フォルダーを開く」をクリック
開いたフォルダーの中にある「Chrome」フォルダを開きます。
中に入っている、MultiRowTabLiteforFx.uc.jsを先ほど選んだものに置き換えます。
(元に戻せるように古いものはどこかに取っておいた方が安全です)
Firefoxを再起動します。
このように上下の余白がなくなりました。
余白はなくなったのですが、タブの高さが高くなってしまったのが気になります。
タブの高さ調節
「多段タブ.zip」の「タブの高さ調節.txt」を開きます。
先ほど選んだ「MultiRowTabLiteforFx.uc.js」がどれなのかでやり方が変わります。
「MultiRowTabLiteforFx.uc.js」をメモ帳などで開き、
/* 多段タブ */
box.scrollbox-clip[orient="horizontal"] { display: block; }
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
この間は番号によって変わります
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#tabs-newtab-button { margin: 0 !important; }
この部分を、
01の場合は
/* タブとタブバーの高さ 新しいタブボタンの横幅と高さ */
:root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */
/* タイトルバーボタン(タブバー) */
#TabsToolbar .titlebar-buttonbox > .titlebar-button {
/* 24pxに合わせてるので数値を変更した時に高さが合わない場合は調整してください。 */
padding: 6px 17px !important; /* デフォルト幅 8px 17px */
}
/* タブバー 高さ 最小値 */
:root[tabsintitlebar] #titlebar,tabs,arrowscrollbox { min-height: var(--multirowtabs-height) !important; }
/* 多段タブ */
box.scrollbox-clip[orient="horizontal"] { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap; }
tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
tabs tab {
padding-inline-start: 1px !important;
padding-inline-end: 0px !important; }
tabs tab,.tab-background {
height: var(--multirowtabs-height) !important;
min-height: var(--multirowtabs-height) !important;
margin: 0 !important; }
tab > .tab-stack { width: 100%; }
.tab-background { box-shadow: none !important; }
/* 新しいタブボタンの横幅と高さ */
#tabs-newtab-button {
height: var(--multirowtabs-height) !important;
margin: 0 !important; }
#tabs-newtab-button > .toolbarbutton-icon {
width: var(--multirowtabs-height) !important;
height: var(--multirowtabs-height) !important;
padding: 4px !important; }
02の場合は
/* タブとタブバーの高さ 新しいタブボタンの横幅と高さ */
:root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */
/* タイトルバーボタン(タブバー) */
#TabsToolbar .titlebar-buttonbox > .titlebar-button {
/* 24pxに合わせてるので数値を変更した時に高さが合わない場合は調整してください。 */
padding: 6px 17px !important; /* デフォルト幅 8px 17px */
}
/* タブバー 高さ 最小値 */
:root[tabsintitlebar] #titlebar,tabs,arrowscrollbox { min-height: var(--multirowtabs-height) !important; }
/* 多段タブ */
box.scrollbox-clip[orient="horizontal"] { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--multirowtabs-height) * 5) !important; /* 段数(デフォルト5段) */
overflow-x: hidden;
overflow-y: auto; }
tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
tabs tab {
padding-inline-start: 1px !important;
padding-inline-end: 0px !important; }
tabs tab,.tab-background {
overflow: hidden;
height: var(--multirowtabs-height) !important;
min-height: var(--multirowtabs-height) !important;
margin: 0 !important; }
tab > .tab-stack { width: 100%; }
.tab-background { box-shadow: none !important; }
/* 新しいタブボタンの横幅と高さ */
#tabs-newtab-button {
height: var(--multirowtabs-height) !important;
margin: 0 !important; }
#tabs-newtab-button > .toolbarbutton-icon {
width: var(--multirowtabs-height) !important;
height: var(--multirowtabs-height) !important;
padding: 4px !important; }
03または05の段数無制限の場合は、下記のように置換します。
/* タブとタブバーの高さ 新しいタブボタンの横幅と高さ */
:root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */
/* タブバー 高さ 最小値 */
:root[tabsintitlebar] #titlebar,tabs,arrowscrollbox { min-height: var(--multirowtabs-height) !important; }
/* 多段タブ */
box.scrollbox-clip[orient="horizontal"] { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap; }
tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
tabs tab {
padding-inline-start: 1px !important;
padding-inline-end: 0px !important; }
tabs tab,.tab-background {
height: var(--multirowtabs-height) !important;
min-height: var(--multirowtabs-height) !important;
margin: 0 !important; }
tab > .tab-stack { width: 100%; }
.tab-background { box-shadow: none !important; }
/* 新しいタブボタンの横幅と高さ */
#tabs-newtab-button {
height: var(--multirowtabs-height) !important;
margin: 0 !important; }
#tabs-newtab-button > .toolbarbutton-icon {
width: var(--multirowtabs-height) !important;
height: var(--multirowtabs-height) !important;
padding: 4px !important; }
04または06の段数指定の場合は
/* タブとタブバーの高さ 新しいタブボタンの横幅と高さ */
:root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */
/* タブバー 高さ 最小値 */
:root[tabsintitlebar] #titlebar,tabs,arrowscrollbox { min-height: var(--multirowtabs-height) !important; }
/* 多段タブ */
box.scrollbox-clip[orient="horizontal"] { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--multirowtabs-height) * 5) !important; /* 段数(デフォルト5段) */
overflow-x: hidden;
overflow-y: auto; }
tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
tabs tab {
padding-inline-start: 1px !important;
padding-inline-end: 0px !important; }
tabs tab,.tab-background {
overflow: hidden;
height: var(--multirowtabs-height) !important;
min-height: var(--multirowtabs-height) !important;
margin: 0 !important; }
tab > .tab-stack { width: 100%; }
.tab-background { box-shadow: none !important; }
/* 新しいタブボタンの横幅と高さ */
#tabs-newtab-button {
height: var(--multirowtabs-height) !important;
margin: 0 !important; }
#tabs-newtab-button > .toolbarbutton-icon {
width: var(--multirowtabs-height) !important;
height: var(--multirowtabs-height) !important;
padding: 4px !important; }
に置き換えてください。
変更したら、変更した部分の二行目の
:root { --multirowtabs-height: 24px; } /* ここの数値で調整出来ます。 */
の数値を変更すれば高さの調節が可能です。目安として、前と同じにするには32位が良いと思います。
色々数値を変えて、自分の好みの高さに変えてください。
モザイクで分かりづらいですが、変更前(左)と32に変更後(右)です。
どれか1つクリックお願いします。
コメント
はじめまして
いつも参考にさせて頂いております
タブの上下スペースですが87くらいから使っている設定のマシンのを
89に更新した際に発生しました
protonの下記設定を無効にする事でも対処可能でしたので
報告をさせていただきます
about:config
browser.proton.contextmenus.enabled
browser.proton.doorhangers.enabled
browser.proton.enabled
browser.proton.modals.enabled
> sionさん
他の方の参考になると思います。
教えていただきありがとうございます。