Add rudamentary logger section to 'about' tab of popup

src/popup/panels/AboutPanel.vue

@@ -4,23 +4,56 @@
       <span class="label">Ultrawidify version:</span><br/> {{addonVersion}}
     </div>
     <div class="row">
-    <span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options:
+    <span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options (in order of preference):
       <ul>
         <li> <a target="_blank" href="https://github.com/xternal7/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li>
         <li>Email: <a target="_blank" :href="mailtoLink">tamius.han@gmail.com</a></li>
         <li>PM me on <a target="_blank" :href="redditLink">reddit</a><br/></li>
       </ul>
-      <br/>
+    </div>
-      If reporting perfomrance/RAM usage issue, please include your CPU model and RAM.
+    <div class="row">
-      <br/>
+      <span class="label">Swatter mode (logging)</span><br/>
-      <br/>
+      <span class="info">
-      If reporting issues with autodetection, please also include a screenshot and a link to the video > with timestamp(s) if possible.
+        <small>
+          This requires 'download' permission. You will be prompted when saving file. Logger configuration may
+          attempt to automatically download the log after collecting relevant data. Logging will reload the tab
+          you're currently using. <b>Performance may be severely reduced while logging is active. Turn it on when
+          asked and then turn it off when you're done.</b>
+        </small>
+      </span>
+    </div>
+    <div class="row">
+      <b>Logger configuration:</b> <span v-if="loggerEnabled">ACTIVE!</span><br/>
+      <small v-if="loggerSettingsError"><b>Parsing settings failed — there is a problem with settings!</b></small>
+      <input type="textarea" v-model="loggerSettings"/>
+    </div>
+    <div class="flex flex-row">
+      <ShortcutButton class="flex flex-grow button"
+                      label="Save settings & start logging"
+                      :active="loggingEnabled"
+                      @click.native="startLogging()"
+      ></ShortcutButton>
+      <ShortcutButton class="flex flex-grow button"
+                      label="Make a mark"
+                      @click.native="sendMark()"
+      ></ShortcutButton>
+      <ShortcutButton class="flex flex-grow button"
+                      label="Stop logging"
+                      @click.native="stopLogging()"
+      ></ShortcutButton>
     </div>
   </div>
 </template>
+
 <script>
+import ShortcutButton from '../../common/components/ShortcutButton';
 import BrowserDetect from '../../ext/conf/BrowserDetect';
+import Logger from '../../ext/lib/Logger';
+
 export default {
+  components: {
+    ShortcutButton,
+ },
   data() {
     return {
       addonVersion: browser.runtime.getManifest().version || chrome.runtime.getManifest().version,
@@ -28,7 +61,17 @@ export default {
       redditLink: '',
     }
   },
-  created() {
+  data() {
+    return {
+      loggingEnabled: undefined,
+      loggerSettings: '',
+      loggerSettingsError: false,
+      lastLoadedLoggerSettings: undefined,
+      mailtoLink: '',
+      redditLink: '',
+    }
+  },
+  async created() {
     const messageTemplate = encodeURIComponent(
 `Describe your issue in more detail. In case of misaligned videos, please provide screenshots. When reporting\
  issues with autodetection not detecting aspect ratio correctly, please provide a link with timestamp to the\
@@ -46,6 +89,58 @@ Browser-related stuff (please ensure this section is correct):
       );
     this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
     this.redditLink = `https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=${messageTemplate}`;
+
+    const loggerSettingsAll = await Logger.getConfig();
+    
+    this.loadLoggerSettings(loggerSettingsAll);
+
+    // ensure that logger conf gets updated (in case of timed logger)
+    Logger.syncConfig(x => this.loadLoggerSettings(x));
+    
+  },
+  methods: {
+    loadLoggerSettings(conf) {
+      this.loggingEnabled = conf.allowLogging;
+      this.lastLoadedLoggerSettings = {
+        logToFile: conf.logToFile,
+        logToConsole: conf.logToConsole,
+        fileOptions: conf.fileOptions,
+        consoleOptions: conf.consoleOptions
+      };
+      this.loggerSettings = JSON.stringify(lastLoadedSettings, null, 2);
+    },
+    async updateLoggerSettings(allowLogging) {
+      this.loggingEnabled = allowLogging;
+      if (allowLogging) {
+        const parsedSettings = JSON.parse(this.loggerSettings);
+        Logger.saveConfig({
+          allowLogging: allowLogging,
+          logToFile: parsedSettings.logToFile || false,
+          logToConsole: parsedSettings.logToConsole || false,
+          fileOptions: parsedSettings.fileOptions || {},
+          consoleOptions: parsedSettings.consoleOptions || {},
+        });
+      } else {
+        // we need to save logger settings because logging is triggered by allow logging
+        Logger.saveConfig({allowLogging: allowLogging, ...lastLoadedLoggerSettings});
+      }
+    },
+    startLogging() {
+      try {
+        JSON.parse(this.loggerSettings);
+        this.loggerSettingsError = false;
+        this.updateLoggerSettings(true);
+      } catch (e) {
+        console.error("Cannot parse logger config json!");
+        this.loggerSettingsError = true;
+      }
+    },
+    sendMark() {
+
+    },
+    endLogging() {
+      updateLoggerSettings(false);
+    }
   }
 }
 </script>