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

# 追記 (16:40)

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

# 追記 (10:48)

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

[Twitter Icon Come Back - Chrome ウェブストア](https://chrome.google.com/webstore/detail/mpiadpcclahclmabiococdaajnicfalj)

ただし、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](https://github.com/foooomio/twitter-icon-come-back)

# 追記 (02:48)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">反映がワンテンポ遅れるのが気になる</p>&mdash; ふみを (@foooomio) <a href="https://twitter.com/foooomio/status/875404142553976832">2017年6月15日</a></blockquote>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">run-at document-body が最速っぽい</p>&mdash; ふみを (@foooomio) <a href="https://twitter.com/foooomio/status/875404231812890624">2017年6月15日</a></blockquote>
※ run-atの指定についてはdocument-startが最速ですが、bodyを変更するこのスクリプトにおいて、document-bodyが最速という意味です。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">あーページ遷移した時もとに戻っちゃうなー</p>&mdash; ふみを (@foooomio) <a href="https://twitter.com/foooomio/status/875404400579104768">2017年6月15日</a></blockquote>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">やっぱりattribute変更する関数をMutationObserverでobserveすると無限ループにはまって死ぬ</p>&mdash; ふみを (@foooomio) <a href="https://twitter.com/foooomio/status/875406208131227648">2017年6月15日</a></blockquote>

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

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

```js
// ==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)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">てかreplaceって正規表現じゃなくて文字列でもいけなかったっけ</p>&mdash; ふみを (@foooomio) <a href="https://twitter.com/foooomio/status/875400370154909696">2017年6月15日</a></blockquote>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">むしろ文字列でやった方が良いね＜replace</p>&mdash; ArcCosine (@ArcCosine) <a href="https://twitter.com/ArcCosine/status/875400443681054720">2017年6月15日</a></blockquote>

```js
// ==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)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">なるほど、bodyについているedge-desginクラス外せばすごいスッキリするね。</p>&mdash; ArcCosine (@ArcCosine) <a href="https://twitter.com/ArcCosine/status/875393784145563649">2017年6月15日</a></blockquote>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">document.body.className = document.body.className.replace(/edge-design/);</p>&mdash; ArcCosine (@ArcCosine) <a href="https://twitter.com/ArcCosine/status/875394000164855808">2017年6月15日</a></blockquote>

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

```js
// ==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/);
})();
```

# 本文

取り急ぎ。

```css
.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とかの拡張機能を使うと良いです。漏れがあったら編集リクエストください。