// ==UserScript==
// @name         glitch-theme-dracula
// @namespace    http://tampermonkey.net/
// @version      1.0.2
// @description  try to take over the world!
// @author       Nassinger#6809
// @match        https://glitch.com/edit/
// @grant        GM_addStyle
// @require      http://code.jquery.com/jquery-3.4.1.min.js
// @run-at       document-start
// @downloadURL none
// ==/UserScript==

const $ = window.jQuery;

$(document).ready(() => {
    GM_addStyle (`
        * {
            transition: background 0.3s, color 0.3s, opacity 0.3s;
        }

        body, span {
            color: #eee;
        }

        .filetree-child file active data span {
            color: black;
        }

        .ContainerStatusItem__StatusItemDiv-sc-122ynxp-0 kHAzjL, .status-badge, .advanced-options > .button-wrap, header .header-project .project-name-width-placeholder, header:not(.no-header-styles) .header-project .project-name-width-placeholder, .status-badge .icon {
            background: none;
        }

        .sidebar .sidebar-section, .panel, .sidebar .sidebar-section > .button-wrap > button, .button-small, .button-secondary, .advanced-options > .button-wrap > button, .pop-over tools-pop, .pop-over section.info, .tools-pop, header, .button, button:not(.no-button-styles), header:not(.no-header-styles), .editor-wrap, .sidebar .sidebar-section > .button-wrap > button, .sidebar .sidebar-people-wrap button, .search-input, .replace-input, .CodeMirror-search-field {
            border: none;
        }

        .pop-over {
            background-color: #343746;
        }

        .body, .blank-slate, .editor-read-only .text-editor .CodeMirror-gutters,.editor-connection-error .text-editor .CodeMirror-gutters, .editor-read-only,.editor-connection-error, :root, .panel, body, #application, .active .file-rename-input, .editor-helper, .text-editor, .text-editor .CodeMirror-gutters, .button, button:not(.no-button-styles), .search-input, .replace-input, .CodeMirror-search-field {
            background-color: #282a36;
            --primary-background: #282a36;
        }

        .CodeMirror-dialog, .pop-over, .pop-over project-pop, .tools-pop, .new-file-pop {
            border: none;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
            bottom: 40px;
        }

        .CodeMirror-dialog {
            height: 42px;
        }

        .sidebar, .pop-over section.actions, .person-pop {
            background: #343746;
            border: none;
        }

        textarea .content-editable, .pop-over section .input-wrap input {
            border-bottom: 1px solid #21222c;
        }

        .CodeMirror-dialog, .pop-loader, .mini-pop .mini-pop-action:hover, .logs-panel .log-item:hover, .show-app-pop, header, header:not(.no-header-styles), .pop-over section.info, jump-to-button, button:not(.no-button-styles).active {
            background: #21222c;
        }

        .pop-over .results-list .result {
            border-radius: 3px;
        }

        .pop-over .results-list .result:hover .result-name, .pop-over .results-list .result:hover .button {
            color: white;
        }

        .pop-over .results-list .result:hover .button {
            background: rgba(13, 15, 28, 0.2);
        }

        .pop-over .results-list .result .button:hover {
            background: rgba(13, 15, 28, 0.4);
        }

        .CodeMirror-code .cm-keyword {
            color: #ff79c6;
        }

        .CodeMirror-code .cm-variable {
            color: #eee;
        }

        .CodeMirror-code .cm-comment {
            color: #6272a4;
        }

        .CodeMirror-code .cm-string {
            color: #f1fa8c;
        }

        .CodeMirror-code .cm-property {
            color: #8be9fd;
        }

        .CodeMirror-code .cm-operator, .CodeMirror-code .cm-tag {
            color: #ff79c6;
        }

        .CodeMirror-code .cm-number, .CodeMirror-code .cm-atom {
            color: #bd93f9;
        }

        .CodeMirror-code .cm-qualifier {
            font-style: italic;
        }

        .CodeMirror-code .cm-def {
            color: #f8f8f2;
        }

        .CodeMirror-code .cm-function {
            color: #50fa7b;
        }

        .CodeMirror-code .cm-link {
            color: #38a0f5;
        }

        .CodeMirror-code .cm-url {
            color: #eff0f9;
            text-decoration: underline;
        }

        .CodeMirror-code .cm-header {
            color: #ff5926;
            font-weight: bold;
        }

        .CodeMirror-code .cm-strong {
            color: #ffdd33;
            font-weight: bold;
        }

        .CodeMirror-code .cm-em {
            font-style: italic;
        }

        .CodeMirror-code .cm-quote {
            color: #ffdd33;
        }

        .text-editor .CodeMirror-linenumber {
            color: #65666e;
        }

        .display-folder-name span {
            color: #858790;
        }

        .editor-helper {
            border-bottom: 1px solid #21222c;
        }

        .filetree .filetree-child:not(.folder):hover, .filetree .folder-path:hover, .filetree .filetree-child:not(.folder):focus, .filetree .folder-path:focus, .filetree .filetree-child:not(.folder).active, .filetree .folder-path.active {
            border-radius: 3px 0px 0px 3px;
        }

        .filetree .filetree-child.active {
            color: black;
        }

        .logic.active {
            background-color: #f2d13d;
        }

        .logic .extension-type {
            color: #ffdf4f;
        }

        .text-editor .CodeMirror-foldmarker, .data:not(.active):hover, .data:not(.active):focus, .logic:not(.active):focus, header .nav-item:not(.active):hover, header:not(.no-header-styles) .nav-item:hover, header .nav-item:focus, header:not(.no-header-styles) .nav-item:focus, header .nav-item.active, header:not(.no-header-styles) .nav-item.active, header .right-options .action:hover, header:not(.no-header-styles) .right-options .action:hover, header .right-options .action:focus, header:not(.no-header-styles) .right-options .action:focus, header .right-options .action.active, header:not(.no-header-styles) .right-options .action.active {
            background: rgba(217, 227, 255, 0.1);
        }

        .text-editor .CodeMirror-foldmarker:hover, .sidebar-collapsed:hover, .CodeMirror-activeline-background, .pop-over section.actions .button-secondary:hover, .pop-over section.actions button:hover, button:not(.no-button-styles):hover, button:hover, .button:hover, button-small:hover {
            background: rgba(217, 227, 255, 0.2);
        }

        .sidebar-collapsed .icon-collapse {
            background-color: none !important;
        }

        .icon-collapse {
            opacity: 0.6;
            background-color: #21212e;
            border-radius: 5px;
        }

        .icon-collapse:hover {
            opacity: 1;
            background-color: #55596b;
        }

        .sidebar-collapsed .icon-collapse {
            background-color: none !important;
        }

        .button-small button-secondary, .button-small:hover .icon, .button-secondary:hover .icon, .button:hover .icon {
            background: none;
            color: white;
        }

        .ContainerStatusItem__StatusItemDiv-sc-122ynxp-0, .pop-over .results-list .results a li {
            border: none;
        }

        .ContainerStatusItem__StatusItemDiv-sc-122ynxp-0 div {
            background: #21222c;
            border: none;
        }

        .status-badge icon {
            background: none;
            color: white;
        }

        .filetree-child.file.active .extension-type, .filetree-child.file.active span {
            color: #21222c;
        }

        *:focus {
            outline: none;
        }

        ::-webkit-scrollbar {
            border: 12px solid rgba(10, 13, 20, 0.4);
            width: 12px;
            height: 12px;
        }

        .CodeMirror-vscrollbar {
            margin-right: 5.51px;
        }

        .CodeMirror-hscrollbar {
            margin-bottom: 5.51px;
        }

        ::-webkit-scrollbar-thumb {
            border: 12px solid rgba(222, 231, 255, 0.15);
        }

        .button-ask-for-help.button-no-styles {
            display: none;
        }

        .pop-over section.danger-zone {
            background: #c93292;
        }

        .notifications .notification {
            padding: 5px 7px;
            margin: 0px 15px 9px 0px;
        }

        #project-search-input {
            background: #2f3140;
        }

        .custom-domain-pop {
            overflow: hidden;
        }

        .sidebar .sidebar-section:nth-child(1), .pop-over section.actions, .pop-over .results-list .result {
            border-bottom: 1px solid #282a36;
        }

        .mini-pop .mini-pop-action {
            background: #282a36;
            border-bottom: 1px solid #21222c;
        }

        .content-editable, .pop-over section .input-wrap input, textarea.content-editable {
            border-bottom: 1px solid #343746;
        }

        .pop-over section .input-wrap input {
            border-bottom: 1px solid #282a36;
        }

        .text-editor .CodeMirror-foldgutter-open:hover {
            background-color: #343746;
        }
    `);

    const interval = setInterval(() => {
        if ($('.CodeMirror').length) {
            const editor = $('.CodeMirror')[0].CodeMirror;

            function Context(state, mode, depth, prev) {
                this.state = state; this.mode = mode; this.depth = depth; this.prev = prev
            };

            function copyContext(context) {
                return new Context(
                    CodeMirror.copyState(context.mode, context.state),
                    context.mode,
                    context.depth,
                    context.prev && copyContext(context.prev)
                );
            };

            CodeMirror.defineMode("jsx", (config, modeConfig) => {
                var xmlMode = CodeMirror.getMode(config, {
                    name: "xml",
                    allowMissing: true,
                    multilineTagIndentPastTag: false,
                    allowMissingTagName: true
                });

                var jsMode = CodeMirror.getMode(config, modeConfig && modeConfig.base || 'javascript');

                function flatXMLIndent(state) {
                    const tagName = state.tagName;
                    state.tagName = null;
                    const result = xmlMode.indent(state, '', '');
                    state.tagName = tagName;
                    return result
                };

                function token(stream, state) {
                    if (state.context.mode == xmlMode) {
                        return xmlToken(stream, state, state.context);
                    } else {
                        return jsToken(stream, state, state.context);
                    };
                };

                function xmlToken(stream, state, cx) {
                    if (cx.depth == 2) {
                        if (stream.match(/^.*?\*\//)) {
                            cx.depth = 1;
                        } else {
                            stream.skipToEnd();
                        };
                        return 'comment'
                    };

                    if (stream.peek() == "{") {
                        xmlMode.skipAttribute(cx.state)

                        let indent = flatXMLIndent(cx.state),
                            xmlContext = cx.state.context;

                        if (xmlContext && stream.match(/^[^>]*>\s*$/, false)) {
                            while (xmlContext.prev && !xmlContext.startOfLine) {
                                xmlContext = xmlContext.prev;
                            };

                            if (xmlContext.startOfLine) {
                                indent -= config.indentUnit;
                            } else if (cx.prev.state.lexical) {
                                indent = cx.prev.state.lexical.indented;
                            };
                        } else if (cx.depth == 1) {
                            indent += config.indentUnit
                        };

                        state.context = new Context(CodeMirror.startState(jsMode, indent), jsMode, 0, state.context);
                        return null;
                    }

                    if (cx.depth == 1) {
                        if (stream.peek() == '<') {
                            xmlMode.skipAttribute(cx.state);
                            state.context = new Context(CodeMirror.startState(xmlMode, flatXMLIndent(cx.state)), xmlMode, 0, state.context);
                            return null;
                        } else if (stream.match('//')) {
                            stream.skipToEnd();
                            return 'comment';
                        } else if (stream.match('/*')) {
                            cx.depth = 2;
                            return token(stream, state);
                        }
                    }

                    let style = xmlMode.token(stream, cx.state), cur = stream.current(), stop;

                    if (/\btag\b/.test(style)) {
                        if (/>$/.test(cur)) {
                            if (cx.state.context) cx.depth = 0
                            else state.context = state.context.prev
                        } else if (/^</.test(cur)) {
                            cx.depth = 1
                        }
                    } else if (!style && (stop = cur.indexOf('{')) > -1) {
                        stream.backUp(cur.length - stop);
                    };

                    return style;
                }

                function jsToken(stream, state, cx) {
                    const keywords = /function|if|while|try|catch|for/;

                    if(!stream.match(keywords, false)) {
                        if(stream.match(/\w+(?= *\()/)) {
                            return 'function';
                        };
                    } else {
                        if(stream.match(keywords)) {
                            return 'keyword';
                        };
                    };

                    if (stream.peek() == '<' && jsMode.expressionAllowed(stream, cx.state)) {
                        jsMode.skipExpression(cx.state);
                        state.context = new Context(CodeMirror.startState(xmlMode, jsMode.indent(cx.state, '', '')), xmlMode, 0, state.context);
                        return null;
                    };

                    const style = jsMode.token(stream, cx.state);

                    if (!style && cx.depth != null) {
                        var cur = stream.current();
                        if (cur == '{') {
                            cx.depth ++;
                        } else if (cur == '}') {
                            if (--cx.depth == 0) {
                                state.context = state.context.prev;
                            };
                        };
                    };

                    return style;
                };

                return {
                    startState() {
                        return {context: new Context(CodeMirror.startState(jsMode), jsMode)}
                    },

                    copyState(state) {
                        return {context: copyContext(state.context)}
                    },

                    token: token,

                    indent(state, textAfter, fullLine) {
                        return state.context.mode.indent(state.context.state, textAfter, fullLine)
                    },

                    innerMode(state) {
                        return state.context
                    }
                }
            }, 'xml', 'javascript');

            CodeMirror.defineMIME('text/jsx', 'jsx')
            CodeMirror.defineMIME('text/typescript-jsx', {
                name: 'jsx',
                base: {
                    name: 'javascript',
                    typescript: true
                }
            });

            editor.setOption('mode', 'jsx');

            const collapse = $('.icon-collapse')[0];

            collapse.onclick = () => {
                collapse.style['background-color'] = '#21212e';
            };

            clearInterval(interval);
        };
    }, 100);

    document.documentElement.style.setProperty('--colors-border', '#343746');
    document.documentElement.style.setProperty('--primary-background', '#282a36');
});