Show log results in popup

src/csui/LoggerUi.vue

@@ -1,15 +1,37 @@
 <template>
-  <div v-if="showLoggerUi">
+  <div v-if="showLoggerUi" class="root-window flex flex-column">
-    <div>
+    <div class="header">
-      <div>DEFORESTATOR 5000</div>
+      <h1>{{header.header}}</h1>
-      <div>Iron Legion's finest logging tool</div>
+      <div>{{header.subheader}}</div>
     </div>
-    <div>
+    <div class="content flex flex-row flex-grow">
-      <div>
+
-        logger config panel is here
+      <!-- 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>
-      <div class="test-class">
+
-        logger results will go here
+      <!-- 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>
     </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/colors.scss');
-@import url('../res/css/font/overpass.css');
+@import url('/res/css/font/overpass.css');
-@import url('../res/css/font/overpass-mono.css');
+@import url('/res/css/font/overpass-mono.css');
-@import url('../res/css/common.scss');
+@import url('/res/css/common.scss');
-@import url('../res/css/flex.css');
+@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>

src/ext/lib/Logger.js

@@ -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));
+      // const logJson = JSON.stringify(decycle(this.history));
-      this.log('force', 'debugr', 'Calling all log end callbacks. There\'s this many of them:', 1);
+      // this.log('force', 'debugr', 'Calling all log end callbacks. There\'s this many of them:', 1);
-      for(const f of this.onLogEndCallbacks) {
+      // for(const f of this.onLogEndCallbacks) {
-        f(logJson);
+      //   f(logJson);
-      }
+      // }
-    } else {
+    // } else {
-      this.exportLogToFile();
+      // 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

src/ext/uw.js

@@ -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();

src/res/css/common.scss

@@ -386,3 +386,6 @@ small {
 .ltr {
   direction: ltr;
 }
+.monospace {
+  font-family: 'Overpass Mono';
+}