fix(GUI): improve usbboot USB device branding (#1780)

- Add a loading SVG icon while usbboot is running
- Make the device description more user friendly

Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>

lib/gui/assets/loading.svg

@@ -0,0 +1,37 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#5793db">
+    <g fill="none" fill-rule="evenodd" stroke-width="2">
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                begin="0s" dur="1.8s"
+                values="1; 20"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.165, 0.84, 0.44, 1"
+                repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                begin="0s" dur="1.8s"
+                values="1; 0"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.3, 0.61, 0.355, 1"
+                repeatCount="indefinite" />
+        </circle>
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                begin="-0.9s" dur="1.8s"
+                values="1; 20"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.165, 0.84, 0.44, 1"
+                repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                begin="-0.9s" dur="1.8s"
+                values="1; 0"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.3, 0.61, 0.355, 1"
+                repeatCount="indefinite" />
+        </circle>
+    </g>
+</svg>

lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html

@@ -11,7 +11,7 @@
       ng-click="modal.toggleDrive(drive)">
         <img class="list-group-item-section" alt="Drive device type logo"
           ng-if="drive.icon"
-          ng-src="./assets/device-types/{{drive.icon}}.svg"
+          ng-src="./assets/{{drive.icon}}.svg"
           width="25"
           height="30">
         <div class="list-group-item-section list-group-item-section-expanded">

lib/shared/sdk/usbboot/index.js

@@ -328,12 +328,14 @@ exports.scan = (options) => {
 
     device.device = idPair
     device.displayName = 'Initializing device'
+    device.description = 'Compute Module'
     device.raw = idPair
     device.size = null
     device.mountpoints = []
     device.protected = false
     device.system = false
     device.disabled = true
+    device.icon = 'loading'
     device.adaptor = exports.name
 
     // We need to open the device in order to access _configDescriptor
@@ -362,9 +364,7 @@ exports.scan = (options) => {
 
     const endpoint = deviceInterface.endpoint(addresses.endpoint)
 
-    return usb.getDeviceName(device).then((deviceName) => {
-      device.description = `${deviceName.manufacturer} ${deviceName.product}`
-    }).then(() => {
+    return Bluebird.try(() => {
       const serialNumberIndex = device.deviceDescriptor.iSerialNumber
       debug(`Serial number index: ${serialNumberIndex}`)
 

lib/shared/sdk/usbboot/usb.js

@@ -142,29 +142,3 @@ exports.performControlTransfer = (device, options) => {
     )
   })
 }
-
-/**
- * @summary Get a human friendly name for a USB device
- * @function
- * @public
- *
- * @description
- * This function assumes the device is open.
- *
- * @param {Object} device - usb device
- * @fulfil {String} - device name
- * @returns {Promise}
- *
- * @example
- * usb.getDeviceName({ ... }).then((name) => {
- *   console.log(name)
- * })
- */
-exports.getDeviceName = (device) => {
-  return Bluebird.props({
-    manufacturer: exports.getDeviceStringFromIndex(device, device.deviceDescriptor.iManufacturer),
-    product: exports.getDeviceStringFromIndex(device, device.deviceDescriptor.iProduct)
-  }).tap((properties) => {
-    return `${properties.manufacturer} ${properties.product}`
-  })
-}