Move popup to vue

src/popup/App.vue

@@ -213,16 +213,18 @@ 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 VideoPanel from './panels/VideoPanel.vue';
+import PerformancePanel from './panels/PerformancePanel.vue';
 import Settings from '../ext/lib/Settings';
 import PopupExec from './js/PopupExec';
-import DefaultSettingsPanel from './panels/DefaultSettingsPanel';
-import AboutPanel from './panels/AboutPanel';
+import DefaultSettingsPanel from './panels/DefaultSettingsPanel.vue';
+import AboutPanel from './panels/AboutPanel.vue';
 import ExtensionMode from '../common/enums/ExtensionMode.enum';
 import Logger from '../ext/lib/Logger';
 import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
+import { browser } from 'webextension-polyfill-ts';
 
+import Vue from '*.vue';
 export default Vue.extend({
   data () {
     return {
@@ -260,7 +262,7 @@ 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));
     CSM.setProperty('port', port);
 
@@ -272,12 +274,12 @@ export default Vue.extend({
         cmd: 'unmark-player',
         forwardToAll: true,
       });
-      if (BrowserDetect.anyChromium) {
-        chrome.extension.getBackgroundPage().sendUnmarkPlayer({
-          cmd: 'unmark-player',
-          forwardToAll: true,
-        });
-      }
+      // if (BrowserDetect.anyChromium) {
+      //   chrome.extension.getBackgroundPage().sendUnmarkPlayer({
+      //     cmd: 'unmark-player',
+      //     forwardToAll: true,
+      //   });
+      // }
     });
 
     // get info about current site from background script
@@ -318,7 +320,7 @@ export default Vue.extend({
   },
   methods: {
     async sleep(t) {
-      return new Promise( (resolve,reject) => {
+      return new Promise<void>( (resolve,reject) => {
         setTimeout(() => resolve(), t);
       });
     },
@@ -333,9 +335,7 @@ 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') {
@@ -344,9 +344,6 @@ export default Vue.extend({
       }
       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 +384,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) {
@@ -538,8 +535,8 @@ export default Vue.extend({
     updateZoom(nz){
       this.currentZoom = nz;
     },
-    selectFrame(id){
-      this.selectedFrame = id;
+    selectFrame(frame) {
+      this.selectedFrame = frame;
     },
     selectSite(host) {
       this.selectedSite = host;

src/popup/panels/AboutPanel.vue

@@ -36,19 +36,21 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import Comms from '../../ext/lib/comms/Comms';
-import ShortcutButton from '../../common/components/ShortcutButton';
+import ShortcutButton from '../../common/components/ShortcutButton.vue';
 import BrowserDetect from '../../ext/conf/BrowserDetect';
+import { browser } from 'webextension-polyfill-ts';
 
-export default {
+import Vue from 'vue'
+export default Vue.extend({
   components: {
     ShortcutButton,
  },
   data() {
     return {
       // reminder — webextension-polyfill doesn't seem to work in vue!
-      addonVersion: BrowserDetect.firefox ? browser.runtime.getManifest().version : chrome.runtime.getManifest().version,
+      addonVersion: browser.runtime.getManifest().version,
       loggingEnabled: false,
       loggerSettings: '',
       loggerSettingsError: false,
@@ -103,6 +105,5 @@ Browser-related stuff (please ensure this section is correct):
       Comms.sendMessage({cmd: 'hide-logger', forwardToActive: true});
     }
   }
-}
+})
 </script>
-

src/popup/panels/DefaultSettingsPanel.vue

@@ -122,13 +122,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import ExecAction from '../js/ExecAction';
 import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
-import ShortcutButton from '../../common/components/ShortcutButton';
+import ShortcutButton from '../../common/components/ShortcutButton.vue';
 import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
 
-export default {
+import Vue from 'vue'
+export default Vue.extend({
   data() {
     return {
     }
@@ -190,10 +191,10 @@ export default {
       return KeyboardShortcutParser.parseShortcut(action.scopes[this.scope].shortcut[0]);
     },
     wipeSettings() {
-      settings.setDefaultSettings();
+      this.settings.setDefaultSettings();
     }
   }
-}
+})
 </script>
 
 <style>

src/popup/panels/PerformancePanel.vue

@@ -6,10 +6,9 @@
   </div>
 </template>
 
-<script>
-
-
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     performance: Object,
   },
@@ -18,7 +17,7 @@ export default {
       deep: true,
     }
   }
-}
+})
 </script>
 
 <style>

src/popup/panels/SiteDetailsPanel.vue

@@ -126,14 +126,16 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import ShortcutButton from '../../common/components/ShortcutButton.vue';
 import QsElement from '../../common/components/QsElement.vue';
 import QuerySelectorSetting from '../../common/components/QuerySelectorSetting.vue';
 import ExtensionMode from '../../common/enums/ExtensionMode.enum';
 import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
 import StretchType from '../../common/enums/StretchType.enum';
-export default {
+
+import Vue from 'vue'
+export default Vue.extend({
   components: {
     QuerySelectorSetting,
     ShortcutButton,
@@ -249,8 +251,7 @@ export default {
       this.settings.save();
     },
   }
-
-}
+})
 </script>
 
 <style>

src/popup/panels/WhatsNewPanel.vue

@@ -16,16 +16,18 @@
     </ul>
   </div>
 </template>
-<script>
+
+<script lang="ts">
 import BrowserDetect from '../../ext/conf/BrowserDetect';
 
-export default {
+import Vue from 'vue'
+export default Vue.extend({
   data () {
     return {
       BrowserDetect: BrowserDetect
     }
   },
-}
+})
 </script>
 
 <style>