Use typed messaging for popup message port

ext/src/background/receiverSelector/PopupReceiverSelector.ts

@@ -88,7 +88,7 @@ export default class PopupReceiverSelector extends ReceiverSelector {
 
         const popup = await browser.windows.create({
             url: POPUP_URL
-          , type: "detached_panel"
+          , type: "popup"
           , ...centeredProps
         });
 

ext/src/ui/popup/index.tsx

@@ -7,11 +7,12 @@ import ReactDOM from "react-dom";
 import knownApps from "../../lib/knownApps";
 import options from "../../lib/options";
 
-import { Message } from "../../messaging";
+import messaging, { Message, Port } from "../../messaging";
 import { getNextEllipsis } from "../../lib/utils";
 import { Receiver } from "../../types";
 
-import { ReceiverSelectorMediaType } from "../../background/receiverSelector";
+import { ReceiverSelectionActionType
+       , ReceiverSelectorMediaType } from "../../background/receiverSelector";
 
 
 const _ = browser.i18n.getMessage;
@@ -41,7 +42,7 @@ interface PopupAppState {
 }
 
 class PopupApp extends Component<{}, PopupAppState> {
-    private port?: browser.runtime.Port;
+    private port?: Port;
     private win?: browser.windows.Window;
     private defaultMediaType?: ReceiverSelectorMediaType;
 
@@ -67,9 +68,7 @@ class PopupApp extends Component<{}, PopupAppState> {
     }
 
     public async componentDidMount () {
-        this.port = browser.runtime.connect({
-            name: "popup"
-        });
+        this.port = messaging.connect({ name: "popup" });
 
         this.port.onMessage.addListener((message: Message) => {
             switch (message.subject) {
@@ -152,8 +151,7 @@ class PopupApp extends Component<{}, PopupAppState> {
         const isAppMediaTypeAvailable = !!(this.state.availableMediaTypes
                 & ReceiverSelectorMediaType.App);
 
-        return (
-            <div>
+        return <>
             <div className="media-select">
                 <div className="media-select__label-cast">
                     { _("popupMediaSelectCastLabel") }
@@ -207,8 +205,7 @@ class PopupApp extends Component<{}, PopupAppState> {
                             { _("popupNoReceiversFound") }
                         </div> )}
             </ul>
-            </div>
-        );
+        </>;
     }
 
     private onCast (receiver: Receiver) {
@@ -219,7 +216,8 @@ class PopupApp extends Component<{}, PopupAppState> {
         this.port?.postMessage({
             subject: "receiverSelector:selected"
           , data: {
-                receiver
+                actionType: ReceiverSelectionActionType.Cast
+              , receiver
               , mediaType: this.state.mediaType
               , filePath: this.state.filePath
             }
@@ -229,7 +227,10 @@ class PopupApp extends Component<{}, PopupAppState> {
     private onStop (receiver: Receiver) {
         this.port?.postMessage({
             subject: "receiverSelector:stop"
-          , data: { receiver }
+          , data: {
+                actionType: ReceiverSelectionActionType.Stop
+              , receiver
+            }
         });
     }