Added introduction to Unified Targets. (#1725)

Added introduction to Unified Targets.

Author: mikeller

locales/en/messages.json

@@ -2692,6 +2692,9 @@
     "firmwareFlasherOnlineSelectBoardDescription": {
         "message": "Select your board to see available online firmware releases - Select the correct firmware appropriate for your board."
     },
+    "firmwareFlasherOnlineSelectBoardHint": {
+        "message": "Starting with Betaflight 4.1, Betaflight is introducing support for <strong>Unified Targets</strong>. The concept of Unified Targets means that the same firmware .hex file can be used for all boards using the same MCU (F4, F7). To make the different boards work with the same firmware, a specific configuration file is deployed alongside the firmware when a Unified Target is flashed.<br>This version of Betaflight configurator supports flashing of Unified Targets with the respective board specific configurations in one step. The different firmware types that are available for each board are shown in the drop-down as follows:<br><br><strong>&lt;board name&gt;</strong> or<br><strong>&lt;board name&gt; (Legacy)</strong>:<br>non-unified target, or pre-4.1 versions of the firmware for Unified Targets.<br><br><strong>&lt;board name&gt; (&lt;manufacturer id&gt;)</strong>:<br>(4 character manufacturer id)<br>Unified Target.<br><br><strong>Please use Unified Targets where available.</strong> If you encounter problems using a Unified Target, please open an <a href=\"https://github.com/betaflight/betaflight/issues\" target=\"_blank\" rel=\"noopener noreferrer\">issue</a> and then use the non-unified target until the issue has been resolved."
+    },
     "firmwareFlasherOnlineSelectFirmwareVersionDescription": {
         "message": "Select firmware version for your board."
     },

src/css/main.css

@@ -1961,6 +1961,9 @@ button.active {
     max-width: 180px;
 }
 
+.jBox-Widetip {
+    max-width: 300px;
+}
 
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
 

src/js/gui.js

@@ -360,6 +360,20 @@ GUI_control.prototype.content_ready = function (callback) {
             outside: 'x'
         });
 
+        new jBox('Tooltip', {
+            theme: 'Widetip',
+            attach: '.cf_tip_wide',
+            trigger: 'mouseenter',
+            closeOnMouseleave: true,
+            closeOnClick: 'body',
+            delayOpen: 100,
+            delayClose: 100,
+            position: {
+                x: 'right',
+                y: 'center'
+            },
+            outside: 'x'
+        });
     });
 
     if (callback) callback();

src/tabs/firmware_flasher.html

@@ -26,7 +26,7 @@
                         <td><select name="board">
                                 <option value="0" i18n="firmwareFlasherOptionLoading">Loading ...</option>
                         </select></td>
-                        <td><span class="description" i18n="firmwareFlasherOnlineSelectBoardDescription"></span></td>
+                        <td><span class="description" i18n="firmwareFlasherOnlineSelectBoardDescription"></span><div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOnlineSelectBoardHint"/></td>
                     </tr>
                     <tr>
                         <td><select name="firmware_version">