[Nearby] Receive Confirm Page: Hide progress on error, fix icon colors

The receive confirmation page uses <nearby-progress> with "progress=0"
to show a device preview while hiding the progressbar. This mostly
works, unless there is an error, in which case the progress bar is
shown in red at 100%. This CL allows explicitly turning off progress
so that is is not shown regardless of the error state.

Use "--iron-icon-fill-color" in <nearby-progress> instead of "color" to
set the device icon color, since the "color" property was getting
overridden.

Finally, grey out the <nearby-preview> on the receive confirmation page
when there's an error to match the behavior on the send confirmation
page.

Screenshot: https://screenshot.googleplex.com/4Nxb6o9tThi3obQ.png

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

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -101,6 +101,7 @@
           </template>
         </div>
         <nearby-progress share-target="[[shareTarget]]"
+            show-indeterminate-progress
             has-error="[[errorTitle_]]">
         </nearby-progress>
       </div>

chrome/browser/resources/nearby_share/shared/nearby_device_icon.html

@@ -22,7 +22,8 @@
       }
 
       #icon {
-        color: var(--nearby-device-icon-color, var(--google-blue-600));
+        --iron-icon-fill-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/shared/nearby_progress.html

@@ -51,8 +51,9 @@
         transition: stroke-dashoffset 400ms ease;
       }
 
-      .unknown-progress #wheel {
-        animation: 1.4s ease-in-out infinite both unknown-progress-animation;
+      .indeterminate-progress #wheel {
+        animation: 1.4s ease-in-out infinite both
+            indeterminate-progress-animation;
         stroke-dasharray: 116;
       }
 
@@ -68,7 +69,7 @@
         top: 0;
       }
 
-      .unknown-progress #svg {
+      .indeterminate-progress #svg {
         animation: 2s linear infinite svg-animation;
       }
 
@@ -76,7 +77,11 @@
         animation: none;
       }
 
-      @keyframes unknown-progress-animation {
+      .hidden #svg {
+        display: none;
+      }
+
+      @keyframes indeterminate-progress-animation {
         0%,
         25% {
           stroke-dashoffset: 115;

chrome/browser/resources/nearby_share/shared/nearby_progress.js

@@ -6,7 +6,7 @@
  * @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 can show either progress as a percentage or
- * an animation if the percentage is unknown.
+ * an animation if the percentage is indeterminate.
  */
 
 Polymer({
@@ -23,21 +23,33 @@ Polymer({
       value: null,
     },
 
+    /**
+     * If true, displays an animation representing an unknown amount of
+     * progress; otherwise, the progress bar is hidden.
+     * @type {boolean}
+     */
+    showIndeterminateProgress: {
+      type: Boolean,
+      value: false,
+    },
+
+    // TODO(crbug.com/1165852) Remove percentage option, not used in practice
     /**
      * 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}
+     * @type {number}
      */
-    progress: {
+    progressPercentage: {
       type: Number,
-      value: null,
+      value: 0,
       observer: 'updateProgress_',
     },
 
     /**
-     * If true, then set progress stroke to red, and if in indeterminate mode,
-     * stop the animation and show 100% instead.
+     * If true, then set progress stroke to red, stop any animation, show
+     * 100% instead, and set icons to grey. If |showProgress| is |NONE|, then
+     * the progress bar is still hidden.
      * @type {boolean}
      */
     hasError: {
@@ -50,13 +62,16 @@ Polymer({
    * @return {string} The css class to be applied to the progress wheel.
    */
   getProgressWheelClass_() {
+    const classes = [];
     if (this.hasError) {
-      return 'has-error';
+      classes.push('has-error');
     }
-    if (this.progress === null) {
-      return 'unknown-progress';
+    if (this.showIndeterminateProgress) {
+      classes.push('indeterminate-progress');
+    } else if (!this.progressPercentage) {
+      classes.push('hidden');
     }
-    return '';
+    return classes.join(' ');
   },
 
   /**
@@ -64,9 +79,7 @@ Polymer({
    * @param {?number} value
    */
   updateProgress_(value) {
-    if (value !== null && value !== undefined) {
-      this.updateStyles({'--progress-percentage': value});
-    }
+    this.updateStyles({'--progress-percentage': value});
   },
 
   /**
@@ -74,7 +87,7 @@ Polymer({
    * @return {number} The tabindex to be applied to the progress wheel.
    */
   getProgressBarTabIndex_() {
-    if (this.progress && !this.hasError) {
+    if (this.showIndeterminateProgress && !this.hasError) {
       return 0;
     }
     return -1;

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_confirm_page.html

@@ -83,19 +83,17 @@
       <div id="centerContent" slot="content">
         <div id="processRow">
           <div id="processRowContent">
-            <!-- nearby-progress is used with progress=0 to disable progress 
-                 ring and animation -->
             <nearby-progress id="progressIcon"
                 share-target="[[shareTarget]]"
-                has-error="[[errorTitle_]]"
-                progress="0">
+                has-error="[[errorTitle_]]">
             </nearby-progress>
             <div id="connectionToken" aria-live="polite">
               <template is="dom-if" if="[[connectionToken]]">
                 [[i18n('nearbyShareSecureConnectionId', connectionToken)]]
               </template>
             </div>
-            <nearby-preview payload-preview="[[shareTarget.payloadPreview]]">
+            <nearby-preview payload-preview="[[shareTarget.payloadPreview]]"
+                disabled="[[errorTitle_]]">
             </nearby-preview>
           </div>
         </div>