Revert of AudioPlayer: Update volume controls.

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 e8fdb28342c8f1a3ad6caef8a1b3b31031883738..b2ab5278ed133c4ff19880ab7491d2e5ea9cf724 100644
--- a/ui/file_manager/audio_player/elements/control_panel.html
+++ b/ui/file_manager/audio_player/elements/control_panel.html
@@ -7,6 +7,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,10 +15,7 @@
   <link rel="import" type="css" href="control_panel.css">
   <template>
     <div class="controls">
-      <div class="control-row volume-controls" hidden="[[!volumeSliderShown]]">
-        <paper-slider id="volumeSlider" value="{{volume::change}}"></paper-slider>
-      </div>
-      <div class="control-row 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>
@@ -68,6 +66,16 @@
           <files-ripple></files-ripple>
         </button>
 
+        <div id="volumeContainer"
+             class="default-hidden"
+             anchor-point="bottom center">
+          <volume-controller id="volumeSlider" value="{{volume}}"
+                             width="32" height="85" value="50">
+          </volume-controller>
+
+          <polymer-anchor-point id="anchorHelper"></polymer-anchor-point>
+        </div>
+
         <!-- Volume button in the bottom line. -->
         <button id="volumeButton"
                 class="volume media-button toggle"
@@ -91,7 +99,7 @@
           <files-toggle-ripple activated="[[expanded]]"></files-toggle-ripple>
         </button>
       </div>
-      <div class="control-row time-controls">
+      <div class="lower-controls time-controls">
         <div class="time-container">
           <div class="time-spacer">[[computeTimeString_(duration, duration)]]</div>
           <div class="time">[[computeTimeString_(time, duration)]]</div>