Firefoxでタブをメニューバー下に表示させる

2020.12.28

Firefoxのリフレッシュでタブ位置が変わった

つい先日、Firefoxから「リフレッシュしろ！」と言われ、［Firefoxをリフレッシュ］をポチッとしたらタブがメニューバーの上に表示されるようになってしまった。これが2度目なので驚きも慌てたりもしないのだが、普段メニューバーの下にタブを表示する設定にしていることは意識してないので、いざ再設定となると何を弄るんだっけ？状態。ネットを検索して調べるしかないのだ。

かつてはタブがメニューバーの下に表示されるのが標準だったFirefox。どのバージョンからかは定かではないが、この表示位置が逆転して使い難いことになる。
そのときはプロファイルフォルダーにChromeフォルダーを追加し、設定を記述したuserChrome.cssを置くことで解決した。

＊記述内容は以下の通りです。

#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; }

それもFirefoxのバージョンが上がると、userChrome.cssを適応しない設定がデフォルトになり、「about:config」で設定変更しなければならなくなる。手順自体は簡単ですが、記憶に留めることが困難なので記録に留めました。
1度これをやっておけばその後のアップデートでは引き継がれるが、冒頭のようにリフレッシュすると設定はデフォルトに戻ってしまう。

Firefoxのリフレッシュとは

長く使っているとFirefoxから「リフレッシュしろ！」と言われる（私は2度経験）。今後も可能性がある。
リフレッシュは自分でも意図して行えるので、Firefoxの動作が重くなったなどの問題が起きたら、試してみても良い。
詳細はこちら。

タブをメニューバーの下に移動する（userChrome.cssの有効化）

１．アドレスバーに「about:config」と入力（コピー＆ペースト可）し、右の［→］をクリック or ［return］
　　キー 押下

２．「注意して進んでください！」で［危険を承知の上で使用する］をクリック

３．検索窓表示

４．検索窓に「toolkit.legacyUserProfileCustomizations.stylesheets」と入力（コピー＆ペースト可）
　　検索窓下に「toolkit.legacyUserProfileCustomizations.stylesheets」の設定状況が表示される
　　「false」になっているはず

５．［⇌］をクリック
　　設定値がfalseからtrueに変わる

６．Firefoxを再起動
　　userChrome.cssが有効になり、期待通りにタブがメニューバー下に表示されるようになった

注意事項

「about:config」ではさまざまな設定を変更できてしまいます。
上記手順では「toolkit.legacyUserProfileCustomizations.stylesheets」の設定だけですが、「タブをメニューバーの下に移動する」の3.で［すべて表示］をクリックすると、すべての設定を編集できるようになります。
上記手順以外のことはしないでください。最悪Firefoxが起動できなくなり、新規インストールからやり直すことになりかねません。

⚠︎ 当サイトでは上記手順以外の設定変更に対して責任を負いません。

Firefox 113でまたまたタブ位置が変わった

気付けばいつの間にかタブの位置が最上段に戻っていた。5月9日にリリースされたFirefox 113が原因と考え、ネットを探ってみるとありました。
こちらの記事の「v113でタブバーとメニューバーの位置が壊れた」（記事の最後尾）に解決策がありました。
userChrome.cssを書き換えれば良さそうですが、なぜそうなのかを知りたくて参考記事のリンクをたどってみた。
大筋で「古いxulボックスが最新のフレックスボックスに置き換えられ、-moz-box-ordinal-groupプロパティが機能しなくなる」ということのようです。つまり、これまでのuserChrome.cssの記述が無効になってしまったってことです。
そこでuserChrome.cssの記述の”-moz-box-ordinal-group” を “order”に書き換えました。

#titlebar { order: 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; }

無事タブがメニューバーの下に表示されました😊。

Firefox 133でまたまたまたタブ位置が変わった😡

参考記事のリンクをたどってみたが、v113の記事だけ。。。残念！！
しかし、これで諦めるわけには行きません。ダメ元で題名の「tab bar below url bar is broken」でネットをググってみると、多くの記事がヒット。その中でも上位に位置し、日付も最近の記事が目に入りました（↓）。

そのページ（↓）をたどると、いきなり大ヒントを発見！！
Old “Tabs Under Address Bar” code on userChrome no longer works. – r/FirefoxCSS

ざっくりと「MrOtherGuyの’tabs_on_bottom_v2.css’を試してみて・・・Firefoxv 133以上でタブをツールバーの下に並び替えます」でしょうか！？
‘tabs_on_bottom_v2.css’をクリックすると、コードが表示された。いままでuserChrome.cssに記述していたコードとは異り、これこそがコードと言わんばかりに長い記述が。。。内容はほぼ理解不能ながら、取り敢えずこのまま使ってみることにした。

raw fileをダウンロードし、ファイル名をuserChrome.cssに変更し、
/Users/（ユーザー名）/Library/Application Support/Firefox/Profiles/プロファイルフォルダ/Chrome内のuserChrome.cssと入れ換える。

tabs_on_bottom_v2.cssソースコード

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_v2.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* This reorders toolbar to place tabs below other toolbars. Requires Firefox 133+ */

@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  #nav-bar > .titlebar-buttonbox-container{
    order: -1 !important;
    > .titlebar-buttonbox{
      flex-direction: row-reverse;
    }
  }
}
@media not (-moz-bool-pref: "sidebar.verticalTabs"){
  .global-notificationbox,
  #tab-notification-deck,
  #TabsToolbar{
    order: 1;
  }
  #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container){
    display: none;
  }
  :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
    display: flex !important;
  }
  :root:is([tabsintitlebar],[customtitlebar]) #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
    > .titlebar-buttonbox-container{
      display: flex !important;
    }
    :root[sizemode="normal"] & {
      > .titlebar-spacer{
        display: flex !important;
      }
    }
    :root[sizemode="maximized"] & {
      > .titlebar-spacer[type="post-tabs"]{
        display: flex !important;
      }
      @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
        (-moz-gtk-csd-reversed-placement),
        (-moz-platform: macos){
        > .titlebar-spacer[type="post-tabs"]{
          display: none !important;
        }
        > .titlebar-spacer[type="pre-tabs"]{
          display: flex !important;
        }
      }
    }
  }
}

（注意）置き換えるのではなく、元のuserChrome.cssは他に移動し、念のためのバックアップにしておきま
　　　　しょう。

ちなみに、新しいuserChrome.cssのコードはかなり長いものになっていますが、ほぼほぼ理解できていません。しかし、このまま導入して以前と変わらない見た目のFirefoxに戻り、何の変更もしないで済みました。
コメントの下の方に最新バージョンのリンクがありますが、私の環境ではタブの下が切れてしまい、採用は見送りました。

感想

手順自体は簡単ですが、記憶に留めることが困難なので記録に留めておきます。
今後もこの手順が通用するかはサポート次第ですが、変わらないことを祈りたいと思います。

って、その後二度にわたり手を入れることになりました。Mozilla Foundationはなぜタブを最上段にしたがるのだろう！？Google Chromeに歩調を合わせている？しかも、変更方法を複雑にして行く。。。迷惑以外の何ものでもない。

コメント