Revert of AudioPlayer: Update volume controls.

ui/file_manager/audio_player/elements/control_panel.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 (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',
 
     properties: {
       /**
        * Flag whether the audio is playing or paused. True if playing, or false
        * paused.
        */
       playing: {
         type: Boolean,
@@ skipping 52 matching lines @@
         value: false,
         notify: true
       },
 
       /**
        * Whether the volume slider is expanded or not.
        */
       volumeSliderShown: {
         type: Boolean,
         value: false,
-        notify: true,
-        reflectToAttribute: true
+        observer: 'volumeSliderShownChanged',
+        notify: true
       },
 
       /**
        * Whether the knob of time slider is being dragged.
        */
       dragging: {
         type: Boolean,
         value: false,
         notify: true
       }
     },
 
     /**
      * Initializes an element. This method is called automatically when the
      * 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;
       }.bind(this));
       this.$.timeSlider.addEventListener('immediate-value-change', function() {
         if (!this.dragging)
           this.dragging = true;
       }.bind(this));
     },
 
@@ skipping 12 matching lines @@
     },
 
     /**
      * Invoked when the previous button is clicked.
      */
     previousClick: function() {
       this.fire('previous-clicked');
     },
 
     /**
+     * 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
      */
     time2string_: function(time) {
       return ~~(time / 60000) + ':' + ('0' + ~~(time / 1000 % 60)).slice(-2);
     },
 
     /**
      * Converts the time and duration into human friendly string.
@@ skipping 15 matching lines @@
 
     /**
      * Computes style for '.filled' element of progress bar.
      * @return {string}
      */
     computeProgressBarStyle_: function(time, duration) {
       return 'width: ' + (time / duration * 100) + '%;';
     }
   });
 })();  // Anonymous closure