AudioPlayer: Update layout to show the volume slider without using popup.

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.
@@ skipping 63 matching lines @@
         type: Boolean,
         value: false,
         notify: true
       },
 
       /**
        * The audio volume. 0 is silent, and 100 is maximum loud.
        */
       volume: {
         type: Number,
-        notify: true
+        notify: true,
+        reflectToAttribute: true,
+        observer: 'volumeChanged_'
       },
 
       /**
        * Whether the expanded button is ON.
        */
       expanded: {
         type: Boolean,
         value: false,
         notify: true
       },
 
       /**
-       * Whether the volume slider is expanded or not.
-       */
-      volumeSliderShown: {
-        type: Boolean,
-        value: false,
-        observer: 'volumeSliderShownChanged',
-        notify: true
-      },
-
-      /**
        * Whether the knob of time slider is being dragged.
        */
       dragging: {
         type: Boolean,
         value: false,
         notify: true
       },
 
       /**
        * Dictionary which contains aria-labels for each controls.
        */
       ariaLabels: {
         type: Object,
         observer: 'ariaLabelsChanged_'
       }
     },
 
     /**
      * 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() {
+      var timeSlider = /** @type {PaperSliderElement} */ (this.$.timeSlider);
+      timeSlider.addEventListener('value-change', function() {

[yawano, 2015/12/01 07:51:31]

value-change -> change?

[fukino, 2015/12/02 04:52:03]

Yes, it should be 'change'. Done.

         if (this.dragging)
           this.dragging = false;
       }.bind(this));
-      this.$.timeSlider.addEventListener('immediate-value-change', function() {
+      timeSlider.addEventListener('immediate-value-change', function() {
         if (!this.dragging)
           this.dragging = true;
       }.bind(this));
+
+      // Update volume on user inputs for volume slider.
+      // During a drag operation, the volume should be updated immediately.
+      var volumeSlider =
+          /** @type {PaperSliderElement} */ (this.$.volumeSlider);
+      volumeSlider.addEventListener('change', function() {
+        this.volume = volumeSlider.value;
+      }.bind(this));
+      volumeSlider.addEventListener('immediate-value-change', function() {
+        this.volume = volumeSlider.immediateValue;
+      }.bind(this));
     },
 
     /**
      * Invoked when the next button is clicked.
      */
     nextClick: function() {
       this.fire('next-clicked');
     },
 
     /**
      * Invoked when the play button is clicked.
      */
     playClick: function() {
       this.playing = !this.playing;
     },
 
     /**
      * Invoked when the previous button is clicked.
      */
     previousClick: function() {
       this.fire('previous-clicked');
     },
 
     /**
-     * Invoked when the property 'volumeSliderShown' changes.
-     * @param {boolean} shown
+     * Invoked when the volume button is clicked.
      */
-    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;
-        }
+    volumeClick: function() {
+      if (this.volume !== 0) {
+        this.savedVolume_ = this.volume;
+        this.volume = 0;
+      } else {
+        this.volume = this.savedVolume_ || 50;
       }
     },
 
-    /**
-     * 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);
     },
 
     /**
@@ skipping 12 matching lines @@
      * @private
      */
     playingChanged_: function(playing) {
       if (this.ariaLabels) {
         this.$.play.setAttribute('aria-label',
             playing ? this.ariaLabels.pause : this.ariaLabels.play);
       }
     },
 
     /**
+     * Invoked when the volume property is changed.
+     * @param {number} volume
+     * @private
+     */
+    volumeChanged_: function(volume) {
+      if (!this.$.volumeSlider.dragging)
+        this.$.volumeSlider.value = volume;
+
+      if (this.ariaLabels) {
+        this.$.volumeButton.setAttribute('aria-label',

[yawano, 2015/12/01 07:51:31]

This might be out of the scope of this CL. If you set text as aria-label, it
doesn't provide tooltip for it. Is this intentional?

[fukino, 2015/12/02 04:52:02]

I'm not a big fun of tooltips when the buttons use common icons and the meanings
are obvious.
That said, let's file separate bug to ask UX guy's perspective.

[yawano, 2015/12/02 06:11:43]

Acknowledged.

+            volume !== 0 ? this.ariaLabels.mute : this.ariaLabels.unmute);
+      }
+    },
+
+    /**
      * Invoked when the ariaLabels property is changed.
      * @param {Object} ariaLabels
      * @private
      */
     ariaLabelsChanged_: function(ariaLabels) {
       assert(ariaLabels);
       // TODO(fukino): Use data bindings.
       this.$.volumeSlider.setAttribute('aria-label', ariaLabels.volumeSlider);
       this.$.shuffle.setAttribute('aria-label', ariaLabels.shuffle);
       this.$.repeat.setAttribute('aria-label', ariaLabels.repeat);
       this.$.previous.setAttribute('aria-label', ariaLabels.previous);
       this.$.play.setAttribute('aria-label',
           this.playing ? ariaLabels.pause : ariaLabels.play);
       this.$.next.setAttribute('aria-label', ariaLabels.next);
       this.$.volumeButton.setAttribute('aria-label', ariaLabels.volume);
       this.$.playList.setAttribute('aria-label', ariaLabels.playList);
       this.$.timeSlider.setAttribute('aria-label', ariaLabels.seekSlider);
+      this.$.volumeButton.setAttribute('aria-label',
+          this.volume !== 0 ? ariaLabels.mute : ariaLabels.unmute);
+      this.$.volumeSlider.setAttribute('aria-label', ariaLabels.volumeSlider);
     }
   });
 })();  // Anonymous closure