Add bridge debug info to options page

app/src/main.js

@@ -97,11 +97,11 @@ async function handleMessage (message) {
 
 
     switch (message.subject) {
-        case "bridge:initialize": {
+        case "bridge:getInfo": {
             const extensionVersion = message.data;
 
             return {
-                subject: "main:bridgeInitialized"
+                subject: "main:bridgeInfo"
               , data: __applicationVersion
             };
         };

ext/src/_locales/en/messages.json

@@ -18,6 +18,34 @@
     }
 
 
+  , "optionsBridgeCategoryName": {
+        "message": "Bridge"
+    }
+  , "optionsBridgeCategoryDescription": {
+        "message": "Native bridge application."
+    }
+  , "optionsBridgeLoading": {
+        "message": "Loading bridge info..."
+    }
+  , "optionsBridgeMissing": {
+        "message": "Bridge application not found. Try downloading and installing the latest version."
+    }
+  , "optionsBridgeInfo": {
+        "message": "Bridge info:"
+    }
+  , "optionsBridgeStatusCompatible": {
+        "message": "STATUS: COMPATIBLE"
+    }
+  , "optionsBridgeStatusIncompatible": {
+        "message": "STATUS: INCOMPATIBLE"
+    }
+  , "optionsBridgeOlder": {
+        "message": "Bridge version older than expected, try updating bridge to the latest bridge version."
+    }
+  , "optionsBridgeNewer": {
+        "message": "Bridge version newer than expected, try updating extension to the latest bridge version."
+    }
+
   , "optionsMediaCategoryName": {
         "message": "Media casting"
     }

ext/src/lib/getBridgeInfo.js

@@ -0,0 +1,37 @@
+import semver from "semver";
+
+export default async function getBridgeInfo () {
+    let applicationVersion;
+    try {
+        const response = await browser.runtime.sendNativeMessage(
+                APPLICATION_NAME
+              , { subject: "bridge:getInfo"
+                , data: EXTENSION_VERSION });
+
+        applicationVersion = response.data;
+    } catch (err) {
+        return null;
+    }
+
+    /**
+     * Compare installed bridge version to the version the
+     * extension was built alongside and is known to be
+     * compatible with.
+     *
+     * TODO: Determine compatibility with semver and enforce/notify
+     * user.
+     */
+    if (applicationVersion !== APPLICATION_VERSION) {
+        console.error(`Expecting ${APPLICATION_NAME} v${APPLICATION_VERSION}, found v${applicationVersion}.`
+              , semver.lt(applicationVersion, APPLICATION_VERSION)
+                    ? "Try updating the native app to the latest version."
+                    : "Try updating the extension to the latest version");
+    }
+
+    return {
+        version: applicationVersion
+      , isVersionCompatible: applicationVersion === APPLICATION_VERSION
+      , isVersionOlder: semver.lt(applicationVersion, APPLICATION_VERSION)
+      , isVersionNewer: semver.gt(applicationVersion, APPLICATION_VERSION)
+    };
+}

ext/src/main.js

@@ -340,12 +340,6 @@ function initBridge (tabId, frameId) {
         bridgeMap.set(tabId, port);
     }
 
-    // Start version handoff
-    port.postMessage({
-        subject: "bridge:initialize"
-      , data: EXTENSION_VERSION
-    });
-
     port.onDisconnect.addListener(p => {
         if (p.error) {
             console.error(`${APPLICATION_NAME} disconnected:`, p.error.message);
@@ -431,27 +425,6 @@ messageRouter.register("main", async (message, sender) => {
             break;
         };
 
-        case "main:bridgeInitialized": {
-            const applicationVersion = message.data;
-
-            /**
-             * Compare installed bridge version to the version the
-             * extension was built alongside and is known to be
-             * compatible with.
-             *
-             * TODO: Determine compatibility with semver and enforce/notify
-             * user.
-             */
-            if (applicationVersion !== APPLICATION_VERSION) {
-                console.error(`Expecting ${APPLICATION_NAME} v${APPLICATION_VERSION}, found v${applicationVersion}.`
-                      , semver.lt(applicationVersion, APPLICATION_VERSION)
-                            ? "Try updating the native app to the latest version."
-                            : "Try updating the extension to the latest version");
-            }
-
-            break;
-        };
-
         case "main:openPopup": {
             await openPopup(tabId);
             break;

ext/src/options/index.jsx

@@ -6,6 +6,8 @@ import ReactDOM from "react-dom";
 import defaultOptions from "./defaultOptions";
 import EditableList from "./EditableList";
 
+import getBridgeInfo from "../lib/getBridgeInfo";
+
 
 const _ = browser.i18n.getMessage;
 
@@ -41,6 +43,8 @@ class App extends Component {
 
         this.state = {
             options: props.options
+          , bridgeInfo: null
+          , bridgeLoading: true
           , isFormValid: true
         };
 
@@ -54,6 +58,14 @@ class App extends Component {
                 = this.getWhitelistItemPatternError.bind(this);
     }
 
+    async componentDidMount () {
+        const bridgeInfo = await getBridgeInfo();
+        this.setState({
+            bridgeInfo
+          , bridgeLoading: false
+        });
+    }
+
     /**
      * Set stored option values to current state
      */
@@ -126,11 +138,26 @@ class App extends Component {
         return _("optionsUserAgentWhitelistInvalidMatchPattern", info);
     }
 
+    async updateBridgeInfo () {
+        this.setState({
+            bridgeLoading: true
+        });
+
+        const bridgeInfo = await getBridgeInfo();
+
+        this.setState({
+            bridgeInfo
+          , bridgeLoading: false
+        });
+    }
+
     render () {
         return (
+            <div>
                 <form id="form" ref={ form => { this.form = form; }}
                         onSubmit={ this.handleFormSubmit }
                         onChange={ this.handleFormChange }>
+
                     <fieldset className="category">
                         <legend className="category__name">
                             { _("optionsMediaCategoryName") }
@@ -253,13 +280,57 @@ class App extends Component {
                         </button>
                     </div>
                 </form>
+
+                <div className="bridge">
+                    { do {
+                        if (this.state.bridgeLoading) {
+                            <div className="bridge__loading">
+                                { _("optionsBridgeLoading") }
+                                <progress></progress>
+                            </div>
+                        } else if (this.state.bridgeInfo) {
+                            const bridgeInfo = this.state.bridgeInfo;
+                            let debugInfo =
+                                `${bridgeInfo.isVersionCompatible
+                                    ? _("optionsBridgeStatusCompatible")
+                                    : _("optionsBridgeStatusIncompatible")}\n\n`
+                              + `${APPLICATION_NAME} v${bridgeInfo.version}\n`
+                              + `Expected: ${APPLICATION_VERSION}\n`
+                              + `Found: ${bridgeInfo.version}\n`;
+
+                            if (bridgeInfo.isVersionOlder) {
+                                debugInfo += `\n${_("optionsBridgeOlder")}`
+                            }
+                            if (bridgeInfo.isVersionNewer) {
+                                debugInfo += `\n${_("optionsBridgeNewer")}`
+                            }
+
+                            <div>
+                                { _("optionsBridgeInfo") }
+                                <div className="bridge__found">
+                                    <textarea className="bridge__info">{ debugInfo }</textarea>
+                                </div>
+                            </div>
+                        } else {
+                            <div>
+                                { _("optionsBridgeInfo") }
+                                <div className="bridge__missing">
+                                    { _("optionsBridgeMissing") }
+                                </div>
+                            </div>
+                        }
+                    }}
+                </div>
+            </div>
         );
     }
 }
 
 
-browser.storage.sync.get("options").then(({options}) => {
+(async () => {
+    const { options } = await browser.storage.sync.get("options");
+
     ReactDOM.render(
         <App options={options} />
       , document.querySelector("#root"));
-});
+})()

ext/src/options/styles/index.css

@@ -17,6 +17,48 @@
 }
 
 
+.bridge {
+    margin-top: 20px;
+}
+
+.bridge,
+.bridge__loading {
+    display: flex;
+    flex-direction: column;
+}
+
+.bridge__loading {
+    align-items: center;
+    align-self: center;
+    font-size: 1.25em;
+    font-weight: 300;
+    width: 30%;
+}
+
+.bridge__loading progress {
+    margin-top: 5px;
+    width: 100%;
+}
+
+.bridge__missing {
+    background-color: #d70022;
+    border-radius: 5px;
+    color: white;
+    padding: 5px;
+    margin-top: 5px;
+}
+
+.bridge__found {
+    margin-top: 5px;
+}
+
+.bridge__info {
+    height: 150px;
+    margin-inline-start: 5px;
+    width: 80%;
+}
+
+
 .category {
     border: initial;
     display: grid;
@@ -24,7 +66,7 @@
     grid-column-gap: 20px;
     grid-row-gap: 5px;
     margin: initial;
-    padding: 15px 0;
+    padding: 10px 0;
 }
 
 .category:disabled {