Handling edge cases of new login screen

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}
Committed: https://chromium.googlesource.com/chromium/src/+/7cf104a50a7131c2359d7975e7007e9e661e07cd

[Wenzhao (Colin) Zang, 2017-05-31 00:33:11]

Description was changed from

==========
Handling edge cases of new login screen

BUG=718159
==========

to

==========
Handling edge cases of new login screen

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

[Wenzhao (Colin) Zang, 2017-05-31 01:07:51]

Description was changed from

==========
Handling edge cases of new login screen

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

to

==========
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.
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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 of a very hacky way of testing is added. We may need
to remove them in the end but I'd like to keep them for now.





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

[Wenzhao (Colin) Zang, 2017-05-31 01:07:52]

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

[Wenzhao (Colin) Zang, 2017-05-31 01:08:13]

Description was changed from

==========
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.
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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 of a very hacky way of testing is added. We may need
to remove them in the end but I'd like to keep them for now.





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

to

==========
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.
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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 of a very hacky way of testing is added. We may need
to remove them in the end but I'd like to keep them for now.





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

[Wenzhao (Colin) Zang, 2017-05-31 01:08:33]

Description was changed from

==========
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.
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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 of a very hacky way of testing is added. We may need
to remove them in the end but I'd like to keep them for now.





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

to

==========
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.
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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 of a very hacky way of testing is added. We may need
to remove them in the end but I'd like to keep them for now.





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

[Wenzhao (Colin) Zang, 2017-05-31 01:09:38]

Description was changed from

==========
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.
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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 of a very hacky way of testing is added. We may need
to remove them in the end but I'd like to keep them for now.





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

to

==========
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 for further evaluation.)
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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 of a very hacky way of testing is added. We may need
to remove them in the end but I'd like to keep them for now.





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

[Wenzhao (Colin) Zang, 2017-05-31 01:10:34]

Description was changed from

==========
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 for further evaluation.)
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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 of a very hacky way of testing is added. We may need
to remove them in the end but I'd like to keep them for now.





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

to

==========
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 for further evaluation.
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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
==========

[Wenzhao (Colin) Zang, 2017-05-31 01:12:49]

Description was changed from

==========
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 for further evaluation.
(10) Add outline to avatar.
(11) Old codes unrelated to the new design are removed.

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
==========

to

==========
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.

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
==========

[Wenzhao (Colin) Zang, 2017-05-31 01:13:36]

Description was changed from

==========
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.

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
==========

to

==========
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.

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
==========

[Wenzhao (Colin) Zang, 2017-05-31 01:16:35]

alemate@(for owner review), jdufault@, please take a look. Thanks so much.

[jdufault, 2017-05-31 17:13:21]

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

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.css:35: transition: all 360ms;
Is this from spec? This seems really long.

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

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3503: }
nit: drop whitespace

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3555: // is reduced properly, the
size of the outer container remains the
Do we need the min-height on the outer container?

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3796: return this.screenSize.height
<= Oobe.getInstance().clientAreaSize.height;
Why not use virtualKeyboardShown? Can you document the additional cases this
approach accounts for?

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:4080: showDummyUsersForTesting:
function(count) {
Nice!

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:4223: this.focusPod(this.focusedPod_,
true /* force */, true /* opt_skipInputFocus */);
nit: line length

[Wenzhao (Colin) Zang, 2017-05-31 18:50:16]

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

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.css:35: transition: all 360ms;
On 2017/05/31 17:13:21, jdufault wrote:
> Is this from spec? This seems really long.

I've changed it back. I doubled checked with UX and they don't have a new spec.

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

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3503: }
On 2017/05/31 17:13:21, jdufault wrote:
> nit: drop whitespace

Done.

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3555: // is reduced properly, the
size of the outer container remains the
On 2017/05/31 17:13:21, jdufault wrote:
> Do we need the min-height on the outer container?

According to previous comments I found, the min-height 'enables scrolling'.  It
seems sometimes scrolling is desired.

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3796: return this.screenSize.height
<= Oobe.getInstance().clientAreaSize.height;
On 2017/05/31 17:13:21, jdufault wrote:
> Why not use virtualKeyboardShown? Can you document the additional cases this
> approach accounts for?

AFAIK there's no additional case, but based on my tests approximately 20% of the
time Oobe.getInstance().virtualKeyboardShown is not updated in time so we end up
with a wrong placement (as if virtual keyboard is not present). 

I also tried checking if virtualKeyboardShown has changed when we reach the
final step: handleBeforeShow, and redo pod placement if necessary. That reduces
the occurrences of wrong placement but I still see it occasionally. 

I no longer see this issue after checking screen size. It seems the screen size
is updated ahead of virtualKeyboardShown, but I didn't dig deeper into it.

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:4223: this.focusPod(this.focusedPod_,
true /* force */, true /* opt_skipInputFocus */);
On 2017/05/31 17:13:21, jdufault wrote:
> nit: line length

Done.

[jdufault, 2017-05-31 19:02:36]

lgtm

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

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3555: // is reduced properly, the
size of the outer container remains the
On 2017/05/31 18:50:16, Wenzhao (Colin) Zang wrote:
> On 2017/05/31 17:13:21, jdufault wrote:
> > Do we need the min-height on the outer container?
> 
> According to previous comments I found, the min-height 'enables scrolling'. 
It
> seems sometimes scrolling is desired.

I'd be surprised if we ever want to enable that. The new design has a scrollable
user list. Let's discuss offline with UX.

https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
ui/login/account_picker/md_user_pod_row.js:3796: return this.screenSize.height
<= Oobe.getInstance().clientAreaSize.height;
On 2017/05/31 18:50:16, Wenzhao (Colin) Zang wrote:
> On 2017/05/31 17:13:21, jdufault wrote:
> > Why not use virtualKeyboardShown? Can you document the additional cases this
> > approach accounts for?
> 
> AFAIK there's no additional case, but based on my tests approximately 20% of
the
> time Oobe.getInstance().virtualKeyboardShown is not updated in time so we end
up
> with a wrong placement (as if virtual keyboard is not present). 
> 
> I also tried checking if virtualKeyboardShown has changed when we reach the
> final step: handleBeforeShow, and redo pod placement if necessary. That
reduces
> the occurrences of wrong placement but I still see it occasionally. 
> 
> I no longer see this issue after checking screen size. It seems the screen
size
> is updated ahead of virtualKeyboardShown, but I didn't dig deeper into it.

Okay. Can you add a comment?

[Wenzhao (Colin) Zang, 2017-05-31 20:08:59]

On 2017/05/31 19:02:36, jdufault wrote:
> lgtm
> 
>
https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
> File ui/login/account_picker/md_user_pod_row.js (right):
> 
>
https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
> ui/login/account_picker/md_user_pod_row.js:3555: // is reduced properly, the
> size of the outer container remains the
> On 2017/05/31 18:50:16, Wenzhao (Colin) Zang wrote:
> > On 2017/05/31 17:13:21, jdufault wrote:
> > > Do we need the min-height on the outer container?
> > 
> > According to previous comments I found, the min-height 'enables scrolling'. 
> It
> > seems sometimes scrolling is desired.
> 
> I'd be surprised if we ever want to enable that. The new design has a
scrollable
> user list. Let's discuss offline with UX.
> 
>
https://codereview.chromium.org/2910203003/diff/1/ui/login/account_picker/md_...
> ui/login/account_picker/md_user_pod_row.js:3796: return this.screenSize.height
> <= Oobe.getInstance().clientAreaSize.height;
> On 2017/05/31 18:50:16, Wenzhao (Colin) Zang wrote:
> > On 2017/05/31 17:13:21, jdufault wrote:
> > > Why not use virtualKeyboardShown? Can you document the additional cases
this
> > > approach accounts for?
> > 
> > AFAIK there's no additional case, but based on my tests approximately 20% of
> the
> > time Oobe.getInstance().virtualKeyboardShown is not updated in time so we
end
> up
> > with a wrong placement (as if virtual keyboard is not present). 
> > 
> > I also tried checking if virtualKeyboardShown has changed when we reach the
> > final step: handleBeforeShow, and redo pod placement if necessary. That
> reduces
> > the occurrences of wrong placement but I still see it occasionally. 
> > 
> > I no longer see this issue after checking screen size. It seems the screen
> size
> > is updated ahead of virtualKeyboardShown, but I didn't dig deeper into it.
> 
> Okay. Can you add a comment?

I believe we no longer need scrollable outer-container for the new design. 
I'll remove min-height after I make sure of that.

I added comments for checking screen size.

[Wenzhao (Colin) Zang, 2017-05-31 23:15:08]

Description was changed from

==========
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.

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
==========

to

==========
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
==========

[Wenzhao (Colin) Zang, 2017-05-31 23:17:01]

1) Update the animation duration to 300 ms after syncing with
UX.
2) Add an additional edge case handling for smaller screens, and fall to
scrollable container case if necessary (also updated in CL description).

[Alexander Alekseev, 2017-06-01 00:14:29]

lgtm

[Wenzhao (Colin) Zang, 2017-06-01 00:16:40]

The CQ bit was checked by wzang@chromium.org

[Wenzhao (Colin) Zang, 2017-06-01 00:16:41]

The patchset sent to the CQ was uploaded after l-g-t-m from
jdufault@chromium.org
Link to the patchset: https://codereview.chromium.org/2910203003/#ps40001
(title: "Adjust animation duration and add small screen handling")

[commit-bot: I haz the power, 2017-06-01 00:18:03]

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-01 03:31:07]

CQ is committing da patch.

Bot data: {"patchset_id": 40001, "attempt_start_ts": 1496276200905760,
"parent_rev": "b4fe4703234db95a75f7b94d1e97044d38488156", "commit_rev":
"7cf104a50a7131c2359d7975e7007e9e661e07cd"}

[commit-bot: I haz the power, 2017-06-01 03:31:14]

Description was changed from

==========
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
==========

to

==========
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}
Committed:
https://chromium.googlesource.com/chromium/src/+/7cf104a50a7131c2359d7975e700...
==========

[commit-bot: I haz the power, 2017-06-01 03:31:15]

Committed patchset #3 (id:40001) as
https://chromium.googlesource.com/chromium/src/+/7cf104a50a7131c2359d7975e700...