Show log results in popup
This commit is contained in:
parent
f5bde78378
commit
8eed3431c8
@ -1,15 +1,37 @@
|
||||
<template>
|
||||
<div v-if="showLoggerUi">
|
||||
<div>
|
||||
<div>DEFORESTATOR 5000</div>
|
||||
<div>Iron Legion's finest logging tool</div>
|
||||
<div v-if="showLoggerUi" class="root-window flex flex-column">
|
||||
<div class="header">
|
||||
<h1>{{header.header}}</h1>
|
||||
<div>{{header.subheader}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
logger config panel is here
|
||||
<div class="content flex flex-row flex-grow">
|
||||
|
||||
<!-- LOGGER SETTINGS PANEL -->
|
||||
<div class="settings-panel flex-column">
|
||||
<div class="panel-top">
|
||||
<h2>Logger configuration</h2>
|
||||
<p>Paste logger configuration in this box</p>
|
||||
</div>
|
||||
|
||||
<div class="panel-middle">
|
||||
<div ref="settingsEditArea"
|
||||
style="white-space: pre-wrap; border: 1px solid orange; padding: 10px;"
|
||||
class="monospace"
|
||||
:class="{'jsonbg': !hasError, 'jsonbg-error': hasError}"
|
||||
contenteditable="true"
|
||||
@input="updateSettings"
|
||||
>{{parsedSettings}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOGGER OUTPUT/START LOGGING -->
|
||||
<div class="results-panel">
|
||||
<div class="panel-top">
|
||||
<h2>Logger results</h2>
|
||||
</div>
|
||||
<div class="panel-middle scrollable">
|
||||
{{logStringified}}
|
||||
</div>
|
||||
<div class="test-class">
|
||||
logger results will go here
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -19,26 +41,81 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Logger from '../ext/lib/Logger';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showLoggerUi: true,
|
||||
ghettoCss: {
|
||||
header: {
|
||||
header: 'whoopsie daisy',
|
||||
subheader: 'you broke the header choosing script'
|
||||
},
|
||||
parsedSettings: '',
|
||||
lastSettings: {},
|
||||
hasError: false,
|
||||
logStringified: '',
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
const headerRotation = [{
|
||||
header: "DEFORESTATOR 5000",
|
||||
subheader: "Iron Legion's finest logging tool"
|
||||
}, {
|
||||
header: "Astinus",
|
||||
subheader: "Ultrawidify logging tool"
|
||||
}, {
|
||||
header: "Tracer",
|
||||
subheader: "I'm already printing stack traces"
|
||||
}];
|
||||
|
||||
this.header = headerRotation[Math.floor(+Date.now() / (3600000*24)) % headerRotation.length] || this.header;
|
||||
|
||||
this.lastSettings = await Logger.getConfig() || {};
|
||||
this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
|
||||
|
||||
// this.$store.watch(
|
||||
// (state, getters) => {},
|
||||
// (newValue, oldValue) => {
|
||||
// console.log("$store.watch — updating from", oldValue, "to", newValue);
|
||||
// }
|
||||
// )
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'uwLog',
|
||||
]),
|
||||
},
|
||||
watch: {
|
||||
uwLog(newValue, oldValue) {
|
||||
console.log("updating status from", oldValue, "to", newValue);
|
||||
if (oldValue !== newValue) {
|
||||
this.logStringified = JSON.stringify(newValue, null, 2);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateSettings(val) {
|
||||
try {
|
||||
// this.settings.active = JSON.parse(val.target.textContent);
|
||||
this.hasError = false;
|
||||
} catch (e) {
|
||||
this.hasError = true;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import url('../res/css/colors.scss');
|
||||
@import url('../res/css/font/overpass.css');
|
||||
@import url('../res/css/font/overpass-mono.css');
|
||||
@import url('../res/css/common.scss');
|
||||
@import url('../res/css/flex.css');
|
||||
@import url('/res/css/colors.scss');
|
||||
@import url('/res/css/font/overpass.css');
|
||||
@import url('/res/css/font/overpass-mono.css');
|
||||
@import url('/res/css/common.scss');
|
||||
@import url('/res/css/flex.css');
|
||||
|
||||
.rootWindow {
|
||||
.root-window {
|
||||
position: fixed !important;
|
||||
top: 5vh !important;
|
||||
left: 5vw !important;
|
||||
@ -50,4 +127,31 @@ export default {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Overpass Thin';
|
||||
}
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
* {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 8px 32px;
|
||||
width: 100%;
|
||||
}
|
||||
.settings-panel {
|
||||
flex-grow: 2;
|
||||
}
|
||||
.results-panel {
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -3,12 +3,14 @@ import { decycle } from 'json-cyclic';
|
||||
import { sleep } from '../../common/js/utils';
|
||||
|
||||
class Logger {
|
||||
constructor(conf) {
|
||||
constructor(options) {
|
||||
this.onLogEndCallbacks = [];
|
||||
this.history = [];
|
||||
this.globalHistory = {};
|
||||
this.isContentScript = false;
|
||||
this.isBackgroundScript = true;
|
||||
|
||||
this.vuexStore = options?.vuexStore;
|
||||
}
|
||||
|
||||
static saveConfig(conf) {
|
||||
@ -179,14 +181,15 @@ class Logger {
|
||||
finish() {
|
||||
if (!this.isBackgroundScript) {
|
||||
this.conf.allowLogging = false;
|
||||
const logJson = JSON.stringify(decycle(this.history));
|
||||
this.log('force', 'debugr', 'Calling all log end callbacks. There\'s this many of them:', 1);
|
||||
for(const f of this.onLogEndCallbacks) {
|
||||
f(logJson);
|
||||
}
|
||||
} else {
|
||||
this.exportLogToFile();
|
||||
// const logJson = JSON.stringify(decycle(this.history));
|
||||
// this.log('force', 'debugr', 'Calling all log end callbacks. There\'s this many of them:', 1);
|
||||
// for(const f of this.onLogEndCallbacks) {
|
||||
// f(logJson);
|
||||
// }
|
||||
// } else {
|
||||
// this.exportLogToFile();
|
||||
}
|
||||
this.saveToVuex();
|
||||
}
|
||||
|
||||
parseStack() {
|
||||
@ -445,6 +448,29 @@ class Logger {
|
||||
}
|
||||
}
|
||||
|
||||
saveToVuex() {
|
||||
console.info('[info] will attempt to save to vuex store.');
|
||||
if (!this.conf?.fileOptions?.enabled || this.isBackgroundScript) {
|
||||
console.info('[info] Logging to file is either disabled or we\'re not on the content script. Not saving.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.vuexStore) {
|
||||
console.error("[info] No vue store. Log will not be exported.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.info('[info] vuex store present. Parsing logs.');
|
||||
|
||||
const exportObject = {
|
||||
pageLogs: JSON.stringify(decycle(this.history)),
|
||||
backgroundLogs: JSON.stringify(decycle(this.globalHistory)),
|
||||
loggerFileOptions: JSON.stringify(this.conf.fileOptions),
|
||||
}
|
||||
|
||||
this.vuexStore.dispatch('uw-set-log', JSON.stringify(exportObject));
|
||||
}
|
||||
|
||||
// export log file — only works on background page
|
||||
async exportLogToFile() {
|
||||
// don't export log if logging to file is not enabled
|
||||
|
||||
@ -7,7 +7,13 @@ import CommsClient from './lib/comms/CommsClient';
|
||||
import PageInfo from './lib/video-data/PageInfo';
|
||||
import Logger from './lib/Logger';
|
||||
|
||||
// vue dependency imports
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import VuexWebExtensions from 'vuex-webextensions';
|
||||
|
||||
global.browser = require('webextension-polyfill');
|
||||
|
||||
import LoggerUi from '../csui/LoggerUi';
|
||||
|
||||
if(Debug.debug){
|
||||
@ -35,6 +41,7 @@ class UW {
|
||||
this.settings = undefined;
|
||||
this.actionHandler = undefined;
|
||||
this.logger = undefined;
|
||||
this.store = {};
|
||||
}
|
||||
|
||||
async init(){
|
||||
@ -77,7 +84,7 @@ class UW {
|
||||
'handleMouseMove': false
|
||||
}
|
||||
};
|
||||
this.logger = new Logger();
|
||||
this.logger = new Logger({vuexStore: this.store});
|
||||
await this.logger.init(loggingOptions);
|
||||
// await this.logger.init(); // not needed if logging options are provided at creation
|
||||
}
|
||||
@ -141,6 +148,33 @@ class UW {
|
||||
|
||||
}
|
||||
|
||||
initVue() {
|
||||
Vue.prototype.$browser = global.browser;
|
||||
Vue.use(Vuex);
|
||||
this.store = new Vuex.Store({
|
||||
plugins: [VuexWebExtensions({
|
||||
persistentStates: [
|
||||
'uwLog'
|
||||
],
|
||||
})],
|
||||
state: {
|
||||
uwLog: '',
|
||||
},
|
||||
mutations: {
|
||||
'uw-set-log'(state, payload) {
|
||||
console.info('setting state')
|
||||
state['uwLog'] = payload;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
'uw-set-log' ({commit}, payload) {
|
||||
console.info("comitting uw-set-log with payload", payload);
|
||||
commit('uw-set-log', payload);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
createUi() {
|
||||
console.log("CREATING UI");
|
||||
const random = Math.round(Math.random() * 69420);
|
||||
@ -152,11 +186,13 @@ class UW {
|
||||
|
||||
document.body.appendChild(rootDiv);
|
||||
|
||||
|
||||
new Vue({
|
||||
el: `#${uwid}`,
|
||||
components: {
|
||||
LoggerUi
|
||||
},
|
||||
store: this.store,
|
||||
render(h) {
|
||||
return h('logger-ui');
|
||||
}
|
||||
@ -165,4 +201,5 @@ class UW {
|
||||
}
|
||||
|
||||
var main = new UW();
|
||||
main.initVue();
|
||||
main.init();
|
||||
|
||||
@ -386,3 +386,6 @@ small {
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
.monospace {
|
||||
font-family: 'Overpass Mono';
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user