feat(GUI): add optional progress bars to drive-selector drives (#1800)

We show a progress bar for any drive objects with a `progress` field
that isn't falsy, e.g. `undefined` or `0`.

Changelog-Type: minor
Changelog-Entry: Add optional progress bars to drive-selector drives.

lib/gui/components/drive-selector/styles/_drive-selector.scss

@@ -71,6 +71,26 @@
     &[disabled] .list-group-item-heading {
       color: $palette-theme-light-soft-foreground;
     }
+
+    progress {
+      appearance: none;
+      width: 100%;
+      height: 2.5px;
+      border: none;
+      border-radius: 50% 50%;
+    }
+
+    progress::-webkit-progress-bar {
+      background-color: $palette-theme-default-background;
+      border: none;
+      outline: none;
+    }
+
+    progress::-webkit-progress-value {
+      border-bottom: 1px solid darken($palette-theme-primary-background, 15);
+      background-color: $palette-theme-primary-background;
+    }
+
   }
 
   .list-group-item-heading {

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

@@ -32,6 +32,7 @@
             </span>
 
           </footer>
+          <progress ng-if="drive.progress" value="{{ drive.progress }}" max="100"></progress>
         </div>
         <span class="list-group-item-section tick tick--success"
           ng-show="modal.constraints.isDriveValid(drive, modal.state.getImage())"

lib/gui/css/main.css

@@ -6403,6 +6403,19 @@ body {
     border-top: 0; }
   .modal-drive-selector-modal .list-group-item[disabled] .list-group-item-heading {
     color: #b3b3b3; }
+  .modal-drive-selector-modal .list-group-item progress {
+    appearance: none;
+    width: 100%;
+    height: 2.5px;
+    border: none;
+    border-radius: 50% 50%; }
+  .modal-drive-selector-modal .list-group-item progress::-webkit-progress-bar {
+    background-color: #ececec;
+    border: none;
+    outline: none; }
+  .modal-drive-selector-modal .list-group-item progress::-webkit-progress-value {
+    border-bottom: 1px solid #296cbd;
+    background-color: #5793db; }
 
 .modal-drive-selector-modal .list-group-item-heading {
   font-size: 13px; }

scripts/html-lint.js

@@ -43,7 +43,10 @@ angularValidate.validate(
     doctype: 'HTML5',
     charset: 'utf-8',
     reportpath: null,
-    reportCheckstylePath: null
+    reportCheckstylePath: null,
+    relaxerror: [
+      'Expected a minus sign or a digit'
+    ]
   }
 ).then((result) => {
   _.each(result.failed, (failure) => {