[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 '';
+  },
 });

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

@@ -8,52 +8,52 @@
       Keep these in sorted order by id="". See also http://goo.gl/Y1OdAq
       -->
       <g id="address">
-        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 11.88 14.12 16.19 12 18.88C9.92 16.21 7 11.85 7 9ZM14.5 9C14.5 10.3807 13.3807 11.5 12 11.5C10.6193 11.5 9.5 10.3807 9.5 9C9.5 7.61929 10.6193 6.5 12 6.5C13.3807 6.5 14.5 7.61929 14.5 9Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 11.88 14.12 16.19 12 18.88C9.92 16.21 7 11.85 7 9ZM14.5 9C14.5 10.3807 13.3807 11.5 12 11.5C10.6193 11.5 9.5 10.3807 9.5 9C9.5 7.61929 10.6193 6.5 12 6.5C13.3807 6.5 14.5 7.61929 14.5 9Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
       </g>
       <g id="audio-file">
-        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M6 8C7.1 8 8 8.9 8 10V14C8 15.1 7.1 16 6 16C4.9 16 4 15.1 4 14V10C4 8.9 4.9 8 6 8ZM16 10V14C16 15.1 16.9 16 18 16C19.1 16 20 15.1 20 14V10C20 8.9 19.1 8 18 8C16.9 8 16 8.9 16 10ZM10 6V18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18V6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M6 8C7.1 8 8 8.9 8 10V14C8 15.1 7.1 16 6 16C4.9 16 4 15.1 4 14V10C4 8.9 4.9 8 6 8ZM16 10V14C16 15.1 16.9 16 18 16C19.1 16 20 15.1 20 14V10C20 8.9 19.1 8 18 8C16.9 8 16 8.9 16 10ZM10 6V18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18V6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
       </g>
       <g id="google-docs-file">
-        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM17.01 9H7V7H17.01V9V9ZM17.01 13H7V11H17.01V13V13ZM14.01 17H7V15H14.01V17V17Z" fill="#4285F4"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM17.01 9H7V7H17.01V9V9ZM17.01 13H7V11H17.01V13V13ZM14.01 17H7V15H14.01V17V17Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
       </g>
       <g id="google-sheets-file">
-        <circle cx="34" cy="34" r="34" fill="#e6f4ea"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3.01 3.9 3.01 5L3 8V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM19 11H11V19H9V11H5V9H9V5H11V9H19V11V11Z" fill="#34A853"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, rgb(230, 244, 234))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M19 3H5C3.9 3 3.01 3.9 3.01 5L3 8V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3V3ZM19 11H11V19H9V11H5V9H9V5H11V9H19V11V11Z" style="fill: var(--nearby-preview-color, rgb(30, 142, 162))"></path>
       </g>
       <g id="google-slides-file">
-        <circle cx="34" cy="34" r="34" fill="#fef7e0"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M18.9998 3H4.99977C3.89977 3 3.00977 3.9 3.00977 5V19C3.00977 20.1 3.89977 21 4.99977 21H18.9998C20.0998 21 20.9998 20.1 20.9998 19V5C20.9998 3.9 20.0998 3 18.9998 3V3ZM18.9998 16H4.99977V8H18.9998V16V16Z" fill="#F4B400"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-yellow-50))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M18.9998 3H4.99977C3.89977 3 3.00977 3.9 3.00977 5V19C3.00977 20.1 3.89977 21 4.99977 21H18.9998C20.0998 21 20.9998 20.1 20.9998 19V5C20.9998 3.9 20.0998 3 18.9998 3V3ZM18.9998 16H4.99977V8H18.9998V16V16Z" style="fill: var(--nearby-preview-color, rgb(249, 171, 0))"></path>
       </g>
       <g id="image-video-file">
-        <rect x="5" height="68" width="58" rx="4" fill="#e8f0fe"></rect>
-        <path transform="translate(16 16)" fill-rule="evenodd" d="M14 8v6a9 9 0 1 0 10 11h7v-17zm10 17a9 9 0 0 0 -10 -11v11h10z" fill="#aecbfa"></path>
+        <rect x="5" height="68" width="58" rx="4" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></rect>
+        <path transform="translate(16 16)" fill-rule="evenodd" d="M14 8v6a9 9 0 1 0 10 11h7v-17zm10 17a9 9 0 0 0 -10 -11v11h10z" style="fill: var(--nearby-preview-color, var(--google-blue-200))"></path>
       </g>
       <g id="multiple-file">
-        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M15 1H8C6.9 1 6.01 1.9 6.01 3L6 17C6 18.1 6.89 19 7.99 19H19C20.1 19 21 18.1 21 17V7L15 1ZM18 23H4C2.9 23 2 22.1 2 21V7H4V21H18V23ZM8 3V17H19V8H14V3H8Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M15 1H8C6.9 1 6.01 1.9 6.01 3L6 17C6 18.1 6.89 19 7.99 19H19C20.1 19 21 18.1 21 17V7L15 1ZM18 23H4C2.9 23 2 22.1 2 21V7H4V21H18V23ZM8 3V17H19V8H14V3H8Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
       </g>
       <g id="pdf-file">
-        <circle cx="34" cy="34" r="34" fill="#fce8e6"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM8 11.5H7V10.5H8V11.5ZM9.5 11.5C9.5 12.33 8.83 13 8 13H7V15H5.5V9H8C8.83 9 9.5 9.67 9.5 10.5V11.5ZM17 10.5H19.5V9H15.5V15H17V13H18.5V11.5H17V10.5ZM14.5 13.5C14.5 14.33 13.83 15 13 15H10.5V9H13C13.83 9 14.5 9.67 14.5 10.5V13.5ZM13 13.5H12V10.5H13V13.5Z" fill="#EA4335"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, rgb(252, 232, 230))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM8 11.5H7V10.5H8V11.5ZM9.5 11.5C9.5 12.33 8.83 13 8 13H7V15H5.5V9H8C8.83 9 9.5 9.67 9.5 10.5V11.5ZM17 10.5H19.5V9H15.5V15H17V13H18.5V11.5H17V10.5ZM14.5 13.5C14.5 14.33 13.83 15 13 15H10.5V9H13C13.83 9 14.5 9.67 14.5 10.5V13.5ZM13 13.5H12V10.5H13V13.5Z" style="fill: var(--nearby-preview-color, var(--google-red-600))"></path>
       </g>
       <g id="phone">
-        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M17 1H7C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1 17 1ZM7 6H17V16H7V6ZM7 21H17V18H7V21ZM7 4V3H17V4H7ZM14 19H10V20H14V19Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M17 1H7C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1 17 1ZM7 6H17V16H7V6ZM7 21H17V18H7V21ZM7 4V3H17V4H7ZM14 19H10V20H14V19Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
       </g>
       <g id="text">
-        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M3.59961 6H20.3996V8.4H3.59961V6ZM3.59961 10.8H20.3996V13.2H3.59961V10.8ZM13.1996 15.6H3.59961V18H13.1996V15.6Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M3.59961 6H20.3996V8.4H3.59961V6ZM3.59961 10.8H20.3996V13.2H3.59961V10.8ZM13.1996 15.6H3.59961V18H13.1996V15.6Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
       </g>
       <g id="unknown-file">
-        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M6 2H14L20 8V20C20 21.1 19.1 22 18 22H5.99C4.89 22 4 21.1 4 20L4.01 4C4.01 2.9 4.9 2 6 2ZM6 4V20H18V9H13V4H6Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M6 2H14L20 8V20C20 21.1 19.1 22 18 22H5.99C4.89 22 4 21.1 4 20L4.01 4C4.01 2.9 4.9 2 6 2ZM6 4V20H18V9H13V4H6Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
       </g>
       <g id="url">
-        <circle cx="34" cy="34" r="34" fill="#e8f0fe"></circle>
-        <path fill-rule="evenodd" transform="translate(22 22)" d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15ZM17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7ZM16 11H8V13H16V11Z" fill="#1a73e8"></path>
+        <circle cx="34" cy="34" r="34" style="fill: var(--nearby-preview-background-color, var(--google-blue-50))"></circle>
+        <path fill-rule="evenodd" transform="translate(22 22)" d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15ZM17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7ZM16 11H8V13H16V11Z" style="fill: var(--nearby-preview-color, var(--google-blue-600))"></path>
       </g>
     </defs>
   </svg>