Firefoxの多段タブ・多段ブックマークツールバー等【バージョン125】
過去記事のFirefoxのuserChrome.css関係の記事を最初に書いてから3年経過しその間Firefox本体も何度もバージョンアップしていて、その都度必要に応じてuserChrome.cssの修正やその他諸々差し替え・修正してきました。
この記事を最初に書いた時点、バージョン119で多段タブ・多段ブックマークツールバーが可能です。
■■■追記・ここから■■■
2024.4.5時点で
Firefox(デスクトップ版)：バージョン124.0.2
Firefox Portable：バージョン124.0.2
Firefox Developer Edition：バージョン125.0b8
ですが、バージョン124・125でも多段タブ・多段ブックマークツールバーともに正常動作しています。
Waterfoxについては冒頭のリンク先の記事にある『2023.12.10追記』の箇所をご覧ください。
■■■追記・ここまで■■■
アメブロが半角6万文字しか入力できない(しかも文字数カウントが正しくない)仕様みたいで上記記事に追記できないので、忘備録的に別記事にしておきます。
以下諸々、バージョン119の時点での内容ですが、バージョン124・125でも問題なしです。
●追加した、ほにゃらら.uc.jsの一覧
AddBookmarkHere.uc.js
AddonsPage_fx72.uc.js
contextMenuImageRotate.uc.js
Firefox_ToolBarButtons.uc.js
ImageZoomINcontentAreaContextMenu.uc.js
MultiRowTabLiteforFx.uc.js
OpenWith_1.2.1b.uc.js
tabLock_mod2.uc.js
tabProtect_mod2.uc.js
toggle-findbar.uc.js
unreadTabs.uc.js
userChrome.css
userChrome.js
zzzz-tabContextMenu_combining_tabProtect_and_tabLock.uc.js
タブをダブルクリックでリロードv2.uc.js
■12/25追記・ここから■
MouseGestures2_e10s.uc.jsを追加
詳しくはこちらの記事に書きました。
■12/25追記・ここまで■
上記ほにゃらら.uc.js一式およびuserChrome.css等により、
タブを下にする
多段タブ
タブの既読・未読の色やマウスオーバーした時の色・挙動を自分好みに変更
タブロック
タブプロテクト
タブロック＆タブプロテクト
多段ブックマークツールバー(MAX10段(変更できる)／縦のスクロールバーなし／フェードインなし)
ブックマークのアイコンの色を変更
自動開閉のサイドバー
再起動ボタン
不要なコンテキストメニューを非表示
アドレスバーを拡大しない
画像を右クリックで拡大・縮小・回転
ツールバーボタンをいくつか追加
『Ctrl+F』で検索バーの表示切り替え
タブをダブルクリックでリロード
が有効になっています。
多段タブの諸々を説明する前に、サイドバーについて少し説明します。
●マウスオーバーで自動開閉するサイドバー
サイドバーはアドオンの Tree Style Tab - ツリー型タブ を使用しつつ、サイドバーの挙動・幅・色を少し変更してあります。
①閉じた状態のサイドバー(縦に棒状・横幅36px)を常時表示していて、
※Firefoxのメニューの、表示 → サイドバー → ツリー型タブ をチェックON
②閉じた状態のサイドバーに0.5秒マウスオーバーでサイドバーの中身が開きます。
上記画像のサイドバーで、
・下から3番目がアクティブタブ(背景：青色)
・1番下がマウスオーバー(背景：灰色)
の状態です。
開いたサイドバーは横幅300pxで固定してあります。
マウスオーバーをやめると①の状態に戻ります。
上記サイドバーの色・挙動等に必要なcssは、『Tree Style Tab - ツリー型タブ』のオプションの詳細設定内に下記のコードを記述 ＆ userChrome.css内の関連するcssの両方が必要です。
※以下、アメブロの仕様でスマホだと完全表示できません。
以下、多段タブ関係です。
■■■追記・ここから■■■
userChrome.css と MultiRowTabLiteforFx.uc.js に関して、後述のコード全てをコピペするのは面倒なので、Dropboxに上げておきました。
■2024.4.5追記・ここから■
バージョン119時点での userChrome.css に
・リンクをマウスオーバーした時にステータスバーに表示されるURLの文字の大きさ
・ピン留めしたタブの右側の余白を消す
用のcssを追加しました。
追加したコードは以下の通りです。
■2024.4.5追記・ここまで■
●タブの色とか
アクティブタブ・・・背景黄色で透過・文字黒で太字・タブの上に黒い線・●変更した●外枠黒色
非アクティブタブ(未読)・・・背景薄い灰色を透過・文字は薄い紫
※タブを再読み込みして瞬時に別タブに移動してもキャッシュと全く同じ場合は既読らしい
非アクティブタブ(既読)・・・背景少し濃い灰色を透過・文字は黒
タブをマウスオーバー・・・タブの右側に閉じるボタン(『X』ボタン)が表示／●追加した●タブの上部に青い線 ＆ タブの背景は水色で透過
以下、css競合で効いてない
↓
アクティブタブをマウスオーバー・・・『X』ボタン以外は変わらず
非アクティブタブ(未読)をマウスオーバー・・・背景薄い水色を透過・文字は薄いオレンジ・タブの上にピンクの線
非アクティブタブ(既読)をマウスオーバー・・・背景少し濃い水色を透過・文字は黒で太字・>タブの上に濃いピンクの線
●多段タブ・・・MultiRowTabLiteforFx.uc.js
基本的には
https://u6.getuploader.com/script/search?q=MultiRowTabLiteforFx.uc.js
にて適合する 多段タブ.zip をダウンロードして、
多段タブ → タブ周りの空白を無くして多段にする → Drag-Indicatorがピンのようなアイコン → 3
を使用している・・・ような気がしますが、どのフォルダのどれを使ったのか・改造したのか覚えてないので・・・
●バージョン124・125の時点でのMultiRowTabLiteforFx.uc.js
↑
上記MultiRowTabLiteforFx.uc.jsをダウンロード
●バージョン119時点でのuserChrome.css
↑
上記userChrome.cssをダウンロード
■追記・ここから■
※必要に応じて ■2024.4.5追記・ここから■ のコードをuserChrome.cssに追加してください。
■追記・ここまで■
以上です。
もし使う場合は、各ファイル私のほうで色々手を入れていますので、過去記事のFirefoxのuserChrome.css関係の記事を参考にしてuserChromeを導入し、(お好みの表示・挙動にならない場合は)各ファイルをご自身の環境にあわせて修正し自己責任でお使いください。
この記事を最初に書いた時点、バージョン119で多段タブ・多段ブックマークツールバーが可能です。
■■■追記・ここから■■■
2024.4.5時点で
Firefox(デスクトップ版)：バージョン124.0.2
Firefox Portable：バージョン124.0.2
Firefox Developer Edition：バージョン125.0b8
ですが、バージョン124・125でも多段タブ・多段ブックマークツールバーともに正常動作しています。
Waterfoxについては冒頭のリンク先の記事にある『2023.12.10追記』の箇所をご覧ください。
■■■追記・ここまで■■■
アメブロが半角6万文字しか入力できない(しかも文字数カウントが正しくない)仕様みたいで上記記事に追記できないので、忘備録的に別記事にしておきます。
以下諸々、バージョン119の時点での内容ですが、バージョン124・125でも問題なしです。
●追加した、ほにゃらら.uc.jsの一覧
AddBookmarkHere.uc.js
AddonsPage_fx72.uc.js
contextMenuImageRotate.uc.js
Firefox_ToolBarButtons.uc.js
ImageZoomINcontentAreaContextMenu.uc.js
MultiRowTabLiteforFx.uc.js
OpenWith_1.2.1b.uc.js
tabLock_mod2.uc.js
tabProtect_mod2.uc.js
toggle-findbar.uc.js
unreadTabs.uc.js
userChrome.css
userChrome.js
zzzz-tabContextMenu_combining_tabProtect_and_tabLock.uc.js
タブをダブルクリックでリロードv2.uc.js
■12/25追記・ここから■
MouseGestures2_e10s.uc.jsを追加
詳しくはこちらの記事に書きました。
■12/25追記・ここまで■
上記ほにゃらら.uc.js一式およびuserChrome.css等により、
タブを下にする
多段タブ
タブの既読・未読の色やマウスオーバーした時の色・挙動を自分好みに変更
タブロック
タブプロテクト
タブロック＆タブプロテクト
多段ブックマークツールバー(MAX10段(変更できる)／縦のスクロールバーなし／フェードインなし)
ブックマークのアイコンの色を変更
自動開閉のサイドバー
再起動ボタン
不要なコンテキストメニューを非表示
アドレスバーを拡大しない
画像を右クリックで拡大・縮小・回転
ツールバーボタンをいくつか追加
『Ctrl+F』で検索バーの表示切り替え
タブをダブルクリックでリロード
が有効になっています。
多段タブの諸々を説明する前に、サイドバーについて少し説明します。
●マウスオーバーで自動開閉するサイドバー
サイドバーはアドオンの Tree Style Tab - ツリー型タブ を使用しつつ、サイドバーの挙動・幅・色を少し変更してあります。
①閉じた状態のサイドバー(縦に棒状・横幅36px)を常時表示していて、
※Firefoxのメニューの、表示 → サイドバー → ツリー型タブ をチェックON
②閉じた状態のサイドバーに0.5秒マウスオーバーでサイドバーの中身が開きます。
上記画像のサイドバーで、
・下から3番目がアクティブタブ(背景：青色)
・1番下がマウスオーバー(背景：灰色)
の状態です。
開いたサイドバーは横幅300pxで固定してあります。
マウスオーバーをやめると①の状態に戻ります。
今気づきましたが、②の画像を見れば分かる通り、
・サイドバー内のアクティブタブの背景は青色
・サイドバー内のタブにマウスオーバーした時の背景は灰色
という感じで、後述の『●タブの色とか』と違います。。。
私はあまりサイドバーは使ってないので気にしませんが、気になる方は『Tree Style Tab』のオプションおよび userChrome.css にて調整してください。
調整したけど背景黄色だと見づらくて青色にしたような気もします＞＜
・サイドバー内のアクティブタブの背景は青色
・サイドバー内のタブにマウスオーバーした時の背景は灰色
という感じで、後述の『●タブの色とか』と違います。。。
私はあまりサイドバーは使ってないので気にしませんが、気になる方は『Tree Style Tab』のオプションおよび userChrome.css にて調整してください。
調整したけど背景黄色だと見づらくて青色にしたような気もします＞＜
上記サイドバーの色・挙動等に必要なcssは、『Tree Style Tab - ツリー型タブ』のオプションの詳細設定内に下記のコードを記述 ＆ userChrome.css内の関連するcssの両方が必要です。
※以下、アメブロの仕様でスマホだと完全表示できません。
/* Show title of unread tabs with red and italic font */
/*
:root.sidebar tab-item.unread .label-content {
color: red !important;
font-style: italic !important;
}
*/
/* Add private browsing indicator per tab */
/*
:root.sidebar tab-item.private-browsing tab-label:before {
content: "🕶";
}
*/
/* ●サイドバーの Tree Style Tab - ツリー型タブ● */
/* ●Firefox colorの背景画像を消すのは
Tree Style Tab のオプション設定で ハイコントラスト にする
※元設定は 2つ目のProton●*/
tab-item {
border-color:#000;
}
/*●tab-item:hover {
background: #005B80;
}●*/
tab-item.active {
background-color: #A05E63;
}
tab-item.active .label-content {
font-weight: bold;
}
以下、多段タブ関係です。
■■■追記・ここから■■■
userChrome.css と MultiRowTabLiteforFx.uc.js に関して、後述のコード全てをコピペするのは面倒なので、Dropboxに上げておきました。
■Firefox119用※バージョン124・125でも問題なし
userChrome.css ＆ MultiRowTabLiteforFx.uc.js
※zipにしてあります。
userChrome.cssのみ
MultiRowTabLiteforFx.uc.jsのみ
■追記・ここから■
※必要に応じて ■2024.4.5追記・ここから■ のコードをuserChrome.cssに追加してください。
■追記・ここまで■
●注意●
サイドバーで『Tree Style Tab - ツリー型タブ』を使う場合、『Tree Style Tab - ツリー型タブ』のオプションの詳細設定内に先ほどのコードを記述するのを忘れないようご注意ください。
使わない場合は不要です。
■■■追記・ここまで■■■userChrome.css ＆ MultiRowTabLiteforFx.uc.js
※zipにしてあります。
userChrome.cssのみ
MultiRowTabLiteforFx.uc.jsのみ
■追記・ここから■
※必要に応じて ■2024.4.5追記・ここから■ のコードをuserChrome.cssに追加してください。
■追記・ここまで■
●注意●
サイドバーで『Tree Style Tab - ツリー型タブ』を使う場合、『Tree Style Tab - ツリー型タブ』のオプションの詳細設定内に先ほどのコードを記述するのを忘れないようご注意ください。
使わない場合は不要です。
■2024.4.5追記・ここから■
バージョン119時点での userChrome.css に
・リンクをマウスオーバーした時にステータスバーに表示されるURLの文字の大きさ
・ピン留めしたタブの右側の余白を消す
用のcssを追加しました。
追加したコードは以下の通りです。
@charset "utf-8";
/*●●以下、バージョン119以降に追加●●*/
/* ●リンクをマウスオーバーした時にステータスバーに表示されるURLの文字の大きさ*/
#statuspanel-label {
font-size: 130% !important;
}
/*●ピン留めしたタブの右側の余白を消す●*/
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
/*●元 margin-inline-start: 12px !important;●*/
margin-inline-start: 0px !important;
}
■2024.4.5追記・ここまで■
●タブの色とか
アクティブタブ・・・背景黄色で透過・文字黒で太字・
非アクティブタブ(未読)・・・背景薄い灰色を透過・文字は薄い紫
※タブを再読み込みして瞬時に別タブに移動してもキャッシュと全く同じ場合は既読らしい
非アクティブタブ(既読)・・・背景少し濃い灰色を透過・文字は黒
タブをマウスオーバー・・・タブの右側に閉じるボタン(『X』ボタン)が表示／●追加した●タブの上部に青い線 ＆ タブの背景は水色で透過
以下、css競合で効いてない
↓
非アクティブタブ(未読)をマウスオーバー・・・背景薄い水色を透過・文字は薄いオレンジ・タブの上にピンクの線
非アクティブタブ(既読)をマウスオーバー・・・背景少し濃い水色を透過・文字は黒で太字・>タブの上に濃いピンクの線
●多段タブ・・・MultiRowTabLiteforFx.uc.js
基本的には
https://u6.getuploader.com/script/search?q=MultiRowTabLiteforFx.uc.js
にて適合する 多段タブ.zip をダウンロードして、
多段タブ → タブ周りの空白を無くして多段にする → Drag-Indicatorがピンのようなアイコン → 3
を使用している・・・ような気がしますが、どのフォルダのどれを使ったのか・改造したのか覚えてないので・・・
●バージョン124・125の時点でのMultiRowTabLiteforFx.uc.js
// ==UserScript==
// @name zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace http://space.geocities.yahoo.co.jp/gl/alice0775
// @description 多段タブもどき実験版 CSS入れ替えまくりLiteバージョン
// @include main
// @compatibility Firefox 113
// @author Alice0775
// @version 2016/08/05 00:00 Firefox 48
// @version 2016/05/01 00:01 hide favicon if busy
// @version 2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version 2016/02/09 00:01 workaround css for lwt
// @version 2016/02/09 00:00
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {
var css =` /* USER_SHEET */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
/* ツールバーの並び順 */
#toolbar-menubar { order: 1; } /* メニューバー */
#nav-bar { order: 2; } /* ナビゲーションツールバー */
#PersonalToolbar { order: 3; } /* ブックマークツールバー */
#titlebar { order: 4; } /* タブバー */
/* ツールバーの調整 */
#titlebar,#tabbrowser-tabs { appearance: none !important; }
/* タイトルバーボタン[－□×]の調整 */
#nav-bar > .titlebar-buttonbox-container .titlebar-button { width: 46px !important; }
#toolbar-menubar:not([inactive]) ~ #nav-bar:not([inFullscreen]) > .titlebar-buttonbox-container { display: none !important; }
/* 多段タブ */
box.scrollbox-clip[orient="horizontal"] > scrollbox { flex-wrap: wrap !important; }
.tabbrowser-tab { padding-inline: 0 !important; }
.tabbrowser-tab,#tabs-newtab-button { height: var(--tab-min-height); }
.tab-background {
box-shadow: none !important;
margin-block: 0 !important;
}
#TabsToolbar .toolbarbutton-1 {
margin: 0 !important;
padding: 0 !important;
}
/* 非表示 */
#alltabs-button { display: none !important; }
/* タブバー ドラッグ領域 */
/* 横幅 調整 */
hbox.titlebar-spacer[type="pre-tabs"] { width: 0px !important; } /* 左のドラッグ領域：デフォルト 40px */
hbox.titlebar-spacer[type="post-tabs"] { width: 0px !important; } /* 右のドラッグ領域：デフォルト 40px */
/* ↓CSSコードの左右にあるコメントアウトを外してCSSコードを有効にするとウィンドウを最大化した時非表示になる左のドラッグ領域が表示出来ます。 */
/* :root:not([sizemode="normal"]) hbox.titlebar-spacer[type="pre-tabs"] { display: block !important; } */
/* ↓CSSコードの左右にあるコメントアウトを外してCSSコードを有効にするとフルスクリーンにした時非表示になる左右のドラッグ領域が表示出来ます。 */
/* :root[inFullscreen] hbox.titlebar-spacer { display: block !important; } */
} `;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
var css =` /* AUTHOR_SHEET */
/*
#tabbrowser-arrowscrollbox::part(scrollbox) { flex-wrap: wrap !important; }
*/
/* タブバーshadowRoot内のscrollbuttonとspacerを非表示 */
#tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
#tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator),
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) { display: none !important; }
`;
var sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
if(location.href !== 'chrome://browser/content/browser.xhtml') return;
// メニューバーをツールバーの上部に移動
document.getElementById("titlebar").parentNode.insertBefore(document.getElementById("toolbar-menubar"),document.getElementById("titlebar"));
// タブバーのタイトルバーボタン[－□×]をナビゲーションツールバーの右端に移動
document.getElementById("nav-bar").appendChild(document.querySelector("#TabsToolbar .titlebar-buttonbox-container"));
// drag & drop & DropIndicator
gBrowser.tabContainer.on_dragover = function(event) {
var effects = this.getDropEffectForTabDrag(event);
var ind = this._tabDropIndicator;
if (effects == "" || effects == "none") {
ind.hidden = true;
return;
}
event.preventDefault();
event.stopPropagation();
var arrowScrollbox = this.arrowScrollbox;
if (effects == "link") {
let tab = this._getDragTargetTab(event, { ignoreTabSides: true });
if (tab) {
if (!this._dragTime) {
this._dragTime = Date.now();
}
if (Date.now() >= this._dragTime + this._dragOverDelay) {
this.selectedItem = tab;
}
ind.hidden = true;
return;
}
}
var rect = arrowScrollbox.getBoundingClientRect();
var newMarginX, newMarginY;
let newIndex = this._getDropIndex(event);
let children = this.allTabs;
if (newIndex == children.length) {
let tabRect = this._getVisibleTabs().at(-1).getBoundingClientRect();
if (RTL_UI) {
newMarginX = rect.right - tabRect.left;
} else {
newMarginX = tabRect.right - rect.left;
}
newMarginY = tabRect.top - rect.top + tabRect.height / 2 - rect.height / 2;
} else {
let tabRect = children[newIndex].getBoundingClientRect();
if (RTL_UI) {
newMarginX = rect.right - tabRect.right;
} else {
newMarginX = tabRect.left - rect.left;
}
newMarginY = tabRect.top - rect.top + tabRect.height / 2 - rect.height / 2;
}
ind.hidden = false;
newMarginX += ind.clientWidth / 2;
if (RTL_UI) {
newMarginX *= -1;
}
ind.style.transform = "translate(" + Math.round(newMarginX) + "px," + Math.round(newMarginY) + "px)";
}
gBrowser.tabContainer.on_drop = function(event) {
var dt = event.dataTransfer;
var dropEffect = dt.dropEffect;
var draggedTab;
let movingTabs;
if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
// tab copy or move
draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
// not our drop then
if (!draggedTab) {
return;
}
movingTabs = draggedTab._dragData.movingTabs;
draggedTab.container._finishGroupSelectedTabs(draggedTab);
}
this._tabDropIndicator.hidden = true;
event.stopPropagation();
if (draggedTab && dropEffect == "copy") {
// copy the dropped tab (wherever it's from)
let newIndex = this._getDropIndex(event);
let draggedTabCopy;
for (let tab of movingTabs) {
let newTab = gBrowser.duplicateTab(tab);
gBrowser.moveTabTo(newTab, newIndex++);
if (tab == draggedTab) {
draggedTabCopy = newTab;
}
}
if (draggedTab.container != this || event.shiftKey) {
this.selectedItem = draggedTabCopy;
}
} else if (draggedTab && draggedTab.container == this) {
let oldTranslateX = Math.round(draggedTab._dragData.translateX);
let tabWidth = Math.round(draggedTab._dragData.tabWidth);
let translateOffset = oldTranslateX % tabWidth;
let newTranslateX = oldTranslateX - translateOffset;
if (oldTranslateX > 0 && translateOffset > tabWidth / 2) {
newTranslateX += tabWidth;
} else if (oldTranslateX < 0 && -translateOffset > tabWidth / 2) {
newTranslateX -= tabWidth;
}
let dropIndex;
if (draggedTab._dragData.fromTabList) {
dropIndex = this._getDropIndex(event);
} else {
dropIndex = this._getDropIndex(event);
// "animDropIndex" in draggedTab._dragData &&
// draggedTab._dragData.animDropIndex;
}
let incrementDropIndex = true;
if (dropIndex && dropIndex > movingTabs[0]._tPos) {
dropIndex--;
incrementDropIndex = false;
}
if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
for (let tab of movingTabs) {
tab.setAttribute("tabdrop-samewindow", "true");
tab.style.transform = "translateX(" + newTranslateX + "px)";
let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow");
this._finishAnimateTabMove();
if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
dropIndex++;
}
}
gBrowser.syncThrobberAnimations(tab);
};
if (gReduceMotion) {
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
if (
transitionendEvent.propertyName != "transform" ||
transitionendEvent.originalTarget != tab
) {
return;
}
tab.removeEventListener("transitionend", onTransitionEnd);
postTransitionCleanup();
};
tab.addEventListener("transitionend", onTransitionEnd);
}
}
} else {
this._finishAnimateTabMove();
if (dropIndex !== false) {
for (let tab of movingTabs) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
dropIndex++;
}
}
}
}
} else if (draggedTab) {
// Move the tabs. To avoid multiple tab-switches in the original window,
// the selected tab should be adopted last.
const dropIndex = this._getDropIndex(event);
let newIndex = dropIndex;
let selectedTab;
let indexForSelectedTab;
for (let i = 0; i < movingTabs.length; ++i) {
const tab = movingTabs[i];
if (tab.selected) {
selectedTab = tab;
indexForSelectedTab = newIndex;
} else {
const newTab = gBrowser.adoptTab(tab, newIndex, tab == draggedTab);
if (newTab) {
++newIndex;
}
}
}
if (selectedTab) {
const newTab = gBrowser.adoptTab(
selectedTab,
indexForSelectedTab,
selectedTab == draggedTab
);
if (newTab) {
++newIndex;
}
}
// Restore tab selection
gBrowser.addRangeToMultiSelectedTabs(
gBrowser.tabs[dropIndex],
gBrowser.tabs[newIndex - 1]
);
} else {
// Pass true to disallow dropping javascript: or data: urls
let links;
try {
links = browserDragAndDrop.dropLinks(event, true);
} catch (ex) {}
if (!links || links.length === 0) {
return;
}
let inBackground = Services.prefs.getBoolPref(
"browser.tabs.loadInBackground"
);
if (event.shiftKey) {
inBackground = !inBackground;
}
let targetTab = this._getDragTargetTab(event, { ignoreTabSides: true });
let userContextId = this.selectedItem.getAttribute("usercontextid");
let replace = !!targetTab;
let newIndex = this._getDropIndex(event);
let urls = links.map(link => link.url);
let csp = browserDragAndDrop.getCsp(event);
let triggeringPrincipal =
browserDragAndDrop.getTriggeringPrincipal(event);
(async () => {
if (
urls.length >=
Services.prefs.getIntPref("browser.tabs.maxOpenBeforeWarn")
) {
// Sync dialog cannot be used inside drop event handler.
let answer = await OpenInTabsUtils.promiseConfirmOpenInTabs(
urls.length,
window
);
if (!answer) {
return;
}
}
gBrowser.loadTabs(urls, {
inBackground,
replace,
allowThirdPartyFixup: true,
targetTab,
newIndex,
userContextId,
triggeringPrincipal,
csp,
});
})();
}
if (draggedTab) {
delete draggedTab._dragData;
}
}
}
上記MultiRowTabLiteforFx.uc.jsをダウンロード
●バージョン119時点でのuserChrome.css
@charset "utf-8";
/*●●自分で追加・ここから●●*/
/*●文字全部の色*/
#main-menubar > menu,.tab-label{ color: black !important;}
/*●メニューの余白*/
#main-menubar > menu {
margin-top: 4px;
}
/*●タブの文字の下の余白*/
.tab-text {margin-bottom: 5px !important;}
.tab-icon-image:not([pinned]), .tab-sharing-icon-overlay:not([pinned]), .tab-icon-overlay:not([pinned]) { padding-bottom: 3px !important;}
.tab-content {font-size: small;}
.bookmark-item {height: 21px !important;}
/*●●自分で追加・ここまで●●*/
#titlebar { -moz-box-ordinal-group: 3; }
/* メニューを上へ移動 */
#toolbar-menubar { position: fixed; display: inline-flex; }
[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar { top: 1px; }
[sizemode="maximized"] #toolbar-menubar { top: 8px; }
/* ツールバーの上にメニューバーのスペースを確保する */
/* ●2022/06/30 ここらへんおかしい */
#navigator-toolbox:not([inFullscreen="true"]) { border-top: solid 30px transparent !important; }
/* ブックマークアイコンの色を変更 */
.bookmark-item[container] {fill:#e8bb00 !important;}
/* ●多段タブ */
:root{ --multirow-n-rows: 5;}
#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0px !important;
}
/* Test for Firefox > 66 */
@supports (inset-block:auto){
#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
scrollbar-color: var(--toolbar-bgcolor) var(--lwt-accent-color);
scrollbar-width: thin;
}
#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
}
}
/* Test for Firefox < 66 */
@supports not (inset-block:auto){
#tabbrowser-tabs > .tabbrowser-arrowscrollbox{
min-height: unset !important;
}
#tabbrowser-tabs .scrollbox-innerbox{
display: flex;
flex-wrap: wrap;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
}
}
.tabbrowser-tab{ height: var(--tab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0px !important;
}
.tabbrowser-tab > stack{ width: 100%; height: 100% }
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }
/* タブ幅の設定 */
.tabbrowser-tab[fadein]:not([pinned]) {
min-width: 150px !important;/* タブ幅の設定 最小値 デフォルト 76px */
max-width: 250px !important;/* タブ幅の設定 最大値 デフォルト 225px */
flex-grow: 1;
/* 上記の幅設定では、タブ幅は可変されます（minとmaxを一緒にすれば固定になります） */
}
/* 非アクティブタブにマウスを載せた時に閉じるボタンを表示する */
/* Showing close button on tabs */
.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }
/* ******************●追加●****************** */
/* https://dev.macha795.com/firefox72-unread-tab-customize-enable/ */
/* 色は https://note.cman.jp/color/base_color.cgi */
/* https://developer.mozilla.org/ja/docs/Web/CSS/color_value */
/* 説明 http://ssbsblg.blogspot.com/2020/05/22.html */
/* 選択中のタブ */
.tabbrowser-tab[selected] .tab-text {
font-weight: bold !important;
}
/* アクティブタブ */
.tab-background[multiselected="true"], .tab-background[selected="true"] {
background-color: rgb(255,255,0,0.5) !important;
}
/* ダークテーマの場合はこのコードを追加する（改変厳禁） */
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected="true"]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme {
background-image: none !important;
}
/* 非アクティブタブ */
.tabbrowser-tab {
background-color: rgb(128,128,128,0.1) !important;
}
/* 非アクティブタブ（マウスオーバー） */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]):not([multiselected]) {
background-color: transparent; !important;
background-color: rgb(0,255,255,0.2) !important;
}
/* ●既読の非アクティブタブ・マウスオーバーで文字を太字 */
.tabbrowser-tab:hover:not([visuallyselected="true"]):not([multiselected])>.tab-stack>.tab-content {
font-weight: bold !important;
color: rgb(0,0,0) !important;
}
/* ******************●未読タブ●****************** */
/* ******************●現在の要素名はunreadTabs.uc.jsの中を確認する●****************** */
/* https://egg.5ch.net/test/read.cgi/software/1544138804/236-239 */
/* 未読タブのタイトル文字色を変更する */
.tabbrowser-tab[unreadTab="true"] .tab-text {
color: mediumvioletred !important;
font-weight: bold !important;
}
/* 非ロードTabのタイトル文字色の変更 */
.tabbrowser-tab[pending="true"] .tab-text {
color: #1E0EBE !important;
font-weight: bold !important;
}
/* タブ復元時にまだ読み込まれていないタブを半透明化する */
.tabbrowser-tab[pending] {
opacity: .6 !important;
}
/* 非ロードTab・マウスオーバーで文字を太字 */
.tabbrowser-tab:hover[pending="true"] .tab-text {
font-weight: bold !important;
color: rgb(255,0,0) !important;
}
/* ●非アクティブタブ上部の線（マウスオーバー） */
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected="true"]):not([multiselected]) {
background-color: deeppink !important;
}
/* ●既読・非アクティブのタブの背景色 */
.tabbrowser-tab:not([selected]):not([unreadTab="true"]) {
background-color: rgb(128,128,128,0.3) !important;
}
/* ●アドレスバーを拡大しない● */
/* based on https://old.reddit.com/comments/fwhlva//fmolndz */
#urlbar[breakout][breakout-extend]:not([open]) {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar[breakout][breakout-extend]:not([open]) > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding-block: 0px !important;
padding-inline: 0px !important;
}
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
animation-name: none !important;
}
#urlbar[breakout][breakout-extend]:not([open]) > #urlbar-background {
box-shadow: none !important;
}
/* ******************●コンテキストメニューを削除●****************** */
/*
先頭の/*を追加／削除することでメニューの表示／非表示を制御出来ます。お好みで変更してください。先頭の/*を追加すると表示で、削除すると非表示です。
※全角文字を含む場合（拡張機能用の[スクリーンショットを撮る]を指定する場合）、@charsetの指定が必要になります。また、userChrome.cssファイルを指定した文字コードで保存してください。
*/
/* ファイルの文字コードを設定 */
@charset "UTF-8";
/* コンテキストメニューを削除 */
/* v82.20201031 */
/* see https://www.bugbugnow.net/2017/12/firefox-quantum-57.html */
/* #mainPopupSet, /* ポップアップ */
/* #tabContextMenu, /* タブコンテキストメニュー */
/* #context_reloadTab, /* [タブを再読み込み] */
#context_reloadSelectedTabs, /* [タブを再読み込み] 67+ */
#context_toggleMuteTab, /* [タブをミュート] */
#context_toggleMuteSelectedTabs,/* [タブをミュート] 67+ */
/* #context_pinTab, /* [タブをピン留め] */
/* #context_unpinTab, /* [タブのピン留めを外す] */
/* #context_pinSelectedTabs, /* [タブをピン留め] 67+ */
/* #context_unpinSelectedTabs, /* [タブのピン留めを外す] 67+ */
/* #context_duplicateTab, /* [タブを複製] */
/* #context_duplicateTabs, /* [タブを複製] 67+ */
/* #context_duplicateTabs + menuseparator, /* [区切り] 67+ */
#context_selectAllTabs, /* [すべてのタブを選択] 64+ */
#context_bookmarkSelectedTabs, /* [タブをブックマーク...] */
#context_bookmarkTab, /* [タブをブックマーク] 64+ */
#context_reopenInContainer, /* [コンテナーを開きなおす] */
#context_moveTabOptions, /* [タブを移動] 64+ */
#moveTabOptionsMenu, /* [タブ移動] 67+ */
/* #context_moveToStart, /* [最初のタブへ移動] 67+ */
/* #context_moveToEnd, /* [最後のタブへ移動] 67+ */
#context_openTabInWindow, /* [新しいウィンドウへ移動] 67+ */
#context_sendTabToDevice, /* [タブを端末へ送信] */
#context_sendTabToDevice + menuseparator, /* [区切り] */
/* #context_reloadAllTabs, /* [すべてのタブを再読み込み] 78- */
#context_bookmarkAllTabs, /* [すべてのタブをブックマーク...] 78- */
/* #context_closeTabOptions, /* [複数のタブを閉じる] 78+ */
/* #context_closeTabsToTheEnd, /* [右側のタブをすべて閉じる] */
/* #context_closeOtherTabs, /* [他のタブをすべて閉じる] */
/* #context_undoCloseTab, /* [閉じたタブを元に戻す] */
#context_closeTab, /* [タブを閉じる] */
#context_closeSelectedTabs, /* [タブを閉じる] 67+ */
/* #context_closeSelectedTabs + menuseparator, /* [区切り] */
/* #contentAreaContextMenu, /* コンテキストメニュー */
/* #context-navigation, /* [ナビゲート] */
/* #context-back, /* [戻る] */
/* #context-forward, /* [進む] */
/* #context-reload, /* [更新] */
/* #context-stop, /* [停止] */
/* #context-bookmarkpage, /* [ブックマーク] */
/* #context-sep-navigation, /* [区切り] */
#page-menu-separator, /* [区切り] */
/* #spell-no-suggestions, /* [(修正候補がありません)] */
/* #spell-add-to-dictionary, /* [辞書に追加] */
/* #spell-undo-add-to-dictionary, /* [辞書への追加を元に戻す] */
/* #spell-suggestions-separator, /* [区切り] */
#context-openlinkincurrent, /* [選択した URL を開く] */
#context-openlinkincontainertab,/* [Open Link in New Personal Tab] */
/* #context-openlinkintab, /* [リンクを新しいタブで開く] */
#context-openlinkinusercontext-menu, /* [リンクを新しいコンテナータブで開く] */
#context-openlink, /* [リンクを新しいウィンドウで開く] */
/* #context-openlinkprivate, /* [リンクを新しいプライベートウィンドウで開く] */
#context-sep-open, /* [区切り] */
#context-bookmarklink, /* [このリンクをブックマーク] */
/* #context-savelink, /* [名前を付けてリンク先を保存...] */
#context-savelinktopocket, /* [リンクを Pocket に保存] */
#context-sendlink, /* ※[リンクのURLをメールで送信] */
#context-copyemail, /* [メールアドレスをコピー] */
/* #context-copylink, /* [リンクの URL をコピー] */
/* #context-sep-copylink, /* [区切り] */
/* #context-media-play, /* [再生] */
/* #context-media-pause, /* [一時停止] */
/* #context-media-mute, /* [ミュート] */
/* #context-media-unmute, /* [ミュート解除] */
/* #context-media-playbackrate, /* [再生スピード] */
/* #context-media-loop, /* [連続再生] */
/* #context-media-showcontrols, /* [コントロールを表示] */
/* #context-media-hidecontrols, /* [コントロールを隠す] */
#context-video-fullscreen, /* [全画面表示] */
#context-leave-dom-fullscreen, /* [全画面表示モードを終了] */
#context-media-sep-commands, /* [区切り] */
#context-reloadimage, /* [画像を再読み込み] */
/* #context-viewimage, /* [画像だけを表示] */
#context-viewvideo, /* [動画だけを表示] */
/* #context-copyimage-contents, /* [画像をコピー] */
/* #context-copyimage, /* [画像の URL をコピー] */
/* #context-copyvideourl, /* [動画の URL をコピー] */
/* #context-copyaudiourl, /* [音声の URL をコピー] */
/* #context-sep-copyimage, /* [区切り] */
/* #context-saveimage, /* [名前を付けて画像を保存...] */
#context-sendimage, /* [画像の URL をメールで送信...] */
#context-setDesktopBackground, /* [デスクトップの背景に設定...] */
#context-blockimage, /* ※[画像をブロックする] */
/* #context-viewimageinfo, /* [画像の情報を表示] */
/* #context-viewimagedesc, /* [画像の詳細情報を表示] */
/* #context-savevideo, /* [名前を付けて動画を保存...] */
/* #context-saveaudio, /* [名前を付けてオーディオを保存...] */
/* #context-video-saveimage, /* [スナップショットを保存...] */
#context-sendvideo, /* [動画の URL をメールで送信...] */
#context-sendaudio, /* [音声の URL をメールで送信...] */
/* #context-ctp-play, /* [このプラグインを有効化] */
/* #context-ctp-hide, /* [このプラグインを非表示] */
/* #context-sep-ctp, /* [区切り] */
/* #context-savepage, /* [名前を付けてページを保存...] */
#context-pocket, /* [ページを Pocket に保存] */
#context-sep-sendpagetodevice, /* [区切り] */
#context-sendpagetodevice, /* [ページを端末へ送信] */
#context-sendpage, /* ※[ページのURLをメールで送信] */
#context-sep-viewbgimage, /* [区切り] */
#context-viewbgimage, /* [背景画像だけを表示] */
/* #context-undo, /* [元に戻す] */
/* #context-sep-undo, /* [区切り] */
/* #context-cut, /* [切り取り] */
/* #context-copy, /* [コピー] */
/* #context-paste, /* [貼り付け] */
/* #context-delete, /* [削除] */
/* #context-sep-paste, /* [区切り] */
/* #context-selectall, /* [すべて選択] */
/* #context-sep-selectall, /* [区切り] */
#context-keywordfield, /* [この検索にキーワードを設定...] */
/* #context-searchselect, /* [[-をweb検索]] */
#context-sep-sendlinktodevice, /* [区切り] */
#context-sendlinktodevice, /* [リンクを端末へ送信] */
/* #frame-sep, /* [区切り] */
/* #frame, /* [このフレーム] */
/* #context-viewpartialsource-selection, /* [選択した部分のソースを表示] */
/* #context-viewpartialsource-mathml, /* [MathML のソースを表示] */
/* #context-sep-viewsource, /* [区切り] */
/* #context-viewsource, /* [ページのソースを表示] */
/* #context-viewinfo, /* [ページの情報を表示] */
/* #context-metadata, /* ※[プロパティを表示する] */
/* #spell-separator, /* [区切り] */
/* #spell-check-enabled, /* [スペルチェックを行う] */
/* #spell-add-dictionaries-main, /* [辞書を追加...] */
/* #spell-dictionaries, /* [言語] */
/* #context-spell-check-enabled, /* ※[スペルチェックを有効にするチェックボックス] */
/* #context-sep-bidi, /* [区切り] */
/* #context-bidi-text-direction-toggle, /* [テキストの記述方向を切り替える] */
/* #context-bidi-page-direction-toggle, /* [ページの記述方向を切り替える] */
/* #fill-login-separator, /* [区切り] */
/* #fill-login, /* [ログイン情報を入力] */
/* #inspect-separator, /* [区切り] */
/* #context-inspect-a11y, /* [アクセシビリティプロパティを調査] 67+ 82+ */
/* #context-inspect, /* [要素を調査] 82+ */
/* #context-media-eme-separator, /* [区切り] */
/* #context-media-eme-learnmore, /* [DRM の詳細...] */
/* #placesContext, /* ブックマークメニュー */
/* #placesContext_open, /* [開く] */
/* #placesContext_open\:newtab, /* [新しいタブで開く] */
/* #placesContext_openContainer\:tabs, /* [タブですべて開く] */
/* #placesContext_openLinks\:tabs, /* [タブですべて開く] */
/* #placesContext_open\:newwindow, /* [新しいウィンドウで開く] */
/* #placesContext_open\:newprivatewindow, /* [新しいプライベートウィンドウで開く] */
/* #placesContext_openSeparator, /* [区切り] */
/* #placesContext_new\:bookmark, /* [新しいブックマーク...] */
/* #placesContext_new\:folder, /* [新しいフォルダー...] */
/* #placesContext_new\:separator, /* [新しい区切り] */
/* #placesContext_newSeparator, /* [区切り] */
/* #placesContext_createBookmark, /* [ページをブックマークに追加] */
/* #placesContext_cut, /* [切り取り] */
/* #placesContext_copy, /* [コピー] */
/* #placesContext_paste, /* [貼り付け] */
/* #placesContext_editSeparator, /* [区切り] */
/* #placesContext_delete, /* [削除] */
/* #placesContext_delete_history, /* [ページを削除] */
/* #placesContext_deleteHost, /* [このサイトの履歴を消去] */
/* #placesContext_deleteSeparator, /* [区切り] */
/* #placesContext_sortBy\:name, /* [名前順に並べ替える] */
/* #placesContext_reload, /* [ライブブックマークを再読み込み] */
/* #placesContext_show\:info, /* [プロパティ] */
/* #pageActionPanel, /* ページアクション */
/* #pageAction-panel-bookmark, /* [このページをブックマーク] */
/* #pageAction-panel-pocket, /* [ページを Pocket に保存] */
/* #pageAction-panel-pinTab, /* [タブをピン留め][タブのピン留めを外す] */
/* #pageAction-panel-bookmarkSeparator, /* [区切り] */
/* #pageAction-panel-copyURL, /* [リンクをコピー] */
/* #pageAction-panel-emailLink, /* [ページの URL をメールで送信...] */
#pageAction-panel-sendToDevice, /* [1 個のタブを端末へ送信] */
#pageAction-panel-shareURL, /* [共有] */
/* #pageAction-panel-screenshots_mozilla_org, /* [スクリーンショットを撮る] */
/* #pageAction-panel-builtInSeparator, /* [区切り] */
#context-dummy-dummy-dummy /* ダミー */
{
display: none !important;
}
/* 「…で検索: "…"」を削除 */
/* リンクを右クリックした場合、削除する。 */
/* 選択中のテキストがある場合、削除しない。 */
#context-copylink:not([hidden]) ~ #context-copy[hidden] ~ #context-searchselect, /**/
#context-dummy-dummy-dummy /* ダミー */
{
display: none !important;
}
/* コンテキストメニューを削除（拡張機能用） */
/* @charsetとuserChrome.cssの文字コードに注意 */
menuitem[label="Take a Screenshot"], /* スクリーンショットを撮る */
/* menuitem[label="スクリーンショットを撮る"], /* スクリーンショットを撮る */
/* menuitem[label="NoScript"], /* NoScript */
#context-dummy-dummy-dummy /* ダミー */
{
display: none !important;
}
/* ******************●ブックマークツールバーを多段●****************** */
/* ●--bookmark_items_lines: 3; で段数を変更で段数を変更する● */
/* ●右側に動作しないスクロールバーが出てくるので、不要なら#personal-bookmarks #PlacesToolbarに「scrollbar-width: none !important;」を入れると非表示になる。
● */
/*●ブックマークツールバーに表示されるブックマークの幅を狭めたいなら、#navigator-toolbox #PersonalToolbarに
toolbarbutton.bookmark-item {
max-width: 100px !important;
}
のコードを記述● */
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/
/* NOTE ********************************************************************************/
/* Variables are set inside '.\config\' folders CSS files, if complete package is used! */
/* import old button/bookmark size code *************************************************/
@import "./../buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css";
:root {
--bookmark_items_height: 22px; /*●1行あたりの高さ <- bookmark items - line height */
--bookmark_items_lines: 30; /*●最大の多段数 <- maximum amount of lines */
}
#PersonalToolbar {
min-height: var(--bookmark_items_height) !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important;
/*●ブックマークの背景*/
background: #ffffff59 !important;
opacity: 1.0 !important;
color : black !important;
}
#personal-bookmarks,
#PlacesToolbar > hbox {
display: block;
}
#PlacesToolbarItems {
display: flex;
flex-wrap: wrap;
overflow-x: visible;
overflow-y: auto;
}
#PlacesToolbarItems > .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: hidden !important;
overflow-y: visible !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important;
}
#personal-bookmarks #PlacesToolbar {
display: block;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) );
scrollbar-width: none !important;
}
#personal-bookmarks #PlacesToolbar > .bookmark-item{
visibility: visible !important;
}
#personal-bookmarks #PlacesToolbar .chevron{
visibility: collapse;
}
#personal-bookmarks #PlacesToolbar > hbox > hbox{
overflow-x: hidden;
overflow-y: hidden;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
display: none;
}
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
padding-top: 2px !important;
padding-bottom: 2px !important;
/*●元
margin-top: 0px !important;
margin-bottom: 1px !important;
*/
margin-top: 2px !important;
margin-bottom: 2px !important;
/*●これ効いてない(display: inline;を追加すれば効くらしい
vertical-align: middle;
*/
}
/*
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
*/
#personal-bookmarks #PlacesToolbar toolbarseparator{
-moz-appearance: none !important;
visibility: visible !important;
display: inline;
text-shadow: none !important;
border-left: 3px solid ThreeDShadow !important;
border-right: 3px solid ThreeDHighlight !important;
vertical-align: middle;
}
#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
-moz-appearance: toolbarbutton;
}
#navigator-toolbox #PersonalToolbar {
max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) ) !important;
}
/* ブックマークツールバー上部余白調整 */
#PersonalToolbar {
margin-top: -2px !important;
}
/* 透過フェードインフェードアウト */
/*
#PlacesToolbarItems:hover{
transition-delay: 0.1s !important;
opacity: 1 !important;
}
#PlacesToolbarItems{
opacity: 0.3 !important;
transition-delay: 2s !important;
transition-duration: 1s !important;
}
*/
/* ブックマークとメニューの項目間の余白幅 */
menupopup > menuitem,
menupopup > menu {
padding-block: 0.15em !important;
}
:root {
--arrowpanel-menuitem-padding: 3px 6px !important;
}
/*●URL入力欄(左側)*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#urlbar-background,
#searchbar .searchbar-textbox ,
.searchbar-engine-button
{ background: white !important;}
#urlbar,
#searchbar .searchbar-textbox
{opacity: 0.7!important;}
#urlbar:hover,
#searchbar .searchbar-textbox:hover
{opacity: 0.8!important}
#urlbar[focused="true"],
#searchbar .searchbar-textbox[focused="true"]
{opacity: 1.0!important;}
/*●多段ブックマークツールバーの下の余白を消す*/
#PlacesToolbarItems {
contain: initial!important;
}
/*●多段ブックマークツールバーの下の余白を消す*/
#PersonalToolbar .toolbarbutton-1{
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
/*●多段ブックマークツールバーの上の余白*/
#personal-bookmarks {
padding-top: 2px!important;
}
/*●サイドバーを非表示*/
/*●これ関係ない#sidebar-box, #sidebar-splitter { visibility: hidden; }●*/
/*●
#sidebar-box {
min-width: 0px!important;
max-width: 0px!important;
overflow-x: hidden!important;
}
●*/
/* サイドバーを自動開閉するようにする （左側用）*/
/*●元
:root {
--thin-tab-width: 20px;
--wide-tab-width: 200px;
}
#sidebar-box {
position: relative !important;
overflow-x: hidden !important;
min-width: var(--thin-tab-width) !important;
max-width: var(--thin-tab-width) !important;
box-shadow: 0 0 2px 0 rgba(0,0,0,.35);
z-index: 1 !important;
transition: all .1s ease;
}
#sidebar-box:hover {
min-width: var(--wide-tab-width) !important;
max-width: var(--wide-tab-width) !important;
box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
margin-left: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}
#sidebar-box>#sidebar {
opacity: 0 !important;
}
#sidebar-box:hover>#sidebar {
opacity: 1 !important;
}
●*/
/* サイドバーのヘッダーを非表示にする */
/*●
#sidebar-header {
display: none !important;
}
●*/
:root {
--thin-tab-width: 36px;
--wide-tab-width: 300px;
}
#sidebar-box {
position: relative !important;
overflow-x: hidden !important;
min-width: var(--thin-tab-width) !important;
max-width: var(--thin-tab-width) !important;
box-shadow: 0 0 2px 0 rgba(0,0,0,.35);
z-index: 1 !important;
transition: all .1s ease;
}
#sidebar-box:hover {
min-width: var(--wide-tab-width) !important;
max-width: var(--wide-tab-width) !important;
box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
/* 0.5秒ホバーで開く */
transition-delay: 0.5s!important;
}
#sidebar-box>#sidebar {
opacity: 0 !important;
}
#sidebar-box:hover>#sidebar {
opacity: 1 !important;
}
#sidebar-splitter {
}
/* ●●●●●●●●●●以下、3つ追加した●●●●●●●●●● */
/* ● https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler */
/* ●●タブとタブの間の区切り */
/* Inactive tabs: Separator line style */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
}
/* For dark backgrounds */
[brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
border-right: 1px solid var(--lwt-background-tab-separator-color, var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20))) !important;
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
border-radius: 0 !important;
}
/* Remove padding between tabs */
.tabbrowser-tab {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ●●アクティブタブの上部に青い線／
●非アクティブタブ(マウスオーバー)でタブ上部にグレーの線にする場合は、812～828行目の●を除去する */
/* Emulate blue tab line from Photon 57-88 UI */
/* Set size and position of the bar relative to background */
.tab-background::before {
content: "";
display: block;
height: 3px;
margin: -1px var(--user-tab-rounding) 0;
}
/* Set color for active tab */
.tabbrowser-tab[multiselected]:not([selected]) .tab-background::before,/*●この行追加*/
.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before,/*●この行追加*/
.tabbrowser-tab[selected]:hover .tab-background::before {
background-color: #0a84ff;
}
/* Set color for other selected tabs */
.tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {
/*●
background-color: color-mix(in srgb, #0a84ff 66%, transparent);
●*/
}
/* Set color for hovering on non-active/non-selected tabs */
.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {
/*●
background-color: color-mix(in srgb, currentColor 33%, transparent);
transform: none;
●*/
}
/* [Optional] Animation when hovering non-active/non-selected tabs */
/*
.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
transform: scaleX(.8);
transition: transform 100ms linear;
}
*/
/* Adjust margin on blue tab line for squared background tabs */
.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
margin: -1px 0 0 !important;
}
/*●●タブの高さ*/
/* Override Normal Density height to Compact Density height (plus room for context-line) only for tabs 1/16/2022 */
#TabsToolbar, #tabbrowser-tabs {
--tab-min-height: 34px !important;/*●ここでタブの高さを決めてる●元36px／Compactの初期値が29px／Firefoxの初期値25px？*/
}
/* Tweak for covering a line at the bottom of the active tab on some themes 8/11/2021 */
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar,
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar #tabbrowser-tabs {
--tab-min-height: calc(var(--tab-min-height) +10px) !important;
}
#scrollbutton-up,
#scrollbutton-down {
border-top-width: 0 !important;
border-bottom-width: 0 !important;
}
/*●タブの横幅を固定するか検討中●135行目にあった*/
tabs tab[fadein]:not([pinned]) {
/*min-width: 100px !important;/* 最小値 デフォルト 76px */
/*max-width: 100px !important;/* 最大値 デフォルト 225px */
}
/* ●アクティブタブの背景色*/
/*●.tabbrowser-tab[selected] .tab-background でも可能●*/
.tab-background[selected] {
background-color: rgb(255,255,0,0.5) !important;/*●yellow透過●*/
background-image: none !important;
}
上記userChrome.cssをダウンロード
■追記・ここから■
※必要に応じて ■2024.4.5追記・ここから■ のコードをuserChrome.cssに追加してください。
■追記・ここまで■
以上です。
もし使う場合は、各ファイル私のほうで色々手を入れていますので、過去記事のFirefoxのuserChrome.css関係の記事を参考にしてuserChromeを導入し、(お好みの表示・挙動にならない場合は)各ファイルをご自身の環境にあわせて修正し自己責任でお使いください。