Improve bridge info section

ext/src/_locales/en/messages.json

@@ -18,32 +18,44 @@
     }
 
 
-  , "optionsBridgeCategoryName": {
-        "message": "Bridge"
-    }
-  , "optionsBridgeCategoryDescription": {
-        "message": "Native bridge application."
-    }
   , "optionsBridgeLoading": {
         "message": "Loading bridge info..."
     }
-  , "optionsBridgeMissing": {
+  , "optionsBridgeFoundStatusText": {
-        "message": "Bridge application not found. Try downloading and installing the latest version."
+        "message": "Bridge found"
+    }
+  , "optionsBridgeNotFoundStatusText": {
+        "message": "Bridge not found. Try downloading and installing the latest version."
     }
   , "optionsBridgeInfo": {
         "message": "Bridge info:"
     }
-  , "optionsBridgeStatusCompatible": {
+  , "optionsBridgeStatsVersion": {
-        "message": "STATUS: COMPATIBLE"
+        "message": "Version:"
     }
-  , "optionsBridgeStatusIncompatible": {
+  , "optionsBridgeStatsExpectedVersion": {
-        "message": "STATUS: INCOMPATIBLE"
+        "message": "Expected version:"
     }
-  , "optionsBridgeOlder": {
+  , "optionsBridgeStatsCompatibility": {
-        "message": "Bridge version older than expected, try updating bridge to the latest bridge version."
+        "message": "Compatibility:"
     }
-  , "optionsBridgeNewer": {
+  , "optionsBridgeStatsRecommendedAction": {
-        "message": "Bridge version newer than expected, try updating extension to the latest bridge version."
+        "message": "Recommended action:"
+    }
+  , "optionsBridgeCompatible": {
+        "message": "COMPATIBLE"
+    }
+  , "optionsBridgeIncompatible": {
+        "message": "INCOMPATIBLE"
+    }
+  , "optionsBridgeOlderAction": {
+        "message": "Bridge version older than expected, try updating bridge to the latest version."
+    }
+  , "optionsBridgeNewerAction": {
+        "message": "Bridge version newer than expected, try updating extension to the latest version."
+    }
+  , "optionsBridgeNoAction": {
+        "message": "No action needed."
     }
 
   , "optionsMediaCategoryName": {
@@ -66,7 +78,7 @@
         "message": "Local media casting enabled"
     }
   , "optionsLocalMediaServerPort": {
-        "message": "HTTP server port"
+        "message": "HTTP server port:"
     }
 
   , "optionsUserAgentWhitelistCategoryName": {
@@ -79,7 +91,7 @@
         "message": "Site whitelist enabled"
     }
   , "optionsUserAgentWhitelistContent": {
-        "message": "Match patterns (newline-separated)"
+        "message": "Match patterns (newline-separated):"
     }
   , "optionsUserAgentWhitelistBasicView": {
         "message": "Basic View"
@@ -113,7 +125,7 @@
         "message": "Screen mirroring enabled"
     }
   , "optionsMirroringAppId": {
-        "message": "Receiver app ID"
+        "message": "Receiver app ID:"
     }
 
   , "optionsReset": {

ext/src/options/index.jsx

@@ -165,13 +165,84 @@ class App extends Component {
     render () {
         return (
             <div>
+
+                <div className="bridge">
+                    { do {
+                        if (this.state.bridgeLoading) {
+                            <div className="bridge__loading">
+                                { _("optionsBridgeLoading") }
+                                <progress></progress>
+                            </div>
+                        } else {
+                            const { bridgeInfo } = this.state;
+
+                            const bridgeInfoClasses = `bridge__info ${bridgeInfo
+                                ? "bridge__info--found"
+                                : "bridge__info--not-found"}`;
+
+                            <div className={bridgeInfoClasses}>
+                                <div className="bridge__status">
+                                    <img className="bridge__status-icon"
+                                         width="60" height="60"
+                                         src={ bridgeInfo
+                                                ? "assets/icons8-ok-120.png"
+                                                : "assets/icons8-cancel-120.png" } />
+
+                                    <h2 className="bridge__status-text">
+                                        { bridgeInfo
+                                            ? _("optionsBridgeFoundStatusText")
+                                            : _("optionsBridgeNotFoundStatusText") }
+                                    </h2>
+                                </div>
+
+                                { do { if (bridgeInfo) {
+                                    <table className="bridge__stats">
+                                        <tr>
+                                            <th>{ _("optionsBridgeStatsVersion") }</th>
+                                            <td>{ bridgeInfo.version }</td>
+                                        </tr>
+                                        <tr>
+                                            <th>{ _("optionsBridgeStatsExpectedVersion") }</th>
+                                            <td>{ APPLICATION_VERSION }</td>
+                                        </tr>
+                                        <tr>
+                                            <th>{ _("optionsBridgeStatsCompatibility") }</th>
+                                            <td>
+                                                { bridgeInfo.isVersionCompatible
+                                                    ? _("optionsBridgeCompatible")
+                                                    : _("optionsBridgeIncompatible") }
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>{ _("optionsBridgeStatsRecommendedAction") }</th>
+                                            <td>
+                                                { do {
+                                                    if (bridgeInfo.isVersionOlder) {
+                                                        _("optionsBridgeOlderAction")
+                                                    } else if (bridgeInfo.isVersionNewer) {
+                                                        _("optionsBridgeNewerAction")
+                                                    } else {
+                                                        _("optionsBridgeNoAction")
+                                                    }
+                                                }}
+                                            </td>
+                                        </tr>
+                                    </table>
+                                } else {
+                                    // TODO: Download links
+                                }}}
+                            </div>
+                        }
+                    }}
+                </div>
+
                 <form id="form" ref={ form => { this.form = form; }}
                         onSubmit={ this.handleFormSubmit }
                         onChange={ this.handleFormChange }>
 
                     <fieldset className="category">
                         <legend className="category__name">
-                            { _("optionsMediaCategoryName") }
+                            <h2>{ _("optionsMediaCategoryName") }</h2>
                         </legend>
                         <p className="category__description">
                             { _("optionsMediaCategoryDescription") }
@@ -190,7 +261,7 @@ class App extends Component {
                         <fieldset className="category"
                                   disabled={ !this.state.options.mediaEnabled }>
                             <legend className="category__name">
-                                { _("optionsLocalMediaCategoryName") }
+                                <h2>{ _("optionsLocalMediaCategoryName") }</h2>
                             </legend>
                             <p className="category__description">
                                 { _("optionsLocalMediaCategoryDescription") }
@@ -223,7 +294,7 @@ class App extends Component {
 
                     <fieldset className="category">
                         <legend className="category__name">
-                            { _("optionsMirroringCategoryName") }
+                            <h2>{ _("optionsMirroringCategoryName") }</h2>
                         </legend>
                         <p className="category__description">
                             { _("optionsMirroringCategoryDescription") }
@@ -253,7 +324,7 @@ class App extends Component {
 
                     <fieldset className="category">
                         <legend className="category__name">
-                            { _("optionsUserAgentWhitelistCategoryName") }
+                            <h2>{ _("optionsUserAgentWhitelistCategoryName") }</h2>
                         </legend>
                         <p className="category__description">
                             { _("optionsUserAgentWhitelistCategoryDescription") }
@@ -276,7 +347,7 @@ class App extends Component {
                             <EditableList data={ this.state.options.userAgentWhitelist }
                                           onChange={ this.handleWhitelistChange }
                                           itemPattern={ MATCH_PATTERN_REGEX }
-                                          itemPatternError={ this.getWhitelistItemPatternError }/>
+                                          itemPatternError={ this.getWhitelistItemPatternError } />
                         </div>
                     </fieldset>
 
@@ -298,47 +369,6 @@ 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>
         );
     }

ext/src/options/styles/index.css

@@ -28,7 +28,7 @@
 
 
 .bridge {
-    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .bridge,
@@ -58,14 +58,52 @@
     margin-top: 5px;
 }
 
-.bridge__found {
+.bridge__info {
-    margin-top: 5px;
+    display: flex;
 }
 
-.bridge__info {
+.bridge__status {
-    height: 150px;
+    align-items: center;
-    margin-inline-start: 5px;
+    display: flex;
-    width: 80%;
+    flex-basis: min-content;
+    flex-direction: column;
+    margin-inline-end: 50px;
+    margin-inline-start: 25px;
+}
+
+.bridge__status-text {
+    margin: initial;
+    font-weight: 500;
+    font-size: 1.5em;
+    white-space: nowrap;
+}
+
+.bridge__info--not-found .bridge__status {
+    flex-direction: row;
+}
+.bridge__info--found .bridge__status-icon {
+    margin-block-end: 5px;
+}
+.bridge__info--not-found .bridge__status-icon {
+    margin-inline-end: 10px;
+}
+.bridge__info--not-found .bridge__status-text {
+    font-weight: normal;
+    white-space: normal;
+}
+
+.bridge__stats {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: max-content;
+}
+
+.bridge__stats th {
+    font-weight: 500;
+    padding-inline-end: 10px;
+    text-align: end;
+    white-space: nowrap;
+    vertical-align: top;
 }
 
 
@@ -73,7 +111,7 @@
     border: initial;
     display: grid;
     grid-template-columns: 150px 1fr;
-    grid-column-gap: 20px;
+    grid-column-gap: 10px;
     grid-row-gap: 5px;
     margin: initial;
     padding: 10px 0;
@@ -83,13 +121,13 @@
     color: graytext;
 }
 
-.category:not(:first-of-type) {
+#form > .category {
     border-top: 1px solid var(--border-color);
 }
 
 .category > .category {
     padding: 5px 0;
-    box-shadow: inset 6px 0 0 0 var(--border-color);
+    box-shadow: inset 2px 0 0 0 var(--border-color);
 }
 
 .category > .category > .category__name,
@@ -101,11 +139,19 @@
     float: left;
 }
 
+.category__name > h2 {
+    font-size: 1.15em;
+    font-weight: 500;
+    margin: initial;
+}
+
 .category__description {
     color: graytext;
     margin-top: initial;
+    max-width: 60ch;
 }
 
+.category__name,
 .category__description,
 .category .category {
     grid-column: span 2;