The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c1604bc83510da9806cb1c00d3351d8fcb7eb24a

commit c1604bc83510da9806cb1c00d3351d8fcb7eb24a
Author: wzang <wzang@chromium.org>
Date: Fri May 26 02:49:05 2017

Multiple user pods implementation for new login screen

The new login screen for multiple user pods involve creating small pods
and place them on a scroll bar.
 
The ‘small pod’ is implemented as an ‘add-on’ to the existing user pod
template, instead of being a new prototype. Pods can easily transform
itself among the ‘large’, ‘small’ and ‘extra small’ states, by toggling
the visibility of corresponding parts.
 
1) Pod placement works as follows:
Upon receiving the user list from backend, create a new pod for each user
(in rebuildPods()), append them to the pow row as children, and call
initialize(). This part remains the same with the old implementation, and
at this point there is no need to determine what size the pod should be
shown.

rebuildPods() calls placePods(). placePods() first determines the ‘main
pod’ (the one displayed as the large pod), and append all other pods to a
‘small pods container’, because they should be displayed as small pods.
This is done in appendPodsToParents().

The actual placement process starts here:
it’s done by: placeSinglePod_(), placePodsOnPodRow_(),
placePodsOnContainer_() or placePodsOnScrollableContainer_().

The placePods() function decides which one to call based on the number of
users we have. There’re lots of details in the placement process but the
general logic is simple, because we do not have to determine the best
numbers of rows and columns and can just follow the spec instead.

One special handling is: when scrollable container is shown it should
occupy the full screen, and a gradient mask is applied to avoid blocking
the header bar. The z-indexes should be well selected.
 
2) User removal works as follows:
A pod should always be switched to the main pod before being removed
(except the trivial 2-user case). Therefore after removing it from its
parent (the pod row), the main pod is set to null.

We call placePods(), and the following works exactly the same with the 1)
scenario. This is because placePods() will determine the main pod and re-
append the pods to different parents if necessary.
 
3) Window resizing works as follows:
Once there is a window resizing event, call placePods() directly. The
difference with the above two scenarios is that the main pod is not null
when window resizing happens. Therefore, placePods() will skip the main
pod selection and re-appending children process, and start the actual
placement directly.
 
4) Click event:
The only click event on small pods is to trigger the switch between the
small pod and the large pod. In the click event handler, we first find
out if it’s for a small pod, and if it is, simply switch it with the main
pod by switching the parents as well as positions / other relevant styles
(handled by changeMainPod()).

Please note:
We do not call placePods() because it may result in reordering the pods.
It’s OK that the pods are not in LRU order temporarily.

BUG= 718159 

Review-Url: https://codereview.chromium.org/2898283002
Cr-Commit-Position: refs/heads/master@{#474889}

[modify] https://crrev.com/c1604bc83510da9806cb1c00d3351d8fcb7eb24a/ui/login/account_picker/md_screen_account_picker.css
[modify] https://crrev.com/c1604bc83510da9806cb1c00d3351d8fcb7eb24a/ui/login/account_picker/md_screen_account_picker.html
[modify] https://crrev.com/c1604bc83510da9806cb1c00d3351d8fcb7eb24a/ui/login/account_picker/md_user_pod_row.css
[modify] https://crrev.com/c1604bc83510da9806cb1c00d3351d8fcb7eb24a/ui/login/account_picker/md_user_pod_row.js
[modify] https://crrev.com/c1604bc83510da9806cb1c00d3351d8fcb7eb24a/ui/login/account_picker/md_user_pod_template.html

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7cf104a50a7131c2359d7975e7007e9e661e07cd

commit 7cf104a50a7131c2359d7975e7007e9e661e07cd
Author: wzang <wzang@chromium.org>
Date: Thu Jun 01 03:31:02 2017

Handling edge cases of new login screen

The edge cases include:

(1) Adjust drop down menu position to avoid going beyond screen border.
(2) Adjust 'Add supervised user' z-index to prevent being blocked by
the scroll bar.
(3) When hiding bottom empty area, check screen size instead of virtual
keyboard status as the latter may not be updated in time.
(4) Add animation for switching main pod.
(5) Add animation for drop down menu button.
(6) Adjust the position and style of sign-in banner.
(7) The border of 'more settings' in header bar is adjusted to be square.
(8) Adjust scroll bar style to prevent it from occasionally flicking.
(9) Add Oobe.clearErrors() in several places, basically error bubbles
will be cleared as long as there's user click event, or orientation
change, hiding / showing virtual keyboard or user removal. This part
is subject to further evaluation.
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.
(12) Add an additional safety check to see if the screen height is large
enough for the current pod padding choice, and switch to scrollable
container case if it's not large enough.

The new login screen is testable after this CL, though the following
work is still blocked by not having assets yet:

(1) Public session pod.
(2) Badges for supervised user, signed-in user, etc.
(3) Caps lock icon and smart lock icon.

In addition, codes for a very hacky way of testing is added. We may have
to remove them in the future but I'd like to keep them for now.

BUG= 718159 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2910203003
Cr-Commit-Position: refs/heads/master@{#476173}

[modify] https://crrev.com/7cf104a50a7131c2359d7975e7007e9e661e07cd/chrome/browser/resources/chromeos/login/md_header_bar.css
[modify] https://crrev.com/7cf104a50a7131c2359d7975e7007e9e661e07cd/chrome/browser/resources/chromeos/login/md_header_bar.js
[modify] https://crrev.com/7cf104a50a7131c2359d7975e7007e9e661e07cd/ui/login/account_picker/md_screen_account_picker.css
[modify] https://crrev.com/7cf104a50a7131c2359d7975e7007e9e661e07cd/ui/login/account_picker/md_screen_account_picker.js
[modify] https://crrev.com/7cf104a50a7131c2359d7975e7007e9e661e07cd/ui/login/account_picker/md_user_pod_row.css
[modify] https://crrev.com/7cf104a50a7131c2359d7975e7007e9e661e07cd/ui/login/account_picker/md_user_pod_row.js
[modify] https://crrev.com/7cf104a50a7131c2359d7975e7007e9e661e07cd/ui/login/account_picker/md_user_pod_template.html

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/5cbd575ebf4790240c8c30159ce17eebfd1a1ea3

commit 5cbd575ebf4790240c8c30159ce17eebfd1a1ea3
Author: wzang <wzang@chromium.org>
Date: Fri Jun 02 01:39:29 2017

Add avatar badges and update caps lock icon for new login screen

1) Added supervised-user and signed-in user badge. We do not have
designs for other badges yet and I need to investigate on all other
badge types to see which one should be switched to the new style.
Before that we hide all other badges to avoid style conflict.

2) Updated caps lock icon to match the new spec.

BUG= 718159 

Review-Url: https://codereview.chromium.org/2919523005
Cr-Commit-Position: refs/heads/master@{#476517}

[modify] https://crrev.com/5cbd575ebf4790240c8c30159ce17eebfd1a1ea3/ui/login/account_picker/md_user_pod_row.css
[modify] https://crrev.com/5cbd575ebf4790240c8c30159ce17eebfd1a1ea3/ui/login/account_picker/md_user_pod_row.js
[modify] https://crrev.com/5cbd575ebf4790240c8c30159ce17eebfd1a1ea3/ui/login/account_picker/md_user_pod_template.html

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/12ab698854b581200db8cc4a68f75bd99e38f0c8

commit 12ab698854b581200db8cc4a68f75bd99e38f0c8
Author: wzang <wzang@chromium.org>
Date: Thu Jun 08 17:32:30 2017

Refresh UI of public session pods for new login screen

Main differences with the old implementation are:

1) There're two types of click events on public session pods: switching
between large and small pods, and pod expansion / collapse. It's
observed that a single click event may be handled twice by two
different click handlers. We have to disallow click event handling by
handlers other than the public session pod itself.

2) When the pod is expanded, all other elements in the account picker
must be hidden. If there's a window resize event when it's expanded,
we can either place pods behind the scene or postpone placement until
the pod collapses. The former method is used, because postponing pod
placement may further complicate things.

A known issue not covered: the resetTabOrder() function needs to be
modified.

BUG= 718159 

Review-Url: https://codereview.chromium.org/2926003002
Cr-Commit-Position: refs/heads/master@{#478013}

[modify] https://crrev.com/12ab698854b581200db8cc4a68f75bd99e38f0c8/ui/login/account_picker/md_user_pod_row.css
[modify] https://crrev.com/12ab698854b581200db8cc4a68f75bd99e38f0c8/ui/login/account_picker/md_user_pod_row.js
[modify] https://crrev.com/12ab698854b581200db8cc4a68f75bd99e38f0c8/ui/login/account_picker/md_user_pod_template.html

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/76b6fadab8f95b3e428dd3d373ec883a9df3b42e

commit 76b6fadab8f95b3e428dd3d373ec883a9df3b42e
Author: wzang <wzang@chromium.org>
Date: Thu Jun 08 22:50:02 2017

Make WebUI MD login and lock screen default

After this CL, use --show-non-md-login to go back to the original UI.
Use --show-md-login to enable the views-based UI (WIP).

BUG= 718159 

Review-Url: https://codereview.chromium.org/2925343002
Cr-Commit-Position: refs/heads/master@{#478111}

[modify] https://crrev.com/76b6fadab8f95b3e428dd3d373ec883a9df3b42e/chrome/browser/chromeos/login/chrome_restart_request.cc
[modify] https://crrev.com/76b6fadab8f95b3e428dd3d373ec883a9df3b42e/chrome/browser/ui/webui/chromeos/login/oobe_ui.cc
[modify] https://crrev.com/76b6fadab8f95b3e428dd3d373ec883a9df3b42e/chromeos/chromeos_switches.cc
[modify] https://crrev.com/76b6fadab8f95b3e428dd3d373ec883a9df3b42e/chromeos/chromeos_switches.h

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/ce3e74bd59411bcd3c795f7f1d87b697463cd2a4

commit ce3e74bd59411bcd3c795f7f1d87b697463cd2a4
Author: wzang <wzang@chromium.org>
Date: Thu Jun 15 19:22:24 2017

Update easy unlock icon assets for new signin screen

The background of the easy unlock icon changes from white to transparent
in the new MD signin screen.

The link to the spec for reference: https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZdwfnbqy2eSi/files/MCHm5Lyh8lQ6SZ3vjzwd3Uo8wMSJbxAVNpw

BUG= 718159 ,  718172 

Review-Url: https://codereview.chromium.org/2934193002
Cr-Commit-Position: refs/heads/master@{#479777}

[modify] https://crrev.com/ce3e74bd59411bcd3c795f7f1d87b697463cd2a4/ui/resources/default_100_percent/common/easy_unlock_spinner.png
[modify] https://crrev.com/ce3e74bd59411bcd3c795f7f1d87b697463cd2a4/ui/resources/default_200_percent/common/easy_unlock_spinner.png

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2

commit fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2
Author: wzang <wzang@chromium.org>
Date: Tue Jun 27 01:32:34 2017

Signin screen polish in response to UI review

The changes here have been shown and confirmed by UX so they will stay
unless there's specs update.

(1) Add an icon beside 'App' in the header bar. Currently'App' is the
only item without an icon.

(2) For  crbug.com/735660 , the ripple shape is changed to round but it's
still slightly off the center. I need to contact with UX for a new .svg.

(3) Add animation for public session pod expansion and user drop down menu.

(4) Other minor style changes. If interested please reference the QA here:
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZV-kBQWRQPoA/files/MCHtA7U1iMGr6zkLgIS_GHBTJhNtoz9Axs8

BUG= 718159 ,  735660 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2947213003
Cr-Commit-Position: refs/heads/master@{#482503}

[add] https://crrev.com/fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2/chrome/browser/resources/chromeos/login/images/1x/show-apps.svg
[add] https://crrev.com/fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2/chrome/browser/resources/chromeos/login/images/2x/show-apps.svg
[modify] https://crrev.com/fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2/chrome/browser/resources/chromeos/login/md_header_bar.css
[modify] https://crrev.com/fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2/chrome/browser/resources/chromeos/login/md_header_bar.html
[modify] https://crrev.com/fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2/ui/login/account_picker/md_screen_account_picker.css
[modify] https://crrev.com/fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2/ui/login/account_picker/md_user_pod_row.css
[modify] https://crrev.com/fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2/ui/login/account_picker/md_user_pod_row.js
[modify] https://crrev.com/fa06a1a07bfcbdb3b1b1448d376c4d1148cedde2/ui/login/account_picker/md_user_pod_template.html