Firefox 155で多段タブ

FireFoxをバージョンアップしたら多段タブが効かなくなってしまったため、「ああいつものね」ということで多段タブ.zip の最新版をダウンロードしようと思ったら更新されておらず・・・。

仕方がないので自前で必要なファイルをかき集めてくることに。

userChrome.js

まずはalice0775氏のgithubから使用するFirefoxのバージョン(今回は155)に合ったフォルダを開き、

config.js
defaults\pref\config-prefs.js

を探すとinstall_folderの中にあるので、2ファイルをダウンロード(gitコマンドをインストールしなくとも、ブラウザでファイルの中身を表示した状態で右上の「…」からダウンロード可能)

そしてディレクトリ構成を保ったままFirefoxのイントール先へコピー。

デフォルトのままインストールした場合は C:\Program Files\Mozilla Firefox なので、コピー後はこんな感じになるはず。

C:\Program Files\Mozilla Firefox\config.js
C:\Program Files\Mozilla Firefox\defaults\pref\config-prefs.js

続いてuserChrome.jsをダウンロードし、プロファイルフォルダ内のchromeディレクトリへコピー。プロファイルフォルダ内にchromeフォルダが無いなら自分で作る必要あり。

プロファイルフォルダの場所は、URL欄に「about:support」と入れる→トラブルシューティング情報画面が開く→そこからプロファイルフォルダーを開くと分かるのだが、コピー後はこんな感じになるはず。

C:\Users\(ユーザ名)\AppData\Roaming\Mozilla\Firefox\Profiles\(ランダムな名前)\chrome\userChrome.js

今回はたまたま同じバージョンフォルダにファイルが揃っていたが、基本、差分ファイルしか置かれていないため、該当のファイルが見つからない時は過去に遡ってファイルを探す必要あり。

userChrome.css

userChrome.cssという名前で以下の内容が書かれたファイルを用意。それをuserChrome.jsと同じ場所に置く。(最低限、@charset “utf-8”; だけ書かれていればOK。閉じるボタンのカスタマイズはお好みで)

@charset "utf-8";

/* =========================================================
   見た目変更
   ========================================================= */
/* 非選択タブの閉じるボタンを非表示(非アクティブタブ) */
.tabbrowser-tab:not([selected]) .tab-close-button {
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  margin-width: 0 !important;
  pointer-events: none !important;
}

/* 選択中(カレント)タブの閉じるボタンのみ表示 */
.tabbrowser-tab[selected] .tab-close-button {
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  pointer-events: auto !important;
}

MultiRowTabLiteforFx.uc.js

MultiRowTabLiteforFx.uc.jsのオリジナルらしきファイルをIzheil氏のgithubからダウンロード。ダウンロードしたファイルはプロファイルフォルダ内のchromeディレクトリへコピー。

再読み込み

ここまでやった後、URL欄に「about:support」を入力し、起動時キャッシュの消去をすると、再起動がかかって反映されるはず、です。


ちなみにファイルをかき集めるのが面倒という場合はこちらで一式ダウンロードするという手もあるのですが、userChrome.cssに独自カスタマイズが大量に入っていて自分好みに修正するのが困難だったため、userChrome.cssを以下で置き換える必要がありました。

@charset "utf-8";

/* =========================================================
   アドレスバー(ナビゲーションバー)をタブバーの下に移動
   ========================================================= */

/* メインウィンドウ全体のレイアウト調整 */
#navigator-toolbox {
  display: flex !important;
  flex-direction: column !important;
}

/* 各要素の上下並び順(order)を指定 */
#titlebar {
  order: 1 !important; /* タブバーを上へ */
}

#nav-bar {
  order: 2 !important; /* アドレスバー(ナビゲーションバー)をタブバーの下へ */
}

#PersonalToolbar {
  order: 3 !important; /* ブックマークバーを一番下へ(不要な場合は削除可能) */
}

/* ポップアップやドロップダウンの位置ずれ防止 */
#urlbar-results {
  max-height: 400px !important;
}



/* =========================================================
   1段目の高さが潰れてしまうのを解消
   ========================================================= */

/* MultiRowTabLite 向け1段目の切れ・潰れ強力補正 */
#tabbrowser-tabs .tabbrowser-tab {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 34px !important;
}

#tabbrowser-tabs .tab-stack,
#tabbrowser-tabs .tab-background,
#tabbrowser-tabs .tab-content {
  min-height: 34px !important;
  height: 34px !important;
}

/* スクロールボックスの高さ制限解除 */
#tabbrowser-arrowscrollbox {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* =========================================================
   見た目変更
   ========================================================= */
/* 非選択タブの閉じるボタンを非表示(非アクティブタブ) */
.tabbrowser-tab:not([selected]) .tab-close-button {
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  margin-width: 0 !important;
  pointer-events: none !important;
}

/* 選択中(カレント)タブの閉じるボタンのみ表示 */
.tabbrowser-tab[selected] .tab-close-button {
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  pointer-events: auto !important;
}

という訳で今後は他の方が作ったパッケージセットに頼らず、自前でちまちまインストールしていく予定ですが、PCを乗り換える度にダウンロードするのが面倒くさいので、自分用にZIPファイルも用意しました。

もしご利用になりたい方は自己責任でどうぞ。

コメント

タイトルとURLをコピーしました