[自分用メモ][Firefox] sideberyを使用時にマウスオーバーしているときだけタブパネルを展開する方法

完全に自分用のメモです。

現在、Firefox互換？のFloorpを愛用している (https://floorp.app/ja/) のですが、垂直タブに関してこの記事を執筆時点でv11.4.1を使用しています。また、v11.5には垂直タブを周りのコードの書き直しが行われるそうで、その際に「注意：フォーカス時に垂直タブを展開する機能は互換性の観点から削除されました。」となるようです。

Floorp ブラウザー | v.11.5.0 リリースノート

このリリースはまだ展開されていません。 リリースノートには、Floorp の新機能が記載されています。Floorp プロジェクトはあなたのフィードバックを歓迎し

blog.ablaze.one

個人的にはよく使う機能なのでちょっと困る。

いうことで別のアドオンを使用することで対応しておこうかと思いました。

幾つかFirefoxで垂直タブを実現するアドオンが存在する（Tree Style Tabなど）のですが、今回はSideberyを使用することにしました。

GitHub - mbnuqw/sidebery: Firefox extension for managing tabs and bookmarks in sidebar.

Firefox extension for managing tabs and bookmarks in sidebar. - GitHub - mbnuqw/sidebery: Firefox extension for managing...

github.com

Floorp側で設定を確認しておくのは、

その後、「プロファイルディレクトリ」（メニュー > ヘルプ > トラブルシューティング情報 > プロファイルディレクトリ）にchromeフォルダを作成し、userChrome.cssを保存します

そして、以下のコードを貼り付けます。

*#sidebar-box + #sidebar-splitter {
  display: none !important;
}

#sidebar-box #sidebar-header {
  visibility: collapse;
}


#sidebar-box {
  overflow: hidden !important;
  position: relative !important;
  transition: all 300ms !important;
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  z-index: 1;
}
#sidebar-box:hover,
#sidebar-box #sidebar {
  transition: all 200ms !important;
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
  z-index: 1;
}

:root { --thin-tab-width: 32px; }
:root { --wide-tab-width: 300px; }

.PinnedDock {
    flex-wrap: nowrap !important
}
.PinnedTab { 
    overflow: hidden !important;
    min-width: var(--tabs-pinned-width) !important
}

念のためFloorpを再起動して、タブパネルの自動展開が動作しているか確認してください。

Firefoxについても確認し差異があるようでしたら、記事を追加するつもりです。