Fix misplacement of PIN keyboard and sign-in banner for new login screen

Fix misplacement of PIN keyboard and sign-in banner for new login screen

1) Dynamically center the PIN keyboard and remove the !important CSS rule
in the old UI implementation.

2) Postpone the positioning the sign-in banner until after pod placement
because in the new design it depends on the pod positions.

3) Rename two functions which are called before and after pod placement
respectively and refactor some codes.

4) Change the animation duration back to 180ms.
refactor 

BUG=718174
Review-Url: https://codereview.chromium.org/2921213002
Cr-Commit-Position: refs/heads/master@{#477027}
Committed: https://chromium.googlesource.com/chromium/src/+/77f0e077eb8829867334297ab10e19561bb07bd9

[Wenzhao (Colin) Zang, 2017-06-05 02:59:56]

Description was changed from

==========
Fix misplacement of PIN keyboard and sign-in banner for new login screen

BUG=718174
==========

to

==========
Fix misplacement of PIN keyboard and sign-in banner for new login screen

1) Dynamically center the PIN keyboard and remove the !important CSS rule
in the old UI implementation.

2) Postpone the positioning the sign-in banner until after pod placement
because in the new design its position depends on the pod positions.

3) Rename two functions which are called before and after pod placement
respectively and refactor some codes.

4) Change the animation duration back to 180ms.
refactor 

BUG=718174
==========

[Wenzhao (Colin) Zang, 2017-06-05 02:59:56]

wzang@chromium.org changed reviewers:
+ jdufault@chromium.org, xiyuan@chromium.org

[Wenzhao (Colin) Zang, 2017-06-05 03:00:35]

Description was changed from

==========
Fix misplacement of PIN keyboard and sign-in banner for new login screen

1) Dynamically center the PIN keyboard and remove the !important CSS rule
in the old UI implementation.

2) Postpone the positioning the sign-in banner until after pod placement
because in the new design its position depends on the pod positions.

3) Rename two functions which are called before and after pod placement
respectively and refactor some codes.

4) Change the animation duration back to 180ms.
refactor 

BUG=718174
==========

to

==========
Fix misplacement of PIN keyboard and sign-in banner for new login screen

1) Dynamically center the PIN keyboard and remove the !important CSS rule
in the old UI implementation.

2) Postpone the positioning the sign-in banner until after pod placement
because in the new design it depends on the pod positions.

3) Rename two functions which are called before and after pod placement
respectively and refactor some codes.

4) Change the animation duration back to 180ms.
refactor 

BUG=718174
==========

[xiyuan, 2017-06-05 16:20:31]

https://codereview.chromium.org/2921213002/diff/1/ui/login/account_picker/md_...
File ui/login/account_picker/md_screen_account_picker.css (right):

https://codereview.chromium.org/2921213002/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_screen_account_picker.css:51: opacity: 0.8;
Why do we need to change this? This essentially disables the opacity animation
for user adding screen.

https://codereview.chromium.org/2921213002/diff/1/ui/login/account_picker/md_...
File ui/login/account_picker/md_user_pod_row.js (right):

https://codereview.chromium.org/2921213002/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3898: if (this.pods.length <=
POD_ROW_LIMIT)
nit: wrap with {} since "else" branch has it

[Wenzhao (Colin) Zang, 2017-06-05 17:33:20]

https://codereview.chromium.org/2921213002/diff/1/ui/login/account_picker/md_...
File ui/login/account_picker/md_screen_account_picker.css (right):

https://codereview.chromium.org/2921213002/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_screen_account_picker.css:51: opacity: 0.8;
On 2017/06/05 16:20:31, xiyuan wrote:
> Why do we need to change this? This essentially disables the opacity animation
> for user adding screen.

I think there's no opacity animation for user adding screen, because only the
login and lock screens have an opacity transition after '.message-set' is added
(according to line 54 - 66). But I also checked with UX and they just wanted to
update the background opacity to 0.34, so I removed the opacity change.

https://codereview.chromium.org/2921213002/diff/1/ui/login/account_picker/md_...
File ui/login/account_picker/md_user_pod_row.js (right):

https://codereview.chromium.org/2921213002/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3898: if (this.pods.length <=
POD_ROW_LIMIT)
On 2017/06/05 16:20:31, xiyuan wrote:
> nit: wrap with {} since "else" branch has it

Done.

[xiyuan, 2017-06-05 17:37:03]

lgtm

[Wenzhao (Colin) Zang, 2017-06-05 17:53:23]

The CQ bit was checked by wzang@chromium.org

[commit-bot: I haz the power, 2017-06-05 17:53:49]

CQ is trying da patch.

Follow status at:
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-06-05 18:07:59]

CQ is committing da patch.

Bot data: {"patchset_id": 20001, "attempt_start_ts": 1496685203935150,
"parent_rev": "7ce687758ee9ef7d0ad8126abc9137a81ab2d373", "commit_rev":
"77f0e077eb8829867334297ab10e19561bb07bd9"}

[commit-bot: I haz the power, 2017-06-05 18:08:09]

Description was changed from

==========
Fix misplacement of PIN keyboard and sign-in banner for new login screen

1) Dynamically center the PIN keyboard and remove the !important CSS rule
in the old UI implementation.

2) Postpone the positioning the sign-in banner until after pod placement
because in the new design it depends on the pod positions.

3) Rename two functions which are called before and after pod placement
respectively and refactor some codes.

4) Change the animation duration back to 180ms.
refactor 

BUG=718174
==========

to

==========
Fix misplacement of PIN keyboard and sign-in banner for new login screen

1) Dynamically center the PIN keyboard and remove the !important CSS rule
in the old UI implementation.

2) Postpone the positioning the sign-in banner until after pod placement
because in the new design it depends on the pod positions.

3) Rename two functions which are called before and after pod placement
respectively and refactor some codes.

4) Change the animation duration back to 180ms.
refactor 

BUG=718174

Review-Url: https://codereview.chromium.org/2921213002
Cr-Commit-Position: refs/heads/master@{#477027}
Committed:
https://chromium.googlesource.com/chromium/src/+/77f0e077eb8829867334297ab10e...
==========

[commit-bot: I haz the power, 2017-06-05 18:08:11]

Committed patchset #2 (id:20001) as
https://chromium.googlesource.com/chromium/src/+/77f0e077eb8829867334297ab10e...