work on logger popup

src/csui/LoggerUi.vue

@@ -1,8 +1,24 @@
 <template>
   <div v-if="showLoggerUi" class="root-window flex flex-column overflow-hidden">
     <div class="header">
-      <h1>{{header.header}}</h1>
+      <div class="header-top flex flex-row">
-      <div>{{header.subheader}}</div>
+        <div class="flex-grow">
+          <h1>{{header.header}}</h1>
+        </div>
+        <div class="button flex-noshrink button-header"
+            @click="hidePopup()"
+        >
+          Close
+        </div>
+        <!-- <div class="button flex-noshrink button-header"
+             @click="stopLogging()"
+        >
+          Stop logging
+        </div> -->
+      </div>
+      <div class="header-bottom">
+        <div>{{header.subheader}}</div>
+      </div>
     </div>
     <div class="content flex flex-row flex-grow overflow-hidden">
 
@@ -17,7 +33,7 @@
           <div ref="settingsEditArea"
             style="white-space: pre-wrap; border: 1px solid orange; padding: 10px;"
             class="monospace"
-            :class="{'jsonbg': !hasError, 'jsonbg-error': hasError}"
+            :class="{'jsonbg': !confHasError, 'jsonbg-error': confHasError}"
             contenteditable="true"
             @input="updateSettings"
           >{{parsedSettings}}</div>
@@ -29,15 +45,41 @@
         <div class="panel-top">
           <h2>Logger results</h2>
         </div>
-        <div class="panel-middle scrollable flex-grow">
+        <template v-if="logStringified">
-          <pre>
+          <div class="panel-middle scrollable flex-grow">
-            {{logStringified}}
+            <pre>
-          </pre>
+              {{logStringified}}
-        </div>
+            </pre>
+          </div>
+          <div class="flex-noshrink flex flex-row flex-end">
+            <div class="button">New log</div>
+            <div class="button">Export log</div>
+            <div class="button">Export & quit</div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="panel-middle scrollable flex-grow">
+            <div v-if="!parsedSettings" class="text-center w100">
+              Please paste logger config into the text box to the left.
+              ←←←
+            </div>
+            <div v-else-if="confHasError" class="warn">
+              Logger configuration contains an error. Cannot start logging.
+            </div>
+            <div v-else-if="lastSettings && lastSettings.allowLogging && lastSettings.consoleOptions && lastSettings.consoleOptions.enabled">
+              Logging in progress ... 
+            </div>
+            <div v-else>
+              <div class="button">
+                Start logging
+              </div>
+            </div>
+          </div>
+        </template>
       </div>
     </div>
     <div>
-      button row is here
+      button row is heres
     </div>
   </div>
 </template>
@@ -49,14 +91,14 @@ import Logger from '../ext/lib/Logger';
 export default {
   data() {
     return {
-      showLoggerUi: true,
+      showLoggerUi: false,
       header: {
         header: 'whoopsie daisy',
         subheader: 'you broke the header choosing script'
       },
       parsedSettings: '',
       lastSettings: {},
-      hasError: false,
+      confHasError: false,
       logStringified: '',
     }
   },
@@ -76,43 +118,50 @@ export default {
 
     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',
+      'showLogger'
     ]),
   },
   watch: {
     uwLog(newValue, oldValue)  {
-      console.log("updating status from", oldValue, "to", newValue);
       if (oldValue !== newValue) {
         this.logStringified = JSON.stringify(newValue, null, 2);
       }
+    },
+    showLogger(newValue) {
+      this.showLoggerUi = newValue;
     }
   },
   methods: {
     updateSettings(val) {
       try {
         // this.settings.active = JSON.parse(val.target.textContent);
-        this.hasError = false;
+        this.confHasError = false;
       } catch (e) {
-        this.hasError = true;
+        this.confHasError = true;
       }
     },
+    hidePopup() {
+      // this function only works as 'close' if logging has finished
+      if (this.logStringified) {
+        Logger.saveConfig({...this.lastSettings, allowLogging: false});
+      }
+      this.$store.dispatch('uw-hide-logger');
+    },
+    stopLogging() {
+      Logger.saveConfig({...this.lastSettings, allowLogging: false});
+      this.$store.dispatch('uw-hide-logger');
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import url('/res/css/colors.scss');
+@import '../res/css/colors.scss';
-@import url('/res/css/font/overpass.css');
+@import '../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');
@@ -124,13 +173,17 @@ export default {
   width: 90vw !important;
   height: 90vh !important;
   z-index: 999999 !important;
-  background-color: rgba(18,17,15,0.9) !important;
+  background-color: rgba( $page-background, 0.9) !important;
   color: #f1f1f1 !important;
   font-size: 14px !important;
 
   box-sizing: border-box !important;
 }
 
+div {
+  font-family: 'Overpass';
+}
+
 h1, h2 {
   font-family: 'Overpass Thin';
 }
@@ -142,9 +195,19 @@ h2 {
 }
 
 .header {
-
+  h1 {
-  * {
+    margin-bottom: -0.20em;
-    padding-left: 32px;
+    margin-top: 0.0em;
+  }
+  .header-top, .header-bottom {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .header-top {
+    background-color: $popup-header-background !important;
+  }
+  .header-bottom {
+    font-size: 1.75em;
   }
 }
 .content {
@@ -177,18 +240,23 @@ h2 {
   overflow: hidden;
 }
 
+pre {
+  font-family: 'Overpass Mono';
+}
 
-.flex {
+.button {
-  display: flex !important;
+  display: inline-flex;
+  align-items: center;
+  justify-items: center;
+  padding-left: 2em;
+  padding-right: 2em;
 }
-.flex-column {
+
-  flex-flow: column !important;
+.button-header {
+  font-size: 2em;
+  padding-top: 0.1em;
+  padding-left: 1em;
+  padding-right: 1em;
 }
-.flex-row {
-  flex-flow: row !important;
-}
-.flex-noshrink {
-  flex-shrink: 0 !important;
-} 
 
 </style>

src/ext/lib/Logger.js

@@ -287,6 +287,10 @@ class Logger {
     return false;
   }
 
+  isLoggingToFile() {
+    return this.conf.allowLogging && this.conf.fileOptions?.enabled;
+  }
+
   // NOTE: THIS FUNCTION IS NEVER USED INTERNALLY!
   canLog(component) {
     const stackInfo = this.parseStack();

src/ext/uw.js

@@ -41,11 +41,10 @@ class UW {
     this.settings = undefined;
     this.actionHandler = undefined;
     this.logger = undefined;
-    this.store = {};
+    this.vuexStore = {};
   }
 
   async init(){
-    this.createUi();
     if (Debug.debug) {
       console.log("[uw::main] loading configuration ...");
     }
@@ -84,9 +83,18 @@ class UW {
             'handleMouseMove': false
           }
         };
-        this.logger = new Logger({vuexStore: this.store});
+        this.logger = new Logger({vuexStore: this.vuexStore});
         await this.logger.init(loggingOptions);
-        // await this.logger.init();  // not needed if logging options are provided at creation
+
+        // show popup if logging to file is enabled
+        if (this.logger.isLoggingToFile()) {
+          console.info('[uw::init] Logging to file is enabled. Will show popup!');
+          try {
+            this.vuexStore.dispatch('uw-show-logger');
+          } catch (e) {
+            console.error('[uw::init] Failed to open popup!', e)
+          }
+        }
       }
     } catch (e) {
       console.error("logger init failed!", e)
@@ -109,6 +117,10 @@ class UW {
     }
   
     this.comms = new CommsClient('content-client-port', this.settings, this.logger);
+
+    // add showPopup, hidePopup listener to comms
+    this.comms.subscribe('show-logger', () => this.showLogger());
+    this.comms.subscribe('hide-logger', () => this.hideLogger());
   
     // če smo razširitev onemogočili v nastavitvah, ne naredimo ničesar
     // If extension is soft-disabled, don't do shit
@@ -144,38 +156,48 @@ class UW {
     } catch (e) {
       this.logger.log('error', 'debug', "[uw::init] FAILED TO START EXTENSION. Error:", e);
     }
-  
-    
   }
 
   initVue() {
     Vue.prototype.$browser = global.browser;
     Vue.use(Vuex);
-    this.store = new Vuex.Store({
+    this.vuexStore = new Vuex.Store({
       plugins: [VuexWebExtensions({
         persistentStates: [
-          'uwLog'
+          'uwLog',
+          'showLogger',
         ],
       })],
       state: {
         uwLog: '',
+        showLogger: false,
       },
       mutations: {
         'uw-set-log'(state, payload) {
-          console.info('setting state')
           state['uwLog'] = payload;
+        },
+        'uw-show-logger'(state) {
+          state['showLogger'] = true;
+        },
+        'uw-hide-logger'(state) {
+          state['showLogger'] = false;
         }
       },
       actions: {
         'uw-set-log' ({commit}, payload) {
-          console.info("comitting uw-set-log with payload", payload);
           commit('uw-set-log', payload);
+        },
+        'uw-show-logger'({commit}) {
+          commit('uw-show-logger');
+        },
+        'uw-hide-logger'({commit}) {
+          commit('uw-hide-logger');
         }
       }
     })
   }
 
-  createUi() {
+  initUi() {
     console.log("CREATING UI");
     const random = Math.round(Math.random() * 69420);
     const uwid = `uw-ui-root-${random}`;
@@ -192,14 +214,22 @@ class UW {
       components: {
         LoggerUi
       },
-      store: this.store,
+      store: this.vuexStore,
       render(h) {
         return h('logger-ui');
       }
     })
   }
+
+  showLogger() {
+    this.vuexStore.dispatch('uw-show-logger');
+  }
+  hideLogger() {
+    this.vuexStore.dispatch('uw-hide-logger');
+  }
 }
 
 var main = new UW();
 main.initVue();
+main.initUi();
 main.init();

src/res/css/colors.scss

@@ -7,6 +7,7 @@ $secondary-color: #e70c0c;
 $input-background: #141414;
 $input-border: #4e3527;
 $page-background: #101010;
+$popup-header-background: #7f1416;
 
 $background-primary: #101010;
 $selected-color: #f5cbaf;

src/res/css/common.scss

@@ -215,7 +215,9 @@ small {
   text-align: center;
   width: 100%;
 }
-
+.text-center {
+  text-align: center;
+}
 
 
 .invalid-input {