<!DOCTYPE html>
<html>
<head>
    <title>Debug viewer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/svgs/solid/bug.svg"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css"/>

    <style>
        details {
            border: 1px solid #aaa;
            border-radius: 4px;
            padding: 0.5em 0.5em 0;
        }

        summary {
            font-weight: bold;
            margin: -0.5em -0.5em 0;
            padding: 0.5em;
        }

        details[open] {
            padding: 0.5em;
        }

        details[open] summary {
            border-bottom: 1px solid #aaa;
            margin-bottom: 0.5em;
        }

        .host:not(:first-child) {
            margin-left: 1.5rem;
        }

        .stack-icon {
            background-repeat: no-repeat;
            background-image: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/svgs/solid/layer-group.svg");
        }

        .highlight-icon {
            background-repeat: no-repeat;
            background-image: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/svgs/solid/highlighter.svg");
        }

        .log.indent-line[data-action="START"]::before {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 100%;
            width: 2px;
            height: var(--indent-line-height, 20px);
            border-left: 2px dotted red;
        }

        #page-navigation > *,
        #logs-indent > * {
            border: 1px solid #363636;
        }

        code {
            word-break: break-all;
        }

        code + code {
            margin-left: 10px;
        }

        [v-cloak] {
            display: none;
        }

        #page-navigation {
            position: fixed;
            right: 20px;
            top: 70px;
        }

        #logs-indent {
            position: fixed;
            right: 20px;
            top: 20px;
        }

        .log {
            word-wrap: anywhere;
            width: 100%;
        }

        pre {
            padding: 0.25rem 0.5rem;
        }

        .v-middle {
            vertical-align: middle;
        }

        code.expanded-on-focus:not(:focus) {
            max-width: 500px;
            display: inline-block;
            max-height: 2em;
            overflow: hidden;
            vertical-align: bottom;
        }
        code.expanded-on-focus:not(:focus)::before {
            content: "(click to expand)";
            display: inline-block;
        }
        code.expanded-on-focus:focus {
            white-space: pre;
            display: block;
            margin-top: 1em;
        }
    </style>
</head>
<body>
    <div id="app" class="container is-fluid pt-4" style="margin-bottom: 200px;" v-cloak>
        <div class="field">
            <div class="columns">
                <div class="column">
                    <label>
                        Select debug file
                        <input type="file" @change="changeFile" />
                    </label>
                </div>
            </div>
        </div>
        <div v-if="file" class="field">
            <template v-if="file.CRITICAL_ERRORS.length">
                <h1 class="title has-text-centered has-background-danger">CRITICAL_ERRORS</h1>
                <pre class="field">{{file.CRITICAL_ERRORS | json}}</pre>
            </template>

            <h1 class="title has-text-centered">info</h1>
            <div class="columns">
                <div class="column is-narrow">
                    Version: <span class="tag is-info">{{addon.version}}</span><br>
                    UP time: <code>{{upTime}}</code><br>
                    UUID: <code>{{addon.UUID}}</code><br>
                    <div v-for="(val, key) in addon.permissions" :key="key + 'perm'" class="control mt-1">
                        <div class="tags has-addons">
                            <span class="tag">{{key}}</span>
                            <span :class="['tag', val ? 'is-success' : 'is-info']">{{val}}</span>
                        </div>
                    </div>
                    <div v-for="(val, key) in options" :key="key + 'opt'">
                        <template v-if="isBool(val)">
                            <input type="checkbox" onclick="return false" :checked="val"> {{key}}
                        </template>
                        <template v-else-if="isString(val) || isNumber(val)">
                            {{key}}: "{{val}}"
                        </template>
                        <template v-else>
                            {{key}}: <pre>{{val | json(true)}}</pre>
                        </template>
                    </div>
                </div>
                <div class="column">
                    <div class="field is-grouped is-grouped-multiline">
                        <div v-for="(val, key) in file.browserInfo.browserAndOS" :key="key + 'browser'" class="control">
                            <div class="tags has-addons">
                                <span class="tag">{{key}}</span>
                                <span class="tag is-info is-light">{{val}}</span>
                            </div>
                        </div>
                    </div>

                    <hr style="width: 100%;" class="mb-2 mt-0">

                    <h2 class="subtitle">Addons</h2>
                    <div class="field is-grouped is-grouped-multiline is-flex-direction-column">
                        <div v-for="(ext, i) in file.browserInfo.extensions" :key="i + 'ext'" class="control">
                            <div class="columns">
                                <div class="column is-narrow">
                                    <span class="tag">
                                        <img v-if="ext.icon_url" class="image is-16x16 mr-2" :src="ext.icon_url">
                                        <a v-if="ext.url" :href="ext.url" target="_blank">{{ext.name}} {{ext.version}}</a>
                                        <span v-else>{{ext.name}} {{ext.version}}</span>
                                    </span>
                                </div>
                                <div class="column">
                                    <code class="host" v-for="(host, i) in ext.hostPermissions" :key="i + 'host'" v-text="host"></code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <h1 id="windows-title" class="title has-text-centered">windows</h1>
            <details v-for="(win, i) in file.windows" :key="i + 'win'" class="field">
                <summary>windowId: {{win?.id}} {{win?.groupId && `(groupId: ${win.groupId})`}}</summary>
                <pre class="field">{{win | json}}</pre>
            </details>

            <h1 id="tabsWithoutGroup-title" class="title has-text-centered">tabs without group</h1>
            <details class="field">
                <summary>tabs without group (count: {{tabsWithoutGroup.length}})</summary>
                <pre class="field">{{tabsWithoutGroup | json}}</pre>
            </details>

            <h1 id="groups-title" class="title has-text-centered">groups (count: {{groups.length}})</h1>
            <details v-for="(group, i) in groups" :key="i + 'group'" class="field">
                <summary>groupId: {{group?.id}} {{ group?.isArchive ? '(archived)' : ''}} (tabs: {{group.tabs.length}})</summary>
                <pre class="field">{{group | json}}</pre>
            </details>


            <h1 id="logs-title" class="title has-text-centered mt-5">logs (count: {{logs.length}})</h1>
            <div class="is-relative" :style="{
                    marginLeft: logsIndent + 'px',
                }">
                <div v-for="(log, i) in logs" :key="i + 'log'" :data-action="log.action" :data-key="log.key"
                    :class="['is-relative field log p-1', {
                        'has-background-success has-text-black indent-line': isHighlighted(log),
                    }]"
                    :style="{
                        marginLeft: log.indent,
                        '--indent-line-height': log.indentLineHeight,
                    }">
                    <span class="is-size-7 v-middle" v-html="formatTime(log)"></span>

                    <button @click="toggleShowStack(log)" class="button is-small">
                        <span class="stack-icon icon"></span>
                    </button>
                    <button v-if="log.action" @click="toggleHighlight(log)" class="button is-small">
                        <span class="highlight-icon icon"></span>
                    </button>

                    <span class="v-middle" v-html="getLogTitle(log)"></span>
                    <div v-if="log.showStack">
                        <pre v-for="(stack, i) in log.stacks" :key="i + 'stack' + stack[0]" class="mt-3" v-text="getStackToView(stack)"></pre>
                    </div>
                </div>
            </div>


            <h1 id="errors-title" class="title has-text-centered">ERRORS</h1>
            <div v-for="(log, i) in errorLogs" :key="i + 'error'" class="field log p-1">
                <span class="is-size-7" v-html="formatTime(log, true)"></span>

                <button @click="toggleShowStack(log)" class="button is-small">
                    <span class="stack-icon icon"></span>
                </button>
                <!-- <button v-if="log.action" @click="toggleHighlight(log)" class="button is-small">
                    <span class="highlight-icon icon"></span>
                </button> -->

                <span v-html="getLogTitle(log)"></span>
                <div v-if="log.showStack">
                    <pre v-for="stack in log.stacks" :key="i + 'stack2' + stack[0]" class="mt-3" v-text="getStackToView(stack)"></pre>
                </div>
            </div>


            <div id="logs-indent" class="buttons are-small">
                <button class="button is-light" @click="logsIndent -= 50">◁</button>
                <button class="button is-light" @click="logsIndent += 50">▷</button>
            </div>

            <div id="page-navigation" class="is-flex is-flex-direction-column is-align-items-end">
                <button class="button is-light field" @click="scrollTo('input[type=file]')">top</button>
                <button class="button is-light field" @click="scrollTo('#windows-title', 'start')">windows</button>
                <button class="button is-light field" @click="scrollTo('#groups-title', 'start')">groups</button>
                <button class="button is-light field" @click="scrollTo('#logs-title', 'start')">logs</button>
                <button class="button is-light field" title="Right click - prev error"
                    @click="scrollTo('.tag.is-danger:not(.is-light), .has-background-danger', undefined, true)"
                    @contextmenu.prevent.stop="scrollTo('.tag.is-danger:not(.is-light), .has-background-danger', undefined, true, true)">🛑 error</button>
                <button class="button is-light field" @click="scrollTo('#errors-title')">errors</button>
            </div>

        </div>
    </div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.js"></script>
    <script type="text/javascript" src="./debug-viewer.js"></script>
</body>
</html>
