Added "super advanced settings" (tm)

src/options/App.vue

@@ -50,6 +50,12 @@
               >
               Actions
           </div>
+          <div class="menu-item"
+              :class="{'selected-tab': selectedTab === 'txtconf'}"
+              @click="setSelectedTab('txtconf')"
+              >
+              Super advanced settings
+          </div>
           <div class="menu-item"
               :class="{'selected-tab': selectedTab === 'about'}"
               @click="setSelectedTab('about')"
@@ -88,6 +94,9 @@
                             @remove-event="showRemoveActionPopup($event)"
           >
           </ControlsSettings>
+          <SuperAdvancedSettings v-if="selectedTab === 'txtconf'"
+                                 :settings="settings"
+          ></SuperAdvancedSettings>
           <About v-if="selectedTab === 'about'">
           </About>
           <!-- Vice City/beggathon reference: https://youtu.be/Mn3YEJTSYs8?t=770 -->
@@ -99,6 +108,7 @@
 </template>
 
 <script>
+import SuperAdvancedSettings from './SuperAdvancedSettings.vue';
 import Debug from '../ext/conf/Debug.js';
 import BrowserDetect from '../ext/conf/BrowserDetect.js';
 
@@ -115,7 +125,7 @@ import ConfirmPopup from './common/ConfirmationPopup';
 import About from './about'
 
 import AutodetectionSettings  from './AutodetectionSettings';
-
+// import SuperAdvancedSettings from './'
 
 export default {
   name: "Ultrawidify",
@@ -147,6 +157,7 @@ export default {
     About,
     AutodetectionSettings,
     ConfirmPopup,
+    SuperAdvancedSettings,
   },
   methods: {
     setSelectedTab(newTab) {

src/options/SuperAdvancedSettings.vue

@@ -0,0 +1,98 @@
+<template>
+  <div style="padding-bottom: 100px;">
+    <p>If you feel like you need an adventure, you can edit the settings the real manly way.</p>
+    <p>Features of editing settings via text:
+      <ul>
+        <li>Even less validation than in gui way</li>
+        <li>Includes settings that Tam hasn't (or won't) put into the GUI part of settings.</li>
+        <li>Absolutely NO hand holding!</li>
+        <li>Even less documentation (unless you go and crawl through source code on github)! Variable names are self-documenting (tm) enough</li>
+      </ul>
+    </p>
+    <p>Save button is all the way to the bottom.</p>
+    <div ref="settingsEditArea"
+         style="white-space: pre-wrap; border: 1px solid orange; padding: 10px;"
+         :class="{'jsonbg': !hasError, 'jsonbg-error': hasError}"
+         contenteditable="true"
+         @input="updateSettings"
+    >{{parsedSettings}}</div>
+    <div class="flex flex-row button-box">
+      <Button label="Cancel"
+              @click.native="cancel()"
+      > 
+      </Button>
+      <Button label="Save settings"
+              :disabled="hasError"
+              @click.native="saveManual()"
+      >
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from '../common/components/Button.vue';
+export default {
+  components: {
+    Button,
+  },
+  data() {
+    return {
+      hasError: false,
+      parsedSettings: '',
+      lastSettings: {},
+    }
+  },
+  created() {
+    this.parsedSettings = JSON.stringify(this.settings.active, null, 2);
+    this.lastSettings = JSON.parse(JSON.stringify(this.settings.active));
+  },
+  props: {
+    settings: Object,
+  },
+  computed: {
+    // parsedSettings() {
+    //   return 
+    // }
+  },
+  methods: {
+    updateSettings(val) {
+      try {
+        this.settings.active = JSON.parse(val.target.textContent);
+        this.hasError = false;
+      } catch (e) {
+        this.hasError = true;
+      }
+    },
+    saveManual(){
+      if (this.hasError) {
+        return;
+      }
+      this.settings.save();
+      // this.parsedSettings = JSON.stringify(this.settings.active, null, 2);
+      // this.lastSettings = JSON.parse(JSON.stringify(this.settings.active));
+      const ths = this;
+      this.$nextTick( () => {
+        ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2) 
+        ths.lastSettings = JSON.parse(JSON.stringify(ths.settings.active))
+      });
+    },
+    cancel(){
+      this.parsedSettings = '';
+      this.settings.rollback();
+      const ths = this;
+      this.$nextTick( () => ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2) );
+      this.hasError = false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.jsonbg {
+  background-color: #131313;
+}
+.jsonbg-error {
+  background-color: #884420;
+}
+</style>

src/popup/panels/DefaultSettingsPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w100 flex flex-column">
     <ShortcutButton class="button" 
-                    @click.native="settings.setDefaultSettings()"
+                    @click.native="wipeSettings()"
                     label="Wipe settings"
     /> 
     <div v-if="settings && true"
@@ -163,6 +163,10 @@ export default {
       }
       return KeyboardShortcutParser.parseShortcut(action.scopes[this.scope].shortcut[0]);
     },
+    wipeSettings() {
+      console.log("WIPING SETTINGS");
+      settings.setDefaultSettings();
+    }
   }
 }
 </script>