[Firefox 57+] Roomy Bookmarks Toolbar が動かなくなったんですけど!


Firefox Quantum がリリースされましたね!

今まで数々の反対にあい先延ばしにされてきた、WebExtensionsでない旧形式アドオンのサポート終了が、ついに強行されました。
皆様におかれましては、数々のアドオンが無効化されChromeへの移行を考え始めていることと思います。

Roomy Bookmarks Toolbar

ぼくが特に困ったのはこのアドオンでした。
機能としてはブックマークツールバーのラベルが非表示にできたり、ブックマークを2段にできたりするだけのシンプルなものでしたが、いざなくなってみるととても不便でした。


普段は小さくしておいて


マウスオーバーでラベルを表示、とかもできたりします。

そして、どうやらWebExtensionsには対応しない様子。

userChrome.css で対処しよう

Firefoxでは、userChrome.css なるファイルを編集することで外観を好みにカスタマイズできるとのこと。
ということで、これを編集することでお茶を濁すことにしたのでした。
ファイルの配置場所はおなじみProfile下です。
C:\Users\%USERNAME%\AppData\Roaming\Mozilla\Firefox\Profiles\{ランダム文字列ファイル}
分からんという方は、Firefoxのメニューから [ヘルプ]>[トラブルシューティング情報]をクリックし、[アプリケーション基本情報]にある[プロファイルフォルダー]の[フォルダを開く]をクリックしましょう。

プロファイルフォルダを開いたら、chromeフォルダに移動し、userChrome.css ファイルを以下の内容で作成して、Firefoxを再起動します。

/* https://www.reddit.com/r/firefox/comments/72qkvt/any_replacement_for_roomy_bookmarks_toolbar_i/ */

/* --- Made by Trustadz --- */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once in userChrome.css */

.bookmark-item{
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* --- アイコン間の距離を大きくしたい場合は数値を変更する --- */
    padding-right: 0 !important;
    padding-left: 0 !important;
}

toolbarbutton.bookmark-item .toolbarbutton-text{
    display: none !important;
}

/* --- [1] hoverでラベルを表示しない場合は [/1] までの行を消す --- */
toolbarbutton.bookmark-item:hover:not(.subviewbutton):not([disabled="true"]):not([open]) .toolbarbutton-text{
    display: -moz-box !important;
}
/* --- [/1] --- */

/* --- [2] フォルダ名をブックマークツールバーに表示しない場合は [/2] までの行を消す --- */
toolbarbutton.bookmark-item[type="menu"]{
    margin-right: .5em !important
}
toolbarbutton.bookmark-item[type="menu"] .toolbarbutton-text{
    display: -moz-box !important;
    margin-right: .5em !important;
}
/* --- [/2] --- */

/* --- [3] ブックマークツールバーの半透明を無効にするには [/3] までの行を消す --- */
#PlacesToolbarItems{
    /* --- ブックマークの透明度 --- */
    opacity: 0.3;

    /* --- 好みに合わせて値を変更する --- */
    transition-delay: 3s; /* 透明へ戻るまでの時間 */
    transition-duration: .5s; /* エフェクトにかかる時間 */
}

#PlacesToolbarItems:hover{ /* ここは変えないこと */
    transition-delay: 0s;
    opacity: 1;
}
/* --- [/3] --- */

2段組みとかはまだですが、とりあえず急はしのげました。

情報元