[Nearby] Pulse animation on discovery dialog.

This adds a "pulse" animation to the send discovery dialog, which
gives a visual indication that scanning is underway to attempt to
discover other devices to share with.

This animation will also be added to the high-visibility receive dialog
in a separate CL.

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

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

Bug: b:170890753
Change-Id: I7361021ba3ae4fbc03a01d055eb6ba10e5c65716
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2500279
Commit-Queue: Michael Hansen <hansenmichael@google.com>
Reviewed-by: James Vecore <vecore@google.com>
Cr-Commit-Position: refs/heads/master@{#821433}

chrome/browser/resources/nearby_share/BUILD.gn

@@ -82,6 +82,7 @@ js_library("nearby_discovery_page") {
     "//third_party/polymer/v3_0/components-chromium/iron-list",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+    "//ui/webui/resources/cr_elements/cr_lottie:cr_lottie.m",
     "//ui/webui/resources/js:assert.m",
   ]
 }

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -13,6 +13,7 @@
     flex-direction: column;
     flex-grow: 1;
     overflow: hidden;
+    position: relative;
   }
 
   #deviceList {
@@ -62,6 +63,14 @@
     margin-block-start: 48px;
     overflow: hidden;
   }
+
+  cr-lottie {
+    bottom: -100px;
+    height: 200px;
+    opacity: 80%;
+    position: absolute;
+    zoom: 150%;
+  }
 </style>
 
 <nearby-page-template title="$i18n{nearbyShareDiscoveryPageTitle}"
@@ -99,5 +108,8 @@
           inner-h-t-m-l="[[getAriaLabelledHelpText_('https://google.com')]]">
       </div>
     </div>
+    <cr-lottie animation-url="nearby_share_pulse_animation.json"
+        autoplay="true">
+    </cr-lottie>
   </div>
 </nearby-page-template>

chrome/browser/resources/nearby_share/nearby_discovery_page.js

@@ -8,6 +8,7 @@
  */
 
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/cr_lottie/cr_lottie.m.js';
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
 import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
 import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';

chrome/browser/resources/nearby_share/shared/nearby_share_pulse_animation.json

+{"v":"5.6.4","fr":60,"ip":0,"op":190,"w":783,"h":557,"nm":"ripple","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":10,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[391.75,278,0],"ix":2},"a":{"a":0,"k":[32.25,121,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.4,0.4,0.4],"y":[1,1,1]},"o":{"x":[1,1,1],"y":[0,0,0]},"t":57,"s":[100,100,100]},{"i":{"x":[0.4,0.4,0.4],"y":[1,1,1]},"o":{"x":[0.001,0.001,0.001],"y":[0,0,0]},"t":58,"s":[100,100,100]},{"t":189,"s":[400,400,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[97.391,97.391],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.258823529412,0.521568627451,0.956862745098,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.4],"y":[1]},"o":{"x":[1],"y":[0]},"t":57,"s":[3]},{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.001],"y":[0]},"t":58,"s":[3]},{"t":189,"s":[0]}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[32.5,121],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":58,"op":735,"st":-165,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":10,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[391.75,278,0],"ix":2},"a":{"a":0,"k":[32.25,121,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.4,0.4,0.4],"y":[1,1,1]},"o":{"x":[1,1,1],"y":[0,0,0]},"t":29,"s":[100,100,100]},{"i":{"x":[0.4,0.4,0.4],"y":[1,1,1]},"o":{"x":[0.001,0.001,0.001],"y":[0,0,0]},"t":30,"s":[100,100,100]},{"t":161,"s":[400,400,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[97.391,97.391],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.258823529412,0.521568627451,0.956862745098,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.4],"y":[1]},"o":{"x":[1],"y":[0]},"t":29,"s":[3]},{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.001],"y":[0]},"t":30,"s":[3]},{"t":161,"s":[0]}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[32.5,121],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":30,"op":707,"st":-193,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":10,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[391.75,278,0],"ix":2},"a":{"a":0,"k":[32.25,121,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.4,0.4,0.4],"y":[1,1,1]},"o":{"x":[0.001,0.001,0.001],"y":[0,0,0]},"t":2,"s":[100,100,100]},{"t":133,"s":[400,400,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[97.391,97.391],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.258823529412,0.521568627451,0.956862745098,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.001],"y":[0]},"t":2,"s":[3]},{"t":133,"s":[0]}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[32.5,121],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2,"op":680,"st":-220,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":10,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[391.75,278,0],"ix":2},"a":{"a":0,"k":[32.25,121,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[97.391,97.391],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.231372997808,0.470587995941,0.905881993911,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.258823529412,0.521568627451,0.956862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[32.5,121],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":678,"st":-222,"bm":0}],"markers":[]}
\ No newline at end of file

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

@@ -12,6 +12,9 @@
   </outputs>
   <release seq="1">
     <includes>
+      <include name="IDR_NEARBY_SHARE_PULSE_ANIMATION_JSON"
+               file="nearby_share_pulse_animation.json" type="BINDATA"/>
+
       <!-- Shared Polymer 2 pages-->
       <include name="IDR_NEARBY_CONTACT_MANAGER_HTML"
                file="nearby_contact_manager.html" type="BINDATA" compress="false"/>

chrome/browser/ui/webui/nearby_share/shared_resources.cc

@@ -16,6 +16,7 @@
 #include "chrome/grit/nearby_shared_resources_map.h"
 #include "chrome/grit/nearby_shared_resources_v3.h"
 #include "chrome/grit/nearby_shared_resources_v3_map.h"
+#include "services/network/public/mojom/content_security_policy.mojom.h"
 #include "ui/base/webui/web_ui_util.h"
 
 const char kNearbyShareGeneratedPath[] =
@@ -62,6 +63,17 @@ void RegisterNearbySharedResources(content::WebUIDataSource* data_source) {
       base::make_span(kNearbySharedResourcesV3, kNearbySharedResourcesV3Size),
       /*prefix=*/"shared/");
   RegisterNearbySharedMojoResources(data_source);
+
+  data_source->AddResourcePath("nearby_share_pulse_animation.json",
+                               IDR_NEARBY_SHARE_PULSE_ANIMATION_JSON);
+
+  // 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.
+  data_source->OverrideContentSecurityPolicy(
+      network::mojom::CSPDirectiveName::WorkerSrc, "worker-src blob: 'self';");
 }
 
 void RegisterNearbySharedStrings(content::WebUIDataSource* data_source) {