Firefox 153前後で修正されたサイドバーメニューを消す方法

Firefoxのバージョン153あたりのアップデートで、ブラウザのサイドバーの表示に変更があり、以前非表示にした項目が再度表示されていました。

この記事ではこの領域をuserChrome.cssを修正することで改善していきます。

※この記事は以前の記事の焼き増しです。

userChrome.cssの有効化
修正内容
注意点
〆

userChrome.cssの有効化

恐らく多くの方はすでに行っていると思いますが、簡単に紹介しておきます。

URLに”about:config“と入力してエンター
“危険性を承知の上で使用する“をック
検索欄に”toolkit.legacyUserProfileCustomizations.stylesheets“と入力
表示された”toolkit.legacyUserProfileCustomizations.stylesheets“を”true“に変更
Firefoxを再起動

プロファイルフォルダは右上のメニューから、ヘルプ->他のトラブルシューティング情報を開いて、プロファイルフォルダーのフォルダーを開くから表示するのが楽です。

修正内容

プロファイルフォルダーのchromeフォルダ内にあるuserChrome.cssに以下の文を追記してください。ディレクトリがない場合は新規作成で問題ありません。

タブスタイルは横型で実行しているので、縦型にすると追加で余計な要素を消す必要があるかもしれません。

/* デフォルトのタブバーを消す */
#TabsToolbar {
  visibility: collapse !important;
}

/* サイドバーのヘッダーを非表示にする */
#sidebar-panel-header,
#sidebar-header,
#sidebar-box sidebarheader,
#sidebar-box #sidebar-header,
#sidebar-box #sidebar-panel-header {
  display: none !important;
  visibility: collapse !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* サイドバーの境界線を消す */
#browser #sidebar,
#sidebar-box,
#sidebar-splitter,
#sidebar-box + #sidebar-splitter {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

#sidebar-splitter,
#sidebar-box + #sidebar-splitter {
  display: none !important;
  visibility: collapse !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

/* 左端のサイドバーランチャー列を消す */
#sidebar-main,
#sidebar-launcher,
#sidebar-launcher-box,
#sidebar-launcher-splitter,
#sidebar-tools-and-extensions,
#sidebar-tools-and-extensions-splitter,
#vertical-tabs,
#vertical-tabs-container,
.sidebar-launcher,
.tools-and-extensions {
  display: none !important;
  visibility: collapse !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

設定ボタンなどを残しておきたい場合は、一番下のコードは書かないでください。

上のタブバーなどの削除を含めた現在の私のuserChrome.cssは以下のようになっています。

@import url("chrome/custom_files/custom.css");

/* デフォルトのタブバーを消す */
#TabsToolbar {
    visibility: collapse !important;
}

/* サイドバーのヘッダーを消す */
#sidebar-panel-header {
  display: none !important;
}

/* サイドバーの境界線を消す */
#browser #sidebar {
  outline: none !important;
  box-shadow: none !important;
}

/* サイドバーのボタン要素を消す */
#sidebar-main {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

注意点

現状私はこの変更による不具合に遭遇していませんが、使用は自己責任でお願いします。

〆

Firefoxは少し前に縦型タブに対応したので、縦型タブに変更してから行えば”デフォルトのタブバーを消す”コードは無くても良いかもしれません。

ただ、現状その項目を表示するエリアを削除した結果たどり着けないので、そちらを使用する場合は通常の縦型タブを削除する必要があるかもしれません。