ChromeOS shelf: implement MD-like shelf.

ChromeOS shelf: implement MD-like shelf.

BUG=618735
TEST=none
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/33a54cdc0a122f988efce44a976e2cd6eb55583d
Cr-Commit-Position: refs/heads/master@{#432683}

[Alexander Alekseev, 2016-11-16 12:56:11]

Description was changed from

==========
ChromeOS shelf: implement MD-like shelf.

BUG=618735
TEXT=none
==========

to

==========
ChromeOS shelf: implement MD-like shelf.

BUG=618735
TEXT=none
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[Alexander Alekseev, 2016-11-16 13:01:26]

alemate@chromium.org changed reviewers:
+ oshima@chromium.org, xiyuan@chromium.org

[Alexander Alekseev, 2016-11-16 13:01:26]

Please review:

xiyuan@: All

oshima@:
  chrome/app/theme/*

[Alexander Alekseev, 2016-11-16 13:01:31]

The CQ bit was checked by alemate@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-11-16 13:02:00]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[Alexander Alekseev, 2016-11-16 13:02:28]

The CQ bit was unchecked by alemate@chromium.org

[Alexander Alekseev, 2016-11-16 13:02:55]

The CQ bit was checked by alemate@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-11-16 13:03:20]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[oshima, 2016-11-16 13:39:19]

c/b/theme lgtm

[commit-bot: I haz the power, 2016-11-16 17:05:28]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-11-16 17:05:29]

Dry run: Try jobs failed on following builders:
  linux_chromium_chromeos_ozone_rel_ng on master.tryserver.chromium.linux
(JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)

[xiyuan, 2016-11-16 17:48:34]

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
File chrome/browser/resources/chromeos/login/header_bar.css (right):

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
chrome/browser/resources/chromeos/login/header_bar.css:129:
url(images/2x/shutdown.svg) 2x );
Svg files are vector based and should work on different ui scales. The
background-size rule should be able to assign a size for the final rendered
image per
https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds

Would

   background-image: url(images/shutdown.svg);

that uses the 1x version works for all UI scales?

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
File chrome/browser/resources/chromeos/login/header_bar.html (right):

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
chrome/browser/resources/chromeos/login/header_bar.html:7: <div
id="shutdown-button-text" class="flex layout horizontal center"
nit: think "layout" and  "horizontal" is not needed since this div would have no
child block element. If this is true, please remove here and other similar divs.

[Alexander Alekseev, 2016-11-16 22:12:22]

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
File chrome/browser/resources/chromeos/login/header_bar.css (right):

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
chrome/browser/resources/chromeos/login/header_bar.css:129:
url(images/2x/shutdown.svg) 2x );
On 2016/11/16 17:48:34, xiyuan wrote:
> Svg files are vector based and should work on different ui scales. The
> background-size rule should be able to assign a size for the final rendered
> image per
> https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds
> 
> Would
> 
>    background-image: url(images/shutdown.svg);
> 
> that uses the 1x version works for all UI scales?
> 
> 

I had long discussion with our designers and they sad that they are making
different SVG files for different screen PPI because of blurry edges that they
are trying to avoid.

It is not very important in this particular case, but I just wanted to save the
mechanism to select background PPI to simplify later updates of images.

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
File chrome/browser/resources/chromeos/login/header_bar.html (right):

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
chrome/browser/resources/chromeos/login/header_bar.html:7: <div
id="shutdown-button-text" class="flex layout horizontal center"
On 2016/11/16 17:48:34, xiyuan wrote:
> nit: think "layout" and  "horizontal" is not needed since this div would have
no
> child block element. If this is true, please remove here and other similar
divs.

"layout horizontal" is used to make "center" work on correct axis.

[Alexander Alekseev, 2016-11-16 22:14:17]

The CQ bit was checked by alemate@chromium.org to run a CQ dry run

[Alexander Alekseev, 2016-11-16 22:14:41]

Description was changed from

==========
ChromeOS shelf: implement MD-like shelf.

BUG=618735
TEXT=none
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
ChromeOS shelf: implement MD-like shelf.

BUG=618735
TEST=none
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[commit-bot: I haz the power, 2016-11-16 22:15:37]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[xiyuan, 2016-11-16 22:25:55]

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
File chrome/browser/resources/chromeos/login/header_bar.html (right):

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
chrome/browser/resources/chromeos/login/header_bar.html:7: <div
id="shutdown-button-text" class="flex layout horizontal center"
On 2016/11/16 22:12:22, Alexander Alekseev wrote:
> On 2016/11/16 17:48:34, xiyuan wrote:
> > nit: think "layout" and  "horizontal" is not needed since this div would
have
> no
> > child block element. If this is true, please remove here and other similar
> divs.
> 
> "layout horizontal" is used to make "center" work on correct axis.

How about get rid of "layout horizontal" and change "center" to
"center-justified" ?

[commit-bot: I haz the power, 2016-11-16 23:30:08]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-11-16 23:30:09]

Dry run: This issue passed the CQ dry run.

[Alexander Alekseev, 2016-11-16 23:54:43]

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
File chrome/browser/resources/chromeos/login/header_bar.html (right):

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
chrome/browser/resources/chromeos/login/header_bar.html:7: <div
id="shutdown-button-text" class="flex layout horizontal center"
On 2016/11/16 22:25:55, xiyuan wrote:
> On 2016/11/16 22:12:22, Alexander Alekseev wrote:
> > On 2016/11/16 17:48:34, xiyuan wrote:
> > > nit: think "layout" and  "horizontal" is not needed since this div would
> have
> > no
> > > child block element. If this is true, please remove here and other similar
> > divs.
> > 
> > "layout horizontal" is used to make "center" work on correct axis.
> 
> How about get rid of "layout horizontal" and change "center" to
> "center-justified" ?

It doesn't work (I tried).

Because "layout" class is required for "center"/"center-justified" to work. And
they also do not work without flex-direction property, which is added by
"horizontal" or "vertical".

[xiyuan, 2016-11-17 00:09:03]

lgtm

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
File chrome/browser/resources/chromeos/login/header_bar.html (right):

https://codereview.chromium.org/2502353002/diff/20001/chrome/browser/resource...
chrome/browser/resources/chromeos/login/header_bar.html:7: <div
id="shutdown-button-text" class="flex layout horizontal center"
On 2016/11/16 23:54:43, Alexander Alekseev wrote:
> On 2016/11/16 22:25:55, xiyuan wrote:
> > On 2016/11/16 22:12:22, Alexander Alekseev wrote:
> > > On 2016/11/16 17:48:34, xiyuan wrote:
> > > > nit: think "layout" and  "horizontal" is not needed since this div would
> > have
> > > no
> > > > child block element. If this is true, please remove here and other
similar
> > > divs.
> > > 
> > > "layout horizontal" is used to make "center" work on correct axis.
> > 
> > How about get rid of "layout horizontal" and change "center" to
> > "center-justified" ?
> 
> It doesn't work (I tried).
> 
> Because "layout" class is required for "center"/"center-justified" to work.
And
> they also do not work without flex-direction property, which is added by
> "horizontal" or "vertical".

Okay. Thank you for trying it out.

[Alexander Alekseev, 2016-11-17 00:19:14]

The CQ bit was checked by alemate@chromium.org

[commit-bot: I haz the power, 2016-11-17 00:20:32]

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, 2016-11-17 01:40:48]

Description was changed from

==========
ChromeOS shelf: implement MD-like shelf.

BUG=618735
TEST=none
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
ChromeOS shelf: implement MD-like shelf.

BUG=618735
TEST=none
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[commit-bot: I haz the power, 2016-11-17 01:40:50]

Committed patchset #2 (id:20001)

[commit-bot: I haz the power, 2016-11-17 01:45:45]

Description was changed from

==========
ChromeOS shelf: implement MD-like shelf.

BUG=618735
TEST=none
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
ChromeOS shelf: implement MD-like shelf.

BUG=618735
TEST=none
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/33a54cdc0a122f988efce44a976e2cd6eb55583d
Cr-Commit-Position: refs/heads/master@{#432683}
==========

[commit-bot: I haz the power, 2016-11-17 01:45:46]

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