Firefoxの読み込み時にタブに表示されるドットのアニメーションを非表示にする方法

Firefoxが新たなバージョン57となり「Firefox Quantum」として公開された。機能やデザインが追加または変更されたが、新しいインターフェイスに慣れないユーザーも少なくない。

その中でもページを移動した時、読み込み時にタブ上に丸いアイコン「・」のようなものが左右に揺れるアニメーションがある。特に気にならない場合は問題ないが、目障りだと感じたり、どうしても非表示にしたい場合はcssを編集することで非表示にすることができる。

ここでは、Firefox57でページを読み込んでいる時に表示されるドットアニメーションを非表示にする方法をかんたんに説明する。

1. userChrome.cssを編集してドットを非表示
2. 読み込み完了時の青いフラッシュも非表示
3. 参考・情報
4. 更新履歴

Firefox57の読み込み時のアニメーション

Firefox57では、ページを開く時に、タブのタイトルの左側にドット「・」が左右に移動するような読み込み時のアニメーションが再生される。

以下で紹介する方法を行えば、このアニメーションが再生されることはなくなる。

userChrome.cssを編集してドットを非表示

「userChrome.css」を開く
Firefoxブラウザをカスタマイズするために「userChrome.css」をメモ帳やエディターで開く。
userChrome.cssの場所は、Firefoxのアドレスバーに「about:support」を入力し、トラブルシューティング情報画面のプロファイルフォルダ―の右の「フォルダーを開く」ボタンをクリックし、開いたフォルダー内(.defaultフォルダー)にある「chrome」フォルダー内に「userChrome.css」がある。
もし、chromeフォルダーまたはuserChrome.cssファイルがない場合は作成する必要がある。(参考：「userChrome.css」を作成する方法)
「userChrome.css」を編集
「userChrome.css」を開いたら、以下のコードを追加して保存する。
.tab-throbber { visibility: hidden !important; }
※「.tab-throbber { display: none !important; }」でも非表示にできるが、ファビコンが設定してあるサイトにアクセスした場合に、タイトル名が左右に移動してしまう。
Firefoxを再起動して確認
userChrome.cssを編集して保存したら、一度Firefoxを終了させ、再度起動して確認する。うまくできていれば左右に移動するドット「・」が非表示になっていることがわかる。
読み込みが完了したときに青く光るアニメーションが再生されるが、もしこの青いフラッシュも非表示にしたい場合は次の項目の手順を行う。

読み込み完了時の青いフラッシュも非表示

上記の手順で読み込み時のドットアニメーションは非表示にすることができたが、読み込み完了時にタブの左から右へ青く光るアニメーションが再生されている。

実はこのアニメーションも簡単に無効にすることが出来るようだ。方法は以下の通り。

説明1
Firefoxを起動し以下の文字をコピーしてアドレスバーに貼り付けてエンターキーを押す。
about:config?filter=toolkit.cosmeticAnimations.enabled
※「動作保証対象外になります！」と表示された場合は、青い「危険性を承知のうえで使用する」をクリックして進む。
ダブルクリックして切り替える
「config-filter-toolkit-cosmeticAnimations-enabled」の項目がが表示されているはずだが、もし表示されていない場合は、検索窓に「config-filter-toolkit-cosmeticAnimations-enabled」と入力して検索する。
表示された項目をダブルクリックし、値を[true]から[false]に切り替える。
以上の手順で完了となる。読み込み完了時にタブに表示されるブルーフラッシュが無効になっていることを確認しておこう。