[Nearby] Set file preview icons grey on error

The file preview icon on the discovery page and confirmation page needs
to be grey whenever those pages are in an error state. This CL adds a
|disabled| property to nearby-preview that when true applies a css
class that makes the icon grey.

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

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -92,7 +92,9 @@
         cancel-button-event-name="[[getCancelEventName_(needsConfirmation_)]]">
   <div id="centerContent" slot="content">
     <div id="processRow">
-      <nearby-preview send-preview="[[sendPreview]]"></nearby-preview>
+      <nearby-preview send-preview="[[sendPreview]]"
+          disabled="[[errorTitle_]]">
+      </nearby-preview>
       <div id="confirmationToken">
         <template is="dom-if" if="[[confirmationToken_]]">
           [[i18n('nearbyShareSecureConnectionId', confirmationToken_)]]

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -132,7 +132,9 @@
         autoplay="true">
     </cr-lottie>
     <div id="process-row">
-      <nearby-preview send-preview="[[sendPreview]]"></nearby-preview>
+      <nearby-preview send-preview="[[sendPreview]]"
+          disabled="[[errorTitle_]]">
+      </nearby-preview>
       <div id="placeholder"
           hidden="[[!isShareTargetsEmpty_(shareTargets_.*)]]">
         $i18n{nearbyShareDiscoveryPagePlaceholder}

chrome/browser/resources/nearby_share/nearby_preview.html

@@ -6,6 +6,11 @@
     width: 68px;
   }
 
+  iron-icon.disabled {
+    --nearby-preview-color: var(--google-grey-600);
+    --nearby-preview-background-color: var(--google-grey-200);
+  }
+
   #title {
     color: var(--google-grey-900);
     font-size: 13px;
@@ -20,5 +25,7 @@
   }
 </style>
 
-<iron-icon icon="[[getIronIconName_(sendPreview)]]"></iron-icon>
+<iron-icon class$="[[getIconClass_(disabled)]]"
+    icon="[[getIronIconName_(sendPreview)]]">
+</iron-icon>
 <div id="title">[[getTitle_(sendPreview)]]</div>

chrome/browser/resources/nearby_share/nearby_preview.js

@@ -31,6 +31,14 @@ Polymer({
       value: null,
     },
 
+    /**
+     * Controls whether the icon should be greyed out.
+     * @type {boolean}
+     */
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /**
@@ -94,4 +102,15 @@ Polymer({
         return 'nearbysharetype68:unknown-file';
     }
   },
+
+  /**
+   * @return {string} The css class to be applied to the icon.
+   * @private
+   */
+  getIconClass_() {
+    if (this.disabled) {
+      return 'disabled';
+    }
+    return '';
+  },
 });