Firefox 72 多段タブ

2020年5月23日

Firefoxが72にアップデートしたらまた多段タブが動作しなくなったので修正方法を書いておきます。

元記事はこちら。

修正方法

当サイトで紹介しているものはGitHubで配布されているものを元にして、多段タブ部分のみ使用しています。
使用方法がわかる方はこちらから直接ダウンロードしてご利用ください。

ファイルのダウンロード

Firefox74用ファイルはこちら
タブの高さ調整等もこちらのページをご覧ください。


解凍すると以下の[フォルダー]、ファイルが入っています。

[root] ―┬― [defaults] ─ [pref] ─ config-prefs.js
       └― config.js
[utils] ― boot.jsm、chrome.manifest、userChrome.jsm、xPref.jsm
MultiRowTabLiteforFx.uc.js
userChrome.css

下線を引いたファイル(4つ)、フォルダー(1つ)を以下の通りコピーまたは移動してください。

Firefoxがインストールされているフォルダー

firefox.exe がインストールされているフォルダーを開く

Firefoxがインストールされている場所:

32bits Firefox -> C:\Program Files (x86)\Mozilla Firefox\
64bits Firefox -> C:\Program Files\Mozilla Firefox\

インストールフォルダーにファイルを入れる

(a) root(「firefox.exe」があるディレクトリー)にconfig.jsを入れる
(b) [defaults] ━ [pref] フォルダーにconfig-prefs.jsを入れる

config.js がすでにある場合
config.jsの名前を_config.js 等に変更し、ダウンロードしたconfig.jsを入れます。
私の環境では、Firefoxを再起動後に_config.jsの内容が新しいconfig.jsに追記されていましたが、同じ結果になるかは不明です。

Chromeフォルダー

プロファイルフォルダーを開く

Firefoxのプロファイルフォルダー内の「Chrome」フォルダーを開きます。

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.profile名\Chrome

以下のパスをマイコンピューターのアドレス欄にそのまま貼り付ければプロファイルフォルダーが開きますので、その中にある個別のプロファイルフォルダー(xxxxxxx.profile名)の中から使うものを開きます。

%APPDATA%\Mozilla\Firefox\Profiles\

プロファイルフォルダーが複数あってわからない場合は、使用するFirefoxを起動し、URL欄に about:profiles と入力しEnterキーを押すと「プロファイルについて」が開きます。
「これは使用中のプロファイルです」と表示されているところを探し、「ルートディレクトリー」の行で「フォルダーを開く」ボタンを押せばフォルダーが開きます。

Chromeフォルダーが無い場合
過去にuserChrome.css等の利用をしていない場合はChromeフォルダーを作成します。

Chromeフォルダーに残りの3つを入れます。

[utils] ← フォルダーのまま入れてください
MultiRowTabLiteforFx.uc.js
userChrome.css

.jsと.css ファイルは当方で使用しているものがそのまま入っていますので、変更したくない部分などは適宜修正してください。
(変更点は次の項で)

全部のフォルダーやファイルを入れ終わったらFirefoxを再起動すると多段タブになっていると思います。

userChrome.xmlがある場合は削除してください。
Firefox69以降はuserChrome.cssがデフォルトで無効になっています。
Firefox69以降を新規インストールした場合は about:config を開き、 toolkit.legacyUserProfileCustomizations.stylesheets を true に変更します。

オリジナルから変更したところ

MultiRowTabLiteforFx.uc.js

オリジナル

    :root {
        --max-tab-rows: 3;
        --tab-growth: 1}

    .tabbrowser-tab:not([pinned]) {
        flex-grow: var(--tab-growth)}

改変版
タブ幅(最大と最小)とウィンドウ幅によってタブの幅を変更

    :root {
        --max-tab-rows: 3;
        --min-tab-width: 130px;
        --max-tab-width: 150px;
        --tab-growth: 1}

    .tabbrowser-tab[fadein]:not([pinned]) {
        flex-grow: var(--tab-growth);
        min-width: var(--min-tab-width) !important;
        max-width: var(--max-tab-width) !important}

userChrome.css

6行以降(カラーの変更)を削除し、以下を追記しています。
・閉じるボタンをタブに表示
・検索バーを上に移動
・検索バーの閉じるボタンを表示
・検索バーのフォントを変更


[PR] パソコン操作をもっと速く楽にするため小ネタ満載
¥500(Kindle Unlimitedは無料)