Add tooltips to the header buttons in Files app.

Add tooltips to the header buttons in Files app.

Since there is quite plenty of buttons now, tooltips may help users understand
their meaning.

TEST=unit_tests: *FileManagerJsTest*TooltipController*
BUG=506100
Committed: https://crrev.com/1fcdaf2104ba7feb0f353cab0c87f6d14e1befa5
Cr-Commit-Position: refs/heads/master@{#337556}

[mtomasz, 2015-07-03 02:04:13]

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

[mtomasz, 2015-07-03 02:04:22]

@fukino: PTAL. Thanks.

[fukino, 2015-07-03 05:01:39]

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

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2277: padding: 14px
6px 0;
To me, the tooltip looks too far from the icons.
The distance between toolbar icons and tooltips is 14+8px, as there is implicit
8px padding for toolbar icons (Toolbar icons are 16x16, but they are wrapped by
32x32 area as a touch target.)
I feel it might look better if icon and tooltip is more close.
WDYT?

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2280: transform:
translateY(-8px);
nit: On Android settings app, tooltips appears without vertical animation. Maybe
simple alpha animation looks consistent?

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2290:
#tooltip-label {
According to the MD spec, tooltip has rounded corners. (maybe 2px radius?)

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

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/main.html:252:
i18n-values="aria-label:SEARCH_TEXT_LABEL">
Please keep the placeholder for input box.

[mtomasz, 2015-07-03 07:45:18]

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

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2277: padding: 14px
6px 0;
On 2015/07/03 05:01:39, fukino wrote:
> To me, the tooltip looks too far from the icons.
> The distance between toolbar icons and tooltips is 14+8px, as there is
implicit
> 8px padding for toolbar icons (Toolbar icons are 16x16, but they are wrapped
by
> 32x32 area as a touch target.)
> I feel it might look better if icon and tooltip is more close.
> WDYT?

I also had this concern, but that's what
http://www.google.co.jp/design/spec/components/tooltips.html#tooltips-tooltip...
suggests. I played with decreasing the margin, but then the tooltips appear in a
strange place. See the screenshots in crbug.com.

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2280: transform:
translateY(-8px);
On 2015/07/03 05:01:39, fukino wrote:
> nit: On Android settings app, tooltips appears without vertical animation.
Maybe
> simple alpha animation looks consistent?

Done.

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2290:
#tooltip-label {
On 2015/07/03 05:01:39, fukino wrote:
> According to the MD spec, tooltip has rounded corners. (maybe 2px radius?)

Done.

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

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/main.html:252:
i18n-values="aria-label:SEARCH_TEXT_LABEL">
On 2015/07/03 05:01:39, fukino wrote:
> Please keep the placeholder for input box.

Done.

[fukino, 2015-07-03 11:19:28]

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

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2277: padding: 14px
6px 0;
On 2015/07/03 07:45:18, mtomasz wrote:
> On 2015/07/03 05:01:39, fukino wrote:
> > To me, the tooltip looks too far from the icons.
> > The distance between toolbar icons and tooltips is 14+8px, as there is
> implicit
> > 8px padding for toolbar icons (Toolbar icons are 16x16, but they are wrapped
> by
> > 32x32 area as a touch target.)
> > I feel it might look better if icon and tooltip is more close.
> > WDYT?
> 
> I also had this concern, but that's what
>
http://www.google.co.jp/design/spec/components/tooltips.html#tooltips-tooltip...
> suggests. I played with decreasing the margin, but then the tooltips appear in
a
> strange place. See the screenshots in http://crbug.com.

Thanks!
Let's wait Seb's comment.

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2290:
#tooltip-label {
On 2015/07/03 07:45:18, mtomasz wrote:
> On 2015/07/03 05:01:39, fukino wrote:
> > According to the MD spec, tooltip has rounded corners. (maybe 2px radius?)
> 
> Done.

Looks it's not done yet...?

https://codereview.chromium.org/1223693002/diff/20001/ui/file_manager/file_ma...
File ui/file_manager/file_manager/foreground/js/tooltip_controller.js (right):

https://codereview.chromium.org/1223693002/diff/20001/ui/file_manager/file_ma...
ui/file_manager/file_manager/foreground/js/tooltip_controller.js:26:
this.showTooltipTimer_ = null;
optional nit: I think 0 as an invalid timer id is better to make the type of
timer id consistent.

https://codereview.chromium.org/1223693002/diff/20001/ui/file_manager/file_ma...
File ui/file_manager/file_manager/main.html (right):

https://codereview.chromium.org/1223693002/diff/20001/ui/file_manager/file_ma...
ui/file_manager/file_manager/main.html:264: has-tooltip>
The position of Cloud Import's tooltip looks incorrect.

[mtomasz, 2015-07-06 01:30:25]

Thanks! PTAL.

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

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2277: padding: 14px
6px 0;
On 2015/07/03 11:19:27, fukino wrote:
> On 2015/07/03 07:45:18, mtomasz wrote:
> > On 2015/07/03 05:01:39, fukino wrote:
> > > To me, the tooltip looks too far from the icons.
> > > The distance between toolbar icons and tooltips is 14+8px, as there is
> > implicit
> > > 8px padding for toolbar icons (Toolbar icons are 16x16, but they are
wrapped
> > by
> > > 32x32 area as a touch target.)
> > > I feel it might look better if icon and tooltip is more close.
> > > WDYT?
> > 
> > I also had this concern, but that's what
> >
>
http://www.google.co.jp/design/spec/components/tooltips.html#tooltips-tooltip...
> > suggests. I played with decreasing the margin, but then the tooltips appear
in
> a
> > strange place. See the screenshots in http://crbug.com.
> 
> Thanks!
> Let's wait Seb's comment.

Per Sebastien comment I decreased the margin to 8px.

https://codereview.chromium.org/1223693002/diff/1/ui/file_manager/file_manage...
ui/file_manager/file_manager/foreground/css/file_manager.css:2290:
#tooltip-label {
On 2015/07/03 11:19:28, fukino wrote:
> On 2015/07/03 07:45:18, mtomasz wrote:
> > On 2015/07/03 05:01:39, fukino wrote:
> > > According to the MD spec, tooltip has rounded corners. (maybe 2px radius?)
> > 
> > Done.
> 
> Looks it's not done yet...?

Done.

https://codereview.chromium.org/1223693002/diff/20001/ui/file_manager/file_ma...
File ui/file_manager/file_manager/foreground/js/tooltip_controller.js (right):

https://codereview.chromium.org/1223693002/diff/20001/ui/file_manager/file_ma...
ui/file_manager/file_manager/foreground/js/tooltip_controller.js:26:
this.showTooltipTimer_ = null;
On 2015/07/03 11:19:28, fukino wrote:
> optional nit: I think 0 as an invalid timer id is better to make the type of
> timer id consistent.

Done.

https://codereview.chromium.org/1223693002/diff/20001/ui/file_manager/file_ma...
File ui/file_manager/file_manager/main.html (right):

https://codereview.chromium.org/1223693002/diff/20001/ui/file_manager/file_ma...
ui/file_manager/file_manager/main.html:264: has-tooltip>
On 2015/07/03 11:19:28, fukino wrote:
> The position of Cloud Import's tooltip looks incorrect.

Done.

[fukino, 2015-07-06 03:09:00]

Thanks! lgtm with a nit.

https://codereview.chromium.org/1223693002/diff/40001/ui/file_manager/file_ma...
File ui/file_manager/file_manager/foreground/js/file_manager.js (right):

https://codereview.chromium.org/1223693002/diff/40001/ui/file_manager/file_ma...
ui/file_manager/file_manager/foreground/js/file_manager.js:460:
this.dialogDom_.querySelector('#tooltip'),
assert() or queryRequiredElement() might be necessary to run closure compiler
(as the first argument must be non-null).

[mtomasz, 2015-07-06 03:34:16]

Patchset #4 (id:60001) has been deleted

[mtomasz, 2015-07-06 03:35:38]

https://codereview.chromium.org/1223693002/diff/40001/ui/file_manager/file_ma...
File ui/file_manager/file_manager/foreground/js/file_manager.js (right):

https://codereview.chromium.org/1223693002/diff/40001/ui/file_manager/file_ma...
ui/file_manager/file_manager/foreground/js/file_manager.js:460:
this.dialogDom_.querySelector('#tooltip'),
On 2015/07/06 03:09:00, fukino wrote:
> assert() or queryRequiredElement() might be necessary to run closure compiler
> (as the first argument must be non-null).

Good catch. Done.

[mtomasz, 2015-07-06 07:55:00]

The CQ bit was checked by mtomasz@chromium.org

[mtomasz, 2015-07-06 07:55:01]

The patchset sent to the CQ was uploaded after l-g-t-m from fukino@chromium.org
Link to the patchset: https://codereview.chromium.org/1223693002/#ps100001
(title: "Fixed tests + rebased.")

[commit-bot: I haz the power, 2015-07-06 07:55:25]

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

[commit-bot: I haz the power, 2015-07-06 09:06:47]

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

[commit-bot: I haz the power, 2015-07-06 09:06:48]

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

[mtomasz, 2015-07-06 10:17:18]

The CQ bit was checked by mtomasz@chromium.org

[mtomasz, 2015-07-06 10:17:19]

The patchset sent to the CQ was uploaded after l-g-t-m from fukino@chromium.org
Link to the patchset: https://codereview.chromium.org/1223693002/#ps120001
(title: "Fixed tests.")

[commit-bot: I haz the power, 2015-07-06 10:17:54]

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

[commit-bot: I haz the power, 2015-07-06 10:19:49]

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

[commit-bot: I haz the power, 2015-07-06 10:19:51]

Try jobs failed on following builders:
  ios_dbg_simulator_ninja on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/ios_dbg_simulator...)
  ios_rel_device_ninja on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/ios_rel_device_ni...)
  mac_chromium_compile_dbg_ng on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_comp...)
  mac_chromium_rel_ng on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_rel_...)

(exceeded global retry quota)

[mtomasz, 2015-07-06 11:29:40]

The CQ bit was checked by mtomasz@chromium.org

[commit-bot: I haz the power, 2015-07-06 11:29:52]

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

[commit-bot: I haz the power, 2015-07-06 11:31:59]

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

[commit-bot: I haz the power, 2015-07-06 11:32:00]

Try jobs failed on following builders:
  linux_chromium_compile_dbg_32_ng on tryserver.chromium.linux (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)
  ios_dbg_simulator_ninja on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/ios_dbg_simulator...)
  ios_rel_device_ninja on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/ios_rel_device_ni...)
  mac_chromium_compile_dbg_ng on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_comp...)
  mac_chromium_rel_ng on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_rel_...)

(exceeded global retry quota)

[mtomasz, 2015-07-07 00:30:38]

The CQ bit was checked by mtomasz@chromium.org

[mtomasz, 2015-07-07 00:30:39]

The patchset sent to the CQ was uploaded after l-g-t-m from fukino@chromium.org
Link to the patchset: https://codereview.chromium.org/1223693002/#ps140001
(title: "Rebased.")

[commit-bot: I haz the power, 2015-07-07 00:31:01]

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

[commit-bot: I haz the power, 2015-07-07 01:36:21]

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

[commit-bot: I haz the power, 2015-07-07 01:36:22]

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

[mtomasz, 2015-07-07 02:28:28]

On 2015/07/07 01:36:22, commit-bot: I haz the power wrote:
> Try jobs failed on following builders:
>   linux_chromium_chromeos_rel_ng on tryserver.chromium.linux (JOB_FAILED,
>
http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)

@fukino: I fixed the tests. PTAL again. Thanks.

[fukino, 2015-07-07 03:29:48]

On 2015/07/07 02:28:28, mtomasz wrote:
> On 2015/07/07 01:36:22, commit-bot: I haz the power wrote:
> > Try jobs failed on following builders:
> >   linux_chromium_chromeos_rel_ng on tryserver.chromium.linux (JOB_FAILED,
> >
>
http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)
> 
> @fukino: I fixed the tests. PTAL again. Thanks.

still lgtm

[mtomasz, 2015-07-07 03:38:57]

The CQ bit was checked by mtomasz@chromium.org

[commit-bot: I haz the power, 2015-07-07 03:39:05]

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

[commit-bot: I haz the power, 2015-07-07 03:43:05]

Committed patchset #8 (id:160001)

[commit-bot: I haz the power, 2015-07-07 03:43:55]

Patchset 8 (id:??) landed as
https://crrev.com/1fcdaf2104ba7feb0f353cab0c87f6d14e1befa5
Cr-Commit-Position: refs/heads/master@{#337556}