Use svg icon to avoid lazy loading of Polymer elements for user pods

Use svg icon to avoid lazy loading of Polymer elements for user pods

1) Lazy loading of Polymer was causing flakiness in a set of tests.
2) It also fixes the bug where the overflow menu icon was not appearing on hover.

BUG=610362, 611619, 615085
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/e47e3654fd44ec6848cc3bc2123ec5ea08afd111
Cr-Commit-Position: refs/heads/master@{#396970}

[Moe, 2016-05-25 19:16:27]

Description was changed from

==========
Use svg icon to avoid lazy loading of Polymer elements for user pods

Lazy loading of Polymer was causing flakiness in a set of tests.

BUG=610362, 611619
==========

to

==========
Use svg icon to avoid lazy loading of Polymer elements for user pods

Lazy loading of Polymer was causing flakiness in a set of tests.

BUG=610362, 611619
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
==========

[Moe, 2016-05-25 19:23:58]

mahmadi@chromium.org changed reviewers:
+ dbeam@chromium.org, jdufault@chromium.org

[Moe, 2016-05-25 19:23:59]

Hi please review this CL:

dbeam@ c/b/resources/
dbeam@ c/test/data/webui/
jdufault@ ui/login/
jdufault@ c/b/resources/chromeos/login/login_shared.js

[jdufault, 2016-05-25 19:29:56]

lgtm, thanks!

[Dan Beam, 2016-05-26 00:35:11]

https://codereview.chromium.org/2007133006/diff/1/chrome/browser/resources/md...
File chrome/browser/resources/md_user_manager/user_manager.html (right):

https://codereview.chromium.org/2007133006/diff/1/chrome/browser/resources/md...
chrome/browser/resources/md_user_manager/user_manager.html:22: <!-- Make sure
paper-button is imported to use in user_pod_template.html -->
i'm confused, why can't we just import directly from user_pod_template.html?

https://codereview.chromium.org/2007133006/diff/1/ui/login/account_picker/use...
File ui/login/account_picker/user_pod_row.css (right):

https://codereview.chromium.org/2007133006/diff/1/ui/login/account_picker/use...
ui/login/account_picker/user_pod_row.css:380: -webkit-mask-size: 20px;
can we use a shorthand for this, i.e.

-webkit-mask: url(../../../ui/webui/resources/images/warning.svg) center
no-repeat 20px;

https://developer.mozilla.org/en-US/docs/Web/CSS/mask

[Moe, 2016-05-26 13:36:49]

https://codereview.chromium.org/2007133006/diff/1/chrome/browser/resources/md...
File chrome/browser/resources/md_user_manager/user_manager.html (right):

https://codereview.chromium.org/2007133006/diff/1/chrome/browser/resources/md...
chrome/browser/resources/md_user_manager/user_manager.html:22: <!-- Make sure
paper-button is imported to use in user_pod_template.html -->
On 2016/05/26 00:35:11, Dan Beam wrote:
> i'm confused, why can't we just import directly from user_pod_template.html?

If I understand correctly, that would cause a delay in displaying the user pods
in cros. jdufault@ originally landed lazy loading of Polymer:
https://codereview.chromium.org/1808223003

the iron-icon and paper-button that are left in user_pod_template.html after
this CL are used only on desktop. Hence importing the resources explicitly here.

https://codereview.chromium.org/2007133006/diff/1/ui/login/account_picker/use...
File ui/login/account_picker/user_pod_row.css (right):

https://codereview.chromium.org/2007133006/diff/1/ui/login/account_picker/use...
ui/login/account_picker/user_pod_row.css:380: -webkit-mask-size: 20px;
On 2016/05/26 00:35:11, Dan Beam wrote:
> can we use a shorthand for this, i.e.
> 
> -webkit-mask: url(../../../ui/webui/resources/images/warning.svg) center
> no-repeat 20px;
> 
> https://developer.mozilla.org/en-US/docs/Web/CSS/mask

I tried it. Using the shorthand somehow the image doesn't get converted to Data
URI. very strange!

[jdufault, 2016-05-26 17:04:16]

https://codereview.chromium.org/2007133006/diff/1/chrome/browser/resources/md...
File chrome/browser/resources/md_user_manager/user_manager.html (right):

https://codereview.chromium.org/2007133006/diff/1/chrome/browser/resources/md...
chrome/browser/resources/md_user_manager/user_manager.html:22: <!-- Make sure
paper-button is imported to use in user_pod_template.html -->
On 2016/05/26 13:36:49, Moe wrote:
> On 2016/05/26 00:35:11, Dan Beam wrote:
> > i'm confused, why can't we just import directly from user_pod_template.html?
> 
> If I understand correctly, that would cause a delay in displaying the user
pods
> in cros. jdufault@ originally landed lazy loading of Polymer:
> https://codereview.chromium.org/1808223003

Right - loading polymer takes a very long time when displaying the lock screen,
especially on slower devices. Moreover, if the lock screen takes too long to
load, then we intentionally crash chrome.

[Moe, 2016-05-26 17:15:25]

Description was changed from

==========
Use svg icon to avoid lazy loading of Polymer elements for user pods

Lazy loading of Polymer was causing flakiness in a set of tests.

BUG=610362, 611619
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
==========

to

==========
Use svg icon to avoid lazy loading of Polymer elements for user pods

1) Lazy loading of Polymer was causing flakiness in a set of tests.
2) It also fixes the bug where the overflow menu icon was not appearing on
hover.

BUG=610362, 611619, 615085
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
==========

[Moe, 2016-05-30 20:14:59]

Dan, could you please take a second look at this? Thank you.

[Dan Beam, 2016-05-31 19:14:17]

lgtm but i'm not sure i understand the lazy loading voodoo

re: data URI inlining -- it has to do with some sneaky regex used to parse CSS,
which don't always work :( so i'm not that surprised

[Moe, 2016-05-31 19:47:58]

mahmadi@chromium.org changed reviewers:
+ achuith@chromium.org

[Moe, 2016-05-31 19:47:59]

Achuith, Could you please take a look at ui/login?

[achuithb, 2016-05-31 20:40:38]

On 2016/05/31 19:47:59, Moe wrote:
> Achuith, Could you please take a look at ui/login?

lgtm

[Moe, 2016-05-31 20:41:04]

On 2016/05/31 20:40:38, achuithb wrote:
> On 2016/05/31 19:47:59, Moe wrote:
> > Achuith, Could you please take a look at ui/login?
> 
> lgtm

Thank you all.

[Moe, 2016-05-31 20:41:09]

The CQ bit was checked by mahmadi@chromium.org

[commit-bot: I haz the power, 2016-05-31 20:41:36]

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

[Moe, 2016-05-31 20:58:30]

The CQ bit was unchecked by mahmadi@chromium.org

[Moe, 2016-05-31 22:58:09]

The CQ bit was checked by mahmadi@chromium.org

[Moe, 2016-05-31 22:58:10]

The patchset sent to the CQ was uploaded after l-g-t-m from
jdufault@chromium.org, dbeam@chromium.org, achuith@chromium.org
Link to the patchset: https://codereview.chromium.org/2007133006/#ps20001
(title: "Update tests with regard to the latest changes while tests were
disabled")

[commit-bot: I haz the power, 2016-05-31 22:59:16]

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

[commit-bot: I haz the power, 2016-05-31 23:21:27]

Description was changed from

==========
Use svg icon to avoid lazy loading of Polymer elements for user pods

1) Lazy loading of Polymer was causing flakiness in a set of tests.
2) It also fixes the bug where the overflow menu icon was not appearing on
hover.

BUG=610362, 611619, 615085
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
==========

to

==========
Use svg icon to avoid lazy loading of Polymer elements for user pods

1) Lazy loading of Polymer was causing flakiness in a set of tests.
2) It also fixes the bug where the overflow menu icon was not appearing on
hover.

BUG=610362, 611619, 615085
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
==========

[commit-bot: I haz the power, 2016-05-31 23:21:28]

Committed patchset #2 (id:20001)

[commit-bot: I haz the power, 2016-05-31 23:23:04]

Description was changed from

==========
Use svg icon to avoid lazy loading of Polymer elements for user pods

1) Lazy loading of Polymer was causing flakiness in a set of tests.
2) It also fixes the bug where the overflow menu icon was not appearing on
hover.

BUG=610362, 611619, 615085
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
==========

to

==========
Use svg icon to avoid lazy loading of Polymer elements for user pods

1) Lazy loading of Polymer was causing flakiness in a set of tests.
2) It also fixes the bug where the overflow menu icon was not appearing on
hover.

BUG=610362, 611619, 615085
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/e47e3654fd44ec6848cc3bc2123ec5ea08afd111
Cr-Commit-Position: refs/heads/master@{#396970}
==========

[commit-bot: I haz the power, 2016-05-31 23:23:06]

Patchset 2 (id:??) landed as
https://crrev.com/e47e3654fd44ec6848cc3bc2123ec5ea08afd111
Cr-Commit-Position: refs/heads/master@{#396970}