Commit 638c3aaf authored by Michael Hansen's avatar Michael Hansen Committed by Commit Bot

[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: default avatarKyle Horimoto <khorimoto@chromium.org>
Reviewed-by: default avatarJames Vecore <vecore@google.com>
Cr-Commit-Position: refs/heads/master@{#821854}
parent 1aca2407
......@@ -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"
......
......@@ -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" ]
......
<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>
......
......@@ -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
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment