(rebase) change firmware flasher to button and change name

locales/en/messages.json

@@ -3834,5 +3834,8 @@
     },
     "modeCameraChangeMode": {
         "message": "CAMERA CHANGE MODE"
+    },
+    "flashTab": {
+        "message": "Update Firmware"
     }
 }

src/css/main.css

@@ -119,7 +119,7 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .headerbar {
-    height:110px;
+    height:115px;
     width:100%;
     background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
 }
@@ -1458,6 +1458,18 @@ dialog {
     margin-left: 20px;
 }
 
+/* firmware update button */
+.open_firmware_flasher {
+    position: relative;
+    float: right;
+    left: 0px;
+    top: 19px;
+    height: 70px;
+    width: 60px;
+    margin-right: 20px;
+    margin-left: 20px;
+}
+
 .connect_b {
     float: left;
 }
@@ -1504,6 +1516,67 @@ dialog {
     background-color: #f21212;
 }
 
+.firmware_b {
+    float: left;
+}
+
+.firmware_b a {
+    height: 50px;
+    width: 50px;
+    border-radius: 100px;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
+    float: left;
+    margin-left: 5px;
+    margin-bottom: 7px;
+    transition: none;
+}
+
+.firmware_b a.connect.disabled {
+    background-color: #808080;
+    pointer-events: none;
+    cursor: default;
+ }
+
+.firmware_b a.connect {
+    background-color: #ffbb00;
+    border: 1px solid #dba718;
+    background-image: url(../images/icons/cf_icon_flasher_white.svg);
+    background-repeat: no-repeat;
+    background-size: 30px;
+    background-position: center 10px;
+    transition: none;
+}
+
+.firmware_b a.connect:hover {
+    background-color: #ffcc3f;
+}
+
+.firmware_b a.connect.active {
+    background-color: #e60000;
+    border: 1px solid #fe0000;
+    background-image: url(../images/icons/cf_icon_flasher_white.svg);
+    transition: none;
+}
+
+.firmware_b a.connect.active:hover {
+    background-color: #f21212;
+}
+
+.firmware_b a.connect.active {
+    background-color: #e60000;
+    border: 1px solid #fe0000;
+    background-image: url(../images/icons/cf_icon_flasher_white.svg);
+    transition: none;
+}
+
+.firmware_b a.connect.active:hover {
+    background-color: #f21212;
+}
+
+.tab_firmware_flasher {
+    display:none;
+}
+
 .connect_state {
     float: left;
     height: 20px;
@@ -1516,6 +1589,18 @@ dialog {
     margin-top: -1px;
 }
 
+.flash_state {
+    float: left;
+    height: 20px;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-size: 12px;
+    font-family: 'open_sansregular', Arial;
+    text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
+    margin-top: -1px;
+}
+
 /* fixing padding for all Tabs*/
 .tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .tab-failsafe, .tab-firmware_flasher,
     .tab-gps, .tab-help, .tab-led-strip, .tab-logging, .tab-modes, .tab-motors, .tab-pid_tuning, .tab-ports, .tab-receiver,

src/js/main.js

@@ -78,6 +78,7 @@ function setupAnalytics(result) {
     }
 
     $('.connect_b a.connect').removeClass('disabled');
+    $('.firmware_b a.connect').removeClass('disabled');
 }
 
 //Process to execute to real start the app
@@ -149,7 +150,13 @@ function startProcess() {
                 return;
             }
 
-            if (GUI.allowedTabs.indexOf(tab) < 0) {
+            if (GUI.allowedTabs.indexOf(tab) < 0 && tabName == "Firmware Flasher") {
+                if (GUI.connected_to || GUI.connecting_to) {
+                    $('a.connect').click();
+                } else {
+                    self.disconnect();
+                }
+            } else if (GUI.allowedTabs.indexOf(tab) < 0) {
                 GUI.log(i18n.getMessage('tabSwitchUpgradeRequired', [tabName]));
                 return;
             }

src/js/serial_backend.js

@@ -82,6 +82,11 @@ function initializeSerialBackend() {
        }
     });
 
+    $('div.open_firmware_flasher a.connect').click(function () {
+        $('#tabs ul.mode-disconnected .tab_firmware_flasher a').click();
+        $('div.open_firmware_flasher a.flash_state').text(i18n.getMessage('flashTab'));
+    });
+
     // auto-connect
     chrome.storage.local.get('auto_connect', function (result) {
         if (result.auto_connect === 'undefined' || result.auto_connect) {

src/main.html

@@ -129,6 +129,12 @@
                 </div>
                 <a class="connect_state" i18n="connect"></a>
             </div>
+            <div class="open_firmware_flasher">
+                <div class="firmware_b">
+                    <a class="connect disabled" href="#"></a>
+                </div>
+                <a class="flash_state" i18n="flashTab"></a>
+            </div>
             <div id="portsinput">
                 <div class="dropdown dropdown-dark">
                     <select class="dropdown-select" id="port" i18n_title="firmwareFlasherManualPort">