[Nearby] Pulse animation on high-visibility receive page.

This adds a "pulse" animation to the high-visibility receive page,
which gives a visual indication that the device is actively waiting to
receive shares from other devices.

Screenshot:
  https://screenshot.googleplex.com/3wpVaUZyn57BL8x.png

Spec:
  https://carbon.googleplex.com/cros-ux/pages/nearby-share/motion

Bug: b:163147651
Change-Id: I035d78c42cfe1a27e38bf34a39e7083d9038c4a7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2503827
Commit-Queue: Michael Hansen <hansenmichael@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Cr-Commit-Position: refs/heads/master@{#821854}

chrome/browser/resources/nearby_share/shared/nearby_shared_resources.grd

@@ -13,7 +13,7 @@
   <release seq="1">
     <includes>
       <include name="IDR_NEARBY_SHARE_PULSE_ANIMATION_JSON"
-               file="nearby_share_pulse_animation.json" type="BINDATA"/>
+               file="nearby_share_pulse_animation.json" type="BINDATA" compress="false"/>
 
       <!-- Shared Polymer 2 pages-->
       <include name="IDR_NEARBY_CONTACT_MANAGER_HTML"

chrome/browser/resources/settings/chromeos/nearby_share_page/BUILD.gn

@@ -69,6 +69,7 @@ js_library("nearby_share_high_visibility_page") {
   deps = [
     "../localized_link:localized_link",
     "//chrome/browser/resources/nearby_share/shared:nearby_page_template",
+    "//ui/webui/resources/cr_elements/cr_lottie:cr_lottie",
     "//ui/webui/resources/js:i18n_behavior",
   ]
 }
@@ -208,6 +209,7 @@ js_library("nearby_share_high_visibility_page.m") {
   deps = [
     "../localized_link:localized_link.m",
     "//chrome/browser/resources/nearby_share/shared:nearby_page_template.m",
+    "//ui/webui/resources/cr_elements/cr_lottie:cr_lottie.m",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
   extra_deps = [ ":nearby_share_high_visibility_page_module" ]

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_lottie/cr_lottie.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="../localized_link/localized_link.html">
@@ -15,6 +16,7 @@
         display: flex;
         flex-direction: column-reverse;
         height: 100%;
+        position: relative;
         width: 100%;
       }
 
@@ -40,6 +42,14 @@
         margin-inline-end: 12px;
         width: 20px;
       }
+
+      cr-lottie {
+        bottom: -100px;
+        height: 200px;
+        opacity: 80%;
+        position: absolute;
+        zoom: 150%;
+      }
     </style>
     <nearby-page-template title="$i18n{nearbyShareFeatureName}"
         sub-title="[[getSubTitle_(deviceName)]]"
@@ -55,6 +65,9 @@
             </settings-localized-link>
           </div>
         </div>
+        <cr-lottie animation-url="nearby_share_pulse_animation.json"
+            autoplay="true">
+        </cr-lottie>
       </div>
     </nearby-page-template>
   </template>

chrome/browser/ui/webui/settings/shared_settings_localized_strings_provider.cc

@@ -27,6 +27,7 @@
 #include "content/public/browser/web_ui_data_source.h"
 #include "content/public/common/content_features.h"
 #include "media/base/media_switches.h"
+#include "services/network/public/mojom/content_security_policy.mojom.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/webui/web_ui_util.h"
 
@@ -279,6 +280,14 @@ void AddNearbyShareData(content::WebUIDataSource* html_source) {
   html_source->AddBoolean(
       "nearbySharingFeatureFlag",
       base::FeatureList::IsEnabled(features::kNearbySharing));
+
+  // To use lottie, the worker-src CSP needs to be updated for the web ui that
+  // is using it. Since as of now there are only a couple of webuis using
+  // lottie animations, this update has to be performed manually. As the usage
+  // increases, set this as the default so manual override is no longer
+  // required.
+  html_source->OverrideContentSecurityPolicy(
+      network::mojom::CSPDirectiveName::WorkerSrc, "worker-src blob: 'self';");
 }
 
 }  // namespace settings