revamped option part of firmware flasher UI

_locales/en/messages.json

@@ -649,29 +649,35 @@
     "firmwareFlasherLoadFirmwareFile": {
         "message": "Please load firmware file"
     },
-    "firmwareFlasherNote": {
-        "message": "If you are flashing board with bootloader pins <strong>shorted/connected</strong>, check <strong>No reboot sequence</strong>.<br />If you want configuration data to be wiped, check <strong>Full Chip Erase</strong><br />If you are flashing via bluetooth adapter or using external usb to serial adapter, check <strong>Flash slowly</strong><br />"
-    },
     "firmwareFlasherNoReboot": {
         "message": "No reboot sequence"
     },
+    "firmwareFlasherNoRebootDescription": {
+        "message": "Check if you are flashing board with bootloader pins shorted"
+    },
     "firmwareFlasherFlashOnConnect": {
         "message": "Flash on connect"
     },
+    "firmwareFlasherFlashOnConnectDescription": {
+        "message": "Attempt to flash the board automatically (triggered by newly detected serial port)"
+    },
     "firmwareFlasherFullChipErase": {
         "message": "Full Chip Erase"
     },
+    "firmwareFlasherFullChipEraseDescription": {
+        "message": "Wipes all configuration data currently stored on the board"
+    },
     "firmwareFlasherFlashDevelopmentFirmware": {
         "message": "Use Development Firmware"
     },
-    "firmwareFlasherFlashDevelopmentFirmwareTitle": {
+    "firmwareFlasherFlashDevelopmentFirmwareDescription": {
         "message": "Flash most recent (untested) development firmware"
     },
     "firmwareFlasherFlashSlowly": {
         "message": "Flash slowly"
     },
-    "firmwareFlasherFlashSlowlyTitle": {
+    "firmwareFlasherFlashSlowlyDescription": {
-        "message": "Use 115200 baudrate for flashing"
+        "message": "Use 115200 baudrate for flashing (useful for flashing via bluetooth)"
     },
     "firmwareFlasherButtonLoadLocal": {
         "message": "Load Firmware [Local]"

tabs/firmware_flasher.css

@@ -53,17 +53,13 @@
                 background-color: #A62E32;
             }
 .tab-firmware_flasher .note {
+    position: relative;
+
     margin-bottom: 10px;
     padding: 5px;
 
     border: 1px dotted silver;
 }
-    .tab-firmware_flasher .note p {
-        margin-bottom: 5px;
-    }
-    .tab-firmware_flasher .note label {
-        float: left;
-    }
     .tab-firmware_flasher .note label input {
         float: left;
         margin-top: 2px;
@@ -72,6 +68,13 @@
         font-weight: bold;
         margin-left: 6px;
     }
+    .tab-firmware_flasher .note .description {
+        position: absolute;
+        left: 200px;
+
+        font-style: italic;
+        color: #818181;
+    }
     .tab-firmware_flasher .note .flash_on_connect_wrapper {
         display: none;
     }

tabs/firmware_flasher.html

@@ -4,33 +4,41 @@
         <span class="progressLabel" i18n="firmwareFlasherLoadFirmwareFile"></span>
     </div>
     <div class="note">
-        <p i18n="firmwareFlasherNote">
+        <div class="option">
-        </p>
             <label>
                 <input class="updating" type="checkbox" />
                 <span i18n="firmwareFlasherNoReboot"></span>
             </label>
-        <div class="clear-both"></div>
+            <span class="description" i18n="firmwareFlasherNoRebootDescription"></span>
-        <label class="flash_on_connect_wrapper">
+        </div>
+        <div class="option flash_on_connect_wrapper">
+            <label>
                 <input class="flash_on_connect" type="checkbox" />
-            <span i18n="firmwareFlasherFlashOnConnect"></span><br />
+                <span i18n="firmwareFlasherFlashOnConnect"></span>
             </label>
-        <div class="clear-both"></div>
+            <span class="description" i18n="firmwareFlasherFlashOnConnectDescription"></span>
+        </div>
+        <div class="option">
             <label>
                 <input class="erase_chip" type="checkbox" />
                 <span i18n="firmwareFlasherFullChipErase"></span>
             </label>
-        <div class="clear-both"></div>
+            <span class="description" i18n="firmwareFlasherFullChipEraseDescription"></span>
-        <label i18n_title="firmwareFlasherFlashDevelopmentFirmwareTitle">
+        </div>
+        <div class="option">
+            <label>
                 <input class="flash_development_firmware" type="checkbox" />
                 <span i18n="firmwareFlasherFlashDevelopmentFirmware"></span>
             </label>
-        <div class="clear-both"></div>
+            <span class="description" i18n="firmwareFlasherFlashDevelopmentFirmwareDescription"></span>
-        <label i18n_title="firmwareFlasherFlashSlowlyTitle">
+        </div>
+        <div class="option">
+            <label>
                 <input class="flash_slowly" type="checkbox" />
                 <span i18n="firmwareFlasherFlashSlowly"></span>
             </label>
-        <div class="clear-both"></div>
+            <span class="description" i18n="firmwareFlasherFlashSlowlyDescription"></span>
+        </div>
     </div>
     <div class="clear-both"></div>
     <div class="git_info">

tabs/firmware_flasher.js

@@ -267,7 +267,7 @@ TABS.firmware_flasher.initialize = function (callback) {
         chrome.storage.local.get('no_reboot_sequence', function (result) {
             if (result.no_reboot_sequence) {
                 $('input.updating').prop('checked', true);
-                $('label.flash_on_connect_wrapper').show();
+                $('.flash_on_connect_wrapper').show();
             } else {
                 $('input.updating').prop('checked', false);
             }
@@ -277,10 +277,10 @@ TABS.firmware_flasher.initialize = function (callback) {
                 var status = $(this).is(':checked');
 
                 if (status) {
-                    $('label.flash_on_connect_wrapper').show();
+                    $('.flash_on_connect_wrapper').show();
                 } else {
                     $('input.flash_on_connect').prop('checked', false).change();
-                    $('label.flash_on_connect_wrapper').hide();
+                    $('.flash_on_connect_wrapper').hide();
                 }
 
                 chrome.storage.local.set({'no_reboot_sequence': status});