Add the decorative icons to the sync confirmation dialog.

Add the decorative icons to the sync confirmation dialog.

BUG=533004
TEST=
1. Enable enable-password-separated-signin-flow in chrome://flags
2. In a non-signed in profile, open the User Menu and click "Sign in"
3. The tab-modal sign in flow should open, enter valid credentials
4. The Sync Confirmation dialog should open
5. When the profile's picture is finished loading, the icons around the
   picture and the checkmark in the blue bubble should animate into
   view.

Committed: https://crrev.com/5816de5d14b6104b6bf315ffaf2d59813cd0c3f9
Cr-Commit-Position: refs/heads/master@{#378460}

[anthonyvd, 2016-02-09 19:00:40]

anthonyvd@chromium.org changed reviewers:
+ dbeam@chromium.org

[anthonyvd, 2016-02-09 19:00:40]

Hi dbeam@,

Can you please take a look at this CL that adds some animated decorative icons
to the sync confirmation dialog? The spec and mocks for this animation are
internal resources but we can follow up offline if you need to see them.

Thanks!

[Dan Beam, 2016-02-13 02:16:11]

does any of this work in RTL?

https://codereview.chromium.org/1681203002/diff/1/chrome/browser/resources/sy...
File chrome/browser/resources/sync_confirmation/sync_confirmation.js (right):

https://codereview.chromium.org/1681203002/diff/1/chrome/browser/resources/sy...
chrome/browser/resources/sync_confirmation/sync_confirmation.js:34: .className =
$('picture-container').className + ' loaded';
$('picture-container').classList.add('loaded');

[Dan Beam, 2016-02-13 02:17:03]

https://codereview.chromium.org/1681203002/diff/1/chrome/browser/resources/sy...
File chrome/browser/resources/sync_confirmation/sync_confirmation.css (right):

https://codereview.chromium.org/1681203002/diff/1/chrome/browser/resources/sy...
chrome/browser/resources/sync_confirmation/sync_confirmation.css:115: @keyframes
scaleCircle {
why keyframeNamesLikeThis rather than keyframe-names-like-this?

[anthonyvd, 2016-02-22 17:09:23]

Thanks for your time.

There was a minor positioning issue in RTL that I fixed in patchset #2.
Otherwise, yes it does work in both LTR and RTL.

https://codereview.chromium.org/1681203002/diff/1/chrome/browser/resources/sy...
File chrome/browser/resources/sync_confirmation/sync_confirmation.css (right):

https://codereview.chromium.org/1681203002/diff/1/chrome/browser/resources/sy...
chrome/browser/resources/sync_confirmation/sync_confirmation.css:115: @keyframes
scaleCircle {
On 2016/02/13 02:17:03, Dan Beam wrote:
> why keyframeNamesLikeThis rather than keyframe-names-like-this?

Done.

https://codereview.chromium.org/1681203002/diff/1/chrome/browser/resources/sy...
File chrome/browser/resources/sync_confirmation/sync_confirmation.js (right):

https://codereview.chromium.org/1681203002/diff/1/chrome/browser/resources/sy...
chrome/browser/resources/sync_confirmation/sync_confirmation.js:34: .className =
$('picture-container').className + ' loaded';
On 2016/02/13 02:16:10, Dan Beam wrote:
> $('picture-container').classList.add('loaded');

Done.

[Dan Beam, 2016-02-25 22:49:30]

On 2016/02/22 17:09:23, anthonyvd wrote:
> Thanks for your time.
> 
> There was a minor positioning issue in RTL that I fixed in patchset #2.
> Otherwise, yes it does work in both LTR and RTL.

are you sure?  there's quite a few left/right/translate() rules that seem very
LTR specific.  did you run all the animations in RTL as well?

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.css (right):

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.css:111: animation:
scale-circle 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
where did you get 300ms?

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.css:116: to
{transform: scale(1);}
spaces between braces

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.html (right):

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.html:34:
stroke-width="2" stroke-dasharray="16" stroke-dashoffset="16"
fill="none"></path>
80 col wrap

https://codereview.chromium.org/1681203002/diff/60001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.html (right):

https://codereview.chromium.org/1681203002/diff/60001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.html:32: <svg
id="checkmark-check" width="13" height="10" viewBox="0 0 13 10">
where are you getting this icon?  is it in iron-icons?

[anthonyvd, 2016-02-26 17:29:20]

Yep, tested the animations in RTL as well. This is working as intended because
the animations are fading icons in around a centered point in the dialog and
don't rotate in RTL.

Here's a video of this in RTL (see the last dialog):
https://drive.google.com/open?id=0B7c9zMzlLtKoMTNKSVdVLUFPbEE

Thanks!

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.css (right):

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.css:111: animation:
scale-circle 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
On 2016/02/25 22:49:30, Dan Beam wrote:
> where did you get 300ms?

The designer spec for this animation.

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.css:116: to
{transform: scale(1);}
On 2016/02/25 22:49:30, Dan Beam wrote:
> spaces between braces

Done.

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.html (right):

https://codereview.chromium.org/1681203002/diff/40001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.html:34:
stroke-width="2" stroke-dasharray="16" stroke-dashoffset="16"
fill="none"></path>
On 2016/02/25 22:49:30, Dan Beam wrote:
> 80 col wrap

Done.

https://codereview.chromium.org/1681203002/diff/60001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.html (right):

https://codereview.chromium.org/1681203002/diff/60001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.html:32: <svg
id="checkmark-check" width="13" height="10" viewBox="0 0 13 10">
On 2016/02/25 22:49:30, Dan Beam wrote:
> where are you getting this icon?  is it in iron-icons?

This is part of the design spec. There is a similar icon in iron-icons, I'm
however not sure how to set the same attributes on the inner <path> element of
the <iron-icon> element.

I don't know much about Polymer though, so if there's a way to do it that I'm
missing, I'll be glad to make the change.

[Dan Beam, 2016-02-29 20:31:09]

lgtm

https://codereview.chromium.org/1681203002/diff/80001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.css (right):

https://codereview.chromium.org/1681203002/diff/80001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.css:142:
animation-duration: 1.4s;
1.4s O_o

https://codereview.chromium.org/1681203002/diff/80001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.html (right):

https://codereview.chromium.org/1681203002/diff/80001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.html:32: <svg
id="checkmark-check" width="13" height="10" viewBox="0 0 13 10">
nit: any reason why this svg is inlined rather than a separate .svg?

if you say <img src="whatever_you_named_it.svg">, the contents should be inlined
automatically if grit processing is enabled

[anthonyvd, 2016-03-01 15:21:52]

Thanks a lot for your time. Replies to the latests comments below.

https://codereview.chromium.org/1681203002/diff/80001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.css (right):

https://codereview.chromium.org/1681203002/diff/80001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.css:142:
animation-duration: 1.4s;
On 2016/02/29 20:31:08, Dan Beam wrote:
> 1.4s O_o

Just confirming that this is indeed the value in the designer spec.

https://codereview.chromium.org/1681203002/diff/80001/chrome/browser/resource...
File chrome/browser/resources/sync_confirmation/sync_confirmation.html (right):

https://codereview.chromium.org/1681203002/diff/80001/chrome/browser/resource...
chrome/browser/resources/sync_confirmation/sync_confirmation.html:32: <svg
id="checkmark-check" width="13" height="10" viewBox="0 0 13 10">
On 2016/02/29 20:31:08, Dan Beam wrote:
> nit: any reason why this svg is inlined rather than a separate .svg?
> 
> if you say <img src="whatever_you_named_it.svg">, the contents should be
inlined
> automatically if grit processing is enabled

Yeah, making this a file and adding it as an <img> inlines it as a base64
representation of the svg. Because of that, I can't apply any styles to the
<path> itself, which I do to animate the checkmark.

[anthonyvd, 2016-03-01 15:21:55]

The CQ bit was checked by anthonyvd@chromium.org

[commit-bot: I haz the power, 2016-03-01 15:22:14]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1681203002/80001
View timeline at
 https://chromium-cq-status.appspot.com/patch-timeline/1681203002/80001

[commit-bot: I haz the power, 2016-03-01 16:57:17]

Committed patchset #5 (id:80001)

[commit-bot: I haz the power, 2016-03-01 16:58:44]

Description was changed from

==========
Add the decorative icons to the sync confirmation dialog.

BUG=533004

TEST=
1. Enable enable-password-separated-signin-flow in chrome://flags
2. In a non-signed in profile, open the User Menu and click "Sign in"
3. The tab-modal sign in flow should open, enter valid credentials
4. The Sync Confirmation dialog should open
5. When the profile's picture is finished loading, the icons around the
   picture and the checkmark in the blue bubble should animate into
   view.
==========

to

==========
Add the decorative icons to the sync confirmation dialog.

BUG=533004

TEST=
1. Enable enable-password-separated-signin-flow in chrome://flags
2. In a non-signed in profile, open the User Menu and click "Sign in"
3. The tab-modal sign in flow should open, enter valid credentials
4. The Sync Confirmation dialog should open
5. When the profile's picture is finished loading, the icons around the
   picture and the checkmark in the blue bubble should animate into
   view.

Committed: https://crrev.com/5816de5d14b6104b6bf315ffaf2d59813cd0c3f9
Cr-Commit-Position: refs/heads/master@{#378460}
==========

[commit-bot: I haz the power, 2016-03-01 16:58:45]

Patchset 5 (id:??) landed as
https://crrev.com/5816de5d14b6104b6bf315ffaf2d59813cd0c3f9
Cr-Commit-Position: refs/heads/master@{#378460}