Keep global state of native app connection

src/background.ts

@@ -1,4 +1,5 @@
 import { choosePort, listPortsNative } from "./messaging"
+import { getNativeParamsFromBackground } from "./messaging/native"
 import {
 	extendPromiseFromBackground,
 	rejectPromiseFromBackground,
@@ -13,6 +14,17 @@ import {
 import { BackgroundRequest } from "./utils/types"
 
 class MessageHandler {
+	/**
+	 * Get native app state & parameters.
+	 *
+	 * ACCESS:
+	 * - Page Script (via Content Script)
+	 * - Popup Script
+	 */
+	async getNativeParams() {
+		return await getNativeParamsFromBackground()
+	}
+
 	/**
 	 * List authorized ports.
 	 *

src/messaging/index.ts

@@ -2,6 +2,11 @@ import { sendToBackground } from "./background"
 import { sendToNative } from "./native"
 import { sendToPopup } from "./popup"
 import { SerialPortData } from "../serial/types"
+import { NativeParams } from "../utils/types"
+
+export async function getNativeParams(): Promise<NativeParams> {
+	return await sendToBackground({ action: "getNativeParams", origin })
+}
 
 export async function getPorts(origin: string): Promise<SerialPortData[]> {
 	return await sendToBackground({ action: "getPorts", origin })

src/messaging/native.ts

@@ -1,8 +1,9 @@
-import { debugLog, debugRx, debugTx } from "../utils/logging"
+import { v4 } from "uuid"
 import { clearAuthKeyCache, rejectPromise, resolvePromise } from "."
-import { NativeRequest } from "../utils/types"
+import { debugLog, debugRx, debugTx } from "../utils/logging"
+import { NativeParams, NativeRequest } from "../utils/types"
+import { catchIgnore } from "../utils/utils"
 import { keepPromise } from "./promises"
-import { v4 } from "uuid"
 
 const NATIVE_PROTOCOL = 1
 
@@ -14,6 +15,10 @@ type RawNativeResponse = {
 	error?: number
 }
 
+let nativeParams: NativeParams = {
+	state: "checking",
+}
+
 async function getNativePort(): Promise<browser.runtime.Port> {
 	if (globalPort != undefined && globalPort.error == null) return globalPort
 
@@ -29,7 +34,12 @@ async function getNativePort(): Promise<browser.runtime.Port> {
 	}
 	newPort.postMessage(pingRequest)
 
+	// update native params
+	nativeParams = { state: "checking" }
+
 	globalPort = await new Promise((resolve, reject) => {
+		let isOutdated = false
+
 		newPort.onMessage.addListener(async (message: RawNativeResponse) => {
 			if (!message.id) {
 				if (message.data) debugRx("NATIVE", message.data)
@@ -42,17 +52,23 @@ async function getNativePort(): Promise<browser.runtime.Port> {
 				const version = message.data?.version
 				const protocol = message.data?.protocol
 				if (protocol !== NATIVE_PROTOCOL) {
-					newPort.disconnect()
 					const error = `Native protocol incompatible: expected v${NATIVE_PROTOCOL}, found v${protocol}`
 					debugLog("NATIVE", "onMessage", error)
+
+					nativeParams = { state: "outdated", version, protocol }
+					isOutdated = true
+					newPort.disconnect()
+
 					reject(new Error(error))
 					return
 				}
+				const wsPort = message.data?.wsPort
 				debugLog(
 					"NATIVE",
 					"onMessage",
-					`Connection successful: native v${version}`
+					`Connection successful: native v${version} @ port ${wsPort}`
 				)
+				nativeParams = { state: "connected", version, protocol, wsPort }
 				resolve(newPort)
 				return
 			}
@@ -67,12 +83,12 @@ async function getNativePort(): Promise<browser.runtime.Port> {
 				)
 		})
 
-		newPort.onDisconnect.addListener((port) => {
+		newPort.onDisconnect.addListener(async (port) => {
 			debugLog("NATIVE", "onDisconnect", "Disconnected:", port.error)
-			if (globalPort) {
-				globalPort = null
-				reject(port.error)
-			}
+			if (isOutdated) return
+			globalPort = null
+			nativeParams = { state: "error" }
+			reject(port.error)
 		})
 	})
 
@@ -87,3 +103,9 @@ export async function sendToNative(message: NativeRequest): Promise<any> {
 	port.postMessage(message)
 	return await promise
 }
+
+export async function getNativeParamsFromBackground(): Promise<NativeParams> {
+	// ignore errors, which are reflected in nativeParams instead
+	await catchIgnore(getNativePort())
+	return nativeParams
+}

src/ui/components/Common.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components"
+import { PopupRequest } from "../../utils/types"
+import { Button } from "../controls/Button"
+
+export type CommonProps = {
+	resolve: (value: any) => void
+	reject: (reason?: any) => void
+} & PopupRequest
+
+export const MessageContainer = styled.div`
+	position: relative;
+	min-height: 40px;
+	padding-right: 56px;
+`
+
+export const ReloadButton = styled(Button)`
+	position: absolute;
+	top: 50%;
+	right: 0;
+	transform: translateY(-50%);
+`
+
+export const ButtonContainer = styled.div`
+	display: flex;
+	position: absolute;
+	bottom: 12px;
+	left: 12px;
+	right: 12px;
+`
+
+export const ButtonSpacer = styled.span`
+	margin-right: 12px;
+`
+
+export const ButtonMessage = styled.div`
+	display: flex;
+	flex-grow: 1;
+	opacity: 0.5;
+`

src/ui/components/NativeInfo.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { NativeParams } from "../../utils/types"
+
+export class NativeInfo extends React.Component<NativeParams> {
+	render() {
+		switch (this.props.state) {
+			case "outdated":
+				return (
+					<small>
+						Native <b>outdated</b>: v{this.props.version}
+					</small>
+				)
+
+			case "connected":
+				return <small>Native connected: v{this.props.version}</small>
+
+			default:
+				return null
+		}
+	}
+}

src/ui/index.ts

@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client"
 import { extendPromise, rejectPromise, resolvePromise } from "../messaging"
 import { SerialPortData } from "../serial/types"
 import { PopupRequest } from "../utils/types"
-import { PortChooser } from "./PortChooser"
+import { PortChooser } from "./pages/PortChooser"
 
 async function renderAndWait<T>(
 	component: any,

src/ui/PortChooser.tsx → src/ui/pages/PortChooser.tsx

@@ -1,35 +1,21 @@
 import React from "react"
-import styled from "styled-components"
-import { listAvailablePorts } from "../messaging"
-import { SerialPortData } from "../serial/types"
-import { CommonProps } from "./Common"
-import { Button } from "./components/Button"
-import { List } from "./components/List"
-
-const MessageContainer = styled.div`
-	position: relative;
-	min-height: 40px;
-	padding-right: 56px;
-`
-
-const ReloadButton = styled(Button)`
-	position: absolute;
-	top: 50%;
-	right: 0;
-	transform: translateY(-50%);
-`
-
-const ButtonContainer = styled.div`
-	position: absolute;
-	bottom: 12px;
-	right: 12px;
-`
-
-const ButtonSpacer = styled.span`
-	margin-right: 12px;
-`
+import { getNativeParams, listAvailablePorts } from "../../messaging"
+import { SerialPortData } from "../../serial/types"
+import { NativeParams } from "../../utils/types"
+import {
+	ButtonContainer,
+	ButtonMessage,
+	ButtonSpacer,
+	CommonProps,
+	MessageContainer,
+	ReloadButton,
+} from "../components/Common"
+import { NativeInfo } from "../components/NativeInfo"
+import { Button } from "../controls/Button"
+import { List } from "../controls/List"
 
 type PortChooserState = {
+	params: NativeParams | null
 	ports: SerialPortData[] | null
 	error?: any
 	active: number | null
@@ -41,7 +27,7 @@ export class PortChooser extends React.Component<
 > {
 	constructor(props: CommonProps) {
 		super(props)
-		this.state = { ports: null, active: null }
+		this.state = { params: null, ports: null, active: null }
 		this.handleItemClick = this.handleItemClick.bind(this)
 		this.handleRefresh = this.handleRefresh.bind(this)
 		this.handleOkClick = this.handleOkClick.bind(this)
@@ -53,13 +39,19 @@ export class PortChooser extends React.Component<
 	}
 
 	async handleRefresh() {
-		this.setState({ ports: null, active: null })
+		this.setState({ params: null, ports: null, active: null })
 		try {
+			const params = await getNativeParams()
+			this.setState({ params })
+			if (params.state !== "connected") {
+				this.setState({ ports: null })
+				return
+			}
 			const ports = await listAvailablePorts(
 				this.props.origin,
 				this.props.options
 			)
-			this.setState({ ports })
+			this.setState({ params, ports })
 		} catch (error) {
 			this.setState({ error })
 		}
@@ -99,6 +91,14 @@ export class PortChooser extends React.Component<
 
 				<hr />
 
+				{!this.state.params &&
+					!this.state.ports &&
+					!this.state.error && (
+						<small>Looking for serial ports...</small>
+					)}
+				{this.state.params && !this.state.ports && (
+					<small>Couldn't connect to native app</small>
+				)}
 				{this.state.ports && (
 					<List
 						items={this.state.ports.map(
@@ -111,9 +111,6 @@ export class PortChooser extends React.Component<
 				{this.state.ports && this.state.ports.length == 0 && (
 					<small>No serial ports found</small>
 				)}
-				{!this.state.ports && !this.state.error && (
-					<small>Looking for serial ports...</small>
-				)}
 				{this.state.error && (
 					<small>
 						Failed to enumerate serial ports:{" "}
@@ -122,6 +119,11 @@ export class PortChooser extends React.Component<
 				)}
 
 				<ButtonContainer>
+					<ButtonMessage>
+						{this.state.params && (
+							<NativeInfo {...this.state.params} />
+						)}
+					</ButtonMessage>
 					<Button text="Cancel" onClick={this.handleCancelClick} />
 					<ButtonSpacer />
 					<Button

src/utils/types.ts

@@ -1,5 +1,6 @@
 export type BackgroundRequest = {
 	action:
+		| "getNativeParams"
 		| "getPorts"
 		| "requestPort"
 		| "listAvailablePorts"
@@ -29,3 +30,10 @@ export type PopupRequest = {
 	origin?: string
 	options?: SerialPortRequestOptions
 }
+
+export type NativeParams = {
+	state: "checking" | "not-installed" | "error" | "outdated" | "connected"
+	version?: string
+	protocol?: number
+	wsPort?: number
+}