[Nearby] Stop progress spinner on error

Add new properties |progress| and |hasError| to nearby-progress, which
allow setting a specific progress percentage and disabling the spinner
during error states respectively.

|progress| defaults to null. When null, a waiting animation is shown
where the progress bar spins around the icon. |progress| will be used
in future CLs to set specific progress percentages, but for now, only
the default is used.

|hasError|=true causes the progress bar to be red, icons to be grey,
progress to be 100%, and stops any spinning animation.

Bug: b/163036847
Change-Id: I74d88a1e4efefb6a5e73ba1fd77880b3397bc353
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2542850
Commit-Queue: Curt Clemens <cclem@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Cr-Commit-Position: refs/heads/master@{#828502}

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -98,7 +98,9 @@
           [[i18n('nearbyShareSecureConnectionId', confirmationToken_)]]
         </template>
       </div>
-      <nearby-progress share-target="[[shareTarget]]"></nearby-progress>
+      <nearby-progress share-target="[[shareTarget]]"
+          has-error="[[errorTitle_]]">
+      </nearby-progress>
     </div>
 
     <template is="dom-if" if="[[contactName_(shareTarget)]]">

chrome/browser/resources/nearby_share/nearby_device_icon.html

 <style>
   :host {
-    background-color: rgb(232, 240, 254);
+    background-color: var(--nearby-device-icon-background-color,
+                          var(--google-blue-50));
     border-radius: 50%;
     display: flex;
   }
 
   #icon {
-    color: rgb(26, 115, 232);
+    color: var(--nearby-device-icon-color, var(--google-blue-600));
     height: var(--nearby-device-icon-size, 24px);
     margin: auto;
     width: var(--nearby-device-icon-size, 24px);

chrome/browser/resources/nearby_share/nearby_progress.html

@@ -17,6 +17,11 @@
     width: 70px;
   }
 
+  .has-error #icon {
+    --nearby-device-icon-color: var(--google-grey-600);
+    --nearby-device-icon-background-color: var(--google-grey-200);
+  }
+
   #progress-container {
     display: flex;
     height: 80px;
@@ -25,36 +30,56 @@
     width: 80px;
   }
 
-  #spinner {
-    animation: 1.4s ease-in-out infinite both spinner-animation;
+  #wheel {
     fill: none;
     stroke: var(--google-blue-600);
-    stroke-dasharray: 283;
+    stroke-dasharray: 100;
+    stroke-dashoffset: calc(100 - var(--progress-percentage, 0));
     stroke-linecap: round;
     stroke-width: 2px;
+    transform: rotate(-90deg);
     transform-origin: 50% 50%;
+    transition: stroke-dashoffset 400ms ease;
+  }
+
+  .unknown-progress #wheel {
+    animation: 1.4s ease-in-out infinite both unknown-progress-animation;
+    stroke-dasharray: 116;
+  }
+
+  .has-error #wheel {
+    animation: none;
+    stroke: var(--google-red-600);
+    stroke-dashoffset: 0;
   }
 
   #svg {
-    animation: 2s linear infinite svg-animation;
     left: 0;
     position: absolute;
     top: 0;
   }
 
-  @keyframes spinner-animation {
+  .unknown-progress #svg {
+    animation: 2s linear infinite svg-animation;
+  }
+
+  .has-error #svg {
+    animation: none;
+  }
+
+  @keyframes unknown-progress-animation {
     0%,
     25% {
-      stroke-dashoffset: 280;
+      stroke-dashoffset: 115;
       transform: rotate(0);
     }
     50%,
     75% {
-      stroke-dashoffset: 75;
+      stroke-dashoffset: 30;
       transform: rotate(45deg);
     }
     100% {
-      stroke-dashoffset: 280;
+      stroke-dashoffset: 115;
       transform: rotate(360deg);
     }
   }
@@ -65,9 +90,14 @@
   }
 </style>
 
-<div id="progress-container">
+<div id="progress-container"
+    class$="[[getProgressWheelClass_(progress, hasError)]]">
+  <!-- This svg is inlined so that it can be styled with css; otherwise,
+       it would be better to put it in an iron-icon. -->
   <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
-    <circle id="spinner" cx="40" cy="40" r="39"></circle>
+    <circle id="wheel"
+        cx="40" cy="40" r="39" pathLength="100">
+    </circle>
   </svg>
   <nearby-device-icon id="icon" share-target="[[shareTarget]]">
   </nearby-device-icon>

chrome/browser/resources/nearby_share/nearby_progress.js

@@ -5,8 +5,8 @@
 /**
  * @fileoverview The 'nearby-progress' component shows a progress indicator for
  * a Nearby Share transfer to a remote device. It shows device icon and name,
- * and a circular progress bar that only supports an indeterminate status for
- * now.
+ * and a circular progress bar that can show either progress as a percentage or
+ * an animation if the percentage is unknown.
  */
 
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
@@ -32,5 +32,50 @@ Polymer({
       type: Object,
       value: null,
     },
+
+    /**
+     * The progress percentage to display, expressed as a number between 0 and
+     * 100. If null, then an animation representing an indeterminate state is
+     * shown, unless |hasError| is true.
+     * @type {?number}
+     */
+    progress: {
+      type: Number,
+      value: null,
+      observer: 'updateProgress_',
+    },
+
+    /**
+     * If true, then set progress stroke to red, and if in indeterminate mode,
+     * stop the animation and show 100% instead.
+     * @type {boolean}
+     */
+    hasError: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  /**
+   * @return {string} The css class to be applied to the progress wheel.
+   */
+  getProgressWheelClass_() {
+    if (this.hasError) {
+      return 'has-error';
+    }
+    if (this.progress === null) {
+      return 'unknown-progress';
+    }
+    return '';
+  },
+
+  /**
+   * Updates the css to set the progress percentage displayed to |value|.
+   * @param {?number} value
+   */
+  updateProgress_(value) {
+    if (value !== null && value !== undefined) {
+      this.updateStyles({'--progress-percentage': value});
+    }
   },
 });