From ad005a3f1c6c4814fbf4f14fc8f7ae9e4af088c8 Mon Sep 17 00:00:00 2001
From: cTn <ctndesigner@gmail.com>
Date: Fri, 24 Oct 2014 16:55:42 +0200
Subject: [PATCH] revamped option part of firmware flasher UI

---
 _locales/en/messages.json  | 18 +++++++----
 tabs/firmware_flasher.css  | 15 +++++----
 tabs/firmware_flasher.html | 62 +++++++++++++++++++++-----------------
 tabs/firmware_flasher.js   |  6 ++--
 4 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 788ae0bd70..f69c85642e 100644
--- a/_locales/en/messages.json
+++ b/_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": {
-        "message": "Use 115200 baudrate for flashing"
+    "firmwareFlasherFlashSlowlyDescription": {
+        "message": "Use 115200 baudrate for flashing (useful for flashing via bluetooth)"
     },
     "firmwareFlasherButtonLoadLocal": {
         "message": "Load Firmware [Local]"
diff --git a/tabs/firmware_flasher.css b/tabs/firmware_flasher.css
index 49401f38ae..8b646a0d8d 100644
--- a/tabs/firmware_flasher.css
+++ b/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;
     }
diff --git a/tabs/firmware_flasher.html b/tabs/firmware_flasher.html
index 8208b7484e..1fdb04abdf 100644
--- a/tabs/firmware_flasher.html
+++ b/tabs/firmware_flasher.html
@@ -4,33 +4,41 @@
         <span class="progressLabel" i18n="firmwareFlasherLoadFirmwareFile"></span>
     </div>
     <div class="note">
-        <p i18n="firmwareFlasherNote">
-        </p>
-        <label>
-            <input class="updating" type="checkbox" />
-            <span i18n="firmwareFlasherNoReboot"></span>
-        </label>
-        <div class="clear-both"></div>
-        <label class="flash_on_connect_wrapper">
-            <input class="flash_on_connect" type="checkbox" />
-            <span i18n="firmwareFlasherFlashOnConnect"></span><br />
-        </label>
-        <div class="clear-both"></div>
-        <label>
-            <input class="erase_chip" type="checkbox" />
-            <span i18n="firmwareFlasherFullChipErase"></span>
-        </label>
-        <div class="clear-both"></div>
-        <label i18n_title="firmwareFlasherFlashDevelopmentFirmwareTitle">
-            <input class="flash_development_firmware" type="checkbox" />
-            <span i18n="firmwareFlasherFlashDevelopmentFirmware"></span>
-        </label>
-        <div class="clear-both"></div>
-        <label i18n_title="firmwareFlasherFlashSlowlyTitle">
-            <input class="flash_slowly" type="checkbox" />
-            <span i18n="firmwareFlasherFlashSlowly"></span>
-        </label>
-        <div class="clear-both"></div>
+        <div class="option">
+            <label>
+                <input class="updating" type="checkbox" />
+                <span i18n="firmwareFlasherNoReboot"></span>
+            </label>
+            <span class="description" i18n="firmwareFlasherNoRebootDescription"></span>
+        </div>
+        <div class="option flash_on_connect_wrapper">
+            <label>
+                <input class="flash_on_connect" type="checkbox" />
+                <span i18n="firmwareFlasherFlashOnConnect"></span>
+            </label>
+            <span class="description" i18n="firmwareFlasherFlashOnConnectDescription"></span>
+        </div>
+        <div class="option">
+            <label>
+                <input class="erase_chip" type="checkbox" />
+                <span i18n="firmwareFlasherFullChipErase"></span>
+            </label>
+            <span class="description" i18n="firmwareFlasherFullChipEraseDescription"></span>
+        </div>
+        <div class="option">
+            <label>
+                <input class="flash_development_firmware" type="checkbox" />
+                <span i18n="firmwareFlasherFlashDevelopmentFirmware"></span>
+            </label>
+            <span class="description" i18n="firmwareFlasherFlashDevelopmentFirmwareDescription"></span>
+        </div>
+        <div class="option">
+            <label>
+                <input class="flash_slowly" type="checkbox" />
+                <span i18n="firmwareFlasherFlashSlowly"></span>
+            </label>
+            <span class="description" i18n="firmwareFlasherFlashSlowlyDescription"></span>
+        </div>
     </div>
     <div class="clear-both"></div>
     <div class="git_info">
diff --git a/tabs/firmware_flasher.js b/tabs/firmware_flasher.js
index c3c6914b9b..8f90a3b840 100644
--- a/tabs/firmware_flasher.js
+++ b/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});