// ==UserScript==
// @name                Twitter - Add notes to the user
// @name:zh-CN          Twitter - 为用户添加备注
// @name:zh-TW          Twitter - 為使用者新增備註
// @namespace           https://greasyfork.org/zh-CN/users/193133-pana
// @homepage            https://www.sailboatweb.com
// @version             1.1.7
// @description         Add a note for users to help identify and search; the search button pops up in the lower right corner
// @description:zh-CN   为用户添加备注功能，以帮助识别和搜索; 鼠标移至网页右下角弹出搜索按钮
// @description:zh-TW   為使用者新增備註功能，以幫助識別和搜尋; 滑鼠移至網頁右下角彈出搜尋按鈕
// @author              pana
// @license             GNU General Public License v3.0 or later
// @include             http*://*twitter.com/*
// @require             https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
// @grant               GM_getValue
// @grant               GM_setValue
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    const LANG = {
        'EN': {
            'title': 'Note',
            'add_button_text': 'Add note',
            'add_button_title': 'Add notes to the user',
            'modify_button_text': 'Modify note',
            'modify_button_title': 'Modify notes for the user',
            'input_placeholder': '(Enter a note, delete it when blanked; press Enter to save)',
            'save_button_text': 'Save',
            'clear_button_text': 'Clear',
            'cancel_button_text': 'Cancel',
            'search_placeholder': 'Search notes',
            'user_id': 'User ID: ',
            'user_name': 'User Name: '
        },
        'ZH_CN': {
            'title': '备注',
            'add_button_text': '添加备注',
            'add_button_title': '为用户添加备注',
            'modify_button_text': '修改备注',
            'modify_button_title': '为用户修改备注',
            'input_placeholder': '(请输入备注，置空时删除；按下Enter键保存)',
            'save_button_text': '保存',
            'clear_button_text': '清除',
            'cancel_button_text': '取消',
            'search_placeholder': '搜索备注',
            'user_id': '用户 ID: ',
            'user_name': '用户名: '
        },
        'ZH_TW': {
            'title': '備註',
            'add_button_text': '新增備註',
            'add_button_title': '為使用者新增備註',
            'modify_button_text': '修改備註',
            'modify_button_title': '為使用者修改備註',
            'input_placeholder': '(請輸入備註，置空時刪除；按下Enter鍵儲存)',
            'save_button_text': '儲存',
            'clear_button_text': '清除',
            'cancel_button_text': '取消',
            'search_placeholder': '搜尋備註',
            'user_id': '使用者 ID: ',
            'user_name': '使用者名稱: '
        }
    };
    const ICON = {
        'NOTE_GRAY': 'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2IoMTAxLCAxMTksIDEzNCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYigxMDEsIDExOSwgMTM0KSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+)',
        'NOTE_BLUE': 'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+)',
        'SEARCH': 'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9InNlYXJjaEljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ic2VhcmNoSWNvblRpdGxlIj5TZWFyY2g8L3RpdGxlPiA8cGF0aCBkPSJNMTQuNDEyMTEyMiwxNC40MTIxMTIyIEwyMCwyMCIvPiA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI2Ii8+IDwvc3ZnPg==)'
    };
    const STYLE_VALUE = `
        .my_twitter_note_btn {
            background-image: ${ICON.NOTE_GRAY};
            background-repeat: no-repeat;
            background-position: center;
            background-color: rgba(0, 0, 0, 0);
            border-bottom-left-radius: 9999px;
            border-bottom-right-radius: 9999px;
            border-top-left-radius: 9999px;
            border-top-right-radius: 9999px;
            transition-property: background-color, box-shadow;
            transition-duration: 0.2s;
        }
        .my_twitter_note_btn:hover {
            background-image: ${ICON.NOTE_BLUE};
            background-color: rgba(29, 161, 242, 0.1);
        }
        .base_tool_bar_btn {
            height: 32px;
            width: 32px;
            margin: -8px -45px -8px 70px;
            background-size: 18px auto;
        }
        .comment_tool_bar_btn {
            height: 42px;
            width: 42px;
            margin: 2px 0px 0px -15px;
            background-size: 22px auto;
            cursor: pointer;
        }
        .my_before_follow_note_btn {
            height: 39px;
            width: 39px;
            background-image: ${ICON.NOTE_BLUE};
            background-repeat: no-repeat;
            background-size: 19px auto;
            background-position: center;
            margin-bottom: 10px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid rgba(29,161,242,1.00);
            border-bottom-left-radius: 9999px;
            border-bottom-right-radius: 9999px;
            border-top-left-radius: 9999px;
            border-top-right-radius: 9999px;
            background-color: rgba(0, 0, 0, 0);
            transition-property: background-color, box-shadow;
            transition-duration: 0.2s;
        }
        .my_before_follow_note_btn:hover {
            background-color: rgba(29, 161, 242, 0.1);
        }
        .list_show, .show_separator {
            display: block !important;
        }
        #presentation_div_for_user {
            display: flex;
            position: fixed;
            background-color: rgba(0, 0, 0, .5);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 101;
            align-items: center;
            justify-content: center;
        }
        .dialog_div_for_user {
            position: relative;
            width: 400px;
            background-color: rgb(21, 32, 43);
            border: 0 solid #000;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
        }
        .user_title_span_for_user {
            min-height: 48px;
            text-align: center;
            border: 1px solid rgba(0, 0, 0, .5);
            color: #1da1f2;
            font-weight: bold;
            background-color: rgba(0, 0, 0, 0);
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            white-space: pre-wrap;
            cursor: text;
            user-select: text;
            line-height: 24px;
        }
        .tag_input_for_user {
            min-height: 32px;
            margin: 5px;
            border: 1px solid rgba(29, 161, 242, 0.1);
            padding-left: 5px;
            background-color: #253341;
            color: #fff;
        }
        .button_for_user {
            min-height: 48px;
            cursor: pointer;
            border: 1px solid rgba(0, 0, 0, .5);
            background-color: rgba(0, 0, 0, 0);
            color: #fff;
        }
        .button_for_user:hover {
            color: #1da1f2;
        }
        .cancel_button_for_user {
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        #searchFrame {
            position: relative;
        }
        #myInputSearch {
            width: 350px;
            height: 40px;
            border: 2px solid #000;
            border-radius: 40px;
            padding: 0 20px;
            position: relative;
            background-color: rgb(37, 51, 65);
            color: #fff;
            outline: none;
        }
        #tagsList {
            width: 350px;
            height: 250px;
            overflow-y: scroll;
            text-align: left;
            display: none;
            position: absolute;
            margin: 0 20px;
            z-index: 100;
            background-color: rgb(37, 51, 65);
            border: 1px solid rgba(29, 161, 242, 0.1);
        }
        .ins_list_item {
            cursor: pointer;
            color: #fff;
            padding-left: 5px;
            height: 25px;
            line-height: 25px;
        }
        .ins_highlight {
            background-color: #6699cc;
        }
        .ins_hide {
            display: none;
        }
        .ins_tag_span {
            color: #336699;
        }
        .my_note_btn_hide {
            display: none;
        }
        ol.script-list li:hover .my_twitter_note_btn {
            display: inline !important;
        }
        .expand_box {
            bottom: 0px;
            height: 50px;
            position: fixed;
            right: -50px;
            transition: 0.5s;
            width: 100px;
            z-index: 99;
        }
        .show_expand_box {
            right: 0;
            width: 50px;
        }
        #expandSpan {
            border-radius: 99px;
            border: 1px solid #00A1D6;
            bottom: 1vh;
            color: #FFF;
            cursor: pointer;
            display: block;
            font-size: 13px;
            height: 38px;
            line-height: 38px;
            position: absolute;
            right: 1vw;
            text-align: center;
            width: 38px;
            z-index: 98;
            background-image: ${ICON.SEARCH};
            background-repeat: no-repeat;
            background-size: 24px auto;
            background-position: center;
        }
        #my_search_bottom_layer_div {
            display: flex;
            position: fixed;
            background-color: rgba(0, 0, 0, .5);
            top: -50vh;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            align-items: center;
            justify-content: center;
        }
    `;
    var selector = {
        'body': 'body',
        'root': '#react-root div .r-13awgt0.r-12vffkv',
        'homepage': {
            'article': 'article',
            'tool_bar': '.css-1dbjc4n.r-18u37iz.r-1wtj0ep.r-156q2ks.r-1mdbhws',
            'show_name': '.css-901oao.css-bfa6kz.r-1qd0xha.r-a023e6.r-vw2c0b.r-ad9z0x.r-bcqeeo.r-3s2u2q.r-qvutc0 > span',
            'id': '.css-901oao.css-bfa6kz.r-18u37iz.r-1qd0xha.r-a023e6.r-16dba41.r-ad9z0x.r-bcqeeo.r-qvutc0 > span',
            'reprint_a': '.css-1dbjc4n.r-1iusvr4.r-16y2uox.r-5f2r5o.r-m611by a',
            'reprint_name': '.css-1dbjc4n.r-1iusvr4.r-16y2uox.r-5f2r5o.r-m611by a > span > span',
            'at': 'a.css-4rbku5.css-18t94o4.css-901oao.css-16my406.r-1loqt21.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0',
            'user_frame': '.css-18t94o4.css-1dbjc4n.r-1ny4l3l.r-1j3t67a.r-1w50u8q.r-o7ynqc.r-6416eg',
            'blockquote': 'div[role="blockquote"]'
        },
        'userpage': {
            'main_user_id': '.css-1dbjc4n.r-15d164r.r-1g94qm0 .css-1dbjc4n.r-18u37iz.r-1wbh5a2 > div > span',
            'main': '.css-1dbjc4n.r-ku1wi2.r-1j3t67a.r-m611by',
            'id': '.css-1dbjc4n.r-18u37iz.r-1wbh5a2 > div > span',
            'follow': '.css-1dbjc4n.r-obd0qt.r-18u37iz.r-1w6e6rj.r-1h0z5md.r-dnmrzs',
            'show_name': '.css-901oao.r-1qd0xha.r-1b6yd1w.r-1vr29t4.r-ad9z0x.r-bcqeeo.r-qvutc0 > span'
        },
        'comment': {
            'tool_bar': '.css-1dbjc4n.r-1oszu61.r-1efd50x.r-5kkj8d.r-18u37iz.r-ahm1il.r-a2tzq0'
        }
    };
    var modify_style = selector.homepage.show_name + ' { white-space: normal; }\n';
    class Twitter_Note {
        constructor(config, lang, show_list = []) {
            this.config = config;
            this.lang = lang;
            this.showList = show_list;
        }
        createNoteBtn(user_id, user_name, callback, class_name = "my_twitter_note_btn") {
            let btn = document.createElement('div');
            btn.className = class_name;
            if (this.judgeUsers(user_id)) {
                btn.title = this.lang.modify_button_title;
            } else {
                btn.title = this.lang.add_button_title;
            }
            btn.addEventListener('click', (event) => {
                event.stopPropagation();
                document.body.appendChild(this.createNoteFrame(user_id, user_name, () => {    
                    if (this.judgeUsers(user_id)) {
                        btn.title = this.lang.modify_button_title;
                    } else {
                        btn.title = this.lang.add_button_title;
                    }
                    if (typeof(callback) == 'function') {
                        callback();
                    }
                }));
            });
            return btn;
        }
        doneHandle(user_id, ele, path_name, w = false) {
            if (w) {
                if (path_name) {
                    if (ele.querySelector(path_name)) {
                        let source_dom = ele.querySelector(path_name);
                        if (this.judgeUsers(user_id)) {
                            source_dom.textContent = this.getUserAtTag(user_id);
                        } else {
                            source_dom.textContent = user_id;
                        }
                    }
                } else {
                    if (this.judgeUsers(user_id)) {
                        ele.textContent = this.getUserAtTag(user_id);
                    } else {
                        ele.textContent = user_id;
                    }
                }
            } else {
                if (path_name) {
                    if (ele.querySelector(path_name + ' .ins_tag_span')) {
                        let tag_dom = ele.querySelector(path_name + ' .ins_tag_span');
                        if (this.judgeUsers(user_id)) {
                            tag_dom.textContent = this.getUserFormatTag(user_id);
                        } else {
                            ele.querySelector(path_name).removeChild(tag_dom);
                        }
                    } else {
                        if (this.judgeUsers(user_id)) {
                            ele.querySelector(path_name).appendChild(this.createNoteSpan(user_id));
                        }
                    }
                } else {
                    if (ele.querySelector('.ins_tag_span')) {
                        let an_tag_dom = ele.querySelector('.ins_tag_span');
                        if (this.judgeUsers(user_id)) {
                            an_tag_dom.textContent = this.getUserFormatTag(user_id);
                        } else {
                            ele.removeChild(an_tag_dom);
                        }
                    } else {
                        if (this.judgeUsers(user_id)) {
                            ele.appendChild(this.createNoteSpan(user_id));
                        }
                    }
                }
            }
        }
        isUsersFromLink(link) {
            return /^\/[^/]+$/i.test(link.replace(location.origin, ""));
        }
        getUserIdFromLink(link) {
            return link.replace(location.origin + '/', '@');
        }
        judgeUsers(user_id) {
            if (this.getUserIndex(user_id) == -1) {
                return false;
            }
            return true;
        }
        getUserIndex(user_id) {
            for (let i in this.config.users_array) {
                if (user_id == this.config.users_array[i].id) {
                    return i;
                }
            }
            return -1;
        }
        getUserTag(user_id) {
            if (this.judgeUsers(user_id)) {
                return this.config.users_array[this.getUserIndex(user_id)].tag;
            }
            return '';
        }
        getUserFormatTag(user_id) {
            if (this.judgeUsers(user_id)) {
                return '[' + this.getUserTag(user_id) + ']';
            }
            return '';
        }
        getUserAtTag(user_id) {
            if (this.judgeUsers(user_id)) {
                return '@' + this.getUserTag(user_id);
            }
            return '';
        }
        writeUsers(user_id, tag_value) {
            if (this.judgeUsers(user_id)) {
                let index = this.getUserIndex(user_id);
                if (tag_value) {
                    this.config.users_array[index].tag = tag_value;
                } else {
                    this.config.users_array.splice(index, 1);
                }
            } else {
                if (tag_value) {
                    let temp_scripts_obj = {
                        'id': user_id,
                        'tag': tag_value
                    };
                    this.config.users_array.push(temp_scripts_obj);
                }
            }
            GM_setValue('twitter_config', this.config);
        }
        removeNoteFrame(frame_id = 'presentation_div_for_user') {
            let temp_ele = document.getElementById(frame_id);
            if (temp_ele) {
                temp_ele.parentNode.removeChild(temp_ele);
            }
        }
        createNoteFrame(user_id, user_name, callback) {
            let that = this;
            let presentation_div = document.createElement('div');
            presentation_div.id = 'presentation_div_for_user';
            presentation_div.addEventListener('click', function (event) {
                if (event.target === this) {
                    that.removeNoteFrame();
                }
            });
            let dialog_div = document.createElement('div');
            dialog_div.className = 'dialog_div_for_user';
            let user_title_p = document.createElement('button');
            user_title_p.className = 'user_title_span_for_user';
            user_title_p.textContent = this.lang.user_id + user_id + '\n' + this.lang.user_name + user_name;
            let tag_input = document.createElement('input');
            tag_input.className = 'tag_input_for_user';
            tag_input.type = 'text';
            tag_input.placeholder = this.lang.input_placeholder;
            if (this.judgeUsers(user_id)) {
                tag_input.value = this.config.users_array[this.getUserIndex(user_id)].tag;
            } else {
                tag_input.value = '';
            }
            tag_input.addEventListener('keyup', (e) => {
                if (e.keyCode === 13) {
                    this.writeUsers(user_id, tag_input.value);
                    this.resetSearchFrame();
                    if (typeof(callback) == 'function') {
                        callback();
                    }
                    this.removeNoteFrame();
                }
            });
            setTimeout(function() {
                try {
                    tag_input.focus();
                    tag_input.select();
                } catch(e) {
                    console.error(e);
                }
            }, 200);
            let save_button = document.createElement('button');
            save_button.className = 'button_for_user';
            save_button.type = 'button';
            save_button.innerText = this.lang.save_button_text;
            save_button.addEventListener('click', () => {
                this.writeUsers(user_id, tag_input.value);
                this.resetSearchFrame();
                if (typeof(callback) == 'function') {
                    callback();
                }
                this.removeNoteFrame();
            });
            let clear_button = document.createElement('button');
            clear_button.className = 'button_for_user';
            clear_button.type = 'button';
            clear_button.innerText = this.lang.clear_button_text;
            clear_button.addEventListener('click', () => {
                this.writeUsers(user_id, '');
                this.resetSearchFrame();
                if (typeof(callback) == 'function') {
                    callback();
                }
                this.removeNoteFrame();
            });
            let cancel_button = document.createElement('button');
            cancel_button.className = 'button_for_user cancel_button_for_user';
            cancel_button.type = 'button';
            cancel_button.innerText = this.lang.cancel_button_text;
            cancel_button.addEventListener('click', () => {
                this.removeNoteFrame();
            });
            dialog_div.appendChild(user_title_p);
            dialog_div.appendChild(tag_input);
            dialog_div.appendChild(save_button);
            dialog_div.appendChild(clear_button);
            dialog_div.appendChild(cancel_button);
            presentation_div.appendChild(dialog_div);
            return presentation_div;
        }
        resetSearchFrame() {
            let tags_list = document.getElementById('tagsList');
            if (tags_list) {
                tags_list.innerHTML = "";
                this.config.users_array.forEach((item, index) => {
                    tags_list.appendChild(this.createListDiv(index, item));
                });
            }
        }
        removeSearchFrame(frame_id = 'my_search_bottom_layer_div') {
            let search_frame = document.getElementById(frame_id);
            if (search_frame) {
                search_frame.parentNode.removeChild(search_frame);
            }
        }
        cretaeSearchFrame() {
            let that = this;
            let bottom_layer_div = document.createElement('div');
            bottom_layer_div.id = 'my_search_bottom_layer_div';
            bottom_layer_div.addEventListener('click', function(event) {
                if (event.target === this) {
                    that.removeSearchFrame();
                }
            });
            let search_frame = document.createElement('div');
            search_frame.id = 'searchFrame';
            bottom_layer_div.appendChild(search_frame);
            let search_input = document.createElement('input');
            search_input.id = 'myInputSearch';
            search_input.type = 'text';
            search_input.placeholder = this.lang.search_placeholder;
            search_input.value = "";
            search_input.addEventListener('focusin', () => {
                document.getElementById('tagsList').classList.add('list_show');
                this.searchEvent(search_input);
            });
            setTimeout(function() {
                try {
                    search_input.focus();
                    search_input.select();
                } catch(e) {
                    console.error(e);
                }
            }, 200);
            search_frame.appendChild(search_input);
            let tags_list = document.createElement('div');
            tags_list.id = 'tagsList';
            for (let i = 0; i < this.config.users_array.length; i ++) {
                tags_list.appendChild(this.createListDiv(i, this.config.users_array[i]));
            }
            search_frame.appendChild(tags_list);
            return bottom_layer_div;
        }
        createListDiv(id_number, users_obj) {
            let list_div = document.createElement('div');
            list_div.id = 'tags_' + id_number;
            list_div.className = 'ins_list_item';
            list_div.textContent = users_obj.tag;
            list_div.addEventListener('mouseenter', function() {
                for (let ele of document.querySelectorAll('#tagsList div')) {
                    ele.classList.remove('ins_highlight');
                }
                this.classList.add('ins_highlight');
            });
            list_div.addEventListener('click', function() {
                location.pathname = users_obj.id.replace(/^@/, '/');
            });
            return list_div;
        }
        searchEvent(input_dom) {
            let list_arr = [];
            for (let ele of document.querySelectorAll('#tagsList div')) {
                let arr_obj = {
                    'eleContainer': ele.textContent,
                    'ele': ele
                };
                list_arr.push(arr_obj);
            }
            let current_index = 0;
            input_dom.addEventListener('keyup', (event) => {
                document.getElementById('tagsList').classList.add('list_show');
                let search_val;
                switch (event.keyCode) {
                    case 38:
                    case 40:
                    case 37:
                    case 39:
                        event.returnValue = false;
                        break;
                    case 13:
                        this.showList[current_index].click();
                        break;
                    default:
                        search_val = input_dom.value;
                        this.showList = [];
                        list_arr.forEach((item) => {
                            if (item.eleContainer.indexOf(search_val) !== -1) {
                                item.ele.classList.remove('ins_hide');
                                this.showList.push(item.ele);
                            } else {
                                item.ele.classList.add('ins_hide');
                            }
                        });
                        current_index = 0;
                        break;
                }
                this.showList.forEach(function(item, index) {
                    if (index === current_index) {
                        item.classList.add('ins_highlight');
                        document.getElementById('tagsList').scrollTop = item.offsetTop;
                    } else {
                        item.classList.remove('ins_highlight');
                    }
                });
                let list_height = 25 * this.showList.length;
                if (list_height < 250) {
                    document.getElementById('tagsList').style.height = list_height + 'px';
                } else {
                    document.getElementById('tagsList').style.height = '250px';
                }
            });
            input_dom.addEventListener('keydown', (event) => {
                if (event.keyCode === 38) {
                    current_index --;
                    if (current_index < 0) {
                        current_index = 0;
                    }
                } else if (event.keyCode === 40) {
                    current_index ++;
                    if (current_index >= this.showList.length) {
                        current_index = this.showList.length - 1;
                    }
                }
                this.showList.forEach(function(item, index) {
                    if (index === current_index) {
                        item.classList.add('ins_highlight');
                        document.getElementById('tagsList').scrollTop = item.offsetTop;
                    } else {
                        item.classList.remove('ins_highlight');
                    }
                });
            });
        }
        createNoteSpan(user_id, an_class_name = "") {
            let note_span = document.createElement('span');
            note_span.className = 'ins_tag_span';
            if (an_class_name) {
                note_span.classList.add(an_class_name);
            }
            note_span.textContent = this.getUserFormatTag(user_id);
            return note_span;
        }
    }
    function save_Event(user_id, note_obj) {
        for (let ele of document.querySelectorAll(selector.homepage.article)) {
            let ele_id = "";
            if (ele.querySelector(selector.homepage.id)) {
                ele_id = ele.querySelector(selector.homepage.id).textContent;
            }
            let ele_reprint_id = "";
            if (ele.querySelector(selector.homepage.reprint_a)) {
                ele_reprint_id = note_obj.getUserIdFromLink(ele.querySelector(selector.homepage.reprint_a).href);
            }
            if (ele_id == user_id) {
                note_obj.doneHandle(user_id, ele, selector.homepage.show_name);
            }
            if (ele_reprint_id == user_id) {
                note_obj.doneHandle(user_id, ele, selector.homepage.reprint_name);
            }
            for (let ele_at_user of ele.querySelectorAll(selector.homepage.at)) {
                if (note_obj.isUsersFromLink(ele_at_user.href)) {
                    let ele_at_user_id = note_obj.getUserIdFromLink(ele_at_user.href);
                    if (ele_at_user_id == user_id) {
                        note_obj.doneHandle(user_id, ele_at_user, "", true);
                    }
                }
            }
        }
        for (let user_ele of document.querySelectorAll(selector.userpage.main)) {
            let user_ele_id = user_ele.querySelector(selector.userpage.id).textContent;
            if (user_ele_id == user_id) {
                note_obj.doneHandle(user_id, user_ele, selector.userpage.show_name);
            }
        }
        for (let user_frame_ele of document.querySelectorAll(selector.homepage.user_frame)) {
            let user_frame_ele_id = user_frame_ele.querySelector(selector.userpage.id).textContent;
            if (user_frame_ele_id == user_id) {
                note_obj.doneHandle(user_id, user_frame_ele, selector.homepage.show_name);
            }
        }
        for (let blockquote_ele of document.querySelectorAll(selector.homepage.blockquote)) {
            let blockquote_ele_id = blockquote_ele.querySelector(selector.homepage.id).textContent;
            if (blockquote_ele_id == user_id) {
                note_obj.doneHandle(user_id, blockquote_ele, selector.homepage.show_name);
            }
        }
    }
    function init(twitter_config) {
        let style_dom = document.createElement('style');
        style_dom.type = 'text/css';
        style_dom.innerHTML = STYLE_VALUE;
        document.body.appendChild(style_dom);
        let modify_style_dom = document.createElement('style');
        modify_style_dom.type = 'text/css';
        modify_style_dom.innerHTML = modify_style;
        document.body.appendChild(modify_style_dom);
        let lang_str = document.documentElement.lang;
        let lang_value;
        switch (lang_str) {
            case 'zh':
            case 'zh-cn':
            case 'zh-CN':
                lang_value = LANG.ZH_CN;
                break;
            case 'zh-hk':
            case 'zh-HK':
            case 'zh-tw':
            case 'zh-TW':
            case 'zh-Hant':
                lang_value = LANG.ZH_TW;
                break;
            case 'en':
            default:
                lang_value = LANG.EN;
                break;
        }
        let note_obj = new Twitter_Note(twitter_config, lang_value);
        let expand_box = document.createElement('div');
        expand_box.className = 'expand_box';
        expand_box.onmouseenter = function() {
            this.classList.add('show_expand_box');
        };
        expand_box.onmouseleave = function() {
            this.classList.remove('show_expand_box');
        };
        let search_btn = document.createElement('span');
        search_btn.id = 'expandSpan';
        search_btn.title = note_obj.lang.search_placeholder;
        search_btn.addEventListener('click', function(event) {
            event.stopPropagation();
            document.body.appendChild(note_obj.cretaeSearchFrame());
        });
        expand_box.appendChild(search_btn);
        document.body.appendChild(expand_box);
        document.querySelector(selector.root).arrive(selector.homepage.article, {fireOnAttributesModification: true, existing: true}, function() {
            if (this.querySelector(selector.homepage.id)) {
                let user_id = this.querySelector(selector.homepage.id).textContent;
                let user_name = this.querySelector(selector.homepage.show_name).textContent;
                if (this.querySelector(selector.homepage.tool_bar)) {
                    this.querySelector(selector.homepage.tool_bar).appendChild(note_obj.createNoteBtn(user_id, user_name, function() {
                        save_Event(user_id, note_obj);
                    }, 'my_twitter_note_btn base_tool_bar_btn css-1dbjc4n'));
                }
                if (this.querySelector(selector.comment.tool_bar)) {
                    this.querySelector(selector.comment.tool_bar).appendChild(note_obj.createNoteBtn(user_id, user_name, function() {
                        save_Event(user_id, note_obj);
                    }, 'my_twitter_note_btn comment_tool_bar_btn css-1dbjc4n'));
                }
                note_obj.doneHandle(user_id, this, selector.homepage.show_name);
            }
            if (this.querySelector(selector.homepage.reprint_a)) {
                let reprint_id = note_obj.getUserIdFromLink(this.querySelector(selector.homepage.reprint_a).href);
                note_obj.doneHandle(reprint_id, this, selector.homepage.reprint_name);
            }
            if (this.querySelector(selector.homepage.blockquote)) {
                let blockquote_user = this.querySelector(selector.homepage.blockquote);
                let blockquote_user_id = blockquote_user.querySelector(selector.homepage.id).textContent;
                note_obj.doneHandle(blockquote_user_id, blockquote_user, selector.homepage.show_name);
            }
            for (let at_user of this.querySelectorAll(selector.homepage.at)) {
                if (note_obj.isUsersFromLink(at_user.href)) {
                    let at_user_id = note_obj.getUserIdFromLink(at_user.href);
                    note_obj.doneHandle(at_user_id, at_user, "", true);
                }
            }
        });
        document.querySelector(selector.root).arrive(selector.userpage.main, {fireOnAttributesModification: true, existing: true}, function() {
            let user_id = this.querySelector(selector.userpage.id).textContent;
            let user_name = this.querySelector(selector.userpage.show_name).textContent;
            var follow_note_btn;
            if (this.querySelector(selector.userpage.follow)) {
                follow_note_btn = note_obj.createNoteBtn(user_id, user_name, function() {
                    save_Event(user_id, note_obj);
                }, 'my_before_follow_note_btn css-901oao');
                this.querySelector(selector.userpage.follow).insertAdjacentElement('afterbegin', follow_note_btn);
            }
            note_obj.doneHandle(user_id, this, selector.userpage.show_name);
            let user_id_change = new MutationObserver(() => {
                let new_user_id = this.querySelector(selector.userpage.id).textContent;
                note_obj.doneHandle("", this, selector.userpage.show_name);
                let new_user_name = this.querySelector(selector.userpage.show_name).textContent;
                if (follow_note_btn) {
                    follow_note_btn.parentNode.removeChild(follow_note_btn);
                    follow_note_btn = note_obj.createNoteBtn(new_user_id, new_user_name, function() {
                        save_Event(new_user_id, note_obj);
                    }, 'my_before_follow_note_btn css-901oao');
                    this.querySelector(selector.userpage.follow).insertAdjacentElement('afterbegin', follow_note_btn);
                }
                note_obj.doneHandle(new_user_id, this, selector.userpage.show_name);
            });
            let user_id_change_container = this.querySelector(selector.userpage.main_user_id);
            let user_id_change_option = {
                'subtree': true,
                'characterData': true
            };
            user_id_change.observe(user_id_change_container, user_id_change_option);
        });
        document.querySelector(selector.root).arrive(selector.homepage.user_frame, {fireOnAttributesModification: true, existing: true}, function() {
            let user_id = this.querySelector(selector.userpage.id).textContent;
            note_obj.doneHandle(user_id, this, selector.homepage.show_name);
        });
    }
    Promise.all([GM_getValue('twitter_config')]).then(function(data) {
        let twitter_config = {
            users_array: []
        };
        if (data[0] !== undefined) {
            twitter_config = data[0];
        }
        init(twitter_config);
    }).catch(function(e) {
        console.error('Script error.');
        console.error(e);
    });
})();