AudioPlayer: Update control panel with playback progress bar.

AudioPlayer: Update control panel with playback progress bar.

This CL includes:
- Replace custom progress bar with paper-slider.
- Pause track temporalily while dragging progress bar to be consistent with video player.
- Adjust layout of control panel.
- Show playing time as "{current} / {duration}".

BUG=488229
TEST=manually

Committed: https://crrev.com/5c8f889bbbcc22b137b55e935e7d38f70c7e4ade
Cr-Commit-Position: refs/heads/master@{#357064}

[fukino, 2015-10-29 17:34:39]

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

[fukino, 2015-10-29 17:34:40]

PTAL. Thanks!

[yawano, 2015-10-30 01:59:54]

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
File ui/file_manager/audio_player/elements/audio_player.js (right):

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
ui/file_manager/audio_player/elements/audio_player.js:408: * Invoked then
dragging state of seek bar on control panel is changed.
typo: then -> when

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
File ui/file_manager/audio_player/elements/control_panel.css (right):

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
ui/file_manager/audio_player/elements/control_panel.css:89: padding: 8px;
nit: padding should be before position.

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
ui/file_manager/audio_player/elements/control_panel.css:98:
--paper-slider-active-color: rgb(66, 133, 244);
nit: --paper-slider-active-... must be before --paper-slider-knob-...

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
File ui/file_manager/audio_player/elements/control_panel.html (right):

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
ui/file_manager/audio_player/elements/control_panel.html:103: <div class="time
media-control">[[computeTimeString_(time, duration)]]</div>
Don't you need to put an invisible element to prevent layout change while music
is playing?
i.e. If it goes to 10:00 from 9:59, the slider becomes shorter if you don't have
an invisible element.

[fukino, 2015-10-30 04:25:53]

Thank you!

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
File ui/file_manager/audio_player/elements/audio_player.js (right):

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
ui/file_manager/audio_player/elements/audio_player.js:408: * Invoked then
dragging state of seek bar on control panel is changed.
On 2015/10/30 01:59:53, yawano wrote:
> typo: then -> when

Done.

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
File ui/file_manager/audio_player/elements/control_panel.css (right):

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
ui/file_manager/audio_player/elements/control_panel.css:89: padding: 8px;
On 2015/10/30 01:59:53, yawano wrote:
> nit: padding should be before position.

Done.

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
ui/file_manager/audio_player/elements/control_panel.css:98:
--paper-slider-active-color: rgb(66, 133, 244);
On 2015/10/30 01:59:53, yawano wrote:
> nit: --paper-slider-active-... must be before --paper-slider-knob-...

Done.

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
File ui/file_manager/audio_player/elements/control_panel.html (right):

https://codereview.chromium.org/1403303011/diff/1/ui/file_manager/audio_playe...
ui/file_manager/audio_player/elements/control_panel.html:103: <div class="time
media-control">[[computeTimeString_(time, duration)]]</div>
On 2015/10/30 01:59:53, yawano wrote:
> Don't you need to put an invisible element to prevent layout change while
music
> is playing?
> i.e. If it goes to 10:00 from 9:59, the slider becomes shorter if you don't
have
> an invisible element.

Thank you for the good catch!
I inserted invisible element to ensure the width fixed.

[yawano, 2015-10-30 04:45:16]

lgtm. Thank you!

[fukino, 2015-10-30 04:55:36]

On 2015/10/30 04:45:16, yawano wrote:
> lgtm. Thank you!

Thank you!

[fukino, 2015-10-30 04:55:41]

The CQ bit was checked by fukino@chromium.org

[commit-bot: I haz the power, 2015-10-30 04:56:13]

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

[commit-bot: I haz the power, 2015-10-30 08:28:05]

Committed patchset #2 (id:20001)

[commit-bot: I haz the power, 2015-10-30 08:29:15]

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

[fukino, 2015-11-12 08:33:00]

A revert of this CL (patchset #2 id:20001) has been created in
https://codereview.chromium.org/1442583002/ by fukino@chromium.org.

The reason for reverting is: We decided to punt redesign of audio player to
M49..