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,140 +138,199 @@ class App extends Component {
         return _("optionsUserAgentWhitelistInvalidMatchPattern", info);
     }
 
+    async updateBridgeInfo () {
+        this.setState({
+            bridgeLoading: true
+        });
+
+        const bridgeInfo = await getBridgeInfo();
+
+        this.setState({
+            bridgeInfo
+          , bridgeLoading: false
+        });
+    }
+
     render () {
         return (
-            <form id="form" ref={ form => { this.form = form; }}
-                    onSubmit={ this.handleFormSubmit }
-                    onChange={ this.handleFormChange }>
-                <fieldset className="category">
-                    <legend className="category__name">
-                        { _("optionsMediaCategoryName") }
-                    </legend>
-                    <p className="category__description">
-                        { _("optionsMediaCategoryDescription") }
-                    </p>
+            <div>
+                <form id="form" ref={ form => { this.form = form; }}
+                        onSubmit={ this.handleFormSubmit }
+                        onChange={ this.handleFormChange }>
 
-                    <label className="option option--inline">
-                        <input name="mediaEnabled"
-                               type="checkbox"
-                               checked={ this.state.options.mediaEnabled }
-                               onChange={ this.handleInputChange } />
-                        <div className="option__label">
-                            { _("optionsMediaEnabled") }
-                        </div>
-                    </label>
-
-                    <fieldset className="category"
-                              disabled={ !this.state.options.mediaEnabled }>
+                    <fieldset className="category">
                         <legend className="category__name">
-                            { _("optionsLocalMediaCategoryName") }
+                            { _("optionsMediaCategoryName") }
                         </legend>
                         <p className="category__description">
-                            { _("optionsLocalMediaCategoryDescription") }
+                            { _("optionsMediaCategoryDescription") }
                         </p>
 
                         <label className="option option--inline">
-                            <input name="localMediaEnabled"
+                            <input name="mediaEnabled"
                                    type="checkbox"
-                                   checked={ this.state.options.localMediaEnabled }
+                                   checked={ this.state.options.mediaEnabled }
                                    onChange={ this.handleInputChange } />
                             <div className="option__label">
-                                { _("optionsLocalMediaEnabled") }
+                                { _("optionsMediaEnabled") }
+                            </div>
+                        </label>
+
+                        <fieldset className="category"
+                                  disabled={ !this.state.options.mediaEnabled }>
+                            <legend className="category__name">
+                                { _("optionsLocalMediaCategoryName") }
+                            </legend>
+                            <p className="category__description">
+                                { _("optionsLocalMediaCategoryDescription") }
+                            </p>
+
+                            <label className="option option--inline">
+                                <input name="localMediaEnabled"
+                                       type="checkbox"
+                                       checked={ this.state.options.localMediaEnabled }
+                                       onChange={ this.handleInputChange } />
+                                <div className="option__label">
+                                    { _("optionsLocalMediaEnabled") }
+                                </div>
+                            </label>
+
+                            <label className="option">
+                                <div className="option__label">
+                                    { _("optionsLocalMediaServerPort") }
+                                </div>
+                                <input name="localMediaServerPort"
+                                       type="number"
+                                       required
+                                       min="1025"
+                                       max="65535"
+                                       value={ this.state.options.localMediaServerPort }
+                                       onChange={ this.handleInputChange } />
+                            </label>
+                        </fieldset>
+                    </fieldset>
+
+                    <fieldset className="category">
+                        <legend className="category__name">
+                            { _("optionsMirroringCategoryName") }
+                        </legend>
+                        <p className="category__description">
+                            { _("optionsMirroringCategoryDescription") }
+                        </p>
+
+                        <label className="option option--inline">
+                            <input name="mirroringEnabled"
+                                   type="checkbox"
+                                   checked={ this.state.options.mirroringEnabled }
+                                   onChange={ this.handleInputChange } />
+                            <div className="option__label">
+                                { _("optionsMirroringEnabled") }
                             </div>
                         </label>
 
                         <label className="option">
                             <div className="option__label">
-                                { _("optionsLocalMediaServerPort") }
+                                { _("optionsMirroringAppId") }
                             </div>
-                            <input name="localMediaServerPort"
-                                   type="number"
+                            <input name="mirroringAppId"
+                                   type="text"
                                    required
-                                   min="1025"
-                                   max="65535"
-                                   value={ this.state.options.localMediaServerPort }
+                                   value={ this.state.options.mirroringAppId }
                                    onChange={ this.handleInputChange } />
                         </label>
                     </fieldset>
-                </fieldset>
 
-                <fieldset className="category">
-                    <legend className="category__name">
-                        { _("optionsMirroringCategoryName") }
-                    </legend>
-                    <p className="category__description">
-                        { _("optionsMirroringCategoryDescription") }
-                    </p>
+                    <fieldset className="category">
+                        <legend className="category__name">
+                            { _("optionsUserAgentWhitelistCategoryName") }
+                        </legend>
+                        <p className="category__description">
+                            { _("optionsUserAgentWhitelistCategoryDescription") }
+                        </p>
 
-                    <label className="option option--inline">
-                        <input name="mirroringEnabled"
-                               type="checkbox"
-                               checked={ this.state.options.mirroringEnabled }
-                               onChange={ this.handleInputChange } />
-                        <div className="option__label">
-                            { _("optionsMirroringEnabled") }
+                        <label className="option option--inline">
+                            <input name="userAgentWhitelistEnabled"
+                                   type="checkbox"
+                                   checked={ this.state.options.userAgentWhitelistEnabled }
+                                   onChange={ this.handleInputChange } />
+                            <div className="option__label">
+                                { _("optionsUserAgentWhitelistEnabled") }
+                            </div>
+                        </label>
+
+                        <div className="option">
+                            <div className="option__label">
+                                { _("optionsUserAgentWhitelistContent") }
+                            </div>
+                            <EditableList data={ this.state.options.userAgentWhitelist }
+                                          onChange={ this.handleWhitelistChange }
+                                          itemPattern={ MATCH_PATTERN_REGEX }
+                                          itemPatternError={ this.getWhitelistItemPatternError }/>
                         </div>
-                    </label>
+                    </fieldset>
 
-                    <label className="option">
-                        <div className="option__label">
-                            { _("optionsMirroringAppId") }
-                        </div>
-                        <input name="mirroringAppId"
-                               type="text"
-                               required
-                               value={ this.state.options.mirroringAppId }
-                               onChange={ this.handleInputChange } />
-                    </label>
-                </fieldset>
-
-                <fieldset className="category">
-                    <legend className="category__name">
-                        { _("optionsUserAgentWhitelistCategoryName") }
-                    </legend>
-                    <p className="category__description">
-                        { _("optionsUserAgentWhitelistCategoryDescription") }
-                    </p>
-
-                    <label className="option option--inline">
-                        <input name="userAgentWhitelistEnabled"
-                               type="checkbox"
-                               checked={ this.state.options.userAgentWhitelistEnabled }
-                               onChange={ this.handleInputChange } />
-                        <div className="option__label">
-                            { _("optionsUserAgentWhitelistEnabled") }
-                        </div>
-                    </label>
-
-                    <div className="option">
-                        <div className="option__label">
-                            { _("optionsUserAgentWhitelistContent") }
-                        </div>
-                        <EditableList data={ this.state.options.userAgentWhitelist }
-                                      onChange={ this.handleWhitelistChange }
-                                      itemPattern={ MATCH_PATTERN_REGEX }
-                                      itemPatternError={ this.getWhitelistItemPatternError }/>
+                    <div id="buttons">
+                        <button onClick={ this.handleReset }>
+                            { _("optionsReset") }
+                        </button>
+                        <button type="submit"
+                                default
+                                disabled={ !this.state.isFormValid }>
+                            { _("optionsSubmit") }
+                        </button>
                     </div>
-                </fieldset>
+                </form>
 
-                <div id="buttons">
-                    <button onClick={ this.handleReset }>
-                        { _("optionsReset") }
-                    </button>
-                    <button type="submit"
-                            default
-                            disabled={ !this.state.isFormValid }>
-                        { _("optionsSubmit") }
-                    </button>
+                <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>
-            </form>
+            </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 {