Update the visual design of Files.app's toolbar.

Update the visual design of Files.app's toolbar.

This CL includes:
- Color the toolbar.
- Make the toolbar wider.
- Use icons of Material Design.
- Remove volume icon from the breadcrumbs.
- Add touch feedback for buttons on the toolbar.

BUG=402344
TEST=run browser_tests

Committed: https://crrev.com/70a1cad53cac34eb58f46c7c53c58c898f16ee2c
Cr-Commit-Position: refs/heads/master@{#313042}

[fukino, 2015-01-23 15:10:42]

fukino@chromium.org changed reviewers:
+ hirono@chromium.org

[fukino, 2015-01-23 15:10:43]

Could you take a look? Thanks!

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
File ui/file_manager/file_manager/foreground/css/file_manager.css (left):

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
ui/file_manager/file_manager/foreground/css/file_manager.css:1357: .buttonbar
.tooltip,
.tooltip is not in use, so I removed it. (It's not directly related to this CL,
though..)

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
File ui/file_manager/file_manager/main.html (right):

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
ui/file_manager/file_manager/main.html:323: <button id="gear-button"
tabindex="9" menu="#gear-menu"
gear-button need to be decorated by cr.ui.MenuButton. Because <paper-button>
can't be decorated by cr.ui.MenuButton, I use <button> here and use
<paper-ripple> to add touch effect same as paper-button.

After we migrate to Polymer's menu element, I'll make this use <paper-button>
consistently.

[hirono, 2015-01-23 17:12:42]

Just confirmation: are the png files are crushed?
Then lgtm with nits!

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
File ui/file_manager/file_manager/foreground/css/file_manager.css (right):

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
ui/file_manager/file_manager/foreground/css/file_manager.css:302:
background-color: rgb(27, 168, 243);
nit: shorthand 'background' property is preferred.

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
ui/file_manager/file_manager/foreground/css/file_manager.css:309: transition:
all 180ms ease;
transition: all can be dangerous.
Can we specify specific property name?

[fukino, 2015-01-23 19:38:02]

Thank you!

> Just confirmation: are the png files are crushed?
Sorry! I don't understand what "png is crushed" means.
Is it about conversion to the data url?

In this CL, I use Polymer's core-icons as Material Design's standard icons.
They are SVG icons so they're not converted to the data url.
(Is this answer your question?)

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
File ui/file_manager/file_manager/foreground/css/file_manager.css (right):

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
ui/file_manager/file_manager/foreground/css/file_manager.css:309: transition:
all 180ms ease;
On 2015/01/23 17:12:42, hirono wrote:
> transition: all can be dangerous.
> Can we specify specific property name?

IIUC, the toolbar of Files.app doesn't have animation itself.
This 'transition: all 180ms ease;' seems to have no effect anymore.

I'll simply remove this.

[hirono, 2015-01-23 20:07:19]

On 2015/01/23 19:38:02, fukino wrote:
> Thank you!
> 
> > Just confirmation: are the png files are crushed?
> Sorry! I don't understand what "png is crushed" means.
> Is it about conversion to the data url?
> 
> In this CL, I use Polymer's core-icons as Material Design's standard icons.
> They are SVG icons so they're not converted to the data url.
> (Is this answer your question?)
> 
>
https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
> File ui/file_manager/file_manager/foreground/css/file_manager.css (right):
> 
>
https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
> ui/file_manager/file_manager/foreground/css/file_manager.css:309: transition:
> all 180ms ease;
> On 2015/01/23 17:12:42, hirono wrote:
> > transition: all can be dangerous.
> > Can we specify specific property name?
> 
> IIUC, the toolbar of Files.app doesn't have animation itself.
> This 'transition: all 180ms ease;' seems to have no effect anymore.
> 
> I'll simply remove this.

Sorry for less explanation. We have a script to optimize png files.
https://code.google.com/p/chromium/codesearch#chromium/src/tools/resources/op...

I said crushed because the script uses pngcrush internally.

[fukino, 2015-01-23 20:28:53]

On 2015/01/23 20:07:19, hirono wrote:
> On 2015/01/23 19:38:02, fukino wrote:
> > Thank you!
> > 
> > > Just confirmation: are the png files are crushed?
> > Sorry! I don't understand what "png is crushed" means.
> > Is it about conversion to the data url?
> > 
> > In this CL, I use Polymer's core-icons as Material Design's standard icons.
> > They are SVG icons so they're not converted to the data url.
> > (Is this answer your question?)
> > 
> >
>
https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
> > File ui/file_manager/file_manager/foreground/css/file_manager.css (right):
> > 
> >
>
https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
> > ui/file_manager/file_manager/foreground/css/file_manager.css:309:
transition:
> > all 180ms ease;
> > On 2015/01/23 17:12:42, hirono wrote:
> > > transition: all can be dangerous.
> > > Can we specify specific property name?
> > 
> > IIUC, the toolbar of Files.app doesn't have animation itself.
> > This 'transition: all 180ms ease;' seems to have no effect anymore.
> > 
> > I'll simply remove this.
> 
> Sorry for less explanation. We have a script to optimize png files.
>
https://code.google.com/p/chromium/codesearch#chromium/src/tools/resources/op...
> 
> I said crushed because the script uses pngcrush internally.

Thank you for explanation!
Then the answer to "are the png files are crushed?" will be No, because
ui/file_manager/ is not included in the ALL_DIRS in optimize-png-files.sh.
Please correct me if I still misunderstand.

[hirono, 2015-01-23 21:29:41]

On 2015/01/23 20:28:53, fukino wrote:
> On 2015/01/23 20:07:19, hirono wrote:
> > On 2015/01/23 19:38:02, fukino wrote:
> > > Thank you!
> > > 
> > > > Just confirmation: are the png files are crushed?
> > > Sorry! I don't understand what "png is crushed" means.
> > > Is it about conversion to the data url?
> > > 
> > > In this CL, I use Polymer's core-icons as Material Design's standard
icons.
> > > They are SVG icons so they're not converted to the data url.
> > > (Is this answer your question?)
> > > 
> > >
> >
>
https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
> > > File ui/file_manager/file_manager/foreground/css/file_manager.css (right):
> > > 
> > >
> >
>
https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
> > > ui/file_manager/file_manager/foreground/css/file_manager.css:309:
> transition:
> > > all 180ms ease;
> > > On 2015/01/23 17:12:42, hirono wrote:
> > > > transition: all can be dangerous.
> > > > Can we specify specific property name?
> > > 
> > > IIUC, the toolbar of Files.app doesn't have animation itself.
> > > This 'transition: all 180ms ease;' seems to have no effect anymore.
> > > 
> > > I'll simply remove this.
> > 
> > Sorry for less explanation. We have a script to optimize png files.
> >
>
https://code.google.com/p/chromium/codesearch#chromium/src/tools/resources/op...
> > 
> > I said crushed because the script uses pngcrush internally.
> 
> Thank you for explanation!
> Then the answer to "are the png files are crushed?" will be No, because
> ui/file_manager/ is not included in the ALL_DIRS in optimize-png-files.sh.
> Please correct me if I still misunderstand.

Yes, and you can run the script for ui/file_manager by specifying the directory
as an argument of the script.
And then you can commit optimized version of png files.

[hirono, 2015-01-23 21:30:36]

On 2015/01/23 21:29:41, hirono wrote:
> On 2015/01/23 20:28:53, fukino wrote:
> > On 2015/01/23 20:07:19, hirono wrote:
> > > On 2015/01/23 19:38:02, fukino wrote:
> > > > Thank you!
> > > > 
> > > > > Just confirmation: are the png files are crushed?
> > > > Sorry! I don't understand what "png is crushed" means.
> > > > Is it about conversion to the data url?
> > > > 
> > > > In this CL, I use Polymer's core-icons as Material Design's standard
> icons.
> > > > They are SVG icons so they're not converted to the data url.
> > > > (Is this answer your question?)
> > > > 
> > > >
> > >
> >
>
https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
> > > > File ui/file_manager/file_manager/foreground/css/file_manager.css
(right):
> > > > 
> > > >
> > >
> >
>
https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
> > > > ui/file_manager/file_manager/foreground/css/file_manager.css:309:
> > transition:
> > > > all 180ms ease;
> > > > On 2015/01/23 17:12:42, hirono wrote:
> > > > > transition: all can be dangerous.
> > > > > Can we specify specific property name?
> > > > 
> > > > IIUC, the toolbar of Files.app doesn't have animation itself.
> > > > This 'transition: all 180ms ease;' seems to have no effect anymore.
> > > > 
> > > > I'll simply remove this.
> > > 
> > > Sorry for less explanation. We have a script to optimize png files.
> > >
> >
>
https://code.google.com/p/chromium/codesearch#chromium/src/tools/resources/op...
> > > 
> > > I said crushed because the script uses pngcrush internally.
> > 
> > Thank you for explanation!
> > Then the answer to "are the png files are crushed?" will be No, because
> > ui/file_manager/ is not included in the ALL_DIRS in optimize-png-files.sh.
> > Please correct me if I still misunderstand.
> 
> Yes, and you can run the script for ui/file_manager by specifying the
directory
> as an argument of the script.
> And then you can commit optimized version of png files.

Oops, sorry I misunderstood. The CL does not add png files. It removed. Sorry
for bothering...

[fukino, 2015-01-24 07:10:54]

On 2015/01/23 21:30:36, hirono wrote:
> Oops, sorry I misunderstood. The CL does not add png files. It removed. Sorry
> for bothering...

Ah, now I see the intention of your question :)

[fukino, 2015-01-26 02:18:57]

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
File ui/file_manager/file_manager/foreground/css/file_manager.css (right):

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
ui/file_manager/file_manager/foreground/css/file_manager.css:302:
background-color: rgb(27, 168, 243);
On 2015/01/23 17:12:42, hirono wrote:
> nit: shorthand 'background' property is preferred.

Done.

https://codereview.chromium.org/873703003/diff/1/ui/file_manager/file_manager...
ui/file_manager/file_manager/foreground/css/file_manager.css:309: transition:
all 180ms ease;
On 2015/01/23 17:12:42, hirono wrote:
> transition: all can be dangerous.
> Can we specify specific property name?

Done.

[fukino, 2015-01-26 02:19:05]

The CQ bit was checked by fukino@chromium.org

[commit-bot: I haz the power, 2015-01-26 02:19:28]

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

[commit-bot: I haz the power, 2015-01-26 02:52:52]

Committed patchset #2 (id:20001)

[commit-bot: I haz the power, 2015-01-26 02:54:00]

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