Twitterの丸くなったアイコンを元に戻すUserScript（＆Chrome拡張機能）

追記 (16:40)

右上の自分のアイコンが丸になっていると報告を受けたので修正しました。

追記 (10:48)

Chrome拡張機能のほうが便利という声があったので、拡張機能として公開しました。インストールは以下のリンクから。

Twitter Icon Come Back - Chrome ウェブストア

ただし、Chrome拡張機能ではrun-atをdocument-bodyにできないので、document-endに変更しています。この関係で、UserScript版より若干反映が遅れます。UserScriptの導入に抵抗がない方は、以下のUserScript版をおすすめします。

リポジトリはここです。UserScript版もここに置きました。
foooomio/twitter-icon-come-back: Google Chrome extension for reverting the old-style icons for Twitter Web and Tweetdeck

追記 (02:48)

反映がワンテンポ遅れるのが気になる

— ふみを (@foooomio) 2017年6月15日

run-at document-body が最速っぽい

— ふみを (@foooomio) 2017年6月15日

※ run-atの指定についてはdocument-startが最速ですが、bodyを変更するこのスクリプトにおいて、document-bodyが最速という意味です。

あーページ遷移した時もとに戻っちゃうなー

— ふみを (@foooomio) 2017年6月15日

やっぱりattribute変更する関数をMutationObserverでobserveすると無限ループにはまって死ぬ

— ふみを (@foooomio) 2017年6月15日

これでだいぶ安定して動くはず。上記問題は解決済み。しれっとタイトル変えました。ライセンス明記してなかったので書きました。MIT Licenseでお願いします。

(追記) 最新版は随時ここにアップしてます。
twitter-icon-come-back/userscript.js at master · foooomio/twitter-icon-come-back

// ==UserScript==
// @name         Twitter Icon Come Back
// @namespace    https://foooomio.net
// @match        https://twitter.com/*
// @author       foooomio
// @run-at       document-body
// @grant        none
// @license      MIT License
// ==/UserScript==

(function() {
    document.body.className = document.body.className.replace('edge-design');
    new MutationObserver(function(mutations) {
        if (!mutations.some(function(mutation) {
            return mutation.oldValue.indexOf('edge-design') !== -1;
        })) return;
        document.body.className = document.body.className.replace('edge-design');
    }).observe(
        document.body,
        { attributes: true, attributeOldValue: true, attributeFilter: ['class'] }
    );
})();

無限ループしたらごめんなさい(>_<)
ちなみにアロー関数使ってないのは、TampermonkeyのLinterが認識してくれなくてな・・・

追記 (02:13)

てかreplaceって正規表現じゃなくて文字列でもいけなかったっけ

— ふみを (@foooomio) 2017年6月15日

むしろ文字列でやった方が良いね＜replace

— ArcCosine (@ArcCosine) 2017年6月15日

// ==UserScript==
// @name         Twitter Icon Come Back
// @namespace    https://twitter.com
// @match        https://twitter.com/*
// @grant        none
// ==/UserScript==

(function() {
    document.body.className = document.body.className.replace('edge-design');
})();

追記 (02:07)

なるほど、bodyについているedge-desginクラス外せばすごいスッキリするね。

— ArcCosine (@ArcCosine) 2017年6月15日

document.body.className = document.body.className.replace(/edge-design/);

— ArcCosine (@ArcCosine) 2017年6月15日

これが一番早くて確実。GreaseMonkeyやTamperMonkeyに以下のjsを打ち込みましょう。（@ArcCosine@githubさん、ありがとうございます！！）

// ==UserScript==
// @name         Twitter Icon Come Back
// @namespace    https://twitter.com
// @match        https://twitter.com/*
// @grant        none
// ==/UserScript==

(function() {
    document.body.className = document.body.className.replace(/edge-design/);
})();

本文

取り急ぎ。

.edge-design .Avatar,
.edge-design .DashboardProfileCard-avatarImage,
.edge-design .DashboardProfileCard-avatarLink,
.edge-design .Gallery.is-tweetless .Gallery-content,
.edge-design .Gallery.is-tweetless .Gallery-media,
.edge-design .MomentCapsuleCover .MomentUserByline-avatar,
.edge-design .MomentCapsuleItemTweet--withText .MomentUserByline-avatar,
.edge-design .MomentCapsuleSummary .MomentUserByline-avatar,
.edge-design .MomentMakerRecommendedTweetsSearch--users .MomentMakerRecommendedTweetsSearch-userContainer .avatar,
.edge-design .ProfileAvatar,
.edge-design .ProfileAvatar-image,
.edge-design .ProfileAvatar-placeholderImage,
.edge-design .ProfileAvatarEditing,
.edge-design .ProfileAvatarEditing-button,
.edge-design .ProfileAvatarEditing-overlay,
.edge-design .ProfileCard-avatarImage,
.edge-design .ProfileCard-avatarLink,
.edge-design .ProfileCardMini-avatarImage,
.edge-design .ProfileListItem-avatar,
.edge-design .ProfileUserList .Avatar {
    border-radius: 7px;
}

.edge-design .avatar {
    border-radius: 7px;
}

StylishとかStylebotとかの拡張機能を使うと良いです。漏れがあったら編集リクエストください。