🖋️2019-11-21 🔄2020-03-23
by shibanyan_1

ChromeからFirefoxに移行したので設定まとめ

Firefox

諸事情によりChromeから別のブラウザへの移行を強いられたため、Firefoxの機能や見た目をカスタマイズして使うことにし、その手順を忘れないように書き留めておきます。

日時 内容
2020/03/17
  • ハードウェアデコードが無効化されるの問題への対処
  • userContent.css
  • Windows Defender Application Guard
  • 2020/03/18
  • 存在しないデバイスの削除手順について
  • 2020/03/23
  • ハードウェアデコード問題の対処法を修正
  • 移行の経緯 #

    • YouTubeのフルスクリーン切り替え時、かなりの確率でブラウザごとフリーズするため。
    • YouTubeの、特に高解像度の動画を再生する際のパフォーマンスが、Microsoft EdgeやFirefoxに大きく劣るため。
    • 以前からiOS版のChromeのタブ同期のみが停止し、出来る範囲のリセットでは改善しなかったため。
    • 最新のNVIDIA Studio Driver 441.28を適用すると、ANGLE・OpenGL共に画面が真っ暗になり、表示内容を想像しながらの操作を強いられたため。

    Google Chromeには長らくお世話になってきました。
    今までありがとう。

    about:config #

    新しいタブを右端ではなく現在のタブの右隣に出す #

    新規タブはCtrlを押下しながらタブ左端の+をクリックすると右隣に開けるようです。

    cf. https://rockridge.hatenablog.com/entry/2017/02/12/175624

    別のタブでリンクを開いたり、タブを複製した場合に、右隣に開いてほしい場合は、下記の設定を適用します。
    about:config -> 設定名を検索 で下記を入力し、有効化します。

    browser.tabs.insertRelatedAfterCurrent: true
    

    cf. https://it-purasu.info/firefox/ff_tab_migihaji_mayoko.html

    ハードウェアデコードされない #

    YouTubeでVP9な映像を観ていると、CPU使用率ばかり張り付いてしまう問題。
    FirefoxはNVDecを利用したハードウェアデコードに対応しているはずで、本来ならばタスクマネジャのGPU -> Video Decodeが振れなければならない。

    🙅‍♂️ 🙆‍♂️
    about:support about:support

    https://www.youtube.com/watch?v=0ZFkOvImcXI

    どうやらビデオカードのドライバやFirefoxのアップデート、再起動でさえ毎度毎度無効化されてしまう模様。

    以下の設定を行った後はFirefoxを再起動します(Ctrl - Shift - q)。

    about:support -> クラッシュガードが無効化した機能 -> WMF VPX 動画デコーダー 次回起動時にリセット が表示されていることを確認し、押下します。

    about:support

    about:config -> 設定名を検索 で下記を入力し、有効化します。

    media.hardware-video-decoding.force-enabled: true  (NVDecを使ってくれるとは限らない)
    media.wmf.vp9.enabled: false (試したが無関係だと思う)
    

    cf. https://ch.nicovideo.jp/lunaorbit/blomaga/ar1303148
    cf. https://bugzilla.mozilla.org/show_bug.cgi?id=1521370

    私の環境では上記設定を行っても繰り返し無効化されるか、NVDecを使わないハードウェア支援が行われるだけだった。
    結局about:support -> Firefox の性能改善 Firefoxをリフレッシュ で解決した。

    about:support
    • 一部設定がリセットされるのでバックアップ推奨。ブックマークやタブは復元され、現在のプロファイルフォルダーもデスクトップのOld Firefox Dataフォルダの中に移動された。
    • ビデオカードドライバのアップデートが原因として濃厚。構成を変えてどうにもならない不具合が出たら、プロファイルリセットが良いかも。

    Windowsでのフォントレンダリングをどうにかする #

    https://qiita.com/sambatriste/items/70a8b5ece0356ef82ff5

    userChrome.cssを有効にする #

    about:config -> 検索 で下記を入力し、有効化します。

    toolkit.legacyUserProfileCustomizations.stylesheets: true
    

    cf. https://backy0175.at.webry.info/201906/article_4.html

    userChrome.css #

    FirefoxのデザインをCSSでカスタマイズするファイルです。
    デフォルトでは無効になっているため、#userChrome.cssを有効にするで有効にしてください。

    about:profiles -> 使用中のプロファイル -> ルートディレクトリー -> フォルダーを開く

    %APPDATA%\Mozilla\Firefox\Profiles\プロファイル名
    

    chromeフォルダを作成。
    その中にuserChrome.cssファイルをUTF-8で作成。

    %APPDATA%\Mozilla\Firefox\Profiles\プロファイル名\chrome\userChrome.css
    

    書き換えたCSSは、Firefox再起動後に反映されます。

    ブラウザーツールボックス #

    ブラウザーツールボックスを使用して、Firefox本体のタブやバーのDOMを解析できます。
    それを見ながら、CSSのカスタマイズを行います。

    cf. https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox

    タブを閉じるボタンを非表示 #

    /* タブを閉じるボタンを消す */
    .tabbrowser-tab .tab-close-button {
        display: none !important;
    }
    

    cf. https://debuyoko.com/959

    アクティブなタブの幅を大きくする #

    /* アクティブなタブの幅を大きくする */
    .tabbrowser-tab[visuallyselected="true"]:not([pinned]) {
        min-width: 225px !important;
    }
    .tabbrowser-tab:not([visuallyselected="true"]):not([pinned]):hover {
        min-width: 225px !important;
    }
    

    cf. https://yujisoftware.hatenablog.com/entry/20180215/1518710937

    非アクティブなタブの幅を小さくする #

    /* 非アクティブなタブの幅を小さくする */
    #tabbrowser-tabs {
        --tab-min-width: 64px !important;
    }
    

    ブックマークツールバーの余白を調整 #

    /* ブックマークバーの高さを調節 */
    #PersonalToolbar {
        padding: 1px 6px 4px !important;
    }
    

    userContent.css #

    userChrome.cssがページの外側のデザインに適用されるのに対し、userContent.cssはページ内の要素に適用される。

    下記はその一例。

    /* YouTube */
    
    #invideo-overlay\:y,
    #invideo-overlay\:14,
    .ytp-ad-overlay-container,
    #YtKevlarVisibilityIdentifier,
    #player-ads {
        display: none!important;
    }
    
    /* Discord */
    
    .scrollerWrapPolyfill-DBQCMm .scroller-2FKFPG.systemPad-3UxEGl {
        padding-right: 2px!important;
    }
    .wrapper-1ucjTd {
        height: 28px!important;
    }
    .content-3at_AU {
        height: 22px!important;
        padding: 0 4px!important;
    }
    .name-3_Dsmg {
        font-size: 14px!important;
        line-height: 20px!important;
    }
    
    .timestamp-3ZCmNB span::after {
        content: attr(aria-label)!important;
        margin-left: 8px!important;
    }
    
    .theme-dark {
        --background-tertiary: #292b2f!important;
    }
    
    /* fast.com */
    
    .test-info-group {
        display: none!important;
    }
    

    存在しないデバイスを一覧から削除 #

    Firefox

    同期タブや共有で一々存在しないデバイスが表示されたり、どれが本物か分からない"iPhone"が大量に存在したりと。
    https://accounts.firefox.com/settings/clients で不要なデバイスの接続を解除すると消せるようだ。

    cf. https://superuser.com/questions/267413/how-can-i-remove-a-non-existent-lost-device-from-firefox-sync

    Windows Defender Application Guard #

    導入するまで知らなかったが、どうやらMicrosoft Edgeで開く拡張機能なので、使い勝手が微妙でやめた。
    一応メモ。

    1. Windowsの機能の有効化または無効化 で Windows Defender Application Guard を有効にする
    2. Microsoft Store で Windows Defender Application Guard Companion をインストール

      https://www.microsoft.com/ja-jp/p/windows-defender-application-guard-companion/9n8gnlc8z9c8

    3. Firefox の拡張機能 Application Guard Extension をインストール

      https://addons.mozilla.org/ja/firefox/addon/application-guard-extension