AudioPlayer: Update volume controls.

ui/file_manager/audio_player/elements/control_panel.js

Index: ui/file_manager/audio_player/elements/control_panel.js
diff --git a/ui/file_manager/audio_player/elements/control_panel.js b/ui/file_manager/audio_player/elements/control_panel.js
index 317d5c21059b4254b44311fa93477d26ff49a89d..89562878932e291d1dcad25ac2b8ebd98db8d363 100644
--- a/ui/file_manager/audio_player/elements/control_panel.js
+++ b/ui/file_manager/audio_player/elements/control_panel.js
@@ -5,26 +5,6 @@
 (function() {
   'use strict';
 
-  /**
-   * Moves |target| element above |anchor| element, in order to match the
-   * bottom lines.
-   * @param {HTMLElement} target Target element.
-   * @param {HTMLElement} anchor Anchor element.
-   */
-  function matchBottomLine(target, anchor) {
-    var targetRect = target.getBoundingClientRect();
-    var anchorRect = anchor.getBoundingClientRect();
-
-    var pos = {
-      left: anchorRect.left + anchorRect.width / 2 - targetRect.width / 2,
-      bottom: window.innerHeight - anchorRect.bottom,
-    };
-
-    target.style.position = 'fixed';
-    target.style.left = pos.left + 'px';
-    target.style.bottom = pos.bottom + 'px';
-  }
-
   Polymer({
     is: 'control-panel',
 
@@ -97,8 +77,8 @@
       volumeSliderShown: {
         type: Boolean,
         value: false,
-        observer: 'volumeSliderShownChanged',
-        notify: true
+        notify: true,
+        reflectToAttribute: true
       },
 
       /**
@@ -116,11 +96,6 @@
      * element is ready.
      */
     ready: function() {
-      var onFocusoutBound = this.onVolumeControllerFocusout_.bind(this);
-
-      this.$.volumeSlider.addEventListener('focusout', onFocusoutBound);
-      this.$.volumeButton.addEventListener('focusout', onFocusoutBound);
-
       this.$.timeSlider.addEventListener('value-change', function() {
         if (this.dragging)
           this.dragging = false;
@@ -153,44 +128,6 @@
     },
 
     /**
-     * Invoked when the property 'volumeSliderShown' changes.
-     * @param {boolean} shown
-     */
-    volumeSliderShownChanged: function(shown) {
-      this.showVolumeController_(shown);
-    },
-
-    /**
-     * Invoked when the focus goes out of the volume elements.
-     * @param {!UIEvent} event The focusout event.
-     * @private
-     */
-    onVolumeControllerFocusout_: function(event) {
-      if (this.volumeSliderShown) {
-        // If the focus goes out of the volume, hide the volume control.
-        if (!event.relatedTarget ||
-            (!this.$.volumeButton.contains(event.relatedTarget) &&
-             !this.$.volumeSlider.contains(event.relatedTarget))) {
-          this.volumeSliderShown = false;
-        }
-      }
-    },
-
-    /**
-     * Shows/hides the volume controller.
-     * @param {boolean} show True to show the controller, false to hide.
-     * @private
-     */
-    showVolumeController_: function(show) {
-      if (show) {
-        matchBottomLine(this.$.volumeContainer, this.$.volumeButton);
-        this.$.volumeContainer.style.visibility = 'visible';
-      } else {
-        this.$.volumeContainer.style.visibility = 'hidden';
-      }
-    },
-
-    /**
      * Converts the time into human friendly string.
      * @param {number} time Time to be converted.
      * @return {string} String representation of the given time