split popup into ts

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'" />
@@ -205,39 +205,23 @@
   </div>
 </template>
 
-<script>
+<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 ExecAction from './js/ExecAction.js';
-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 {
+
-  data () {
+export default Vue.extend({
+   data () {
     return {
       selectedTab: 'video',
       selectedFrame: '__all',
       selectedSite: '',
       activeFrames: [],
       activeSites: [],
-      comms: new Comms(),
       frameStore: {},
       frameStoreCount: 0,
       performance: {},
       site: null,
       currentZoom: 1,
-      execAction: new ExecAction(),
+      execAction: new ExecAction(null, null),
       settings: {},
       settingsInitialized: false,
       logger: {},
@@ -260,9 +244,10 @@ export default {
     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 {
         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 {
   components: {
     VideoPanel,
     DefaultSettingsPanel,
-    PerformancePanel,
     Debug,
     BrowserDetect,
     AboutPanel,
@@ -318,7 +302,7 @@ export default {
   },
   methods: {
     async sleep(t) {
-      return new Promise( (resolve,reject) => {
+      return new Promise<void>( (resolve,reject) => {
         setTimeout(() => resolve(), t);
       });
     },
@@ -333,20 +317,6 @@ export default {
         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 {
         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 {
       // 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 {
     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 {
       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/popup.js

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