AudioPlayer: Update control panel with playback progress bar.

ui/file_manager/audio_player/elements/control_panel.html

Index: ui/file_manager/audio_player/elements/control_panel.html
diff --git a/ui/file_manager/audio_player/elements/control_panel.html b/ui/file_manager/audio_player/elements/control_panel.html
index 8cc7ee254ce48cc56d78b32c329be4af8dabc05e..6e7b5554a8c708953e95a22ecdb9decb42b0c51d 100644
--- a/ui/file_manager/audio_player/elements/control_panel.html
+++ b/ui/file_manager/audio_player/elements/control_panel.html
@@ -6,6 +6,7 @@
 
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/font-roboto/roboto.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 <link rel="import" href="volume_controller.html">
 <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_ripple.html">
 <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toggle_ripple.html">
@@ -14,24 +15,7 @@
   <link rel="import" type="css" href="control_panel.css">
   <template>
     <div class="controls">
-      <div class="upper-controls time-controls">
-        <div class="time media-control">
-          <div class="current">[[time2string_(time)]]</div>
-        </div>
-        <div class="progress media-control custom-slider">
-          <input id="timeInput" name="timeInput" type="range" touch-action="manipulation"
-                 min="0" max="[[duration]]" value="{{time::input}}">
-          <div class="bar">
-            <div class="filled" style$="[[computeProgressBarStyle_(time, duration)]]"></div>
-            <div class="cap left"></div>
-            <div class="cap right"></div>
-          </div>
-        </div>
-        <div class="time media-control">
-          <div class="duration">[[time2string_(duration)]]</div>
-        </div>
-      </div>
-      <div class="lower-controls audio-controls">
+      <div class="upper-controls audio-controls">
         <!-- Shuffle toggle button in the bottom line. -->
         <button class="shuffle-mode media-button toggle" state="default">
           <label>
@@ -115,6 +99,10 @@
           <files-toggle-ripple activated="[[expanded]]"></files-toggle-ripple>
         </button>
       </div>
+      <div class="lower-controls time-controls">
+        <div class="time media-control">[[computeTimeString_(time, duration)]]</div>

[yawano, 2015/10/30 01:59:53]

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 for the good catch!
I inserted invisible element to ensure the width fixed.

+        <paper-slider id="timeSlider" max="[[duration]]" value="{{time::change}}"></paper-slider>
+      </div>
     </div>
   </template>
 </dom-module>