ultrawidify/src/popup/panels/AboutPanel.vue

<template>
  <div>
    <div class="row">
      <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 (in order of preference):
      <ul>
        <li> <a target="_blank" href="https://github.com/tamius-han/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>
    </div>
    <div class="row">
      <span class="label">Swatter mode (logging)</span><br/>
      <span class="info">
        <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,
      mailtoLink: 'mailto:tamius.han@gmail.com',
      redditLink: '',
    }
  },
  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\
 problematic video at the time where the problem happens. You may delete this paragraph, as it's only a template.


Extension info (AUTOGENERATED — DO NOT CHANGE OR REMOVE):
* Build: ${BrowserDetect.processEnvBrowser}-${this.addonVersion}-stable

Browser-related stuff (please ensure this section is correct):
* User Agent string: ${window.navigator.userAgent}
* vendor: ${window.navigator.vendor}
* Operating system: ${window.navigator.platform}
`
      );
    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 = {
        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,
          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>