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] 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);