From eb30f6bef03e2ae608c7f35c9c4905eeb8a23516 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Wed, 26 Aug 2020 11:44:27 +0200
Subject: [PATCH 1/3] Refactor and clean port_handler.js

---
 src/js/port_handler.js | 177 +++++++++++++++++++++++------------------
 1 file changed, 101 insertions(+), 76 deletions(-)

diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 1c2f26f9..2097f52d 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -2,12 +2,12 @@
 
 const TIMEOUT_CHECK = 500; // With 250 it seems that it produces a memory leak and slowdown in some versions, reason unknown
 
-var usbDevices = { filters: [
+const usbDevices = { filters: [
     {'vendorId': 1155, 'productId': 57105},
-    {'vendorId': 10473, 'productId': 393}
+    {'vendorId': 10473, 'productId': 393},
 ] };
 
-var PortHandler = new function () {
+const PortHandler = new function () {
     this.initial_ports = false;
     this.port_detected_callbacks = [];
     this.port_removed_callbacks = [];
@@ -15,31 +15,45 @@ var PortHandler = new function () {
 };
 
 PortHandler.initialize = function () {
+
+    this.portPickerElement = $('div#port-picker #port');
+
     // start listening, check after TIMEOUT_CHECK ms
     this.check();
 };
 
 PortHandler.check = function () {
-    var self = this;
+
+    const self = this;
+
+    self.check_serial_devices();
+    self.check_usb_devices();
+
+    GUI.updateManualPortVisibility();
+
+    setTimeout(function () {
+        self.check();
+    }, TIMEOUT_CHECK);
+
+};
+
+PortHandler.check_serial_devices = function () {
+    const self = this;
 
     serial.getDevices(function(current_ports) {
         // port got removed or initial_ports wasn't initialized yet
         if (self.array_difference(self.initial_ports, current_ports).length > 0 || !self.initial_ports) {
-            var removed_ports = self.array_difference(self.initial_ports, current_ports);
+            const removed_ports = self.array_difference(self.initial_ports, current_ports);
 
-            if (self.initial_ports != false) {
-                if (removed_ports.length > 1) {
-                    console.log('PortHandler - Removed: ' + removed_ports);
-                } else {
-                    console.log('PortHandler - Removed: ' + removed_ports[0]);
-                }
+            if (self.initial_ports !== false && removed_ports.length > 0) {
+                console.log(`PortHandler - Removed: ${removed_ports}`);
             }
 
             // disconnect "UI" if necessary
             // Keep in mind that this routine can not fire during atmega32u4 reboot procedure !!!
             if (GUI.connected_to) {
-                for (var i = 0; i < removed_ports.length; i++) {
-                    if (removed_ports[i] == GUI.connected_to) {
+                for (let i = 0; i < removed_ports.length; i++) {
+                    if (removed_ports[i] === GUI.connected_to) {
                         $('div#header_btns a.connect').click();
                     }
                 }
@@ -49,8 +63,8 @@ PortHandler.check = function () {
 
             // trigger callbacks (only after initialization)
             if (self.initial_ports) {
-                for (var i = (self.port_removed_callbacks.length - 1); i >= 0; i--) {
-                    var obj = self.port_removed_callbacks[i];
+                for (let i = (self.port_removed_callbacks.length - 1); i >= 0; i--) {
+                    const obj = self.port_removed_callbacks[i];
 
                     // remove timeout
                     clearTimeout(obj.timer);
@@ -59,8 +73,10 @@ PortHandler.check = function () {
                     obj.code(removed_ports);
 
                     // remove object from array
-                    var index = self.port_removed_callbacks.indexOf(obj);
-                    if (index > -1) self.port_removed_callbacks.splice(index, 1);
+                    const index = self.port_removed_callbacks.indexOf(obj);
+                    if (index > -1) {
+                        self.port_removed_callbacks.splice(index, 1);
+                    }
                 }
             }
 
@@ -70,10 +86,10 @@ PortHandler.check = function () {
                     // if last_used_port was set, we try to select it
                     if (result.last_used_port) {
                         current_ports.forEach(function(port) {
-                            if (port == result.last_used_port) {
-                                console.log('Selecting last used port: ' + result.last_used_port);
+                            if (port === result.last_used_port) {
+                                console.log(`Selecting last used port: ${result.last_used_port}`);
 
-                                $('div#port-picker #port').val(result.last_used_port);
+                                self.portPickerElement.val(result.last_used_port);
                             }
                         });
                     } else {
@@ -86,44 +102,40 @@ PortHandler.check = function () {
                 // initialize
                 self.initial_ports = current_ports;
             } else {
-                for (var i = 0; i < removed_ports.length; i++) {
+                for (let i = 0; i < removed_ports.length; i++) {
                     self.initial_ports.splice(self.initial_ports.indexOf(removed_ports[i]), 1);
                 }
             }
         }
 
         // new port detected
-        var new_ports = self.array_difference(current_ports, self.initial_ports);
+        const new_ports = self.array_difference(current_ports, self.initial_ports);
 
         if (new_ports.length) {
-            if (new_ports.length > 1) {
-                console.log('PortHandler - Found: ' + new_ports);
-            } else {
-                console.log('PortHandler - Found: ' + new_ports[0]);
+            if (new_ports.length > 0) {
+                console.log(`PortHandler - Found: ${new_ports}`);
             }
 
             self.update_port_select(current_ports);
 
             // select / highlight new port, if connected -> select connected port
             if (!GUI.connected_to) {
-                $('div#port-picker #port').val(new_ports[0]);
+                self.portPickerElement.val(new_ports[0]);
             } else {
-                $('div#port-picker #port').val(GUI.connected_to);
+                self.portPickerElement.val(GUI.connected_to);
             }
 
             // start connect procedure (if statement is valid)
-            if (GUI.auto_connect && !GUI.connecting_to && !GUI.connected_to) {
+            if (GUI.active_tab !== 'firmware_flasher' && GUI.auto_connect && !GUI.connecting_to && !GUI.connected_to) {
                 // we need firmware flasher protection over here
-                if (GUI.active_tab != 'firmware_flasher') {
-                    GUI.timeout_add('auto-connect_timeout', function () {
-                        $('div#header_btns a.connect').click();
-                    }, 100); // timeout so bus have time to initialize after being detected by the system
-                }
+                GUI.timeout_add('auto-connect_timeout', function () {
+                    $('div#header_btns a.connect').click();
+                }, 100); // timeout so bus have time to initialize after being detected by the system
             }
 
             // trigger callbacks
-            for (var i = (self.port_detected_callbacks.length - 1); i >= 0; i--) {
-                var obj = self.port_detected_callbacks[i];
+            for (let i = (self.port_detected_callbacks.length - 1); i >= 0; i--) {
+                const obj = self.port_detected_callbacks[i];
 
                 // remove timeout
                 clearTimeout(obj.timer);
@@ -132,30 +144,27 @@ PortHandler.check = function () {
                 obj.code(new_ports);
 
                 // remove object from array
-                var index = self.port_detected_callbacks.indexOf(obj);
-                if (index > -1) self.port_detected_callbacks.splice(index, 1);
+                const index = self.port_detected_callbacks.indexOf(obj);
+                if (index > -1) {
+                    self.port_detected_callbacks.splice(index, 1);
+                }
             }
 
             self.initial_ports = current_ports;
         }
-
-        self.check_usb_devices();
-
-        GUI.updateManualPortVisibility();
-        setTimeout(function () {
-            self.check();
-        }, TIMEOUT_CHECK);
     });
+
 };
 
 PortHandler.check_usb_devices = function (callback) {
+    const self = this;
     chrome.usb.getDevices(usbDevices, function (result) {
-        const portPickerElement = $("div#port-picker #port");
-        const dfuElement = portPickerElement.children("[value='DFU']");
+
+        const dfuElement = self.portPickerElement.children("[value='DFU']");
         if (result.length) {
             if (!dfuElement.length) {
-                portPickerElement.append($('<option/>', {value: "DFU", text: "DFU", data: {isDFU: true}}));
-                portPickerElement.val('DFU').change();
+                self.portPickerElement.append($('<option/>', {value: "DFU", text: "DFU", data: {isDFU: true}}));
+                self.portPickerElement.val('DFU').change();
             }
             self.dfu_available = true;
         } else {
@@ -164,40 +173,47 @@ PortHandler.check_usb_devices = function (callback) {
             }
             self.dfu_available = false;
         }
-        if(callback) callback(self.dfu_available);
+        if(callback) {
+            callback(self.dfu_available);
+        }
 
-        if (!$('option:selected', portPickerElement).data().isDFU) {
-            portPickerElement.trigger('change');
+        if (!$('option:selected', self.portPickerElement).data().isDFU) {
+            self.portPickerElement.trigger('change');
         }
     });
 };
 
 PortHandler.update_port_select = function (ports) {
-    const portPickerElement = $("div#port-picker #port");
-    portPickerElement.empty();
 
-    for (var i = 0; i < ports.length; i++) {
-        portPickerElement.append($("<option/>", {value: ports[i], text: ports[i], data: {isManual: false}}));
+    this.portPickerElement.empty();
+
+    for (let i = 0; i < ports.length; i++) {
+        this.portPickerElement.append($("<option/>", {value: ports[i], text: ports[i], data: {isManual: false}}));
     }
 
-    portPickerElement.append($("<option/>", {value: 'manual', i18n: 'portsSelectManual', data: {isManual: true}}));
+    this.portPickerElement.append($("<option/>", {value: 'manual', i18n: 'portsSelectManual', data: {isManual: true}}));
     i18n.localizePage();
 };
 
 PortHandler.port_detected = function(name, code, timeout, ignore_timeout) {
-    var self = this;
-    var obj = {'name': name, 'code': code, 'timeout': (timeout) ? timeout : 10000};
+    const self = this;
+    const obj = {'name': name,
+                 'code': code,
+                 'timeout': (timeout) ? timeout : 10000,
+                };
 
     if (!ignore_timeout) {
         obj.timer = setTimeout(function() {
-            console.log('PortHandler - timeout - ' + obj.name);
+            console.log(`PortHandler - timeout - ${obj.name}`);
 
             // trigger callback
             code(false);
 
             // remove object from array
-            var index = self.port_detected_callbacks.indexOf(obj);
-            if (index > -1) self.port_detected_callbacks.splice(index, 1);
+            const index = self.port_detected_callbacks.indexOf(obj);
+            if (index > -1) {
+                self.port_detected_callbacks.splice(index, 1);
+            }
         }, (timeout) ? timeout : 10000);
     } else {
         obj.timer = false;
@@ -210,19 +226,24 @@ PortHandler.port_detected = function(name, code, timeout, ignore_timeout) {
 };
 
 PortHandler.port_removed = function (name, code, timeout, ignore_timeout) {
-    var self = this;
-    var obj = {'name': name, 'code': code, 'timeout': (timeout) ? timeout : 10000};
+    const self = this;
+    const obj = {'name': name,
+                 'code': code,
+                 'timeout': (timeout) ? timeout : 10000,
+                };
 
     if (!ignore_timeout) {
         obj.timer = setTimeout(function () {
-            console.log('PortHandler - timeout - ' + obj.name);
+            console.log(`PortHandler - timeout - ${obj.name}`);
 
             // trigger callback
             code(false);
 
             // remove object from array
-            var index = self.port_removed_callbacks.indexOf(obj);
-            if (index > -1) self.port_removed_callbacks.splice(index, 1);
+            const index = self.port_removed_callbacks.indexOf(obj);
+            if (index > -1) {
+                self.port_removed_callbacks.splice(index, 1);
+            }
         }, (timeout) ? timeout : 10000);
     } else {
         obj.timer = false;
@@ -236,15 +257,15 @@ PortHandler.port_removed = function (name, code, timeout, ignore_timeout) {
 
 // accepting single level array with "value" as key
 PortHandler.array_difference = function (firstArray, secondArray) {
-    var cloneArray = [];
+    const cloneArray = [];
 
     // create hardcopy
-    for (var i = 0; i < firstArray.length; i++) {
+    for (let i = 0; i < firstArray.length; i++) {
         cloneArray.push(firstArray[i]);
     }
 
-    for (var i = 0; i < secondArray.length; i++) {
-        if (cloneArray.indexOf(secondArray[i]) != -1) {
+    for (let i = 0; i < secondArray.length; i++) {
+        if (cloneArray.indexOf(secondArray[i]) !== -1) {
             cloneArray.splice(cloneArray.indexOf(secondArray[i]), 1);
         }
     }
@@ -253,17 +274,21 @@ PortHandler.array_difference = function (firstArray, secondArray) {
 };
 
 PortHandler.flush_callbacks = function () {
-    var killed = 0;
+    let killed = 0;
 
-    for (var i = this.port_detected_callbacks.length - 1; i >= 0; i--) {
-        if (this.port_detected_callbacks[i].timer) clearTimeout(this.port_detected_callbacks[i].timer);
+    for (let i = this.port_detected_callbacks.length - 1; i >= 0; i--) {
+        if (this.port_detected_callbacks[i].timer) {
+            clearTimeout(this.port_detected_callbacks[i].timer);
+        }
         this.port_detected_callbacks.splice(i, 1);
 
         killed++;
     }
 
-    for (var i = this.port_removed_callbacks.length - 1; i >= 0; i--) {
-        if (this.port_removed_callbacks[i].timer) clearTimeout(this.port_removed_callbacks[i].timer);
+    for (let i = this.port_removed_callbacks.length - 1; i >= 0; i--) {
+        if (this.port_removed_callbacks[i].timer) {
+            clearTimeout(this.port_removed_callbacks[i].timer);
+        }
         this.port_removed_callbacks.splice(i, 1);
 
         killed++;

From 612a4e4e37a1a68fbaf19fc00da513fa3f21a40f Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Wed, 26 Aug 2020 15:38:58 +0200
Subject: [PATCH 2/3] Add description to the port list

---
 src/css/dropdown-lists/css/style_lists.css |  1 +
 src/js/port_handler.js                     | 43 ++++++++++++++++++----
 src/js/serial.js                           |  7 +++-
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/css/dropdown-lists/css/style_lists.css b/src/css/dropdown-lists/css/style_lists.css
index eeeb5c95..f52b2a34 100644
--- a/src/css/dropdown-lists/css/style_lists.css
+++ b/src/css/dropdown-lists/css/style_lists.css
@@ -133,6 +133,7 @@
 .dropdown-dark .dropdown-select {
   color: #a6a6a6;
   text-shadow: 0 1px black;
+  width: calc(100% - 10px);
   /* Fallback for IE 8 */
   background: #444;
 }
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 2097f52d..e781a33d 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -46,7 +46,7 @@ PortHandler.check_serial_devices = function () {
             const removed_ports = self.array_difference(self.initial_ports, current_ports);
 
             if (self.initial_ports !== false && removed_ports.length > 0) {
-                console.log(`PortHandler - Removed: ${removed_ports}`);
+                console.log(`PortHandler - Removed: ${JSON.stringify(removed_ports)}`);
             }
 
             // disconnect "UI" if necessary
@@ -113,14 +113,14 @@ PortHandler.check_serial_devices = function () {
 
         if (new_ports.length) {
             if (new_ports.length > 0) {
-                console.log(`PortHandler - Found: ${new_ports}`);
+                console.log(`PortHandler - Found: ${JSON.stringify(new_ports)}`);
             }
 
             self.update_port_select(current_ports);
 
             // select / highlight new port, if connected -> select connected port
             if (!GUI.connected_to) {
-                self.portPickerElement.val(new_ports[0]);
+                self.portPickerElement.val(new_ports[0].path);
             } else {
                 self.portPickerElement.val(GUI.connected_to);
             }
@@ -163,7 +163,18 @@ PortHandler.check_usb_devices = function (callback) {
         const dfuElement = self.portPickerElement.children("[value='DFU']");
         if (result.length) {
             if (!dfuElement.length) {
-                self.portPickerElement.append($('<option/>', {value: "DFU", text: "DFU", data: {isDFU: true}}));
+                let usbText;
+                if (result[0].productName) {
+                    usbText = (`DFU - ${result[0].productName}`);
+                } else {
+                    usbText = "DFU";
+                }
+
+                self.portPickerElement.append($('<option/>', {
+                    value: "DFU",
+                    text: usbText,
+                    data: {isDFU: true},
+                }));
                 self.portPickerElement.val('DFU').change();
             }
             self.dfu_available = true;
@@ -188,10 +199,25 @@ PortHandler.update_port_select = function (ports) {
     this.portPickerElement.empty();
 
     for (let i = 0; i < ports.length; i++) {
-        this.portPickerElement.append($("<option/>", {value: ports[i], text: ports[i], data: {isManual: false}}));
+        let portText;
+        if (ports[i].displayName) {
+            portText = (`${ports[i].path} - ${ports[i].displayName}`);
+        } else {
+            portText = ports[i].path;
+        }
+
+        this.portPickerElement.append($("<option/>", {
+            value: ports[i].path,
+            text: portText,
+            data: {isManual: false},
+        }));
     }
 
-    this.portPickerElement.append($("<option/>", {value: 'manual', i18n: 'portsSelectManual', data: {isManual: true}}));
+    this.portPickerElement.append($("<option/>", {
+        value: 'manual',
+        i18n: 'portsSelectManual',
+        data: {isManual: true},
+    }));
     i18n.localizePage();
 };
 
@@ -265,8 +291,9 @@ PortHandler.array_difference = function (firstArray, secondArray) {
     }
 
     for (let i = 0; i < secondArray.length; i++) {
-        if (cloneArray.indexOf(secondArray[i]) !== -1) {
-            cloneArray.splice(cloneArray.indexOf(secondArray[i]), 1);
+        const elementExists = cloneArray.findIndex(element => element.path === secondArray[i].path);
+        if (elementExists !== -1) {
+            cloneArray.splice(elementExists, 1);
         }
     }
 
diff --git a/src/js/serial.js b/src/js/serial.js
index 7783deee..59654d72 100644
--- a/src/js/serial.js
+++ b/src/js/serial.js
@@ -280,9 +280,12 @@ var serial = {
     },
     getDevices: function (callback) {
         chrome.serial.getDevices(function (devices_array) {
-            var devices = [];
+            const devices = [];
             devices_array.forEach(function (device) {
-                devices.push(device.path);
+                devices.push({
+                              path:device.path,
+                              displayName: device.displayName,
+                             });
             });
 
             callback(devices);

From 9111503886a574588cc22a2eb61e94353bfe1c85 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Wed, 26 Aug 2020 19:58:01 +0200
Subject: [PATCH 3/3] Sonar and review fixes

---
 src/js/port_handler.js | 28 ++++++++++++++--------------
 src/js/serial.js       |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index e781a33d..e79c621d 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -43,17 +43,17 @@ PortHandler.check_serial_devices = function () {
     serial.getDevices(function(current_ports) {
         // port got removed or initial_ports wasn't initialized yet
         if (self.array_difference(self.initial_ports, current_ports).length > 0 || !self.initial_ports) {
-            const removed_ports = self.array_difference(self.initial_ports, current_ports);
+            const removedPorts = self.array_difference(self.initial_ports, current_ports);
 
-            if (self.initial_ports !== false && removed_ports.length > 0) {
-                console.log(`PortHandler - Removed: ${JSON.stringify(removed_ports)}`);
+            if (self.initial_ports !== false && removedPorts.length > 0) {
+                console.log(`PortHandler - Removed: ${JSON.stringify(removedPorts)}`);
             }
 
             // disconnect "UI" if necessary
             // Keep in mind that this routine can not fire during atmega32u4 reboot procedure !!!
             if (GUI.connected_to) {
-                for (let i = 0; i < removed_ports.length; i++) {
-                    if (removed_ports[i] === GUI.connected_to) {
+                for (let i = 0; i < removedPorts.length; i++) {
+                    if (removedPorts[i] === GUI.connected_to) {
                         $('div#header_btns a.connect').click();
                     }
                 }
@@ -70,7 +70,7 @@ PortHandler.check_serial_devices = function () {
                     clearTimeout(obj.timer);
 
                     // trigger callback
-                    obj.code(removed_ports);
+                    obj.code(removedPorts);
 
                     // remove object from array
                     const index = self.port_removed_callbacks.indexOf(obj);
@@ -102,25 +102,25 @@ PortHandler.check_serial_devices = function () {
                 // initialize
                 self.initial_ports = current_ports;
             } else {
-                for (let i = 0; i < removed_ports.length; i++) {
-                    self.initial_ports.splice(self.initial_ports.indexOf(removed_ports[i]), 1);
+                for (let i = 0; i < removedPorts.length; i++) {
+                    self.initial_ports.splice(self.initial_ports.indexOf(removedPorts[i]), 1);
                 }
             }
         }
 
         // new port detected
-        const new_ports = self.array_difference(current_ports, self.initial_ports);
+        const newPorts = self.array_difference(current_ports, self.initial_ports);
 
-        if (new_ports.length) {
-            if (new_ports.length > 0) {
-                console.log(`PortHandler - Found: ${JSON.stringify(new_ports)}`);
+        if (newPorts.length) {
+            if (newPorts.length > 0) {
+                console.log(`PortHandler - Found: ${JSON.stringify(newPorts)}`);
             }
 
             self.update_port_select(current_ports);
 
             // select / highlight new port, if connected -> select connected port
             if (!GUI.connected_to) {
-                self.portPickerElement.val(new_ports[0].path);
+                self.portPickerElement.val(newPorts[0].path);
             } else {
                 self.portPickerElement.val(GUI.connected_to);
             }
@@ -141,7 +141,7 @@ PortHandler.check_serial_devices = function () {
                 clearTimeout(obj.timer);
 
                 // trigger callback
-                obj.code(new_ports);
+                obj.code(newPorts);
 
                 // remove object from array
                 const index = self.port_detected_callbacks.indexOf(obj);
diff --git a/src/js/serial.js b/src/js/serial.js
index 59654d72..88c5d999 100644
--- a/src/js/serial.js
+++ b/src/js/serial.js
@@ -283,7 +283,7 @@ var serial = {
             const devices = [];
             devices_array.forEach(function (device) {
                 devices.push({
-                              path:device.path,
+                              path: device.path,
                               displayName: device.displayName,
                              });
             });