Revert "okay what the actual fuck"

This reverts commit a9ab8d8b92.

src/popup/ExtensionActionButtonApp.vue

@@ -195,8 +195,8 @@
                               :settings="settings"
                               :site="selectedSite"
         />
-        <PerformancePanel v-if="selectedTab === 'performance-metrics'" 
+        <!-- <PerformancePanel v-if="selectedTab === 'performance-metrics'" 
-                          :performance="performance" />
+                          :performance="performance" /> -->
         <WhatsNewPanel v-if="selectedTab === 'whats-new'" />
         <AboutPanel v-if="selectedTab === 'about'" />
         <Donate v-if="selectedTab === 'donate'" />
@@ -206,38 +206,22 @@
 </template>
 
 <script lang="ts">
-import Icon from '../common/components/Icon.vue'
+
-import WhatsNewPanel from './panels/WhatsNewPanel.vue';
-import SiteDetailsPanel from './panels/SiteDetailsPanel.vue';
-import Donate from '../common/misc/Donate.vue';
-import Debug from '../ext/conf/Debug';
-import BrowserDetect from '../ext/conf/BrowserDetect';
-import Comms from '../ext/lib/comms/Comms';
-import VideoPanel from './panels/VideoPanel';
-import PerformancePanel from './panels/PerformancePanel';
-import Settings from '../ext/lib/Settings';
-import PopupExec from './js/PopupExec';
-import DefaultSettingsPanel from './panels/DefaultSettingsPanel';
-import AboutPanel from './panels/AboutPanel';
-import ExtensionMode from '../common/enums/ExtensionMode.enum';
-import Logger from '../ext/lib/Logger';
-import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
 
 export default Vue.extend({
-  data () {
+   data () {
     return {
       selectedTab: 'video',
       selectedFrame: '__all',
       selectedSite: '',
       activeFrames: [],
       activeSites: [],
-      comms: new Comms(),
       frameStore: {},
       frameStoreCount: 0,
       performance: {},
       site: null,
       currentZoom: 1,
-      execAction: new PopupExec(null, null),
+      execAction: new ExecAction(null, null),
       settings: {},
       settingsInitialized: false,
       logger: {},
@@ -260,9 +244,10 @@ export default Vue.extend({
     await this.settings.init();
     this.settingsInitialized = true;
 
-    const port = BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'});
+    const port = browser.runtime.connect(null, {name: 'popup-port'});
-    port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
+    // port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
-    CSM.setProperty('port', port);
+
+    // CSM.setProperty('port', port);
 
     this.execAction.setSettings(this.settings);
 
@@ -272,12 +257,12 @@ export default Vue.extend({
         cmd: 'unmark-player',
         forwardToAll: true,
       });
-      if (BrowserDetect.anyChromium) {
+      // if (BrowserDetect.anyChromium) {
-        chrome.extension.getBackgroundPage().sendUnmarkPlayer({
+      //   chrome.extension.getBackgroundPage().sendUnmarkPlayer({
-          cmd: 'unmark-player',
+      //     cmd: 'unmark-player',
-          forwardToAll: true,
+      //     forwardToAll: true,
-        });
+      //   });
-      }
+      // }
     });
 
     // get info about current site from background script
@@ -307,7 +292,6 @@ export default Vue.extend({
   components: {
     VideoPanel,
     DefaultSettingsPanel,
-    PerformancePanel,
     Debug,
     BrowserDetect,
     AboutPanel,
@@ -318,7 +302,7 @@ export default Vue.extend({
   },
   methods: {
     async sleep(t) {
-      return new Promise( (resolve,reject) => {
+      return new Promise<void>( (resolve,reject) => {
         setTimeout(() => resolve(), t);
       });
     },
@@ -333,20 +317,6 @@ export default Vue.extend({
         this.logger.log('error','popup','[popup::getSite] sending get-current-site failed for some reason. Reason:', e);
       }
     },
-    getRandomColor() {
-      return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
-    },
-    selectTab(tab) {
-      this.selectedTab = tab;
-      if (tab === 'whats-new') {
-        this.settings.active.whatsNewChecked = true;
-        this.settings.save();
-      }
-      this.toggleSideMenu(false);
-    },
-    selectFrame(frame) {
-      this.selectedFrame = frame;
-    },
     async updateConfig() {
       // when this runs, a site could have been enabled or disabled
       // this means we must update canShowVideoTab
@@ -387,7 +357,7 @@ export default Vue.extend({
         if (this.site) {
           if (!this.site.host) {
             // dunno why this fix is needed, but sometimes it is
-            this.site.host = site.tabHostname;
+            this.site.host = message.site.tabHostname;
           }
         }
         if (!this.site || this.site.host !== message.site.host) {
@@ -529,7 +499,7 @@ export default Vue.extend({
       // update whether video tab can be shown
       this.updateCanShowVideoTab();
     },
-    getRandomColor() {
+    getRandomColor(): string {
       return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
     },
     setCurrentZoom(nz) {
@@ -538,8 +508,16 @@ export default Vue.extend({
     updateZoom(nz){
       this.currentZoom = nz;
     },
-    selectFrame(id){
+    selectTab(tab) {
-      this.selectedFrame = id;
+      this.selectedTab = tab;
+      if (tab === 'whats-new') {
+        this.settings.active.whatsNewChecked = true;
+        this.settings.save();
+      }
+      this.toggleSideMenu(false);
+    },
+    selectFrame(frame) {
+      this.selectedFrame = frame;
     },
     selectSite(host) {
       this.selectedSite = host;
@@ -548,7 +526,7 @@ export default Vue.extend({
       this.sideMenuVisible = visible ?? !this.sideMenuVisible;
     }
   }
-});
+})
 </script>
 
 <style src="../res/css/font/overpass.css"></style>

src/popup/Popup.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from './ExtensionActionButtonApp.vue';
+
+class Popup {
+  static createApp() {
+    createApp(App).mount('#app');
+  }
+}
+
+export default Popup;

src/popup/js/ExecAction.ts

@@ -1,7 +1,7 @@
-import { browser } from 'webextension-polyfill-ts';
+import { browser } from '../../../node_modules/webextension-polyfill-ts/lib/index';
 import Settings from '../../ext/lib/Settings';
 
-class PopupExec {
+class ExecAction {
   settings: Settings;
   site: any;
   
@@ -82,4 +82,4 @@ class PopupExec {
   }
 }
 
-export default PopupExec;
+export default ExecAction;

src/popup/panels/VideoPanel.vue

@@ -121,7 +121,7 @@
 </template>
 
 <script>
-import PopupExec from '../js/PopupExec';
+import ExecAction from '../js/ExecAction';
 import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
 import ShortcutButton from '../../common/components/ShortcutButton';
 import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
@@ -145,7 +145,7 @@ export default {
     'cropModePersistence',
   ],
   created() {
-    this.exec = new PopupExec(this.settings);
+    this.exec = new ExecAction(this.settings);
   },
   components: {
     ShortcutButton,

src/popup/popup.js

@@ -1,4 +1,3 @@
-import { createApp } from 'vue'
+import Popup from './Popup';
-import App from './App';
 
-createApp(App).mount('#app');
+Popup.createApp();