Add about panel back to the popup

src/csui/Popup.vue

@@ -85,6 +85,11 @@
               :site="site.host"
             >
             </BaseExtensionSettings>
+
+            <AboutPanel
+              v-if="selectedTab === 'about'"
+            >
+            </AboutPanel>
           </template>
           <template v-else>No settings or site settings found.</template>
         </div>
@@ -99,6 +104,7 @@ import BaseExtensionSettings from './src/PlayerUiPanels/BaseExtensionSettings.vu
 import PlayerDetectionPanel from './src/PlayerUiPanels/PlayerDetectionPanel.vue'
 import PopupVideoSettings from './src/popup/panels/PopupVideoSettings.vue'
 import InPlayerUIAdvertisement from './src/PlayerUiPanels/InPlayerUiAdvertisement.vue';
+import AboutPanel from '@csui/src/popup/panels/AboutPanel.vue'
 import Debug from '../ext/conf/Debug';
 import BrowserDetect from '../ext/conf/BrowserDetect';
 import Comms from '../ext/lib/comms/Comms';
@@ -109,6 +115,15 @@ import EventBus from '../ext/lib/EventBus';
 import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
 
 export default {
+  components: {
+    Debug,
+    BrowserDetect,
+    PopupVideoSettings,
+    PlayerDetectionPanel,
+    BaseExtensionSettings,
+    InPlayerUIAdvertisement,
+    AboutPanel
+  },
   data () {
     return {
       comms: undefined,
@@ -127,6 +142,7 @@ export default {
         {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         // {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
+        {id: 'about', label: 'About', icon: 'information-outline'},
       ],
     }
   },
@@ -215,11 +231,7 @@ export default {
       this.narrowPopup = body.offsetWidth < 600;
     }
   },
-  components: {
-    Debug,
-    BrowserDetect,
-    PopupVideoSettings, PlayerDetectionPanel, BaseExtensionSettings, InPlayerUIAdvertisement
-  },
+
   methods: {
     async sleep(t) {
       return new Promise( (resolve,reject) => {

src/csui/src/popup/panels/AboutPanel.vue

@@ -7,44 +7,20 @@
     <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>Email: <a target="_blank" :href="mailtoLink">{{gmailLink}}</a></li>
       </ul>
     </div>
-
-    <div class="flex-grow"></div>
-
-    <div class="row">
-      <span class="label">Swatter mode (logging)</span><br/>
-    </div>
-    <div v-if="showEasterEgg" class="center"><small>You've made plenty of marks, all in the wrong places!</small></div>
-    <div class="flex flex-row">
-      <ShortcutButton class="flex flex-grow button"
-                      label="Show logger"
-                      :active="loggingEnabled"
-                      @click.native="showLogger()"
-      ></ShortcutButton>
-      <ShortcutButton class="flex flex-grow button"
-                      label="Make a mark"
-                      @click.native="sendMark()"
-      ></ShortcutButton>
-      <ShortcutButton class="flex flex-grow button"
-                      label="Hide logger"
-                      @click.native="hideLogger()"
-      ></ShortcutButton>
-    </div>
   </div>
 </template>
 
 <script>
-import Comms from '../../ext/lib/comms/Comms';
-import ShortcutButton from '../../common/components/ShortcutButton';
-import BrowserDetect from '../../ext/conf/BrowserDetect';
-
+// import Comms from '@src/ext/lib/comms/Comms';
+// import ShortcutButton from '@src/common/components/ShortcutButton';
+import BrowserDetect from '@src/ext/conf/BrowserDetect';
 
 export default {
   components: {
-    ShortcutButton,
- },
+  },
   data() {
     return {
       // reminder — webextension-polyfill doesn't seem to work in vue!
@@ -76,7 +52,7 @@ Browser-related stuff (please ensure this section is correct):
 * Operating system: ${window.navigator.platform}
 `
       );
-    this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
+    this.mailtoLink = `mailto:${this.gmailLink}?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
   },
   methods: {
     async updateLoggerSettings(allowLogging) {
@@ -94,15 +70,15 @@ Browser-related stuff (please ensure this section is correct):
       //   Logger.saveConfig({allowLogging: allowLogging, ...lastLoadedLoggerSettings});
       // }
     },
-    showLogger() {
-      Comms.sendMessage({cmd: 'show-logger', forwardToActive: true});
-    },
-    sendMark() {
-      this.showEasterEgg = !this.showEasterEgg;
-    },
-    hideLogger() {
-      Comms.sendMessage({cmd: 'hide-logger', forwardToActive: true});
-    }
+    // showLogger() {
+    //   Comms.sendMessage({cmd: 'show-logger', forwardToActive: true});
+    // },
+    // sendMark() {
+    //   this.showEasterEgg = !this.showEasterEgg;
+    // },
+    // hideLogger() {
+    //   Comms.sendMessage({cmd: 'hide-logger', forwardToActive: true});
+    // }
   }
 }
 </script>